From c9da36dc8b1e3e5cb14f34724ebd8541011f0a9e Mon Sep 17 00:00:00 2001
From: Garen Torikian <gjtorikian@users.noreply.github.com>
Date: Sun, 14 May 2023 14:27:08 -0400
Subject: [PATCH 001/281] Fix a typo

---
 docs/config/usage.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/config/usage.md b/docs/config/usage.md
index 0ab60012f..8d48c1246 100644
--- a/docs/config/usage.md
+++ b/docs/config/usage.md
@@ -228,7 +228,7 @@ mermaid fully supports webpack. Here is a [working demo](https://github.com/merm
 
 The main idea of the API is to be able to call a render function with the graph definition as a string. The render function will render the graph and call a callback with the resulting SVG code. With this approach it is up to the site creator to fetch the graph definition from the site (perhaps from a textarea), render it and place the graph somewhere in the site.
 
-The example below show an outline of how this could be used. The example just logs the resulting SVG to the JavaScript console.
+The example below shows an example of how this could be used. The example just logs the resulting SVG to the JavaScript console.
 
 ```html
 <script type="module">

From dfb15901f4b2160dae5e23c36dab70d22ceedb21 Mon Sep 17 00:00:00 2001
From: "Garen J. Torikian" <gjtorikian@users.noreply.github.com>
Date: Mon, 15 May 2023 09:25:51 -0400
Subject: [PATCH 002/281] Make the doc change in the right place

This is due to the sloppy fact that there are two copies of every doc
page in the repo.
---
 docs/config/usage.md                      | 2 +-
 packages/mermaid/src/docs/config/usage.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/config/usage.md b/docs/config/usage.md
index 8d48c1246..0ab60012f 100644
--- a/docs/config/usage.md
+++ b/docs/config/usage.md
@@ -228,7 +228,7 @@ mermaid fully supports webpack. Here is a [working demo](https://github.com/merm
 
 The main idea of the API is to be able to call a render function with the graph definition as a string. The render function will render the graph and call a callback with the resulting SVG code. With this approach it is up to the site creator to fetch the graph definition from the site (perhaps from a textarea), render it and place the graph somewhere in the site.
 
-The example below shows an example of how this could be used. The example just logs the resulting SVG to the JavaScript console.
+The example below show an outline of how this could be used. The example just logs the resulting SVG to the JavaScript console.
 
 ```html
 <script type="module">
diff --git a/packages/mermaid/src/docs/config/usage.md b/packages/mermaid/src/docs/config/usage.md
index 1c2b5a39b..36eefd00f 100644
--- a/packages/mermaid/src/docs/config/usage.md
+++ b/packages/mermaid/src/docs/config/usage.md
@@ -225,7 +225,7 @@ mermaid fully supports webpack. Here is a [working demo](https://github.com/merm
 
 The main idea of the API is to be able to call a render function with the graph definition as a string. The render function will render the graph and call a callback with the resulting SVG code. With this approach it is up to the site creator to fetch the graph definition from the site (perhaps from a textarea), render it and place the graph somewhere in the site.
 
-The example below show an outline of how this could be used. The example just logs the resulting SVG to the JavaScript console.
+The example below shows an example of how this could be used. The example just logs the resulting SVG to the JavaScript console.
 
 ```html
 <script type="module">

From c41df420d773971f3a366f69279bee1ca901e031 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 9 Jun 2023 11:06:45 +0530
Subject: [PATCH 003/281] Add splitText

---
 .../src/rendering-util/splitText.spec.ts      |  37 +++++
 .../mermaid/src/rendering-util/splitText.ts   | 135 ++++++++++++++++++
 tsconfig.json                                 |   2 +-
 3 files changed, 173 insertions(+), 1 deletion(-)
 create mode 100644 packages/mermaid/src/rendering-util/splitText.spec.ts
 create mode 100644 packages/mermaid/src/rendering-util/splitText.ts

diff --git a/packages/mermaid/src/rendering-util/splitText.spec.ts b/packages/mermaid/src/rendering-util/splitText.spec.ts
new file mode 100644
index 000000000..6444627d2
--- /dev/null
+++ b/packages/mermaid/src/rendering-util/splitText.spec.ts
@@ -0,0 +1,37 @@
+import { splitTextToChars, splitLineToFitWidthLoop, type CheckFitFunction } from './splitText.js';
+import { describe, it, expect } from 'vitest';
+
+describe('splitText', () => {
+  it.each([
+    { str: '', split: [] },
+    { str: '🏳️‍⚧️🏳️‍🌈👩🏾‍❤️‍👨🏻', split: ['🏳️‍⚧️', '🏳️‍🌈', '👩🏾‍❤️‍👨🏻'] },
+    { str: 'ok', split: ['o', 'k'] },
+  ])('should split $str into graphemes', ({ str, split }: { str: string; split: string[] }) => {
+    expect(splitTextToChars(str)).toEqual(split);
+  });
+});
+
+describe('split lines', () => {
+  it.each([
+    // empty string
+    { str: '', width: 1, split: [''] },
+    // Width >= Individual words
+    { str: 'hello world', width: 5, split: ['hello', 'world'] },
+    { str: 'hello world', width: 7, split: ['hello', 'world'] },
+    // width > full line
+    { str: 'hello world', width: 20, split: ['hello world'] },
+    // width < individual word
+    { str: 'hello world', width: 3, split: ['hel', 'lo', 'wor', 'ld'] },
+    { str: 'hello 12 world', width: 4, split: ['hell', 'o 12', 'worl', 'd'] },
+    { str: '🏳️‍⚧️🏳️‍🌈👩🏾‍❤️‍👨🏻', width: 1, split: ['🏳️‍⚧️', '🏳️‍🌈', '👩🏾‍❤️‍👨🏻'] },
+    { str: 'Flag 🏳️‍⚧️ this 🏳️‍🌈', width: 6, split: ['Flag 🏳️‍⚧️', 'this 🏳️‍🌈'] },
+  ])(
+    'should split $str into lines of $width characters',
+    ({ str, split, width }: { str: string; width: number; split: string[] }) => {
+      const checkFn: CheckFitFunction = (text: string) => {
+        return splitTextToChars(text).length <= width;
+      };
+      expect(splitLineToFitWidthLoop(str.split(' '), checkFn)).toEqual(split);
+    }
+  );
+});
diff --git a/packages/mermaid/src/rendering-util/splitText.ts b/packages/mermaid/src/rendering-util/splitText.ts
new file mode 100644
index 000000000..de71fdafd
--- /dev/null
+++ b/packages/mermaid/src/rendering-util/splitText.ts
@@ -0,0 +1,135 @@
+export type CheckFitFunction = (text: string) => boolean;
+
+/**
+ * Splits a string into graphemes if available, otherwise characters.
+ */
+export function splitTextToChars(text: string): string[] {
+  if (Intl.Segmenter) {
+    return [...new Intl.Segmenter().segment(text)].map((s) => s.segment);
+  }
+  return [...text];
+}
+
+export function splitWordToFitWidth(checkFit: CheckFitFunction, word: string): string[] {
+  console.error('splitWordToFitWidth', word);
+  const characters = splitTextToChars(word);
+  if (characters.length === 0) {
+    return [];
+  }
+  const newWord = [];
+  let lastCheckedCharacter = '';
+  while (characters.length > 0) {
+    lastCheckedCharacter = characters.shift() ?? ' ';
+    if (checkFit([...newWord, lastCheckedCharacter].join(''))) {
+      newWord.push(lastCheckedCharacter);
+    } else if (newWord.length === 0) {
+      // Even the first character was too long, we cannot split it, so return it as is.
+      // This is an edge case that can happen when the first character is a long grapheme.
+      return [lastCheckedCharacter, characters.join('')];
+    } else {
+      // The last character was too long, so we need to put it back and return the rest.
+      characters.unshift(lastCheckedCharacter);
+      break;
+    }
+  }
+  if (characters.length === 0) {
+    return [newWord.join('')];
+  }
+  console.error({ newWord, characters });
+  return [newWord.join(''), ...splitWordToFitWidth(checkFit, characters.join(''))];
+}
+
+export function splitWordToFitWidth2(checkFit: CheckFitFunction, word: string): [string, string] {
+  console.error('splitWordToFitWidth2', word);
+  const characters = splitTextToChars(word);
+  if (characters.length === 0) {
+    return ['', ''];
+  }
+  const newWord = [];
+  let lastCheckedCharacter = '';
+  while (characters.length > 0) {
+    lastCheckedCharacter = characters.shift() ?? ' ';
+    if (checkFit([...newWord, lastCheckedCharacter].join(''))) {
+      newWord.push(lastCheckedCharacter);
+    } else if (newWord.length === 0) {
+      // Even the first character was too long, we cannot split it, so return it as is.
+      // This is an edge case that can happen when the first character is a long grapheme.
+      return [lastCheckedCharacter, characters.join('')];
+    } else {
+      // The last character was too long, so we need to put it back and return the rest.
+      characters.unshift(lastCheckedCharacter);
+      break;
+    }
+  }
+  console.error({ newWord, characters });
+  return [newWord.join(''), characters.join('')];
+}
+
+export function splitLineToFitWidth(
+  words: string[],
+  checkFit: CheckFitFunction,
+  lines: string[] = [],
+  popped: string[] = []
+): string[] {
+  console.error('splitLineToFitWidth', { words, lines, popped });
+  // Return if there is nothing left to split
+  if (words.length === 0 && popped.length === 0) {
+    return lines;
+  }
+  const remainingText = words.join(' ');
+  if (checkFit(remainingText)) {
+    lines.push(remainingText);
+    words = [...popped];
+  }
+  if (words.length > 1) {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    popped.unshift(words.pop()!);
+    return splitLineToFitWidth(words, checkFit, lines, popped);
+  } else if (words.length === 1) {
+    const [word, rest] = splitWordToFitWidth(checkFit, words[0]);
+    lines.push(word);
+    console.error({ word, rest });
+    if (rest) {
+      return splitLineToFitWidth([rest], checkFit, lines, []);
+    }
+  }
+  return lines;
+}
+
+export function splitLineToFitWidthLoop(words: string[], checkFit: CheckFitFunction): string[] {
+  console.error('splitLineToFitWidthLoop', { words });
+  if (words.length === 0) {
+    return [];
+  }
+
+  const lines: string[] = [];
+  let newLine: string[] = [];
+  let lastCheckedWord = '';
+  while (words.length > 0) {
+    lastCheckedWord = words.shift() ?? ' ';
+    console.error({ lastCheckedWord, words });
+    if (checkFit([...newLine, lastCheckedWord].join(' '))) {
+      newLine.push(lastCheckedWord);
+    } else {
+      console.error({ newLine });
+      if (newLine.length === 0) {
+        const [word, rest] = splitWordToFitWidth2(checkFit, lastCheckedWord);
+        console.error({ word, rest });
+        lines.push(word);
+        if (rest) {
+          words.unshift(rest);
+        }
+      } else {
+        words.unshift(lastCheckedWord);
+        lines.push(newLine.join(' '));
+        newLine = [];
+      }
+    }
+    console.error({ newLine, lastCheckedWord, words, lines });
+  }
+  if (newLine.length > 0) {
+    lines.push(newLine.join(' '));
+  }
+  console.error({ newLine, lastCheckedWord, words, lines });
+  return lines;
+}
diff --git a/tsconfig.json b/tsconfig.json
index 29c790cbb..4cbf209a3 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -14,7 +14,7 @@
     "target": "ES6" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
     "lib": [
       "DOM",
-      "ES2021"
+      "ES2022"
     ] /* Specify a set of bundled library declaration files that describe the target runtime environment. */,
     // "jsx": "preserve",                                /* Specify what JSX code is generated. */
     // "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */

From 0a437f5800081d3fd0f1d047d7d801509fdbc885 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 9 Jun 2023 16:48:30 +0530
Subject: [PATCH 004/281] feat: split unicode properly

---
 .../src/rendering-util/splitText.spec.ts      |   5 +-
 .../mermaid/src/rendering-util/splitText.ts   | 163 +++++++-----------
 2 files changed, 63 insertions(+), 105 deletions(-)

diff --git a/packages/mermaid/src/rendering-util/splitText.spec.ts b/packages/mermaid/src/rendering-util/splitText.spec.ts
index 6444627d2..77bd6102c 100644
--- a/packages/mermaid/src/rendering-util/splitText.spec.ts
+++ b/packages/mermaid/src/rendering-util/splitText.spec.ts
@@ -1,4 +1,4 @@
-import { splitTextToChars, splitLineToFitWidthLoop, type CheckFitFunction } from './splitText.js';
+import { splitTextToChars, splitLineToFitWidth, type CheckFitFunction } from './splitText.js';
 import { describe, it, expect } from 'vitest';
 
 describe('splitText', () => {
@@ -6,6 +6,7 @@ describe('splitText', () => {
     { str: '', split: [] },
     { str: '🏳️‍⚧️🏳️‍🌈👩🏾‍❤️‍👨🏻', split: ['🏳️‍⚧️', '🏳️‍🌈', '👩🏾‍❤️‍👨🏻'] },
     { str: 'ok', split: ['o', 'k'] },
+    { str: 'abc', split: ['a', 'b', 'c'] },
   ])('should split $str into graphemes', ({ str, split }: { str: string; split: string[] }) => {
     expect(splitTextToChars(str)).toEqual(split);
   });
@@ -31,7 +32,7 @@ describe('split lines', () => {
       const checkFn: CheckFitFunction = (text: string) => {
         return splitTextToChars(text).length <= width;
       };
-      expect(splitLineToFitWidthLoop(str.split(' '), checkFn)).toEqual(split);
+      expect(splitLineToFitWidth(str, checkFn)).toEqual(split);
     }
   );
 });
diff --git a/packages/mermaid/src/rendering-util/splitText.ts b/packages/mermaid/src/rendering-util/splitText.ts
index de71fdafd..b8ee7a1b0 100644
--- a/packages/mermaid/src/rendering-util/splitText.ts
+++ b/packages/mermaid/src/rendering-util/splitText.ts
@@ -10,126 +10,83 @@ export function splitTextToChars(text: string): string[] {
   return [...text];
 }
 
-export function splitWordToFitWidth(checkFit: CheckFitFunction, word: string): string[] {
-  console.error('splitWordToFitWidth', word);
-  const characters = splitTextToChars(word);
-  if (characters.length === 0) {
-    return [];
+/**
+ * Splits a string into words.
+ */
+function splitLineToWords(text: string): string[] {
+  if (Intl.Segmenter) {
+    return [...new Intl.Segmenter(undefined, { granularity: 'word' }).segment(text)]
+      .map((s) => s.segment)
+      .filter((word) => word !== ' ');
   }
-  const newWord = [];
-  let lastCheckedCharacter = '';
-  while (characters.length > 0) {
-    lastCheckedCharacter = characters.shift() ?? ' ';
-    if (checkFit([...newWord, lastCheckedCharacter].join(''))) {
-      newWord.push(lastCheckedCharacter);
-    } else if (newWord.length === 0) {
-      // Even the first character was too long, we cannot split it, so return it as is.
-      // This is an edge case that can happen when the first character is a long grapheme.
-      return [lastCheckedCharacter, characters.join('')];
-    } else {
-      // The last character was too long, so we need to put it back and return the rest.
-      characters.unshift(lastCheckedCharacter);
-      break;
-    }
-  }
-  if (characters.length === 0) {
-    return [newWord.join('')];
-  }
-  console.error({ newWord, characters });
-  return [newWord.join(''), ...splitWordToFitWidth(checkFit, characters.join(''))];
+  return text.split(' ');
 }
 
-export function splitWordToFitWidth2(checkFit: CheckFitFunction, word: string): [string, string] {
-  console.error('splitWordToFitWidth2', word);
+/**
+ * Splits a word into two parts, the first part fits the width and the remaining part.
+ * @param checkFit - Function to check if word fits
+ * @param word - Word to split
+ * @returns [first part of word that fits, rest of word]
+ */
+export function splitWordToFitWidth(checkFit: CheckFitFunction, word: string): [string, string] {
   const characters = splitTextToChars(word);
   if (characters.length === 0) {
     return ['', ''];
   }
-  const newWord = [];
-  let lastCheckedCharacter = '';
-  while (characters.length > 0) {
-    lastCheckedCharacter = characters.shift() ?? ' ';
-    if (checkFit([...newWord, lastCheckedCharacter].join(''))) {
-      newWord.push(lastCheckedCharacter);
-    } else if (newWord.length === 0) {
-      // Even the first character was too long, we cannot split it, so return it as is.
-      // This is an edge case that can happen when the first character is a long grapheme.
-      return [lastCheckedCharacter, characters.join('')];
-    } else {
-      // The last character was too long, so we need to put it back and return the rest.
-      characters.unshift(lastCheckedCharacter);
-      break;
-    }
-  }
-  console.error({ newWord, characters });
-  return [newWord.join(''), characters.join('')];
+  return splitWordToFitWidthRecursion(checkFit, [], characters);
 }
 
-export function splitLineToFitWidth(
+function splitWordToFitWidthRecursion(
+  checkFit: CheckFitFunction,
+  usedChars: string[],
+  remainingChars: string[]
+): [string, string] {
+  if (remainingChars.length === 0) {
+    return [usedChars.join(''), ''];
+  }
+  const [nextChar, ...rest] = remainingChars;
+  const newWord = [...usedChars, nextChar];
+  if (checkFit(newWord.join(''))) {
+    return splitWordToFitWidthRecursion(checkFit, newWord, rest);
+  }
+  return [usedChars.join(''), remainingChars.join('')];
+}
+
+export function splitLineToFitWidth(line: string, checkFit: CheckFitFunction): string[] {
+  return splitLineToFitWidthRecursion(splitLineToWords(line), checkFit);
+}
+
+function splitLineToFitWidthRecursion(
   words: string[],
   checkFit: CheckFitFunction,
   lines: string[] = [],
-  popped: string[] = []
+  newLine = ''
 ): string[] {
-  console.error('splitLineToFitWidth', { words, lines, popped });
   // Return if there is nothing left to split
-  if (words.length === 0 && popped.length === 0) {
-    return lines;
-  }
-  const remainingText = words.join(' ');
-  if (checkFit(remainingText)) {
-    lines.push(remainingText);
-    words = [...popped];
-  }
-  if (words.length > 1) {
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    popped.unshift(words.pop()!);
-    return splitLineToFitWidth(words, checkFit, lines, popped);
-  } else if (words.length === 1) {
-    const [word, rest] = splitWordToFitWidth(checkFit, words[0]);
-    lines.push(word);
-    console.error({ word, rest });
-    if (rest) {
-      return splitLineToFitWidth([rest], checkFit, lines, []);
-    }
-  }
-  return lines;
-}
-
-export function splitLineToFitWidthLoop(words: string[], checkFit: CheckFitFunction): string[] {
-  console.error('splitLineToFitWidthLoop', { words });
   if (words.length === 0) {
-    return [];
+    // If there is a new line, add it to the lines
+    if (newLine.length > 0) {
+      lines.push(newLine);
+    }
+    return lines.length > 0 ? lines : [''];
+  }
+  const nextWord = words.shift() ?? ' ';
+  const lineWithNextWord = newLine ? `${newLine} ${nextWord}` : nextWord;
+  if (checkFit(lineWithNextWord)) {
+    // nextWord fits, so we can add it to the new line and continue
+    return splitLineToFitWidthRecursion(words, checkFit, lines, lineWithNextWord);
   }
 
-  const lines: string[] = [];
-  let newLine: string[] = [];
-  let lastCheckedWord = '';
-  while (words.length > 0) {
-    lastCheckedWord = words.shift() ?? ' ';
-    console.error({ lastCheckedWord, words });
-    if (checkFit([...newLine, lastCheckedWord].join(' '))) {
-      newLine.push(lastCheckedWord);
-    } else {
-      console.error({ newLine });
-      if (newLine.length === 0) {
-        const [word, rest] = splitWordToFitWidth2(checkFit, lastCheckedWord);
-        console.error({ word, rest });
-        lines.push(word);
-        if (rest) {
-          words.unshift(rest);
-        }
-      } else {
-        words.unshift(lastCheckedWord);
-        lines.push(newLine.join(' '));
-        newLine = [];
-      }
-    }
-    console.error({ newLine, lastCheckedWord, words, lines });
-  }
+  // nextWord doesn't fit, so we need to split it
   if (newLine.length > 0) {
-    lines.push(newLine.join(' '));
+    // There was text in newLine, so add it to lines and push nextWord back into words.
+    lines.push(newLine);
+    words.unshift(nextWord);
+  } else {
+    // There was no text in newLine, so we need to split nextWord
+    const [line, rest] = splitWordToFitWidth(checkFit, nextWord);
+    lines.push(line);
+    words.unshift(rest);
   }
-  console.error({ newLine, lastCheckedWord, words, lines });
-  return lines;
+  return splitLineToFitWidthRecursion(words, checkFit, lines);
 }

From d4edd98b8a66c8f9a0e300376d2a55ad174cc74c Mon Sep 17 00:00:00 2001
From: sidharthv96 <sidharthv96@users.noreply.github.com>
Date: Fri, 9 Jun 2023 11:24:11 +0000
Subject: [PATCH 005/281] Update docs

---
 docs/CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
index 5a822425a..c854a139c 100644
--- a/docs/CHANGELOG.md
+++ b/docs/CHANGELOG.md
@@ -517,7 +517,7 @@ mermaidAPI.initialize({
 - About Markpad integration [#323](https://github.com/knsv/mermaid/issues/323)
 - How to link backwards in flowchart? [#321](https://github.com/knsv/mermaid/issues/321)
 - Help with editor [#310](https://github.com/knsv/mermaid/issues/310)
-- +1 [#293](https://github.com/knsv/mermaid/issues/293)
+- \+1 [#293](https://github.com/knsv/mermaid/issues/293)
 - Basic chart does not render on Chome, but does in Firefox [#290](https://github.com/knsv/mermaid/issues/290)
 - Live editor is broken [#285](https://github.com/knsv/mermaid/issues/285)
 - "No such file or directory" trying to run mermaid 0.5.7 on OS X [#284](https://github.com/knsv/mermaid/issues/284)

From 7b4601762ad6f604871dce82d272ce8cf915d5b1 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 9 Jun 2023 16:57:13 +0530
Subject: [PATCH 006/281] Use splitLineToFitWidth function

---
 .../mermaid/src/rendering-util/createText.js  | 30 ++++---------------
 1 file changed, 5 insertions(+), 25 deletions(-)

diff --git a/packages/mermaid/src/rendering-util/createText.js b/packages/mermaid/src/rendering-util/createText.js
index 871f3425e..517097d7a 100644
--- a/packages/mermaid/src/rendering-util/createText.js
+++ b/packages/mermaid/src/rendering-util/createText.js
@@ -1,6 +1,7 @@
 import { log } from '../logger.js';
 import { decodeEntities } from '../mermaidAPI.js';
 import { markdownToHTML, markdownToLines } from '../rendering-util/handle-markdown-text.js';
+import { splitLineToFitWidth } from './splitText.js';
 /**
  * @param dom
  * @param styleFn
@@ -118,31 +119,10 @@ function createFormattedText(width, g, structuredText, addBackground = false) {
      * Creating an array of strings pre-split to satisfy width limit
      */
     let fullStr = line.map((data) => data.content).join(' ');
-    let tempStr = '';
-    let linesUnderWidth = [];
-    let prevIndex = 0;
-    if (computeWidthOfText(labelGroup, lineHeight, fullStr) <= width) {
-      linesUnderWidth.push(fullStr);
-    } else {
-      for (let i = 0; i <= fullStr.length; i++) {
-        tempStr = fullStr.slice(prevIndex, i);
-        log.info(tempStr, prevIndex, i);
-        if (computeWidthOfText(labelGroup, lineHeight, tempStr) > width) {
-          const subStr = fullStr.slice(prevIndex, i);
-          // Break at space if any
-          const lastSpaceIndex = subStr.lastIndexOf(' ');
-          if (lastSpaceIndex > -1) {
-            i = prevIndex + lastSpaceIndex + 1;
-          }
-          linesUnderWidth.push(fullStr.slice(prevIndex, i).trim());
-          prevIndex = i;
-          tempStr = null;
-        }
-      }
-      if (tempStr != null) {
-        linesUnderWidth.push(tempStr);
-      }
-    }
+    const checkWidth = (str) => computeWidthOfText(labelGroup, lineHeight, str) <= width;
+    const linesUnderWidth = checkWidth(fullStr)
+      ? [fullStr]
+      : splitLineToFitWidth(fullStr, checkWidth);
     /** Add each prepared line as a tspan to the parent node */
     const preparedLines = linesUnderWidth.map((w) => ({ content: w, type: line.type }));
     for (const preparedLine of preparedLines) {

From b3ce56c7fcab1140d20f7cea2c5f131fc773c2cc Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 9 Jun 2023 17:03:02 +0530
Subject: [PATCH 007/281] Cleanup

---
 packages/mermaid/src/rendering-util/createText.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/mermaid/src/rendering-util/createText.js b/packages/mermaid/src/rendering-util/createText.js
index 517097d7a..06fba94c7 100644
--- a/packages/mermaid/src/rendering-util/createText.js
+++ b/packages/mermaid/src/rendering-util/createText.js
@@ -109,9 +109,6 @@ function createFormattedText(width, g, structuredText, addBackground = false) {
   const labelGroup = g.append('g');
   let bkg = labelGroup.insert('rect').attr('class', 'background');
   const textElement = labelGroup.append('text').attr('y', '-10.1');
-  // .attr('dominant-baseline', 'middle')
-  // .attr('text-anchor', 'middle');
-  // .attr('text-anchor', 'middle');
   let lineIndex = 0;
   structuredText.forEach((line) => {
     /**
@@ -139,7 +136,6 @@ function createFormattedText(width, g, structuredText, addBackground = false) {
       .attr('y', -padding)
       .attr('width', bbox.width + 2 * padding)
       .attr('height', bbox.height + 2 * padding);
-    // .style('fill', 'red');
 
     return labelGroup.node();
   } else {

From a379cd02e70f22506b1169c9bc33d651ea56cb0c Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Mon, 12 Jun 2023 14:57:56 +0530
Subject: [PATCH 008/281] Add logs

---
 packages/mermaid/src/rendering-util/splitText.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/mermaid/src/rendering-util/splitText.ts b/packages/mermaid/src/rendering-util/splitText.ts
index b8ee7a1b0..1cd16e35b 100644
--- a/packages/mermaid/src/rendering-util/splitText.ts
+++ b/packages/mermaid/src/rendering-util/splitText.ts
@@ -41,6 +41,8 @@ function splitWordToFitWidthRecursion(
   usedChars: string[],
   remainingChars: string[]
 ): [string, string] {
+  // eslint-disable-next-line no-console
+  console.error({ usedChars, remainingChars });
   if (remainingChars.length === 0) {
     return [usedChars.join(''), ''];
   }
@@ -62,6 +64,8 @@ function splitLineToFitWidthRecursion(
   lines: string[] = [],
   newLine = ''
 ): string[] {
+  // eslint-disable-next-line no-console
+  console.error({ words, lines, newLine });
   // Return if there is nothing left to split
   if (words.length === 0) {
     // If there is a new line, add it to the lines

From 5903792207f651cbb0a2ad6726b0ffe6039dc532 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Tue, 13 Jun 2023 10:34:24 +0530
Subject: [PATCH 009/281] rename handle-markdown-text

---
 .../{handle-markdown-text.js => handle-markdown-text.ts}          | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename packages/mermaid/src/rendering-util/{handle-markdown-text.js => handle-markdown-text.ts} (100%)

diff --git a/packages/mermaid/src/rendering-util/handle-markdown-text.js b/packages/mermaid/src/rendering-util/handle-markdown-text.ts
similarity index 100%
rename from packages/mermaid/src/rendering-util/handle-markdown-text.js
rename to packages/mermaid/src/rendering-util/handle-markdown-text.ts

From dd4e14690d0b239616482b0c39618824bddc2ea0 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Tue, 13 Jun 2023 11:26:25 +0530
Subject: [PATCH 010/281] Add types

---
 .../rendering-util/handle-markdown-text.ts    | 30 +++++++------------
 1 file changed, 10 insertions(+), 20 deletions(-)

diff --git a/packages/mermaid/src/rendering-util/handle-markdown-text.ts b/packages/mermaid/src/rendering-util/handle-markdown-text.ts
index 5102429d3..04dbe5b76 100644
--- a/packages/mermaid/src/rendering-util/handle-markdown-text.ts
+++ b/packages/mermaid/src/rendering-util/handle-markdown-text.ts
@@ -1,11 +1,12 @@
+import type { Content } from 'mdast';
 import { fromMarkdown } from 'mdast-util-from-markdown';
 import { dedent } from 'ts-dedent';
 
 /**
- * @param {string} markdown markdown to process
- * @returns {string} processed markdown
+ * @param markdown - markdown to process
+ * @returns processed markdown
  */
-function preprocessMarkdown(markdown) {
+function preprocessMarkdown(markdown: string): string {
   // Replace multiple newlines with a single newline
   const withoutMultipleNewlines = markdown.replace(/\n{2,}/g, '\n');
   // Remove extra spaces at the beginning of each line
@@ -14,19 +15,15 @@ function preprocessMarkdown(markdown) {
 }
 
 /**
- * @param {string} markdown markdown to split into lines
+ * @param markdown - markdown to split into lines
  */
-export function markdownToLines(markdown) {
+export function markdownToLines(markdown: string) {
   const preprocessedMarkdown = preprocessMarkdown(markdown);
   const { children } = fromMarkdown(preprocessedMarkdown);
-  const lines = [[]];
+  const lines: { content: string; type: string }[][] = [[]];
   let currentLine = 0;
 
-  /**
-   * @param {import('mdast').Content} node
-   * @param {string} [parentType]
-   */
-  function processNode(node, parentType = 'normal') {
+  function processNode(node: Content, parentType = 'normal') {
     if (node.type === 'text') {
       const textLines = node.value.split('\n');
       textLines.forEach((textLine, index) => {
@@ -58,17 +55,10 @@ export function markdownToLines(markdown) {
   return lines;
 }
 
-/**
- * @param {string} markdown markdown to convert to HTML
- * @returns {string} HTML
- */
-export function markdownToHTML(markdown) {
+export function markdownToHTML(markdown: string) {
   const { children } = fromMarkdown(markdown);
 
-  /**
-   * @param {import('mdast').Content} node
-   */
-  function output(node) {
+  function output(node: Content): string {
     if (node.type === 'text') {
       return node.value.replace(/\n/g, '<br/>');
     } else if (node.type === 'strong') {

From b36a0177dbb0ecc0b703613f30ce4ab7bad6aeb7 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Tue, 13 Jun 2023 11:42:39 +0530
Subject: [PATCH 011/281] Use joiner to split unicode

---
 .../src/rendering-util/splitText.spec.ts      | 29 +++++++++++++++----
 .../mermaid/src/rendering-util/splitText.ts   | 29 +++++++++++++++----
 2 files changed, 46 insertions(+), 12 deletions(-)

diff --git a/packages/mermaid/src/rendering-util/splitText.spec.ts b/packages/mermaid/src/rendering-util/splitText.spec.ts
index 77bd6102c..3dafb80ee 100644
--- a/packages/mermaid/src/rendering-util/splitText.spec.ts
+++ b/packages/mermaid/src/rendering-util/splitText.spec.ts
@@ -13,26 +13,43 @@ describe('splitText', () => {
 });
 
 describe('split lines', () => {
+  const createCheckFn = (width: number): CheckFitFunction => {
+    return (text: string) => {
+      return splitTextToChars(text).length <= width;
+    };
+  };
+
   it.each([
     // empty string
-    { str: '', width: 1, split: [''] },
-    // Width >= Individual words
-    { str: 'hello world', width: 5, split: ['hello', 'world'] },
     { str: 'hello world', width: 7, split: ['hello', 'world'] },
     // width > full line
     { str: 'hello world', width: 20, split: ['hello world'] },
     // width < individual word
     { str: 'hello world', width: 3, split: ['hel', 'lo', 'wor', 'ld'] },
     { str: 'hello 12 world', width: 4, split: ['hell', 'o 12', 'worl', 'd'] },
+    { str: 'hello  1 2 world', width: 4, split: ['hell', 'o  1', '2', 'worl', 'd'] },
+    { str: 'hello  1 2 world', width: 6, split: ['hello', '  1 2', 'world'] },
     { str: '🏳️‍⚧️🏳️‍🌈👩🏾‍❤️‍👨🏻', width: 1, split: ['🏳️‍⚧️', '🏳️‍🌈', '👩🏾‍❤️‍👨🏻'] },
+    { str: '🏳️‍⚧️🏳️‍🌈👩🏾‍❤️‍👨🏻', width: 2, split: ['🏳️‍⚧️🏳️‍🌈', '👩🏾‍❤️‍👨🏻'] },
+    { str: '🏳️‍⚧️🏳️‍🌈👩🏾‍❤️‍👨🏻', width: 3, split: ['🏳️‍⚧️🏳️‍🌈👩🏾‍❤️‍👨🏻'] },
+    { str: '中文中', width: 1, split: ['中', '文', '中'] },
+    { str: '中文中', width: 2, split: ['中文', '中'] },
+    { str: '中文中', width: 3, split: ['中文中'] },
     { str: 'Flag 🏳️‍⚧️ this 🏳️‍🌈', width: 6, split: ['Flag 🏳️‍⚧️', 'this 🏳️‍🌈'] },
   ])(
     'should split $str into lines of $width characters',
     ({ str, split, width }: { str: string; width: number; split: string[] }) => {
-      const checkFn: CheckFitFunction = (text: string) => {
-        return splitTextToChars(text).length <= width;
-      };
+      const checkFn = createCheckFn(width);
       expect(splitLineToFitWidth(str, checkFn)).toEqual(split);
     }
   );
+
+  it('should handle strings with newlines', () => {
+    const checkFn: CheckFitFunction = createCheckFn(6);
+    const str = `Flag
+  🏳️‍⚧️ this 🏳️‍🌈`;
+    expect(() => splitLineToFitWidth(str, checkFn)).toThrowErrorMatchingInlineSnapshot(
+      '"splitLineToFitWidth does not support newlines in the line"'
+    );
+  });
 });
diff --git a/packages/mermaid/src/rendering-util/splitText.ts b/packages/mermaid/src/rendering-util/splitText.ts
index 1cd16e35b..c1d25ea13 100644
--- a/packages/mermaid/src/rendering-util/splitText.ts
+++ b/packages/mermaid/src/rendering-util/splitText.ts
@@ -15,11 +15,17 @@ export function splitTextToChars(text: string): string[] {
  */
 function splitLineToWords(text: string): string[] {
   if (Intl.Segmenter) {
-    return [...new Intl.Segmenter(undefined, { granularity: 'word' }).segment(text)]
-      .map((s) => s.segment)
-      .filter((word) => word !== ' ');
+    return [...new Intl.Segmenter(undefined, { granularity: 'word' }).segment(text)].map(
+      (s) => s.segment
+    );
   }
-  return text.split(' ');
+  // Split by ' ' removes the ' 's from the result.
+  const words = text.split(' ');
+  // Add the ' 's back to the result.
+  const wordsWithSpaces = words.flatMap((s) => [s, ' ']);
+  // Remove last space.
+  wordsWithSpaces.pop();
+  return wordsWithSpaces;
 }
 
 /**
@@ -55,7 +61,11 @@ function splitWordToFitWidthRecursion(
 }
 
 export function splitLineToFitWidth(line: string, checkFit: CheckFitFunction): string[] {
-  return splitLineToFitWidthRecursion(splitLineToWords(line), checkFit);
+  if (line.includes('\n')) {
+    throw new Error('splitLineToFitWidth does not support newlines in the line');
+  }
+  const words = splitLineToWords(line);
+  return splitLineToFitWidthRecursion(words, checkFit);
 }
 
 function splitLineToFitWidthRecursion(
@@ -74,8 +84,15 @@ function splitLineToFitWidthRecursion(
     }
     return lines.length > 0 ? lines : [''];
   }
+  let joiner = '';
+  if (words[0] === ' ') {
+    joiner = ' ';
+    words.shift();
+  }
   const nextWord = words.shift() ?? ' ';
-  const lineWithNextWord = newLine ? `${newLine} ${nextWord}` : nextWord;
+
+  const nextWordWithJoiner = joiner + nextWord;
+  const lineWithNextWord = newLine ? `${newLine}${nextWordWithJoiner}` : nextWordWithJoiner;
   if (checkFit(lineWithNextWord)) {
     // nextWord fits, so we can add it to the new line and continue
     return splitLineToFitWidthRecursion(words, checkFit, lines, lineWithNextWord);

From 8b6485035ebb553708a21005662122fad11629d4 Mon Sep 17 00:00:00 2001
From: Pierrick Wauquier <pierrick@moka.care>
Date: Fri, 16 Jun 2023 16:32:11 +0200
Subject: [PATCH 012/281] add failing test

---
 cypress/integration/rendering/flowchart-v2.spec.js | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js
index eaa14ed50..486e548a1 100644
--- a/cypress/integration/rendering/flowchart-v2.spec.js
+++ b/cypress/integration/rendering/flowchart-v2.spec.js
@@ -695,6 +695,15 @@ A ~~~ B
       {}
     );
   });
+
+  it('4439: Should the graph event if some images are missing', () => {
+    imgSnapshotTest(
+      `flowchart TD
+    B[<img>]
+    B-->C[<img>]`,
+      {}
+    );
+  });
   describe('Markdown strings flowchart (#4220)', () => {
     describe('html labels', () => {
       it('With styling and classes', () => {

From aa1b998fbf2d56c8a072b2feeb55566c2e90199e Mon Sep 17 00:00:00 2001
From: Pierrick Wauquier <pierrick@moka.care>
Date: Fri, 16 Jun 2023 16:32:57 +0200
Subject: [PATCH 013/281] always resolve in the end

---
 .../mermaid/src/dagre-wrapper/shapes/util.js     | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/mermaid/src/dagre-wrapper/shapes/util.js b/packages/mermaid/src/dagre-wrapper/shapes/util.js
index 7ad412bdb..f67af5b29 100644
--- a/packages/mermaid/src/dagre-wrapper/shapes/util.js
+++ b/packages/mermaid/src/dagre-wrapper/shapes/util.js
@@ -66,8 +66,11 @@ export const labelHelper = async (parent, node, _classes, isNode) => {
       await Promise.all(
         [...images].map(
           (img) =>
-            new Promise((res) =>
-              img.addEventListener('load', function () {
+            new Promise((res) => {
+              /**
+               *
+               */
+              function setupImage() {
                 img.style.display = 'flex';
                 img.style.flexDirection = 'column';
 
@@ -82,8 +85,13 @@ export const labelHelper = async (parent, node, _classes, isNode) => {
                   img.style.width = '100%';
                 }
                 res(img);
-              })
-            )
+              }
+              if (img.complete) {
+                setupImage();
+              }
+              img.addEventListener('error', setupImage);
+              img.addEventListener('load', setupImage);
+            })
         )
       );
     }

From 270586095fc75d28e9c04b0379c64f7e0c46dbd9 Mon Sep 17 00:00:00 2001
From: Pierrick Wauquier <pierrick@moka.care>
Date: Fri, 16 Jun 2023 16:37:34 +0200
Subject: [PATCH 014/281] fix typo in test description

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

diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js
index 486e548a1..0b2e77293 100644
--- a/cypress/integration/rendering/flowchart-v2.spec.js
+++ b/cypress/integration/rendering/flowchart-v2.spec.js
@@ -696,7 +696,7 @@ A ~~~ B
     );
   });
 
-  it('4439: Should the graph event if some images are missing', () => {
+  it('4439: Should render the graph even if some images are missing', () => {
     imgSnapshotTest(
       `flowchart TD
     B[<img>]

From 9efd9e8a451390c2b20bef2dad60c47aa1077d77 Mon Sep 17 00:00:00 2001
From: Pierrick Wauquier <pierrick@moka.care>
Date: Fri, 16 Jun 2023 18:01:52 +0200
Subject: [PATCH 015/281] defer a bit for electron to catch up

---
 packages/mermaid/src/dagre-wrapper/shapes/util.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/mermaid/src/dagre-wrapper/shapes/util.js b/packages/mermaid/src/dagre-wrapper/shapes/util.js
index f67af5b29..3eaedb4b9 100644
--- a/packages/mermaid/src/dagre-wrapper/shapes/util.js
+++ b/packages/mermaid/src/dagre-wrapper/shapes/util.js
@@ -86,9 +86,11 @@ export const labelHelper = async (parent, node, _classes, isNode) => {
                 }
                 res(img);
               }
-              if (img.complete) {
-                setupImage();
-              }
+              setTimeout(() => {
+                if (img.complete) {
+                  setupImage();
+                }
+              });
               img.addEventListener('error', setupImage);
               img.addEventListener('load', setupImage);
             })

From 99da3d7cd50eab5a05a31cd4b4c0ea6383fcf4d3 Mon Sep 17 00:00:00 2001
From: Yokozuna59 <u.yokozuna@gmail.com>
Date: Tue, 20 Jun 2023 17:49:07 +0300
Subject: [PATCH 016/281] validate that `height` in `putInfoIframe` is defined

---
 docs/config/setup/modules/mermaidAPI.md | 6 +++---
 packages/mermaid/src/mermaidAPI.ts      | 4 +++-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/docs/config/setup/modules/mermaidAPI.md b/docs/config/setup/modules/mermaidAPI.md
index 591b6841a..7601c5069 100644
--- a/docs/config/setup/modules/mermaidAPI.md
+++ b/docs/config/setup/modules/mermaidAPI.md
@@ -96,7 +96,7 @@ mermaid.initialize(config);
 
 #### Defined in
 
-[mermaidAPI.ts:663](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L663)
+[mermaidAPI.ts:665](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L665)
 
 ## Functions
 
@@ -127,7 +127,7 @@ Return the last node appended
 
 #### Defined in
 
-[mermaidAPI.ts:308](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L308)
+[mermaidAPI.ts:310](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L310)
 
 ---
 
@@ -320,4 +320,4 @@ Remove any existing elements from the given document
 
 #### Defined in
 
-[mermaidAPI.ts:358](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L358)
+[mermaidAPI.ts:360](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L360)
diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts
index 753e4944a..b29b4a35c 100644
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -285,7 +285,9 @@ export const cleanUpSvgCode = (
  * TODO replace btoa(). Replace with  buf.toString('base64')?
  */
 export const putIntoIFrame = (svgCode = '', svgElement?: D3Element): string => {
-  const height = svgElement ? svgElement.viewBox.baseVal.height + 'px' : IFRAME_HEIGHT;
+  const height = svgElement?.viewBox?.baseVal?.height
+    ? svgElement.viewBox.baseVal.height + 'px'
+    : IFRAME_HEIGHT;
   const base64encodedSrc = btoa('<body style="' + IFRAME_BODY_STYLE + '">' + svgCode + '</body>');
   return `<iframe style="width:${IFRAME_WIDTH};height:${height};${IFRAME_STYLES}" src="data:text/html;base64,${base64encodedSrc}" sandbox="${IFRAME_SANDBOX_OPTS}">
   ${IFRAME_NOT_SUPPORTED_MSG}

From daa98a2f54f9446e6429c6870291955537190f49 Mon Sep 17 00:00:00 2001
From: Yokozuna59 <u.yokozuna@gmail.com>
Date: Tue, 20 Jun 2023 17:52:50 +0300
Subject: [PATCH 017/281] use body of document instead of document itself in
 `infoRenderer`

---
 packages/mermaid/src/diagram-api/types.ts         |  4 ++--
 .../mermaid/src/diagrams/info/infoRenderer.ts     | 15 ++++++---------
 2 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/packages/mermaid/src/diagram-api/types.ts b/packages/mermaid/src/diagram-api/types.ts
index 265af6587..d32a8b07f 100644
--- a/packages/mermaid/src/diagram-api/types.ts
+++ b/packages/mermaid/src/diagram-api/types.ts
@@ -79,6 +79,6 @@ export type DrawDefinition = (
  */
 export type ParseDirectiveDefinition = (statement: string, context: string, type: string) => void;
 
-export type HTML = d3.Selection<HTMLIFrameElement, unknown, Element, unknown>;
+export type HTML = d3.Selection<HTMLIFrameElement, unknown, Element | null, unknown>;
 
-export type SVG = d3.Selection<SVGSVGElement, unknown, Element, unknown>;
+export type SVG = d3.Selection<SVGSVGElement, unknown, Element | null, unknown>;
diff --git a/packages/mermaid/src/diagrams/info/infoRenderer.ts b/packages/mermaid/src/diagrams/info/infoRenderer.ts
index 79f3ec992..33e886848 100644
--- a/packages/mermaid/src/diagrams/info/infoRenderer.ts
+++ b/packages/mermaid/src/diagrams/info/infoRenderer.ts
@@ -15,18 +15,16 @@ const draw: DrawDefinition = (text, id, version) => {
     log.debug('rendering info diagram\n' + text);
 
     const { securityLevel } = getConfig();
+
     // handle root and document for when rendering in sandbox mode
-    let sandboxElement: HTML | undefined;
     let document: Document | null | undefined;
     if (securityLevel === 'sandbox') {
-      sandboxElement = select('#i' + id);
-      document = sandboxElement.nodes()[0].contentDocument;
+      const sandboxElement: HTML = select('#i' + id);
+      document = sandboxElement.node()?.contentDocument;
     }
-
-    // @ts-ignore - figure out how to assign HTML to document type
     const root: HTML =
-      sandboxElement !== undefined && document !== undefined && document !== null
-        ? select(document)
+      document !== undefined && document !== null
+        ? select(document.body as HTMLIFrameElement)
         : select('body');
 
     const svg: SVG = root.select('#' + id);
@@ -34,7 +32,6 @@ const draw: DrawDefinition = (text, id, version) => {
     svg.attr('width', 400);
 
     const g = svg.append('g');
-
     g.append('text') // text label for the x axis
       .attr('x', 100)
       .attr('y', 40)
@@ -43,7 +40,7 @@ const draw: DrawDefinition = (text, id, version) => {
       .style('text-anchor', 'middle')
       .text('v ' + version);
   } catch (e) {
-    log.error('error while rendering info diagram', e);
+    log.error('error while rendering info diagram\n', e);
   }
 };
 

From e5907ec5eae79a8f096c28cfc7f5ae46adf87dca Mon Sep 17 00:00:00 2001
From: Yokozuna59 <u.yokozuna@gmail.com>
Date: Tue, 20 Jun 2023 17:53:33 +0300
Subject: [PATCH 018/281] add info in sandbox cypress test case

---
 cypress/integration/rendering/info.spec.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/cypress/integration/rendering/info.spec.ts b/cypress/integration/rendering/info.spec.ts
index 3db74c980..03661f941 100644
--- a/cypress/integration/rendering/info.spec.ts
+++ b/cypress/integration/rendering/info.spec.ts
@@ -8,4 +8,8 @@ describe('info diagram', () => {
   it('should handle an info definition with showInfo', () => {
     imgSnapshotTest(`info showInfo`);
   });
+
+  it('should handle an info definition in sandbox', () => {
+    imgSnapshotTest(`info`, { securityLevel: 'sandbox' });
+  });
 });

From 30a66533bce0c302f4566c89587ad0ed51c30691 Mon Sep 17 00:00:00 2001
From: Yokozuna59 <u.yokozuna@gmail.com>
Date: Fri, 23 Jun 2023 23:26:45 +0300
Subject: [PATCH 019/281] use backtick for cleaner variable string and the DOM
 document for default values

---
 packages/mermaid/src/diagrams/info/infoRenderer.ts | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/packages/mermaid/src/diagrams/info/infoRenderer.ts b/packages/mermaid/src/diagrams/info/infoRenderer.ts
index 33e886848..3950957ac 100644
--- a/packages/mermaid/src/diagrams/info/infoRenderer.ts
+++ b/packages/mermaid/src/diagrams/info/infoRenderer.ts
@@ -17,17 +17,15 @@ const draw: DrawDefinition = (text, id, version) => {
     const { securityLevel } = getConfig();
 
     // handle root and document for when rendering in sandbox mode
-    let document: Document | null | undefined;
+    let doc: Document = document;
     if (securityLevel === 'sandbox') {
-      const sandboxElement: HTML = select('#i' + id);
-      document = sandboxElement.node()?.contentDocument;
+      const sandboxElement: HTML = select(`#i${id}`);
+      doc = sandboxElement.node()?.contentDocument ?? doc;
     }
     const root: HTML =
-      document !== undefined && document !== null
-        ? select(document.body as HTMLIFrameElement)
-        : select('body');
+      securityLevel === 'sandbox' ? select(doc.body as HTMLIFrameElement) : select('body');
 
-    const svg: SVG = root.select('#' + id);
+    const svg: SVG = root.select(`#${id}`);
     svg.attr('height', 100);
     svg.attr('width', 400);
 
@@ -38,7 +36,7 @@ const draw: DrawDefinition = (text, id, version) => {
       .attr('class', 'version')
       .attr('font-size', '32px')
       .style('text-anchor', 'middle')
-      .text('v ' + version);
+      .text(`v${version}`);
   } catch (e) {
     log.error('error while rendering info diagram\n', e);
   }

From 228bafa909bec100ebec9b94fe42765a6c738e3a Mon Sep 17 00:00:00 2001
From: Yokozuna59 <u.yokozuna@gmail.com>
Date: Tue, 27 Jun 2023 18:07:35 +0300
Subject: [PATCH 020/281] refactor accessibility

- remove @ts-ignore comments
- rename vitest test and describe title
- remove unnecessary types, e.i, `null` and `number`
- clean `addSVGa11yTitleDescription` and `setA11yDiagramInfo` functions
---
 packages/mermaid/src/accessibility.spec.ts | 146 ++++++++++-----------
 packages/mermaid/src/accessibility.ts      |  49 ++++---
 packages/mermaid/src/tests/MockedD3.ts     |  11 +-
 3 files changed, 94 insertions(+), 112 deletions(-)

diff --git a/packages/mermaid/src/accessibility.spec.ts b/packages/mermaid/src/accessibility.spec.ts
index 7a3ab7f10..7745e02ef 100644
--- a/packages/mermaid/src/accessibility.spec.ts
+++ b/packages/mermaid/src/accessibility.spec.ts
@@ -1,27 +1,24 @@
 import { MockedD3 } from './tests/MockedD3.js';
 import { setA11yDiagramInfo, addSVGa11yTitleDescription } from './accessibility.js';
-import { D3Element } from './mermaidAPI.js';
+import type { D3Element } from './mermaidAPI.js';
 
 describe('accessibility', () => {
-  const fauxSvgNode = new MockedD3();
+  const fauxSvgNode: MockedD3 = new MockedD3();
 
   describe('setA11yDiagramInfo', () => {
-    it('sets the svg element role to "graphics-document document"', () => {
-      // @ts-ignore  Required to easily handle the d3 select types
+    it('should set svg element role to "graphics-document document"', () => {
       const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
       setA11yDiagramInfo(fauxSvgNode, 'flowchart');
       expect(svgAttrSpy).toHaveBeenCalledWith('role', 'graphics-document document');
     });
 
-    it('sets the aria-roledescription to the diagram type', () => {
-      // @ts-ignore  Required to easily handle the d3 select types
+    it('should set aria-roledescription to the diagram type', () => {
       const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
       setA11yDiagramInfo(fauxSvgNode, 'flowchart');
       expect(svgAttrSpy).toHaveBeenCalledWith('aria-roledescription', 'flowchart');
     });
 
-    it('does not set the aria-roledescription if the diagram type is empty', () => {
-      // @ts-ignore  Required to easily handle the d3 select types
+    it('should not set aria-roledescription if the diagram type is empty', () => {
       const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
       setA11yDiagramInfo(fauxSvgNode, '');
       expect(svgAttrSpy).toHaveBeenCalledTimes(1);
@@ -32,8 +29,8 @@ describe('accessibility', () => {
   describe('addSVGa11yTitleDescription', () => {
     const givenId = 'theBaseId';
 
-    describe('with the given svg d3 object:', () => {
-      it('does nothing if there is no insert defined', () => {
+    describe('with svg d3 object', () => {
+      it('should do nothing if there is no insert defined', () => {
         const noInsertSvg = {
           attr: vi.fn(),
         };
@@ -42,26 +39,25 @@ describe('accessibility', () => {
         expect(noInsertAttrSpy).not.toHaveBeenCalled();
       });
 
-      // ----------------
-      // Convenience functions to DRY up the spec
+      // convenience functions to DRY up the spec
 
-      function expectAriaLabelledByIsTitleId(
+      function expectAriaLabelledByItTitleId(
         svgD3Node: D3Element,
-        title: string | null | undefined,
-        desc: string | null | undefined,
+        title: string | undefined,
+        desc: string | undefined,
         givenId: string
-      ) {
+      ): void {
         const svgAttrSpy = vi.spyOn(svgD3Node, 'attr').mockReturnValue(svgD3Node);
         addSVGa11yTitleDescription(svgD3Node, title, desc, givenId);
         expect(svgAttrSpy).toHaveBeenCalledWith('aria-labelledby', `chart-title-${givenId}`);
       }
 
-      function expectAriaDescribedByIsDescId(
+      function expectAriaDescribedByItDescId(
         svgD3Node: D3Element,
-        title: string | null | undefined,
-        desc: string | null | undefined,
+        title: string | undefined,
+        desc: string | undefined,
         givenId: string
-      ) {
+      ): void {
         const svgAttrSpy = vi.spyOn(svgD3Node, 'attr').mockReturnValue(svgD3Node);
         addSVGa11yTitleDescription(svgD3Node, title, desc, givenId);
         expect(svgAttrSpy).toHaveBeenCalledWith('aria-describedby', `chart-desc-${givenId}`);
@@ -69,154 +65,148 @@ describe('accessibility', () => {
 
       function a11yTitleTagInserted(
         svgD3Node: D3Element,
-        title: string | null | undefined,
-        desc: string | null | undefined,
+        title: string | undefined,
+        desc: string | undefined,
         givenId: string,
         callNumber: number
-      ) {
+      ): void {
         a11yTagInserted(svgD3Node, title, desc, givenId, callNumber, 'title', title);
       }
 
       function a11yDescTagInserted(
         svgD3Node: D3Element,
-        title: string | null | undefined,
-        desc: string | null | undefined,
+        title: string | undefined,
+        desc: string | undefined,
         givenId: string,
         callNumber: number
-      ) {
+      ): void {
         a11yTagInserted(svgD3Node, title, desc, givenId, callNumber, 'desc', desc);
       }
 
       function a11yTagInserted(
-        svgD3Node: D3Element,
-        title: string | null | undefined,
-        desc: string | null | undefined,
+        _svgD3Node: D3Element,
+        title: string | undefined,
+        desc: string | undefined,
         givenId: string,
         callNumber: number,
         expectedPrefix: string,
-        expectedText: string | null | undefined
-      ) {
-        const fauxInsertedD3 = new MockedD3();
-        const svgInsertSpy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(fauxInsertedD3);
-        // @ts-ignore  Required to easily handle the d3 select types
+        expectedText: string | undefined
+      ): void {
+        const fauxInsertedD3: MockedD3 = new MockedD3();
+        const svginsertpy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(fauxInsertedD3);
         const titleAttrSpy = vi.spyOn(fauxInsertedD3, 'attr').mockReturnValue(fauxInsertedD3);
         const titleTextSpy = vi.spyOn(fauxInsertedD3, 'text');
 
         addSVGa11yTitleDescription(fauxSvgNode, title, desc, givenId);
-        expect(svgInsertSpy).toHaveBeenCalledWith(expectedPrefix, ':first-child');
+        expect(svginsertpy).toHaveBeenCalledWith(expectedPrefix, ':first-child');
         expect(titleAttrSpy).toHaveBeenCalledWith('id', `chart-${expectedPrefix}-${givenId}`);
         expect(titleTextSpy).toHaveBeenNthCalledWith(callNumber, expectedText);
       }
-      // ----------------
 
-      describe('given an a11y title', () => {
+      describe('with a11y title', () => {
         const a11yTitle = 'a11y title';
 
-        describe('given an a11y description', () => {
+        describe('with a11y description', () => {
           const a11yDesc = 'a11y description';
 
-          it('sets aria-labelledby to the title id inserted as a child', () => {
-            expectAriaLabelledByIsTitleId(fauxSvgNode, a11yTitle, a11yDesc, givenId);
+          it('shold set aria-labelledby to the title id inserted as a child', () => {
+            expectAriaLabelledByItTitleId(fauxSvgNode, a11yTitle, a11yDesc, givenId);
           });
 
-          it('sets aria-describedby to the description id inserted as a child', () => {
-            expectAriaDescribedByIsDescId(fauxSvgNode, a11yTitle, a11yDesc, givenId);
+          it('should set aria-describedby to the description id inserted as a child', () => {
+            expectAriaDescribedByItDescId(fauxSvgNode, a11yTitle, a11yDesc, givenId);
           });
 
-          it('inserts a title tag as the first child with the text set to the accTitle given', () => {
+          it('should insert title tag as the first child with the text set to the accTitle given', () => {
             a11yTitleTagInserted(fauxSvgNode, a11yTitle, a11yDesc, givenId, 2);
           });
 
-          it('inserts a desc tag as the 2nd child with the text set to accDescription given', () => {
+          it('should insert desc tag as the 2nd child with the text set to accDescription given', () => {
             a11yDescTagInserted(fauxSvgNode, a11yTitle, a11yDesc, givenId, 1);
           });
         });
 
-        describe(`no a11y description`, () => {
+        describe(`without a11y description`, () => {
           const a11yDesc = undefined;
 
-          it('sets aria-labelledby to the title id inserted as a child', () => {
-            expectAriaLabelledByIsTitleId(fauxSvgNode, a11yTitle, a11yDesc, givenId);
+          it('should set aria-labelledby to the title id inserted as a child', () => {
+            expectAriaLabelledByItTitleId(fauxSvgNode, a11yTitle, a11yDesc, givenId);
           });
 
-          it('no aria-describedby is set', () => {
-            // @ts-ignore Required to easily handle the d3 select types
+          it('should not set aria-describedby', () => {
             const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
             addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
             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', () => {
+          it('should insert title tag as the first child with the text set to the accTitle given', () => {
             a11yTitleTagInserted(fauxSvgNode, a11yTitle, a11yDesc, givenId, 1);
           });
 
-          it('no description tag is inserted', () => {
-            const fauxTitle = new MockedD3();
-            const svgInsertSpy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(fauxTitle);
+          it('should not insert description tag', () => {
+            const fauxTitle: MockedD3 = new MockedD3();
+            const svginsertpy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(fauxTitle);
             addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
-            expect(svgInsertSpy).not.toHaveBeenCalledWith('desc', ':first-child');
+            expect(svginsertpy).not.toHaveBeenCalledWith('desc', ':first-child');
           });
         });
       });
 
-      describe('no a11y title', () => {
+      describe('without a11y title', () => {
         const a11yTitle = undefined;
 
-        describe('given an a11y description', () => {
+        describe('with a11y description', () => {
           const a11yDesc = 'a11y description';
 
-          it('no aria-labelledby is set', () => {
-            // @ts-ignore Required to easily handle the d3 select types
+          it('should not set aria-labelledby', () => {
             const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
             addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
             expect(svgAttrSpy).not.toHaveBeenCalledWith('aria-labelledby', expect.anything());
           });
 
-          it('no title tag inserted', () => {
-            const fauxTitle = new MockedD3();
-            const svgInsertSpy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(fauxTitle);
+          it('should not insert title tag', () => {
+            const fauxTitle: MockedD3 = new MockedD3();
+            const svginsertpy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(fauxTitle);
             addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
-            expect(svgInsertSpy).not.toHaveBeenCalledWith('title', ':first-child');
+            expect(svginsertpy).not.toHaveBeenCalledWith('title', ':first-child');
           });
 
-          it('sets aria-describedby to the description id inserted as a child', () => {
-            expectAriaDescribedByIsDescId(fauxSvgNode, a11yTitle, a11yDesc, givenId);
+          it('should set aria-describedby to the description id inserted as a child', () => {
+            expectAriaDescribedByItDescId(fauxSvgNode, a11yTitle, a11yDesc, givenId);
           });
 
-          it('inserts a desc tag as the 2nd child with the text set to accDescription given', () => {
+          it('should insert desc tag as the 2nd child with the text set to accDescription given', () => {
             a11yDescTagInserted(fauxSvgNode, a11yTitle, a11yDesc, givenId, 1);
           });
         });
 
-        describe('no a11y description', () => {
+        describe('without a11y description', () => {
           const a11yDesc = undefined;
 
-          it('no aria-labelledby is set', () => {
-            // @ts-ignore Required to easily handle the d3 select types
+          it('should not set aria-labelledby', () => {
             const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
             addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
             expect(svgAttrSpy).not.toHaveBeenCalledWith('aria-labelledby', expect.anything());
           });
 
-          it('no aria-describedby is set', () => {
-            // @ts-ignore Required to easily handle the d3 select types
+          it('should not set aria-describedby', () => {
             const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
             addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
             expect(svgAttrSpy).not.toHaveBeenCalledWith('aria-describedby', expect.anything());
           });
 
-          it('no title tag inserted', () => {
-            const fauxTitle = new MockedD3();
-            const svgInsertSpy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(fauxTitle);
+          it('should not insert title tag', () => {
+            const fauxTitle: MockedD3 = new MockedD3();
+            const svginsertpy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(fauxTitle);
             addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
-            expect(svgInsertSpy).not.toHaveBeenCalledWith('title', ':first-child');
+            expect(svginsertpy).not.toHaveBeenCalledWith('title', ':first-child');
           });
 
-          it('no description tag inserted', () => {
-            const fauxDesc = new MockedD3();
-            const svgInsertSpy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(fauxDesc);
+          it('should not insert  description tag', () => {
+            const fauxDesc: MockedD3 = new MockedD3();
+            const svginsertpy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(fauxDesc);
             addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
-            expect(svgInsertSpy).not.toHaveBeenCalledWith('desc', ':first-child');
+            expect(svginsertpy).not.toHaveBeenCalledWith('desc', ':first-child');
           });
         });
       });
diff --git a/packages/mermaid/src/accessibility.ts b/packages/mermaid/src/accessibility.ts
index eba3ba9a7..69e22b301 100644
--- a/packages/mermaid/src/accessibility.ts
+++ b/packages/mermaid/src/accessibility.ts
@@ -1,13 +1,11 @@
 /**
- * Accessibility (a11y) functions, types, helpers
+ * Accessibility (a11y) functions, types, helpers.
+ *
  * @see https://www.w3.org/WAI/
  * @see https://www.w3.org/TR/wai-aria-1.1/
  * @see https://www.w3.org/TR/svg-aam-1.0/
- *
  */
-import { D3Element } from './mermaidAPI.js';
-
-import isEmpty from 'lodash-es/isEmpty.js';
+import type { D3Element } from './mermaidAPI.js';
 
 /**
  * SVG element role:
@@ -21,50 +19,47 @@ import isEmpty from 'lodash-es/isEmpty.js';
 const SVG_ROLE = 'graphics-document document';
 
 /**
- * Add role and aria-roledescription to the svg element
+ * Add role and aria-roledescription to the svg element.
  *
  * @param svg - d3 object that contains the SVG HTML element
  * @param diagramType - diagram name for to the aria-roledescription
  */
-export function setA11yDiagramInfo(svg: D3Element, diagramType: string | null | undefined) {
+export function setA11yDiagramInfo(svg: D3Element, diagramType: string) {
   svg.attr('role', SVG_ROLE);
-  if (!isEmpty(diagramType)) {
+  if (diagramType !== '') {
     svg.attr('aria-roledescription', diagramType);
   }
 }
+
 /**
  * Add an accessible title and/or description element to a chart.
  * The title is usually not displayed and the 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.
  *
  * @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 a11yTitle - a11y title. undefined or empty strings mean to skip them
+ * @param a11yDesc - a11y description. undefined or empty strings mean to skip them
  * @param baseId - id used to construct the a11y title and description id
  */
 export function addSVGa11yTitleDescription(
   svg: D3Element,
-  a11yTitle: string | null | undefined,
-  a11yDesc: string | null | undefined,
+  a11yTitle: string | undefined,
+  a11yDesc: string | undefined,
   baseId: string
-) {
+): void {
   if (svg.insert === undefined) {
     return;
   }
 
-  if (a11yTitle || a11yDesc) {
-    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 {
-    return;
+  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);
   }
 }
diff --git a/packages/mermaid/src/tests/MockedD3.ts b/packages/mermaid/src/tests/MockedD3.ts
index 6d8d721e0..c5e080ba3 100644
--- a/packages/mermaid/src/tests/MockedD3.ts
+++ b/packages/mermaid/src/tests/MockedD3.ts
@@ -1,5 +1,3 @@
-import type {} from '@vitest/spy/dist/index.js';
-
 /**
  * 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.
@@ -7,9 +5,8 @@ import type {} from '@vitest/spy/dist/index.js';
  * 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 attribs = new Map<string, string>();
   public id: string | undefined = '';
   _children: MockedD3[] = [];
 
@@ -72,9 +69,9 @@ export class MockedD3 {
     return newMock;
   };
 
-  attr(attrName: string): null | undefined | string | number;
-  // attr(attrName: string, attrValue: string): MockedD3;
-  attr(attrName: string, attrValue?: string): null | undefined | string | number | MockedD3 {
+  attr(attrName: string): undefined | string;
+  attr(attrName: string, attrValue: string): MockedD3;
+  attr(attrName: string, attrValue?: string): undefined | string | MockedD3 {
     if (arguments.length === 1) {
       return this.attribs.get(attrName);
     } else {

From 226960ef46949fc935f34d30b36a78a124d557ab Mon Sep 17 00:00:00 2001
From: Yokozuna59 <u.yokozuna@gmail.com>
Date: Tue, 27 Jun 2023 20:07:50 +0300
Subject: [PATCH 021/281] refactor mermaidAPI accessibilities

---
 packages/mermaid/src/mermaidAPI.spec.ts | 54 +------------------------
 packages/mermaid/src/mermaidAPI.ts      | 26 +++++++-----
 2 files changed, 16 insertions(+), 64 deletions(-)

diff --git a/packages/mermaid/src/mermaidAPI.spec.ts b/packages/mermaid/src/mermaidAPI.spec.ts
index 11c16827b..0f4e61499 100644
--- a/packages/mermaid/src/mermaidAPI.spec.ts
+++ b/packages/mermaid/src/mermaidAPI.spec.ts
@@ -733,59 +733,7 @@ describe('mermaidAPI', () => {
           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.render(id, diagramText);
-            expect(a11yDiagramInfo_spy).toHaveBeenCalledWith(
-              expect.anything(),
-              expectedDiagramType
-            );
-            expect(a11yTitleDesc_spy).toHaveBeenCalled();
-          });
-        });
-      });
-    });
-  });
-
-  describe('render', () => {
-    // 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 () => {
+          it('should set aria-roledscription to the diagram type AND should call addSVGa11yTitleDescription', async () => {
             const a11yDiagramInfo_spy = vi.spyOn(accessibility, 'setA11yDiagramInfo');
             const a11yTitleDesc_spy = vi.spyOn(accessibility, 'addSVGa11yTitleDescription');
             await mermaidAPI.render(id, diagramText);
diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts
index 753e4944a..4d8d95290 100644
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -478,7 +478,7 @@ const render = async function (
 
   // Get the temporary div element containing the svg
   const element = root.select(enclosingDivID_selector).node();
-  const graphType = diag.type;
+  const diagramType = diag.type;
 
   // -------------------------------------------------------------------------------
   // Create and insert the styles (user styles, theme styles, config styles)
@@ -486,11 +486,11 @@ const render = async function (
   // Insert an element into svg. This is where we put the styles
   const svg = element.firstChild;
   const firstChild = svg.firstChild;
-  const diagramClassDefs = CLASSDEF_DIAGRAMS.includes(graphType)
+  const diagramClassDefs = CLASSDEF_DIAGRAMS.includes(diagramType)
     ? diag.renderer.getClasses(text, diag)
     : {};
 
-  const rules = createUserStyles(config, graphType, diagramClassDefs, idSelector);
+  const rules = createUserStyles(config, diagramType, diagramClassDefs, idSelector);
 
   const style1 = document.createElement('style');
   style1.innerHTML = rules;
@@ -507,9 +507,9 @@ const render = async function (
 
   // 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);
+  const a11yTitle: string | undefined = diag.db.getAccTitle?.();
+  const a11yDescr: string | undefined = diag.db.getAccDescription?.();
+  addA11yInfo(diagramType, svgNode, a11yTitle, a11yDescr);
 
   // -------------------------------------------------------------------------------
   // Clean up SVG code
@@ -586,14 +586,18 @@ function initialize(options: MermaidConfig = {}) {
 /**
  * Add accessibility (a11y) information to the diagram.
  *
+ * @param diagramType - diagram type
+ * @param svgNode - d3 node to insert the a11y title and desc info
+ * @param a11yTitle - a11y title
+ * @param a11yDescr - a11y description
  */
 function addA11yInfo(
-  graphType: string,
+  diagramType: string,
   svgNode: D3Element,
-  a11yTitle: string | undefined,
-  a11yDescr: string | undefined
-) {
-  setA11yDiagramInfo(svgNode, graphType);
+  a11yTitle?: string,
+  a11yDescr?: string
+): void {
+  setA11yDiagramInfo(svgNode, diagramType);
   addSVGa11yTitleDescription(svgNode, a11yTitle, a11yDescr, svgNode.attr('id'));
 }
 

From 6cbd24f704011a48db95f14f77ab6e5b38c33279 Mon Sep 17 00:00:00 2001
From: Yokozuna59 <u.yokozuna@gmail.com>
Date: Tue, 27 Jun 2023 20:50:42 +0300
Subject: [PATCH 022/281] convert file from js into ts

---
 cypress/helpers/{util.js => util.ts} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename cypress/helpers/{util.js => util.ts} (100%)

diff --git a/cypress/helpers/util.js b/cypress/helpers/util.ts
similarity index 100%
rename from cypress/helpers/util.js
rename to cypress/helpers/util.ts

From a2cf41c9c04c2da7c1ebcbc402dfc6d92f65aa4f Mon Sep 17 00:00:00 2001
From: Yokozuna59 <u.yokozuna@gmail.com>
Date: Tue, 27 Jun 2023 20:53:01 +0300
Subject: [PATCH 023/281] convert cypress/helpers/util.js into ts

- add types for parameter and returned value and variables
- change the deperated `unescape` into `decodeURIComponent`
- create `CypressConfig` and `CypressMermaidConfig` and `CodeObject` types
- add default value for some parameter
---
 cypress/helpers/util.ts | 83 +++++++++++++++++++++++++++++------------
 1 file changed, 60 insertions(+), 23 deletions(-)

diff --git a/cypress/helpers/util.ts b/cypress/helpers/util.ts
index 4d13b3590..f83cb7dba 100644
--- a/cypress/helpers/util.ts
+++ b/cypress/helpers/util.ts
@@ -1,18 +1,36 @@
-const utf8ToB64 = (str) => {
-  return window.btoa(unescape(encodeURIComponent(str)));
+import type { MermaidConfig } from '../../packages/mermaid/src/config.type.js';
+
+type CypressConfig = {
+  listUrl?: boolean;
+  listId?: string;
+  name?: string;
+};
+type CypressMermaidConfig = MermaidConfig & CypressConfig;
+
+interface CodeObject {
+  code: string;
+  mermaid: CypressMermaidConfig;
+}
+
+const utf8ToB64 = (str: string): string => {
+  return window.btoa(decodeURIComponent(encodeURIComponent(str)));
 };
 
-const batchId = 'mermaid-batch' + new Date().getTime();
+const batchId: string = 'mermaid-batch' + new Date().getTime();
 
-export const mermaidUrl = (graphStr, options, api) => {
-  const obj = {
+export const mermaidUrl = (
+  graphStr: string,
+  options: CypressMermaidConfig,
+  api: boolean
+): string => {
+  const codeObject: CodeObject = {
     code: graphStr,
     mermaid: options,
   };
-  const objStr = JSON.stringify(obj);
-  let url = 'http://localhost:9000/e2e.html?graph=' + utf8ToB64(objStr);
+  const objStr: string = JSON.stringify(codeObject);
+  let url: string = `http://localhost:9000/e2e.html?graph=${utf8ToB64(objStr)}`;
   if (api) {
-    url = 'http://localhost:9000/xss.html?graph=' + graphStr;
+    url = `http://localhost:9000/xss.html?graph=${graphStr}`;
   }
 
   if (options.listUrl) {
@@ -22,9 +40,14 @@ export const mermaidUrl = (graphStr, options, api) => {
   return url;
 };
 
-export const imgSnapshotTest = (graphStr, _options = {}, api = false, validation = undefined) => {
-  cy.log(_options);
-  const options = Object.assign(_options);
+export const imgSnapshotTest = (
+  graphStr: string,
+  _options: CypressMermaidConfig = {},
+  api: boolean = false,
+  validation?: any
+): void => {
+  cy.log(JSON.stringify(_options));
+  const options: CypressMermaidConfig = Object.assign(_options);
   if (!options.fontFamily) {
     options.fontFamily = 'courier';
   }
@@ -44,28 +67,42 @@ export const imgSnapshotTest = (graphStr, _options = {}, api = false, validation
     options.sequence.actorFontFamily = 'courier';
   }
   if (!options.fontSize) {
-    options.fontSize = '16px';
+    options.fontSize = 16;
   }
-  const url = mermaidUrl(graphStr, options, api);
+
+  const url: string = mermaidUrl(graphStr, options, api);
   openURLAndVerifyRendering(url, options, validation);
 };
 
-export const urlSnapshotTest = (url, _options, api = false, validation) => {
-  const options = Object.assign(_options);
+export const urlSnapshotTest = (
+  url: string,
+  _options: CypressMermaidConfig,
+  _api: boolean = false,
+  validation?: any
+): void => {
+  const options: CypressMermaidConfig = Object.assign(_options);
   openURLAndVerifyRendering(url, options, validation);
 };
 
-export const renderGraph = (graphStr, options, api) => {
-  const url = mermaidUrl(graphStr, options, api);
+export const renderGraph = (
+  graphStr: string,
+  options: CypressMermaidConfig = {},
+  api: boolean = false
+): void => {
+  const url: string = mermaidUrl(graphStr, options, api);
   openURLAndVerifyRendering(url, options);
 };
 
-export const openURLAndVerifyRendering = (url, options, validation = undefined) => {
-  const useAppli = Cypress.env('useAppli');
-  const name = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
+export const openURLAndVerifyRendering = (
+  url: string,
+  options: CypressMermaidConfig,
+  validation?: any
+): void => {
+  const useAppli: boolean = Cypress.env('useAppli');
+  const name: string = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
 
   if (useAppli) {
-    cy.log('Opening eyes ' + Cypress.spec.name + ' --- ' + name);
+    cy.log(`Opening eyes ${Cypress.spec.name} --- ${name}`);
     cy.eyesOpen({
       appName: 'Mermaid',
       testName: name,
@@ -83,9 +120,9 @@ export const openURLAndVerifyRendering = (url, options, validation = undefined)
   }
 
   if (useAppli) {
-    cy.log('Check eyes' + Cypress.spec.name);
+    cy.log(`Check eyes ${Cypress.spec.name}`);
     cy.eyesCheckWindow('Click!');
-    cy.log('Closing eyes' + Cypress.spec.name);
+    cy.log(`Closing eyes ${Cypress.spec.name}`);
     cy.eyesClose();
   } else {
     cy.matchImageSnapshot(name);

From 48fc60f8666b597a2b2e134257c45e40df8a7c69 Mon Sep 17 00:00:00 2001
From: Yokozuna59 <u.yokozuna@gmail.com>
Date: Tue, 27 Jun 2023 20:58:39 +0300
Subject: [PATCH 024/281] fix wrong config paramater in some cypress spec

- flowchart
- mindmap
---
 .../rendering/flowchart-elk.spec.js           | 22 ++++++++---------
 .../rendering/flowchart-v2.spec.js            | 24 +++++++++----------
 cypress/integration/rendering/mindmap.spec.ts |  3 +--
 3 files changed, 24 insertions(+), 25 deletions(-)

diff --git a/cypress/integration/rendering/flowchart-elk.spec.js b/cypress/integration/rendering/flowchart-elk.spec.js
index 4f90646a2..10e95af5c 100644
--- a/cypress/integration/rendering/flowchart-elk.spec.js
+++ b/cypress/integration/rendering/flowchart-elk.spec.js
@@ -681,7 +681,7 @@ title: Simple flowchart
 flowchart-elk TD
 A --> B
 `,
-      { titleTopMargin: 0 }
+      { flowchart: { titleTopMargin: 0 } }
     );
   });
   it('elk: should include classes on the edges', () => {
@@ -710,7 +710,7 @@ flowchart-elk LR
     style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
     classDef someclass fill:#f96
 `,
-          { titleTopMargin: 0 }
+          { flowchart: { titleTopMargin: 0 } }
         );
       });
       it('With formatting in a node', () => {
@@ -726,7 +726,7 @@ flowchart-elk LR
   b --> d(The dog in the hog)
   c --> d
 `,
-          { titleTopMargin: 0 }
+          { flowchart: { titleTopMargin: 0 } }
         );
       });
       it('New line in node and formatted edge label', () => {
@@ -736,7 +736,7 @@ flowchart-elk LR
 b("\`The dog in **the** hog.(1)
 NL\`") --"\`1o **bold**\`"--> c
 `,
-          { titleTopMargin: 0 }
+          { flowchart: { titleTopMargin: 0 } }
         );
       });
       it('Wrapping long text with a new line', () => {
@@ -749,7 +749,7 @@ Word!
 Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`) --> c
 
 `,
-          { titleTopMargin: 0 }
+          { flowchart: { titleTopMargin: 0 } }
         );
       });
       it('Sub graphs and markdown strings', () => {
@@ -766,7 +766,7 @@ subgraph "\`**Two**\`"
 end
 
 `,
-          { titleTopMargin: 0 }
+          { flowchart: { titleTopMargin: 0 } }
         );
       });
     });
@@ -782,7 +782,7 @@ flowchart-elk LR
     style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
     classDef someclass fill:#f96
 `,
-          { titleTopMargin: 0 }
+          { flowchart: { titleTopMargin: 0 } }
         );
       });
       it('With formatting in a node', () => {
@@ -798,7 +798,7 @@ flowchart-elk LR
   b --> d(The dog in the hog)
   c --> d
 `,
-          { titleTopMargin: 0 }
+          { flowchart: { titleTopMargin: 0 } }
         );
       });
       it('New line in node and formatted edge label', () => {
@@ -808,7 +808,7 @@ flowchart-elk LR
 b("\`The dog in **the** hog.(1)
 NL\`") --"\`1o **bold**\`"--> c
 `,
-          { titleTopMargin: 0 }
+          { flowchart: { titleTopMargin: 0 } }
         );
       });
       it('Wrapping long text with a new line', () => {
@@ -821,7 +821,7 @@ Word!
 Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`") --> c
 
 `,
-          { titleTopMargin: 0 }
+          { flowchart: { titleTopMargin: 0 } }
         );
       });
       it('Sub graphs and markdown strings', () => {
@@ -838,7 +838,7 @@ subgraph "\`**Two**\`"
 end
 
 `,
-          { titleTopMargin: 0 }
+          { flowchart: { titleTopMargin: 0 } }
         );
       });
     });
diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js
index 305c55b21..091482f35 100644
--- a/cypress/integration/rendering/flowchart-v2.spec.js
+++ b/cypress/integration/rendering/flowchart-v2.spec.js
@@ -671,7 +671,7 @@ title: Simple flowchart
 flowchart TD
 A --> B
 `,
-      { titleTopMargin: 0 }
+      { flowchart: { titleTopMargin: 0 } }
     );
   });
   it('3192: It should be possieble to render flowcharts with invisible edges', () => {
@@ -682,7 +682,7 @@ title: Simple flowchart with invisible edges
 flowchart TD
 A ~~~ B
 `,
-      { titleTopMargin: 0 }
+      { flowchart: { titleTopMargin: 0 } }
     );
   });
   it('4023: Should render html labels with images and-or text correctly', () => {
@@ -707,7 +707,7 @@ flowchart LR
     style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
     classDef someclass fill:#f96
 `,
-          { titleTopMargin: 0 }
+          { flowchart: { titleTopMargin: 0 } }
         );
       });
       it('With formatting in a node', () => {
@@ -723,7 +723,7 @@ flowchart LR
   b --> d(The dog in the hog)
   c --> d
 `,
-          { titleTopMargin: 0 }
+          { flowchart: { titleTopMargin: 0 } }
         );
       });
       it('New line in node and formatted edge label', () => {
@@ -733,7 +733,7 @@ flowchart LR
 b("\`The dog in **the** hog.(1)
 NL\`") --"\`1o **bold**\`"--> c
 `,
-          { titleTopMargin: 0 }
+          { flowchart: { titleTopMargin: 0 } }
         );
       });
       it('Wrapping long text with a new line', () => {
@@ -746,7 +746,7 @@ Word!
 Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`") --> c
 
 `,
-          { titleTopMargin: 0 }
+          { flowchart: { titleTopMargin: 0 } }
         );
       });
       it('Sub graphs and markdown strings', () => {
@@ -763,7 +763,7 @@ subgraph "\`**Two**\`"
 end
 
 `,
-          { titleTopMargin: 0 }
+          { flowchart: { titleTopMargin: 0 } }
         );
       });
     });
@@ -779,7 +779,7 @@ flowchart LR
     style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
     classDef someclass fill:#f96
 `,
-          { titleTopMargin: 0 }
+          { flowchart: { titleTopMargin: 0 } }
         );
       });
       it('With formatting in a node', () => {
@@ -795,7 +795,7 @@ flowchart LR
   b --> d(The dog in the hog)
   c --> d
 `,
-          { titleTopMargin: 0 }
+          { flowchart: { titleTopMargin: 0 } }
         );
       });
       it('New line in node and formatted edge label', () => {
@@ -805,7 +805,7 @@ flowchart LR
 b("\`The dog in **the** hog.(1)
 NL\`") --"\`1o **bold**\`"--> c
 `,
-          { titleTopMargin: 0 }
+          { flowchart: { titleTopMargin: 0 } }
         );
       });
       it('Wrapping long text with a new line', () => {
@@ -818,7 +818,7 @@ Word!
 Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`") --> c
 
 `,
-          { titleTopMargin: 0 }
+          { flowchart: { titleTopMargin: 0 } }
         );
       });
       it('Sub graphs and markdown strings', () => {
@@ -835,7 +835,7 @@ subgraph "\`**Two**\`"
 end
 
 `,
-          { titleTopMargin: 0 }
+          { flowchart: { titleTopMargin: 0 } }
         );
       });
     });
diff --git a/cypress/integration/rendering/mindmap.spec.ts b/cypress/integration/rendering/mindmap.spec.ts
index e390beaee..90d5d9edd 100644
--- a/cypress/integration/rendering/mindmap.spec.ts
+++ b/cypress/integration/rendering/mindmap.spec.ts
@@ -242,8 +242,7 @@ mindmap
     a second line 😎\`]
       id2[\`The dog in **the** hog... a *very long text* about it
 Word!\`]
-`,
-        { titleTopMargin: 0 }
+`
       );
     });
   });

From 2b0f078c994409883359121322515e906adb40ee Mon Sep 17 00:00:00 2001
From: Yokozuna59 <u.yokozuna@gmail.com>
Date: Tue, 27 Jun 2023 21:05:44 +0300
Subject: [PATCH 025/281] resolve lint issues for `no-inferrable-types`

---
 cypress/helpers/util.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/cypress/helpers/util.ts b/cypress/helpers/util.ts
index f83cb7dba..e2c330f61 100644
--- a/cypress/helpers/util.ts
+++ b/cypress/helpers/util.ts
@@ -28,7 +28,7 @@ export const mermaidUrl = (
     mermaid: options,
   };
   const objStr: string = JSON.stringify(codeObject);
-  let url: string = `http://localhost:9000/e2e.html?graph=${utf8ToB64(objStr)}`;
+  let url = `http://localhost:9000/e2e.html?graph=${utf8ToB64(objStr)}`;
   if (api) {
     url = `http://localhost:9000/xss.html?graph=${graphStr}`;
   }
@@ -43,7 +43,7 @@ export const mermaidUrl = (
 export const imgSnapshotTest = (
   graphStr: string,
   _options: CypressMermaidConfig = {},
-  api: boolean = false,
+  api = false,
   validation?: any
 ): void => {
   cy.log(JSON.stringify(_options));
@@ -77,7 +77,7 @@ export const imgSnapshotTest = (
 export const urlSnapshotTest = (
   url: string,
   _options: CypressMermaidConfig,
-  _api: boolean = false,
+  _api = false,
   validation?: any
 ): void => {
   const options: CypressMermaidConfig = Object.assign(_options);
@@ -87,7 +87,7 @@ export const urlSnapshotTest = (
 export const renderGraph = (
   graphStr: string,
   options: CypressMermaidConfig = {},
-  api: boolean = false
+  api = false
 ): void => {
   const url: string = mermaidUrl(graphStr, options, api);
   openURLAndVerifyRendering(url, options);

From b11c38ea007fc9094eb0671ec603617fec41172d Mon Sep 17 00:00:00 2001
From: Yokozuna59 <u.yokozuna@gmail.com>
Date: Tue, 27 Jun 2023 20:16:47 +0300
Subject: [PATCH 026/281] run docs:build to fix linting issue

---
 docs/config/setup/modules/mermaidAPI.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/config/setup/modules/mermaidAPI.md b/docs/config/setup/modules/mermaidAPI.md
index 591b6841a..72f18cace 100644
--- a/docs/config/setup/modules/mermaidAPI.md
+++ b/docs/config/setup/modules/mermaidAPI.md
@@ -96,7 +96,7 @@ mermaid.initialize(config);
 
 #### Defined in
 
-[mermaidAPI.ts:663](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L663)
+[mermaidAPI.ts:667](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L667)
 
 ## Functions
 

From 38ba45f7353a757b769b746f473593a7afccde31 Mon Sep 17 00:00:00 2001
From: Yokozuna59 <u.yokozuna@gmail.com>
Date: Wed, 28 Jun 2023 01:35:27 +0300
Subject: [PATCH 027/281] run lint:fix

---
 packages/mermaid/src/assignWithDepth.js                 | 2 +-
 packages/mermaid/src/diagram-api/types.ts               | 2 +-
 packages/mermaid/src/diagrams/state/stateRenderer-v2.js | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/mermaid/src/assignWithDepth.js b/packages/mermaid/src/assignWithDepth.js
index 898481c30..6f2e706ab 100644
--- a/packages/mermaid/src/assignWithDepth.js
+++ b/packages/mermaid/src/assignWithDepth.js
@@ -20,7 +20,7 @@
  *   of src to dst in order.
  * @param {any} dst - The destination of the merge
  * @param {any} src - The source object(s) to merge into destination
- * @param {{ depth: number; clobber: boolean }} [config={ depth: 2, clobber: false }] - Depth: depth
+ * @param {{ depth: number; clobber: boolean }} [config] - Depth: depth
  *   to traverse within src and dst for merging - clobber: should dissimilar types clobber (default:
  *   { depth: 2, clobber: false }). Default is `{ depth: 2, clobber: false }`
  * @returns {any}
diff --git a/packages/mermaid/src/diagram-api/types.ts b/packages/mermaid/src/diagram-api/types.ts
index d5f97d782..4322b6789 100644
--- a/packages/mermaid/src/diagram-api/types.ts
+++ b/packages/mermaid/src/diagram-api/types.ts
@@ -83,4 +83,4 @@ export type HTML = d3.Selection<HTMLIFrameElement, unknown, Element | null, unkn
 
 export type SVG = d3.Selection<SVGSVGElement, unknown, Element | null, unknown>;
 
-export type DiagramStylesProvider = (options?: any) => string;
\ No newline at end of file
+export type DiagramStylesProvider = (options?: any) => string;
diff --git a/packages/mermaid/src/diagrams/state/stateRenderer-v2.js b/packages/mermaid/src/diagrams/state/stateRenderer-v2.js
index 20ae0d112..592cb43cc 100644
--- a/packages/mermaid/src/diagrams/state/stateRenderer-v2.js
+++ b/packages/mermaid/src/diagrams/state/stateRenderer-v2.js
@@ -358,7 +358,7 @@ const setupDoc = (g, parentParsedItem, doc, diagramStates, diagramDb, altFlag) =
  * Look through all of the documents (docs) in the parsedItems
  * Because is a _document_ direction, the default direction is not necessarily the same as the overall default _diagram_ direction.
  * @param {object[]} parsedItem - the parsed statement item to look through
- * @param [defaultDir=DEFAULT_NESTED_DOC_DIR] - the direction to use if none is found
+ * @param [defaultDir] - the direction to use if none is found
  * @returns {string}
  */
 const getDir = (parsedItem, defaultDir = DEFAULT_NESTED_DOC_DIR) => {

From 0cab66c9d81ea2f48485a2c4bf2c187c06a01fbf Mon Sep 17 00:00:00 2001
From: Lishid <lishid@gmail.com>
Date: Thu, 29 Jun 2023 15:33:35 -0400
Subject: [PATCH 028/281] Fix flowchart tooltip typing

Tooltip is an object that gets reset to an array. It is then looked up for properties without guard, causing array functions like "length" and "constructor" to run into undefined behvaior.
---
 packages/mermaid/src/diagrams/flowchart/flowDb.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.js b/packages/mermaid/src/diagrams/flowchart/flowDb.js
index ceb933e85..81a9afb94 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowDb.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowDb.js
@@ -342,7 +342,8 @@ export const setLink = function (ids, linkStr, target) {
   setClass(ids, 'clickable');
 };
 export const getTooltip = function (id) {
-  return tooltips[id];
+  if (tooltips.hasOwnProperty(id)) return tooltips[id];
+  return undefined;
 };
 
 /**
@@ -443,7 +444,7 @@ export const clear = function (ver = 'gen-1') {
   subGraphs = [];
   subGraphLookup = {};
   subCount = 0;
-  tooltips = [];
+  tooltips = {};
   firstGraphFlag = true;
   version = ver;
   commonClear();

From efa3ba639765d2375578a4c8c0b5bbada142cecc Mon Sep 17 00:00:00 2001
From: Steph <35910788+huynhicode@users.noreply.github.com>
Date: Fri, 30 Jun 2023 11:08:42 -0700
Subject: [PATCH 029/281] add ChatGPT plugin blog post

---
 docs/news/announcements.md                      | 6 +++---
 docs/news/blog.md                               | 6 ++++++
 packages/mermaid/src/docs/news/announcements.md | 6 +++---
 packages/mermaid/src/docs/news/blog.md          | 6 ++++++
 4 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/docs/news/announcements.md b/docs/news/announcements.md
index 1837b33db..ff67c57d0 100644
--- a/docs/news/announcements.md
+++ b/docs/news/announcements.md
@@ -6,8 +6,8 @@
 
 # Announcements
 
-## [Sequence diagrams, the only good thing UML brought to software development](https://www.mermaidchart.com/blog/posts/sequence-diagrams-the-good-thing-uml-brought-to-software-development/)
+## [Mermaid Chart’s ChatGPT Plugin Combines Generative AI and Smart Diagramming For Users](https://www.mermaidchart.com/blog/posts/mermaid-chart-chatgpt-plugin-combines-generative-ai-and-smart-diagramming)
 
-15 June 2023 · 12 mins
+29 June 2023 · 4 mins
 
-Sequence diagrams really shine when you’re documenting different parts of a system and the various ways these parts interact with each other.
+Mermaid Chart’s new ChatGPT plugin integrates AI-powered text prompts with Mermaid’s intuitive diagramming editor, enabling users to generate, edit, and share complex diagrams with ease and efficiency.
diff --git a/docs/news/blog.md b/docs/news/blog.md
index eb9ec6c47..6b187d406 100644
--- a/docs/news/blog.md
+++ b/docs/news/blog.md
@@ -6,6 +6,12 @@
 
 # Blog
 
+## [Mermaid Chart’s ChatGPT Plugin Combines Generative AI and Smart Diagramming For Users](https://www.mermaidchart.com/blog/posts/mermaid-chart-chatgpt-plugin-combines-generative-ai-and-smart-diagramming)
+
+29 June 2023 · 4 mins
+
+Mermaid Chart’s new ChatGPT plugin integrates AI-powered text prompts with Mermaid’s intuitive diagramming editor, enabling users to generate, edit, and share complex diagrams with ease and efficiency.
+
 ## [Sequence diagrams, the only good thing UML brought to software development](https://www.mermaidchart.com/blog/posts/sequence-diagrams-the-good-thing-uml-brought-to-software-development/)
 
 15 June 2023 · 12 mins
diff --git a/packages/mermaid/src/docs/news/announcements.md b/packages/mermaid/src/docs/news/announcements.md
index 83dafaab6..b8d0669ec 100644
--- a/packages/mermaid/src/docs/news/announcements.md
+++ b/packages/mermaid/src/docs/news/announcements.md
@@ -1,7 +1,7 @@
 # Announcements
 
-## [Sequence diagrams, the only good thing UML brought to software development](https://www.mermaidchart.com/blog/posts/sequence-diagrams-the-good-thing-uml-brought-to-software-development/)
+## [Mermaid Chart’s ChatGPT Plugin Combines Generative AI and Smart Diagramming For Users](https://www.mermaidchart.com/blog/posts/mermaid-chart-chatgpt-plugin-combines-generative-ai-and-smart-diagramming)
 
-15 June 2023 · 12 mins
+29 June 2023 · 4 mins
 
-Sequence diagrams really shine when you’re documenting different parts of a system and the various ways these parts interact with each other.
+Mermaid Chart’s new ChatGPT plugin integrates AI-powered text prompts with Mermaid’s intuitive diagramming editor, enabling users to generate, edit, and share complex diagrams with ease and efficiency.
diff --git a/packages/mermaid/src/docs/news/blog.md b/packages/mermaid/src/docs/news/blog.md
index 61d53656d..b536cb87e 100644
--- a/packages/mermaid/src/docs/news/blog.md
+++ b/packages/mermaid/src/docs/news/blog.md
@@ -1,5 +1,11 @@
 # Blog
 
+## [Mermaid Chart’s ChatGPT Plugin Combines Generative AI and Smart Diagramming For Users](https://www.mermaidchart.com/blog/posts/mermaid-chart-chatgpt-plugin-combines-generative-ai-and-smart-diagramming)
+
+29 June 2023 · 4 mins
+
+Mermaid Chart’s new ChatGPT plugin integrates AI-powered text prompts with Mermaid’s intuitive diagramming editor, enabling users to generate, edit, and share complex diagrams with ease and efficiency.
+
 ## [Sequence diagrams, the only good thing UML brought to software development](https://www.mermaidchart.com/blog/posts/sequence-diagrams-the-good-thing-uml-brought-to-software-development/)
 
 15 June 2023 · 12 mins

From 032830d7e0a15415e09b4d843d21b6268c2b4314 Mon Sep 17 00:00:00 2001
From: sidharthv96 <sidharthv96@users.noreply.github.com>
Date: Fri, 30 Jun 2023 19:02:57 +0000
Subject: [PATCH 030/281] Update docs

---
 docs/syntax/stateDiagram.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/syntax/stateDiagram.md b/docs/syntax/stateDiagram.md
index 807d6149a..4c28c82b3 100644
--- a/docs/syntax/stateDiagram.md
+++ b/docs/syntax/stateDiagram.md
@@ -487,7 +487,7 @@ where
 - the second _property_ is `color` and its _value_ is `white`
 - the third _property_ is `font-weight` and its _value_ is `bold`
 - the fourth _property_ is `stroke-width` and its _value_ is `2px`
-- the fifth _property_ is `stroke` and its _value_ is `yello`
+- the fifth _property_ is `stroke` and its _value_ is `yellow`
 
 ### Apply classDef styles to states
 

From 592e9c959be891c136cff37c67462580bd8eda59 Mon Sep 17 00:00:00 2001
From: Dmitry Kisler <admin@dkisler.com>
Date: Sun, 2 Jul 2023 17:10:06 +0200
Subject: [PATCH 031/281] fix(diagrams/c4/parser): fixes support of the macro
 ContainerQueue_Ext for C4 diagrams.

---
 .../diagrams/c4/parser/c4Container.spec.js    | 135 ++++++++++++++++++
 .../src/diagrams/c4/parser/c4Diagram.jison    |  54 +++----
 2 files changed, 162 insertions(+), 27 deletions(-)
 create mode 100644 packages/mermaid/src/diagrams/c4/parser/c4Container.spec.js

diff --git a/packages/mermaid/src/diagrams/c4/parser/c4Container.spec.js b/packages/mermaid/src/diagrams/c4/parser/c4Container.spec.js
new file mode 100644
index 000000000..76dca3bc2
--- /dev/null
+++ b/packages/mermaid/src/diagrams/c4/parser/c4Container.spec.js
@@ -0,0 +1,135 @@
+import c4Db from '../c4Db.js';
+import c4 from './c4Diagram.jison';
+import { setConfig } from '../../../config.js';
+
+setConfig({
+  securityLevel: 'strict',
+});
+
+describe.each([
+  ['Container', 'container'],
+  ['ContainerDb', 'container_db'],
+  ['ContainerQueue', 'container_queue'],
+  ['Container_Ext', 'external_container'],
+  ['ContainerDb_Ext', 'external_container_db'],
+  ['ContainerQueue_Ext', 'external_container_queue'],
+])('parsing a C4 %s', function (macroName, elementName) {
+  beforeEach(function () {
+    c4.parser.yy = c4Db;
+    c4.parser.yy.clear();
+  });
+
+  it('should parse a C4 diagram with one Container correctly', function () {
+    c4.parser.parse(`C4Context
+title Container diagram for Internet Banking Container
+${macroName}(ContainerAA, "Internet Banking Container", "Technology", "Allows customers to view information about their bank accounts, and make payments.")`);
+
+    const yy = c4.parser.yy;
+
+    const shapes = yy.getC4ShapeArray();
+    expect(shapes.length).toBe(1);
+    const onlyShape = shapes[0];
+
+    expect(onlyShape).toEqual({
+      alias: 'ContainerAA',
+      descr: {
+        text: 'Allows customers to view information about their bank accounts, and make payments.',
+      },
+      label: {
+        text: 'Internet Banking Container',
+      },
+      link: undefined,
+      sprite: undefined,
+      tags: undefined,
+      parentBoundary: 'global',
+      typeC4Shape: {
+        text: elementName,
+      },
+      techn: {
+        text: 'Technology',
+      },
+      wrap: false,
+    });
+  });
+
+  it('should parse the alias', function () {
+    c4.parser.parse(`C4Context
+${macroName}(ContainerAA, "Internet Banking Container")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      alias: 'ContainerAA',
+    });
+  });
+
+  it('should parse the label', function () {
+    c4.parser.parse(`C4Context
+${macroName}(ContainerAA, "Internet Banking Container")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      label: {
+        text: 'Internet Banking Container',
+      },
+    });
+  });
+
+  it('should parse the technology', function () {
+    c4.parser.parse(`C4Context
+${macroName}(ContainerAA, "", "Java")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      techn: {
+        text: 'Java',
+      },
+    });
+  });
+
+  it('should parse the description', function () {
+    c4.parser.parse(`C4Context
+${macroName}(ContainerAA, "", "", "Allows customers to view information about their bank accounts, and make payments.")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      descr: {
+        text: 'Allows customers to view information about their bank accounts, and make payments.',
+      },
+    });
+  });
+
+  it('should parse a sprite', function () {
+    c4.parser.parse(`C4Context
+${macroName}(ContainerAA, $sprite="users")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      label: {
+        text: {
+          sprite: 'users',
+        },
+      },
+    });
+  });
+
+  it('should parse a link', function () {
+    c4.parser.parse(`C4Context
+${macroName}(ContainerAA, $link="https://github.com/mermaidjs")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      label: {
+        text: {
+          link: 'https://github.com/mermaidjs',
+        },
+      },
+    });
+  });
+
+  it('should parse tags', function () {
+    c4.parser.parse(`C4Context
+${macroName}(ContainerAA, $tags="tag1,tag2")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      label: {
+        text: {
+          tags: 'tag1,tag2',
+        },
+      },
+    });
+  });
+});
diff --git a/packages/mermaid/src/diagrams/c4/parser/c4Diagram.jison b/packages/mermaid/src/diagrams/c4/parser/c4Diagram.jison
index 03b851458..1dfa69ef1 100644
--- a/packages/mermaid/src/diagrams/c4/parser/c4Diagram.jison
+++ b/packages/mermaid/src/diagrams/c4/parser/c4Diagram.jison
@@ -150,27 +150,27 @@ accDescr\s*"{"\s*                         { this.begin("acc_descr_multiline");}
 "Node_R"                                  { this.begin("node_r"); return 'NODE_R';}
 
 
-"Rel"                                     { this.begin("rel"); return 'REL';} 
-"BiRel"                                   { this.begin("birel"); return 'BIREL';} 
-"Rel_Up"                                  { this.begin("rel_u"); return 'REL_U';}  
-"Rel_U"                                   { this.begin("rel_u"); return 'REL_U';}  
-"Rel_Down"                                { this.begin("rel_d"); return 'REL_D';}  
-"Rel_D"                                   { this.begin("rel_d"); return 'REL_D';}  
-"Rel_Left"                                { this.begin("rel_l"); return 'REL_L';}  
-"Rel_L"                                   { this.begin("rel_l"); return 'REL_L';}  
-"Rel_Right"                               { this.begin("rel_r"); return 'REL_R';}  
-"Rel_R"                                   { this.begin("rel_r"); return 'REL_R';}  
-"Rel_Back"                                { this.begin("rel_b"); return 'REL_B';}  
-"RelIndex"                                { this.begin("rel_index"); return 'REL_INDEX';} 
+"Rel"                                     { this.begin("rel"); return 'REL';}
+"BiRel"                                   { this.begin("birel"); return 'BIREL';}
+"Rel_Up"                                  { this.begin("rel_u"); return 'REL_U';}
+"Rel_U"                                   { this.begin("rel_u"); return 'REL_U';}
+"Rel_Down"                                { this.begin("rel_d"); return 'REL_D';}
+"Rel_D"                                   { this.begin("rel_d"); return 'REL_D';}
+"Rel_Left"                                { this.begin("rel_l"); return 'REL_L';}
+"Rel_L"                                   { this.begin("rel_l"); return 'REL_L';}
+"Rel_Right"                               { this.begin("rel_r"); return 'REL_R';}
+"Rel_R"                                   { this.begin("rel_r"); return 'REL_R';}
+"Rel_Back"                                { this.begin("rel_b"); return 'REL_B';}
+"RelIndex"                                { this.begin("rel_index"); return 'REL_INDEX';}
 
-"UpdateElementStyle"                      { this.begin("update_el_style"); return 'UPDATE_EL_STYLE';}  
-"UpdateRelStyle"                          { this.begin("update_rel_style"); return 'UPDATE_REL_STYLE';} 
-"UpdateLayoutConfig"                      { this.begin("update_layout_config"); return 'UPDATE_LAYOUT_CONFIG';} 
+"UpdateElementStyle"                      { this.begin("update_el_style"); return 'UPDATE_EL_STYLE';}
+"UpdateRelStyle"                          { this.begin("update_rel_style"); return 'UPDATE_REL_STYLE';}
+"UpdateLayoutConfig"                      { this.begin("update_layout_config"); return 'UPDATE_LAYOUT_CONFIG';}
 
-<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config><<EOF>>                return "EOF_IN_STRUCT";
-<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config>[(][ ]*[,]             { this.begin("attribute"); return "ATTRIBUTE_EMPTY";}
-<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config>[(]                    { this.begin("attribute"); }
-<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config,attribute>[)]          { this.popState();this.popState();}
+<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext_queue,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config><<EOF>>                return "EOF_IN_STRUCT";
+<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext_queue,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config>[(][ ]*[,]             { this.begin("attribute"); return "ATTRIBUTE_EMPTY";}
+<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext_queue,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config>[(]                    { this.begin("attribute"); }
+<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext_queue,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config,attribute>[)]          { this.popState();this.popState();}
 
 <attribute>",,"                           { return 'ATTRIBUTE_EMPTY';}
 <attribute>","                            { }
@@ -189,7 +189,7 @@ accDescr\s*"{"\s*                         { this.begin("acc_descr_multiline");}
 
 '{'                                       { /* this.begin("lbrace"); */ return "LBRACE";}
 '}'                                       { /* this.popState(); */ return "RBRACE";}
-   
+
 [\s]+                                     return 'SPACE';
 [\n\r]+                                   return 'EOL';
 <<EOF>>                                   return 'EOF';
@@ -257,7 +257,7 @@ graphConfig
 statements
     : otherStatements
     | diagramStatements
-    | otherStatements diagramStatements 
+    | otherStatements diagramStatements
     ;
 
 otherStatements
@@ -268,10 +268,10 @@ otherStatements
 
 otherStatement
     : title {yy.setTitle($1.substring(6));$$=$1.substring(6);}
-    | accDescription {yy.setAccDescription($1.substring(15));$$=$1.substring(15);}   
+    | accDescription {yy.setAccDescription($1.substring(15));$$=$1.substring(15);}
     | acc_title acc_title_value  { $$=$2.trim();yy.setTitle($$); }
     | acc_descr acc_descr_value  { $$=$2.trim();yy.setAccDescription($$); }
-    | acc_descr_multiline_value  { $$=$1.trim();yy.setAccDescription($$); } 
+    | acc_descr_multiline_value  { $$=$1.trim();yy.setAccDescription($$); }
     ;
 
 boundaryStatement
@@ -301,7 +301,7 @@ boundaryStopStatement
 diagramStatements
     : diagramStatement
     | diagramStatement NEWLINE
-    | diagramStatement NEWLINE statements  
+    | diagramStatement NEWLINE statements
     ;
 
 diagramStatement
@@ -312,19 +312,19 @@ diagramStatement
     | SYSTEM_QUEUE attributes {yy.addPersonOrSystem('system_queue', ...$2); $$=$2;}
     | SYSTEM_EXT attributes {yy.addPersonOrSystem('external_system', ...$2); $$=$2;}
     | SYSTEM_EXT_DB attributes {yy.addPersonOrSystem('external_system_db', ...$2); $$=$2;}
-    | SYSTEM_EXT_QUEUE attributes {yy.addPersonOrSystem('external_system_queue', ...$2); $$=$2;}      
+    | SYSTEM_EXT_QUEUE attributes {yy.addPersonOrSystem('external_system_queue', ...$2); $$=$2;}
     | CONTAINER attributes {yy.addContainer('container', ...$2); $$=$2;}
     | CONTAINER_DB attributes {yy.addContainer('container_db', ...$2); $$=$2;}
     | CONTAINER_QUEUE attributes {yy.addContainer('container_queue', ...$2); $$=$2;}
     | CONTAINER_EXT attributes {yy.addContainer('external_container', ...$2); $$=$2;}
     | CONTAINER_EXT_DB attributes {yy.addContainer('external_container_db', ...$2); $$=$2;}
-    | CONTAINER_EXT_QUEUE attributes {yy.addContainer('external_container_queue', ...$2); $$=$2;}      
+    | CONTAINER_EXT_QUEUE attributes {yy.addContainer('external_container_queue', ...$2); $$=$2;}
     | COMPONENT attributes {yy.addComponent('component', ...$2); $$=$2;}
     | COMPONENT_DB attributes {yy.addComponent('component_db', ...$2); $$=$2;}
     | COMPONENT_QUEUE attributes {yy.addComponent('component_queue', ...$2); $$=$2;}
     | COMPONENT_EXT attributes {yy.addComponent('external_component', ...$2); $$=$2;}
     | COMPONENT_EXT_DB attributes {yy.addComponent('external_component_db', ...$2); $$=$2;}
-    | COMPONENT_EXT_QUEUE attributes {yy.addComponent('external_component_queue', ...$2); $$=$2;}      
+    | COMPONENT_EXT_QUEUE attributes {yy.addComponent('external_component_queue', ...$2); $$=$2;}
     | boundaryStatement
     | REL attributes {yy.addRel('rel', ...$2); $$=$2;}
     | BIREL attributes {yy.addRel('birel', ...$2); $$=$2;}

From b989ff536216521f7d2e46dc719b2e9d48ccb154 Mon Sep 17 00:00:00 2001
From: Alois Klink <alois@aloisklink.com>
Date: Sun, 2 Jul 2023 23:44:19 +0100
Subject: [PATCH 032/281] fix: change sankey config types to be unions

Replace the TypeScript `enum {a = "a", b = "b"}` types with
TypeScript's literal types (e.g. `"a" | "b"`).

This is because TypeScript enums are
[_not_ a type-level addition to JavaScript][1], and even the official
TypeScript docs say to be careful when using.

[1]: https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#enums
---
 packages/mermaid/src/config.type.ts           | 14 ++-----------
 packages/mermaid/src/defaultConfig.ts         |  6 +++---
 .../src/diagrams/sankey/sankeyRenderer.ts     | 20 +++++++++----------
 3 files changed, 15 insertions(+), 25 deletions(-)

diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts
index 4d40b33c8..138eee44f 100644
--- a/packages/mermaid/src/config.type.ts
+++ b/packages/mermaid/src/config.type.ts
@@ -412,18 +412,8 @@ export interface FlowchartDiagramConfig extends BaseDiagramConfig {
   wrappingWidth?: number;
 }
 
-export enum SankeyLinkColor {
-  source = 'source',
-  target = 'target',
-  gradient = 'gradient',
-}
-
-export enum SankeyNodeAlignment {
-  left = 'left',
-  right = 'right',
-  center = 'center',
-  justify = 'justify',
-}
+export type SankeyLinkColor = 'source' | 'target' | 'gradient';
+export type SankeyNodeAlignment = 'left' | 'right' | 'center' | 'justify';
 
 export interface SankeyDiagramConfig extends BaseDiagramConfig {
   width?: number;
diff --git a/packages/mermaid/src/defaultConfig.ts b/packages/mermaid/src/defaultConfig.ts
index 6e24b6391..488493030 100644
--- a/packages/mermaid/src/defaultConfig.ts
+++ b/packages/mermaid/src/defaultConfig.ts
@@ -1,5 +1,5 @@
 import theme from './themes/index.js';
-import { MermaidConfig, SankeyLinkColor, SankeyNodeAlignment } from './config.type.js';
+import { type MermaidConfig } from './config.type.js';
 /**
  * **Configuration methods in Mermaid version 8.6.0 have been updated, to learn more[[click
  * here](8.6.0_docs.md)].**
@@ -2273,8 +2273,8 @@ const config: Partial<MermaidConfig> = {
   sankey: {
     width: 800,
     height: 400,
-    linkColor: SankeyLinkColor.gradient,
-    nodeAlignment: SankeyNodeAlignment.justify,
+    linkColor: 'gradient',
+    nodeAlignment: 'justify',
     useMaxWidth: false,
   },
   fontSize: 16,
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
index e6e18f113..a9ee698e9 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
@@ -18,17 +18,17 @@ import {
 } from 'd3-sankey';
 import { configureSvgSize } from '../../setupGraphViewbox.js';
 import { Uid } from '../../rendering-util/uid.js';
-import { SankeyLinkColor, SankeyNodeAlignment } from '../../config.type.js';
+import type { SankeyLinkColor, SankeyNodeAlignment } from '../../config.type.js';
 
 // Map config options to alignment functions
 const alignmentsMap: Record<
   SankeyNodeAlignment,
   (node: d3SankeyNode<object, object>, n: number) => number
 > = {
-  [SankeyNodeAlignment.left]: d3SankeyLeft,
-  [SankeyNodeAlignment.right]: d3SankeyRight,
-  [SankeyNodeAlignment.center]: d3SankeyCenter,
-  [SankeyNodeAlignment.justify]: d3SankeyJustify,
+  left: d3SankeyLeft,
+  right: d3SankeyRight,
+  center: d3SankeyCenter,
+  justify: d3SankeyJustify,
 };
 
 /**
@@ -157,9 +157,9 @@ export const draw = function (text: string, id: string, _version: string, diagOb
     .attr('class', 'link')
     .style('mix-blend-mode', 'multiply');
 
-  const linkColor = conf?.linkColor || SankeyLinkColor.gradient;
+  const linkColor = conf?.linkColor || 'gradient';
 
-  if (linkColor === SankeyLinkColor.gradient) {
+  if (linkColor === 'gradient') {
     const gradient = link
       .append('linearGradient')
       .attr('id', (d: any) => (d.uid = Uid.next('linearGradient-')).id)
@@ -180,13 +180,13 @@ export const draw = function (text: string, id: string, _version: string, diagOb
 
   let coloring: any;
   switch (linkColor) {
-    case SankeyLinkColor.gradient:
+    case 'gradient':
       coloring = (d: any) => d.uid;
       break;
-    case SankeyLinkColor.source:
+    case 'source':
       coloring = (d: any) => colorScheme(d.source.id);
       break;
-    case SankeyLinkColor.target:
+    case 'target':
       coloring = (d: any) => colorScheme(d.target.id);
       break;
     default:

From fbf79ffcc01314c0883bfc77cd5dc19b43ac968d Mon Sep 17 00:00:00 2001
From: Alois Klink <alois@aloisklink.com>
Date: Sun, 2 Jul 2023 23:56:42 +0100
Subject: [PATCH 033/281] refactor: replace TypeScript enum with JS obj

[`const` assertions where added in TypeScript 3.4][1] and can be used
to create enum-like objects in plain JavaScript, that act like
TypeScript enums, but has none of the downsides of TypeScript enums.

[1]: https://devblogs.microsoft.com/typescript/announcing-typescript-3-4/#const-assertions
---
 packages/mermaid/src/config.ts | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/mermaid/src/config.ts b/packages/mermaid/src/config.ts
index 838716e2f..e00663827 100644
--- a/packages/mermaid/src/config.ts
+++ b/packages/mermaid/src/config.ts
@@ -226,9 +226,11 @@ export const reset = (config = siteConfig): void => {
   updateCurrentConfig(config, directives);
 };
 
-enum ConfigWarning {
-  'LAZY_LOAD_DEPRECATED' = 'The configuration options lazyLoadedDiagrams and loadExternalDiagramsAtStartup are deprecated. Please use registerExternalDiagrams instead.',
-}
+const ConfigWarning = {
+  LAZY_LOAD_DEPRECATED:
+    'The configuration options lazyLoadedDiagrams and loadExternalDiagramsAtStartup are deprecated. Please use registerExternalDiagrams instead.',
+} as const;
+
 type ConfigWarningStrings = keyof typeof ConfigWarning;
 const issuedWarnings: { [key in ConfigWarningStrings]?: boolean } = {};
 const issueWarning = (warning: ConfigWarningStrings) => {

From 79688a1dc10139c7d751c270645dd368f85f3d38 Mon Sep 17 00:00:00 2001
From: Alois Klink <alois@aloisklink.com>
Date: Mon, 3 Jul 2023 00:04:16 +0100
Subject: [PATCH 034/281] build: forbid using TypeScript enums using eslint

[TypeScript enums][1] are an unusual TypeScript feature, because it's
one of the only features that is "not a type-level extension of
JavaScript".

This means TypeScript generates custom code for enums, which can cause a
bunch of issues, especially as this custom code can be built differently
depending on which bundler you use, and because of this, many people
discourage the use of enums:

- [The Dangers of TypeScript Enums][2]
- [Tidy TypeScript: Prefer union types over enums][3]
- [TypeScript: Handbook - Enums # Objects vs Enums][4]

I've added an ESLint rule that forbids TypeScript enums, as in most
cases, it's better to use string literals instead, e.g. like
`type a = "a" | "b" | "c";`.

[1]: https://www.typescriptlang.org/docs/handbook/enums.html#string-enums
[2]: https://dev.to/azure/the-dangers-of-typescript-enums-55pd
[3]: https://fettblog.eu/tidy-typescript-avoid-enums/
[4]: https://www.typescriptlang.org/docs/handbook/enums.html#objects-vs-enums
---
 .eslintrc.cjs | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index e6f99a8bf..342d15d9f 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -123,6 +123,14 @@ module.exports = {
       files: ['*.{ts,tsx}'],
       plugins: ['tsdoc'],
       rules: {
+        'no-restricted-syntax': [
+          'error',
+          {
+            selector: 'TSEnumDeclaration',
+            message:
+              'Prefer using TypeScript union types over TypeScript enum, since TypeScript enums have a bunch of issues, see https://dev.to/dvddpl/whats-the-problem-with-typescript-enums-2okj',
+          },
+        ],
         'tsdoc/syntax': 'error',
       },
     },

From d6731a07db9c52e20a0441ff401f4cd50ebde2ed Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Mon, 3 Jul 2023 05:18:01 +0000
Subject: [PATCH 035/281] Update all patch dependencies

---
 packages/mermaid/src/docs/package.json |   2 +-
 pnpm-lock.yaml                         | 394 ++++++++++++++++++++++---
 2 files changed, 351 insertions(+), 45 deletions(-)

diff --git a/packages/mermaid/src/docs/package.json b/packages/mermaid/src/docs/package.json
index f24f9f4bc..6e1934022 100644
--- a/packages/mermaid/src/docs/package.json
+++ b/packages/mermaid/src/docs/package.json
@@ -30,7 +30,7 @@
     "unplugin-vue-components": "^0.25.0",
     "vite": "^4.3.3",
     "vite-plugin-pwa": "^0.16.0",
-    "vitepress": "1.0.0-beta.3",
+    "vitepress": "1.0.0-beta.5",
     "workbox-window": "^7.0.0"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9d28e9e50..832703bae 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -446,7 +446,7 @@ importers:
         version: 1.1.0
       unocss:
         specifier: ^0.53.0
-        version: 0.53.0(postcss@8.4.23)(rollup@2.79.1)(vite@4.3.3)
+        version: 0.53.0(postcss@8.4.24)(rollup@2.79.1)(vite@4.3.3)
       unplugin-vue-components:
         specifier: ^0.25.0
         version: 0.25.0(rollup@2.79.1)(vue@3.2.47)
@@ -457,8 +457,8 @@ importers:
         specifier: ^0.16.0
         version: 0.16.0(vite@4.3.3)(workbox-build@7.0.0)(workbox-window@7.0.0)
       vitepress:
-        specifier: 1.0.0-beta.3
-        version: 1.0.0-beta.3(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0)
+        specifier: 1.0.0-beta.5
+        version: 1.0.0-beta.5(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0)
       workbox-window:
         specifier: ^7.0.0
         version: 7.0.0
@@ -2863,6 +2863,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/android-arm64@0.18.11:
+    resolution: {integrity: sha512-snieiq75Z1z5LJX9cduSAjUr7vEI1OdlzFPMw0HH5YI7qQHDd3qs+WZoMrWYDsfRJSq36lIA6mfZBkvL46KoIw==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/android-arm@0.17.18:
     resolution: {integrity: sha512-EmwL+vUBZJ7mhFCs5lA4ZimpUH3WMAoqvOIYhVQwdIgSpHC8ImHdsRyhHAVxpDYUSm0lWvd63z0XH1IlImS2Qw==}
     engines: {node: '>=12'}
@@ -2881,6 +2890,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/android-arm@0.18.11:
+    resolution: {integrity: sha512-q4qlUf5ucwbUJZXF5tEQ8LF7y0Nk4P58hOsGk3ucY0oCwgQqAnqXVbUuahCddVHfrxmpyewRpiTHwVHIETYu7Q==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/android-x64@0.17.18:
     resolution: {integrity: sha512-x+0efYNBF3NPW2Xc5bFOSFW7tTXdAcpfEg2nXmxegm4mJuVeS+i109m/7HMiOQ6M12aVGGFlqJX3RhNdYM2lWg==}
     engines: {node: '>=12'}
@@ -2899,6 +2917,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/android-x64@0.18.11:
+    resolution: {integrity: sha512-iPuoxQEV34+hTF6FT7om+Qwziv1U519lEOvekXO9zaMMlT9+XneAhKL32DW3H7okrCOBQ44BMihE8dclbZtTuw==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/darwin-arm64@0.17.18:
     resolution: {integrity: sha512-6tY+djEAdF48M1ONWnQb1C+6LiXrKjmqjzPNPWXhu/GzOHTHX2nh8Mo2ZAmBFg0kIodHhciEgUBtcYCAIjGbjQ==}
     engines: {node: '>=12'}
@@ -2917,6 +2944,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/darwin-arm64@0.18.11:
+    resolution: {integrity: sha512-Gm0QkI3k402OpfMKyQEEMG0RuW2LQsSmI6OeO4El2ojJMoF5NLYb3qMIjvbG/lbMeLOGiW6ooU8xqc+S0fgz2w==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/darwin-x64@0.17.18:
     resolution: {integrity: sha512-Qq84ykvLvya3dO49wVC9FFCNUfSrQJLbxhoQk/TE1r6MjHo3sFF2tlJCwMjhkBVq3/ahUisj7+EpRSz0/+8+9A==}
     engines: {node: '>=12'}
@@ -2935,6 +2971,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/darwin-x64@0.18.11:
+    resolution: {integrity: sha512-N15Vzy0YNHu6cfyDOjiyfJlRJCB/ngKOAvoBf1qybG3eOq0SL2Lutzz9N7DYUbb7Q23XtHPn6lMDF6uWbGv9Fw==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/freebsd-arm64@0.17.18:
     resolution: {integrity: sha512-fw/ZfxfAzuHfaQeMDhbzxp9mc+mHn1Y94VDHFHjGvt2Uxl10mT4CDavHm+/L9KG441t1QdABqkVYwakMUeyLRA==}
     engines: {node: '>=12'}
@@ -2953,6 +2998,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/freebsd-arm64@0.18.11:
+    resolution: {integrity: sha512-atEyuq6a3omEY5qAh5jIORWk8MzFnCpSTUruBgeyN9jZq1K/QI9uke0ATi3MHu4L8c59CnIi4+1jDKMuqmR71A==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/freebsd-x64@0.17.18:
     resolution: {integrity: sha512-FQFbRtTaEi8ZBi/A6kxOC0V0E9B/97vPdYjY9NdawyLd4Qk5VD5g2pbWN2VR1c0xhzcJm74HWpObPszWC+qTew==}
     engines: {node: '>=12'}
@@ -2971,6 +3025,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/freebsd-x64@0.18.11:
+    resolution: {integrity: sha512-XtuPrEfBj/YYYnAAB7KcorzzpGTvOr/dTtXPGesRfmflqhA4LMF0Gh/n5+a9JBzPuJ+CGk17CA++Hmr1F/gI0Q==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/linux-arm64@0.17.18:
     resolution: {integrity: sha512-R7pZvQZFOY2sxUG8P6A21eq6q+eBv7JPQYIybHVf1XkQYC+lT7nDBdC7wWKTrbvMXKRaGudp/dzZCwL/863mZQ==}
     engines: {node: '>=12'}
@@ -2989,6 +3052,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/linux-arm64@0.18.11:
+    resolution: {integrity: sha512-c6Vh2WS9VFKxKZ2TvJdA7gdy0n6eSy+yunBvv4aqNCEhSWVor1TU43wNRp2YLO9Vng2G+W94aRz+ILDSwAiYog==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/linux-arm@0.17.18:
     resolution: {integrity: sha512-jW+UCM40LzHcouIaqv3e/oRs0JM76JfhHjCavPxMUti7VAPh8CaGSlS7cmyrdpzSk7A+8f0hiedHqr/LMnfijg==}
     engines: {node: '>=12'}
@@ -3007,6 +3079,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/linux-arm@0.18.11:
+    resolution: {integrity: sha512-Idipz+Taso/toi2ETugShXjQ3S59b6m62KmLHkJlSq/cBejixmIydqrtM2XTvNCywFl3VC7SreSf6NV0i6sRyg==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/linux-ia32@0.17.18:
     resolution: {integrity: sha512-ygIMc3I7wxgXIxk6j3V00VlABIjq260i967Cp9BNAk5pOOpIXmd1RFQJQX9Io7KRsthDrQYrtcx7QCof4o3ZoQ==}
     engines: {node: '>=12'}
@@ -3025,6 +3106,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/linux-ia32@0.18.11:
+    resolution: {integrity: sha512-S3hkIF6KUqRh9n1Q0dSyYcWmcVa9Cg+mSoZEfFuzoYXXsk6196qndrM+ZiHNwpZKi3XOXpShZZ+9dfN5ykqjjw==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/linux-loong64@0.17.18:
     resolution: {integrity: sha512-bvPG+MyFs5ZlwYclCG1D744oHk1Pv7j8psF5TfYx7otCVmcJsEXgFEhQkbhNW8otDHL1a2KDINW20cfCgnzgMQ==}
     engines: {node: '>=12'}
@@ -3043,6 +3133,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/linux-loong64@0.18.11:
+    resolution: {integrity: sha512-MRESANOoObQINBA+RMZW+Z0TJWpibtE7cPFnahzyQHDCA9X9LOmGh68MVimZlM9J8n5Ia8lU773te6O3ILW8kw==}
+    engines: {node: '>=12'}
+    cpu: [loong64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/linux-mips64el@0.17.18:
     resolution: {integrity: sha512-oVqckATOAGuiUOa6wr8TXaVPSa+6IwVJrGidmNZS1cZVx0HqkTMkqFGD2HIx9H1RvOwFeWYdaYbdY6B89KUMxA==}
     engines: {node: '>=12'}
@@ -3061,6 +3160,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/linux-mips64el@0.18.11:
+    resolution: {integrity: sha512-qVyPIZrXNMOLYegtD1u8EBccCrBVshxMrn5MkuFc3mEVsw7CCQHaqZ4jm9hbn4gWY95XFnb7i4SsT3eflxZsUg==}
+    engines: {node: '>=12'}
+    cpu: [mips64el]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/linux-ppc64@0.17.18:
     resolution: {integrity: sha512-3dLlQO+b/LnQNxgH4l9rqa2/IwRJVN9u/bK63FhOPB4xqiRqlQAU0qDU3JJuf0BmaH0yytTBdoSBHrb2jqc5qQ==}
     engines: {node: '>=12'}
@@ -3079,6 +3187,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/linux-ppc64@0.18.11:
+    resolution: {integrity: sha512-T3yd8vJXfPirZaUOoA9D2ZjxZX4Gr3QuC3GztBJA6PklLotc/7sXTOuuRkhE9W/5JvJP/K9b99ayPNAD+R+4qQ==}
+    engines: {node: '>=12'}
+    cpu: [ppc64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/linux-riscv64@0.17.18:
     resolution: {integrity: sha512-/x7leOyDPjZV3TcsdfrSI107zItVnsX1q2nho7hbbQoKnmoeUWjs+08rKKt4AUXju7+3aRZSsKrJtaRmsdL1xA==}
     engines: {node: '>=12'}
@@ -3097,6 +3214,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/linux-riscv64@0.18.11:
+    resolution: {integrity: sha512-evUoRPWiwuFk++snjH9e2cAjF5VVSTj+Dnf+rkO/Q20tRqv+644279TZlPK8nUGunjPAtQRCj1jQkDAvL6rm2w==}
+    engines: {node: '>=12'}
+    cpu: [riscv64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/linux-s390x@0.17.18:
     resolution: {integrity: sha512-cX0I8Q9xQkL/6F5zWdYmVf5JSQt+ZfZD2bJudZrWD+4mnUvoZ3TDDXtDX2mUaq6upMFv9FlfIh4Gfun0tbGzuw==}
     engines: {node: '>=12'}
@@ -3115,6 +3241,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/linux-s390x@0.18.11:
+    resolution: {integrity: sha512-/SlRJ15XR6i93gRWquRxYCfhTeC5PdqEapKoLbX63PLCmAkXZHY2uQm2l9bN0oPHBsOw2IswRZctMYS0MijFcg==}
+    engines: {node: '>=12'}
+    cpu: [s390x]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/linux-x64@0.17.18:
     resolution: {integrity: sha512-66RmRsPlYy4jFl0vG80GcNRdirx4nVWAzJmXkevgphP1qf4dsLQCpSKGM3DUQCojwU1hnepI63gNZdrr02wHUA==}
     engines: {node: '>=12'}
@@ -3133,6 +3268,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/linux-x64@0.18.11:
+    resolution: {integrity: sha512-xcncej+wF16WEmIwPtCHi0qmx1FweBqgsRtEL1mSHLFR6/mb3GEZfLQnx+pUDfRDEM4DQF8dpXIW7eDOZl1IbA==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/netbsd-x64@0.17.18:
     resolution: {integrity: sha512-95IRY7mI2yrkLlTLb1gpDxdC5WLC5mZDi+kA9dmM5XAGxCME0F8i4bYH4jZreaJ6lIZ0B8hTrweqG1fUyW7jbg==}
     engines: {node: '>=12'}
@@ -3151,6 +3295,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/netbsd-x64@0.18.11:
+    resolution: {integrity: sha512-aSjMHj/F7BuS1CptSXNg6S3M4F3bLp5wfFPIJM+Km2NfIVfFKhdmfHF9frhiCLIGVzDziggqWll0B+9AUbud/Q==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [netbsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/openbsd-x64@0.17.18:
     resolution: {integrity: sha512-WevVOgcng+8hSZ4Q3BKL3n1xTv5H6Nb53cBrtzzEjDbbnOmucEVcZeGCsCOi9bAOcDYEeBZbD2SJNBxlfP3qiA==}
     engines: {node: '>=12'}
@@ -3169,6 +3322,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/openbsd-x64@0.18.11:
+    resolution: {integrity: sha512-tNBq+6XIBZtht0xJGv7IBB5XaSyvYPCm1PxJ33zLQONdZoLVM0bgGqUrXnJyiEguD9LU4AHiu+GCXy/Hm9LsdQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [openbsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/sunos-x64@0.17.18:
     resolution: {integrity: sha512-Rzf4QfQagnwhQXVBS3BYUlxmEbcV7MY+BH5vfDZekU5eYpcffHSyjU8T0xucKVuOcdCsMo+Ur5wmgQJH2GfNrg==}
     engines: {node: '>=12'}
@@ -3187,6 +3349,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/sunos-x64@0.18.11:
+    resolution: {integrity: sha512-kxfbDOrH4dHuAAOhr7D7EqaYf+W45LsAOOhAet99EyuxxQmjbk8M9N4ezHcEiCYPaiW8Dj3K26Z2V17Gt6p3ng==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [sunos]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/win32-arm64@0.17.18:
     resolution: {integrity: sha512-Kb3Ko/KKaWhjeAm2YoT/cNZaHaD1Yk/pa3FTsmqo9uFh1D1Rfco7BBLIPdDOozrObj2sahslFuAQGvWbgWldAg==}
     engines: {node: '>=12'}
@@ -3205,6 +3376,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/win32-arm64@0.18.11:
+    resolution: {integrity: sha512-Sh0dDRyk1Xi348idbal7lZyfSkjhJsdFeuC13zqdipsvMetlGiFQNdO+Yfp6f6B4FbyQm7qsk16yaZk25LChzg==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/win32-ia32@0.17.18:
     resolution: {integrity: sha512-0/xUMIdkVHwkvxfbd5+lfG7mHOf2FRrxNbPiKWg9C4fFrB8H0guClmaM3BFiRUYrznVoyxTIyC/Ou2B7QQSwmw==}
     engines: {node: '>=12'}
@@ -3223,6 +3403,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/win32-ia32@0.18.11:
+    resolution: {integrity: sha512-o9JUIKF1j0rqJTFbIoF4bXj6rvrTZYOrfRcGyL0Vm5uJ/j5CkBD/51tpdxe9lXEDouhRgdr/BYzUrDOvrWwJpg==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/win32-x64@0.17.18:
     resolution: {integrity: sha512-qU25Ma1I3NqTSHJUOKi9sAH1/Mzuvlke0ioMJRthLXKm7JiSKVwFghlGbDLOO2sARECGhja4xYfRAZNPAkooYg==}
     engines: {node: '>=12'}
@@ -3241,6 +3430,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/win32-x64@0.18.11:
+    resolution: {integrity: sha512-rQI4cjLHd2hGsM1LqgDI7oOCYbQ6IBOVsX9ejuRMSze0GqXUG2ekwiKkiBU1pRGSeCqFFHxTrcEydB2Hyoz9CA==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@eslint-community/eslint-utils@4.4.0(eslint@8.39.0):
     resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -4732,7 +4930,7 @@ packages:
       sirv: 2.0.3
     dev: true
 
-  /@unocss/postcss@0.53.0(postcss@8.4.23):
+  /@unocss/postcss@0.53.0(postcss@8.4.24):
     resolution: {integrity: sha512-q+5aDvkwP1eEhDmdz32WrwsGEEcJdQLy3apiU/df+CaL71HATvUfMZJVZbXZlFqoed703c+cGLHOhRHMPDk/dw==}
     engines: {node: '>=14'}
     peerDependencies:
@@ -4743,7 +4941,7 @@ packages:
       css-tree: 2.3.1
       fast-glob: 3.2.12
       magic-string: 0.30.0
-      postcss: 8.4.23
+      postcss: 8.4.24
     dev: true
 
   /@unocss/preset-attributify@0.53.0:
@@ -4893,14 +5091,14 @@ packages:
       vue: 3.3.4
     dev: true
 
-  /@vitejs/plugin-vue@4.2.3(vite@4.3.9)(vue@3.3.4):
+  /@vitejs/plugin-vue@4.2.3(vite@4.4.0-beta.3)(vue@3.3.4):
     resolution: {integrity: sha512-R6JDUfiZbJA9cMiguQ7jxALsgiprjBeHL5ikpXfJCH62pPHtI+JdJ5xWj6Ev73yXSlYl86+blXn1kZHQ7uElxw==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
       vite: ^4.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 4.3.9(@types/node@18.16.0)
+      vite: 4.4.0-beta.3(@types/node@18.16.0)
       vue: 3.3.4
     dev: true
 
@@ -5029,7 +5227,7 @@ packages:
       '@vue/shared': 3.2.47
       estree-walker: 2.0.2
       magic-string: 0.25.9
-      postcss: 8.4.23
+      postcss: 8.4.24
       source-map: 0.6.1
 
   /@vue/compiler-sfc@3.3.4:
@@ -5043,7 +5241,7 @@ packages:
       '@vue/shared': 3.3.4
       estree-walker: 2.0.2
       magic-string: 0.30.0
-      postcss: 8.4.23
+      postcss: 8.4.24
       source-map-js: 1.0.2
 
   /@vue/compiler-ssr@3.2.47:
@@ -5157,14 +5355,26 @@ packages:
       '@types/web-bluetooth': 0.0.17
       '@vueuse/metadata': 10.1.2
       '@vueuse/shared': 10.1.2(vue@3.3.4)
-      vue-demi: 0.14.0(vue@3.3.4)
+      vue-demi: 0.14.5(vue@3.3.4)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
     dev: true
 
-  /@vueuse/integrations@10.1.2(focus-trap@7.4.3)(vue@3.3.4):
-    resolution: {integrity: sha512-wUpG3Wv6LiWerOwCzOAM0iGhNQ4vfFUTkhj/xQy7TLXduh2M3D8N08aS0KqlxsejY6R8NLxydDIM+68QfHZZ8Q==}
+  /@vueuse/core@10.2.1(vue@3.3.4):
+    resolution: {integrity: sha512-c441bfMbkAwTNwVRHQ0zdYZNETK//P84rC01aP2Uy/aRFCiie9NE/k9KdIXbno0eDYP5NPUuWv0aA/I4Unr/7w==}
+    dependencies:
+      '@types/web-bluetooth': 0.0.17
+      '@vueuse/metadata': 10.2.1
+      '@vueuse/shared': 10.2.1(vue@3.3.4)
+      vue-demi: 0.14.5(vue@3.3.4)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: true
+
+  /@vueuse/integrations@10.2.1(focus-trap@7.4.3)(vue@3.3.4):
+    resolution: {integrity: sha512-FDP5lni+z9FjHE9H3xuvwSjoRV9U8jmDvJpmHPCBjUgPGYRynwb60eHWXCFJXLUtb4gSIHy0e+iaEbrKdalCkQ==}
     peerDependencies:
       async-validator: '*'
       axios: '*'
@@ -5204,10 +5414,10 @@ packages:
       universal-cookie:
         optional: true
     dependencies:
-      '@vueuse/core': 10.1.2(vue@3.3.4)
-      '@vueuse/shared': 10.1.2(vue@3.3.4)
+      '@vueuse/core': 10.2.1(vue@3.3.4)
+      '@vueuse/shared': 10.2.1(vue@3.3.4)
       focus-trap: 7.4.3
-      vue-demi: 0.14.0(vue@3.3.4)
+      vue-demi: 0.14.5(vue@3.3.4)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -5221,6 +5431,10 @@ packages:
     resolution: {integrity: sha512-3mc5BqN9aU2SqBeBuWE7ne4OtXHoHKggNgxZR2K+zIW4YLsy6xoZ4/9vErQs6tvoKDX6QAqm3lvsrv0mczAwIQ==}
     dev: true
 
+  /@vueuse/metadata@10.2.1:
+    resolution: {integrity: sha512-3Gt68mY/i6bQvFqx7cuGBzrCCQu17OBaGWS5JdwISpMsHnMKKjC2FeB5OAfMcCQ0oINfADP3i9A4PPRo0peHdQ==}
+    dev: true
+
   /@vueuse/shared@10.1.0(vue@3.2.47):
     resolution: {integrity: sha512-2X52ogu12i9DkKOQ01yeb/BKg9UO87RNnpm5sXkQvyORlbq8ONS5l39MYkjkeVWWjdT0teJru7a2S41dmHmqjQ==}
     dependencies:
@@ -5233,7 +5447,16 @@ packages:
   /@vueuse/shared@10.1.2(vue@3.3.4):
     resolution: {integrity: sha512-1uoUTPBlgyscK9v6ScGeVYDDzlPSFXBlxuK7SfrDGyUTBiznb3mNceqhwvZHjtDRELZEN79V5uWPTF1VDV8svA==}
     dependencies:
-      vue-demi: 0.14.0(vue@3.3.4)
+      vue-demi: 0.14.5(vue@3.3.4)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: true
+
+  /@vueuse/shared@10.2.1(vue@3.3.4):
+    resolution: {integrity: sha512-QWHq2bSuGptkcxx4f4M/fBYC3Y8d3M2UYyLsyzoPgEoVzJURQ0oJeWXu79OiLlBb8gTKkqe4mO85T/sf39mmiw==}
+    dependencies:
+      vue-demi: 0.14.5(vue@3.3.4)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -8012,6 +8235,36 @@ packages:
       '@esbuild/win32-x64': 0.18.0
     dev: true
 
+  /esbuild@0.18.11:
+    resolution: {integrity: sha512-i8u6mQF0JKJUlGR3OdFLKldJQMMs8OqM9Cc3UCi9XXziJ9WERM5bfkHaEAy0YAvPRMgqSW55W7xYn84XtEFTtA==}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    optionalDependencies:
+      '@esbuild/android-arm': 0.18.11
+      '@esbuild/android-arm64': 0.18.11
+      '@esbuild/android-x64': 0.18.11
+      '@esbuild/darwin-arm64': 0.18.11
+      '@esbuild/darwin-x64': 0.18.11
+      '@esbuild/freebsd-arm64': 0.18.11
+      '@esbuild/freebsd-x64': 0.18.11
+      '@esbuild/linux-arm': 0.18.11
+      '@esbuild/linux-arm64': 0.18.11
+      '@esbuild/linux-ia32': 0.18.11
+      '@esbuild/linux-loong64': 0.18.11
+      '@esbuild/linux-mips64el': 0.18.11
+      '@esbuild/linux-ppc64': 0.18.11
+      '@esbuild/linux-riscv64': 0.18.11
+      '@esbuild/linux-s390x': 0.18.11
+      '@esbuild/linux-x64': 0.18.11
+      '@esbuild/netbsd-x64': 0.18.11
+      '@esbuild/openbsd-x64': 0.18.11
+      '@esbuild/sunos-x64': 0.18.11
+      '@esbuild/win32-arm64': 0.18.11
+      '@esbuild/win32-ia32': 0.18.11
+      '@esbuild/win32-x64': 0.18.11
+    dev: true
+
   /escalade@3.1.1:
     resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
     engines: {node: '>=6'}
@@ -12440,29 +12693,29 @@ packages:
     hasBin: true
     dev: true
 
-  /postcss-import@15.1.0(postcss@8.4.23):
+  /postcss-import@15.1.0(postcss@8.4.24):
     resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       postcss: ^8.0.0
     dependencies:
-      postcss: 8.4.23
+      postcss: 8.4.24
       postcss-value-parser: 4.2.0
       read-cache: 1.0.0
       resolve: 1.22.2
     dev: false
 
-  /postcss-js@4.0.1(postcss@8.4.23):
+  /postcss-js@4.0.1(postcss@8.4.24):
     resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
     engines: {node: ^12 || ^14 || >= 16}
     peerDependencies:
       postcss: ^8.4.21
     dependencies:
       camelcase-css: 2.0.1
-      postcss: 8.4.23
+      postcss: 8.4.24
     dev: false
 
-  /postcss-load-config@4.0.1(postcss@8.4.23)(ts-node@10.9.1):
+  /postcss-load-config@4.0.1(postcss@8.4.24)(ts-node@10.9.1):
     resolution: {integrity: sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==}
     engines: {node: '>= 14'}
     peerDependencies:
@@ -12475,18 +12728,18 @@ packages:
         optional: true
     dependencies:
       lilconfig: 2.1.0
-      postcss: 8.4.23
+      postcss: 8.4.24
       ts-node: 10.9.1(@types/node@18.16.0)(typescript@5.1.3)
       yaml: 2.2.2
     dev: false
 
-  /postcss-nested@6.0.1(postcss@8.4.23):
+  /postcss-nested@6.0.1(postcss@8.4.24):
     resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==}
     engines: {node: '>=12.0'}
     peerDependencies:
       postcss: ^8.2.14
     dependencies:
-      postcss: 8.4.23
+      postcss: 8.4.24
       postcss-selector-parser: 6.0.13
     dev: false
 
@@ -12510,6 +12763,14 @@ packages:
       picocolors: 1.0.0
       source-map-js: 1.0.2
 
+  /postcss@8.4.24:
+    resolution: {integrity: sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==}
+    engines: {node: ^10 || ^12 || >=14}
+    dependencies:
+      nanoid: 3.3.6
+      picocolors: 1.0.0
+      source-map-js: 1.0.2
+
   /preact@10.11.0:
     resolution: {integrity: sha512-Fk6+vB2kb6mSJfDgODq0YDhMfl0HNtK5+Uc9QqECO4nlyPAQwCI+BKyWO//idA7ikV7o+0Fm6LQmNuQi1wXI1w==}
     dev: true
@@ -13156,6 +13417,14 @@ packages:
       fsevents: 2.3.2
     dev: true
 
+  /rollup@3.26.0:
+    resolution: {integrity: sha512-YzJH0eunH2hr3knvF3i6IkLO/jTjAEwU4HoMUbQl4//Tnl3ou0e7P5SjxdDr8HQJdeUJShlbEHXrrnEHy1l7Yg==}
+    engines: {node: '>=14.18.0', npm: '>=8.0.0'}
+    hasBin: true
+    optionalDependencies:
+      fsevents: 2.3.2
+    dev: true
+
   /rrweb-cssom@0.6.0:
     resolution: {integrity: sha512-APM0Gt1KoXBz0iIkkdB/kfvGOwC4UuJFeG/c+yV7wSc7q96cG/kJ0HiYCnzivD9SB53cLV1MlHFNfOuPaadYSw==}
     dev: true
@@ -13436,8 +13705,8 @@ packages:
       vscode-textmate: 8.0.0
     dev: true
 
-  /shiki@0.14.2:
-    resolution: {integrity: sha512-ltSZlSLOuSY0M0Y75KA+ieRaZ0Trf5Wl3gutE7jzLuIcWxLp5i/uEnLoQWNvgKXQ5OMpGkJnVMRLAuzjc0LJ2A==}
+  /shiki@0.14.3:
+    resolution: {integrity: sha512-U3S/a+b0KS+UkTyMjoNojvTgrBHjgp7L6ovhFVZsXmBGnVdQ4K4U9oK0z63w538S91ATngv1vXigHCSWOwnr+g==}
     dependencies:
       ansi-sequence-parser: 1.1.0
       jsonc-parser: 3.2.0
@@ -13986,11 +14255,11 @@ packages:
       normalize-path: 3.0.0
       object-hash: 3.0.0
       picocolors: 1.0.0
-      postcss: 8.4.23
-      postcss-import: 15.1.0(postcss@8.4.23)
-      postcss-js: 4.0.1(postcss@8.4.23)
-      postcss-load-config: 4.0.1(postcss@8.4.23)(ts-node@10.9.1)
-      postcss-nested: 6.0.1(postcss@8.4.23)
+      postcss: 8.4.24
+      postcss-import: 15.1.0(postcss@8.4.24)
+      postcss-js: 4.0.1(postcss@8.4.24)
+      postcss-load-config: 4.0.1(postcss@8.4.24)(ts-node@10.9.1)
+      postcss-nested: 6.0.1(postcss@8.4.24)
       postcss-selector-parser: 6.0.13
       postcss-value-parser: 4.2.0
       resolve: 1.22.2
@@ -14596,7 +14865,7 @@ packages:
     engines: {node: '>= 10.0.0'}
     dev: true
 
-  /unocss@0.53.0(postcss@8.4.23)(rollup@2.79.1)(vite@4.3.3):
+  /unocss@0.53.0(postcss@8.4.24)(rollup@2.79.1)(vite@4.3.3):
     resolution: {integrity: sha512-kY4h5ERiDYlSnL2X+hbDfh+uaF7QNouy7j51GOTUr3Q0aaWehaNd05b15SjHrab559dEC0mYfrSEdh/DnCK1cw==}
     engines: {node: '>=14'}
     peerDependencies:
@@ -14609,7 +14878,7 @@ packages:
       '@unocss/cli': 0.53.0(rollup@2.79.1)
       '@unocss/core': 0.53.0
       '@unocss/extractor-arbitrary-variants': 0.53.0
-      '@unocss/postcss': 0.53.0(postcss@8.4.23)
+      '@unocss/postcss': 0.53.0(postcss@8.4.24)
       '@unocss/preset-attributify': 0.53.0
       '@unocss/preset-icons': 0.53.0
       '@unocss/preset-mini': 0.53.0
@@ -14916,8 +15185,8 @@ packages:
     dependencies:
       '@types/node': 18.16.0
       esbuild: 0.17.18
-      postcss: 8.4.23
-      rollup: 3.21.0
+      postcss: 8.4.24
+      rollup: 3.26.0
     optionalDependencies:
       fsevents: 2.3.2
     dev: true
@@ -14955,6 +15224,42 @@ packages:
       fsevents: 2.3.2
     dev: true
 
+  /vite@4.4.0-beta.3(@types/node@18.16.0):
+    resolution: {integrity: sha512-IC/thYTvArOFRJ4qvvudnu4KKZOVc+gduS3I9OfC5SbP/Rf4kkP7z6Of2QpKeOSVqwIK24khW6VOUmVD/0yzSQ==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': '>= 14'
+      less: '*'
+      lightningcss: ^1.21.0
+      sass: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.4.0
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+    dependencies:
+      '@types/node': 18.16.0
+      esbuild: 0.18.11
+      postcss: 8.4.24
+      rollup: 3.26.0
+    optionalDependencies:
+      fsevents: 2.3.2
+    dev: true
+
   /vitepress-plugin-search@1.0.4-alpha.20(flexsearch@0.7.31)(vitepress@1.0.0-alpha.72)(vue@3.3.4):
     resolution: {integrity: sha512-zG+ev9pw1Mg7htABlFCNXb8XwnKN+qfTKw+vU0Ers6RIrABx+45EAAFBoaL1mEpl1FRFn1o/dQ7F4b8GP6HdGQ==}
     engines: {node: ^14.13.1 || ^16.7.0 || >=18}
@@ -15001,22 +15306,22 @@ packages:
       - terser
     dev: true
 
-  /vitepress@1.0.0-beta.3(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0):
-    resolution: {integrity: sha512-GR5Pvr/o343NN1M4Na1shhDYZRrQbjmLq7WE0lla0H8iDPAsHE8agTHLWfu3FWx+3q2KA29sv16+0O9RQKGjlA==}
+  /vitepress@1.0.0-beta.5(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0):
+    resolution: {integrity: sha512-/RjqqRsSEKkzF6HhK5e5Ij+bZ7ETb9jNCRRgIMm10gJ+ZLC3D1OqkE465lEqCeJUgt2HZ6jmWjDqIBfrJSpv7w==}
     hasBin: true
     dependencies:
       '@docsearch/css': 3.5.1
       '@docsearch/js': 3.5.1(@algolia/client-search@4.14.2)(search-insights@2.6.0)
-      '@vitejs/plugin-vue': 4.2.3(vite@4.3.9)(vue@3.3.4)
+      '@vitejs/plugin-vue': 4.2.3(vite@4.4.0-beta.3)(vue@3.3.4)
       '@vue/devtools-api': 6.5.0
-      '@vueuse/core': 10.1.2(vue@3.3.4)
-      '@vueuse/integrations': 10.1.2(focus-trap@7.4.3)(vue@3.3.4)
+      '@vueuse/core': 10.2.1(vue@3.3.4)
+      '@vueuse/integrations': 10.2.1(focus-trap@7.4.3)(vue@3.3.4)
       body-scroll-lock: 4.0.0-beta.0
       focus-trap: 7.4.3
       mark.js: 8.11.1
       minisearch: 6.1.0
-      shiki: 0.14.2
-      vite: 4.3.9(@types/node@18.16.0)
+      shiki: 0.14.3
+      vite: 4.4.0-beta.3(@types/node@18.16.0)
       vue: 3.3.4
     transitivePeerDependencies:
       - '@algolia/client-search'
@@ -15031,6 +15336,7 @@ packages:
       - idb-keyval
       - jwt-decode
       - less
+      - lightningcss
       - nprogress
       - qrcode
       - react
@@ -15168,8 +15474,8 @@ packages:
       vue: 3.2.47
     dev: false
 
-  /vue-demi@0.14.0(vue@3.3.4):
-    resolution: {integrity: sha512-gt58r2ogsNQeVoQ3EhoUAvUsH9xviydl0dWJj7dabBC/2L4uBId7ujtCwDRD0JhkGsV1i0CtfLAeyYKBht9oWg==}
+  /vue-demi@0.14.5(vue@3.3.4):
+    resolution: {integrity: sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==}
     engines: {node: '>=12'}
     hasBin: true
     requiresBuild: true

From 8e15e534eab6d917c1f4f3769de3eafb994b77fe Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Mon, 3 Jul 2023 19:19:11 +0530
Subject: [PATCH 036/281] Add codecov token

---
 .github/workflows/test.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 47b726bd1..ba77d83bc 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -49,3 +49,4 @@ jobs:
           name: mermaid-codecov
           fail_ci_if_error: false
           verbose: true
+          token: 6845cc80-77ee-4e17-85a1-026cd95e0766

From 288f51216d06f8e834a11d5d0c9ee679b0aedb16 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Mon, 3 Jul 2023 21:01:04 +0530
Subject: [PATCH 037/281] Add codecov token

---
 .github/workflows/e2e.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index c204d5872..63e20e575 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -54,6 +54,7 @@ jobs:
           name: mermaid-codecov
           fail_ci_if_error: false
           verbose: true
+          token: 6845cc80-77ee-4e17-85a1-026cd95e0766
       - name: Upload Artifacts
         uses: actions/upload-artifact@v3
         if: ${{ failure() && steps.cypress.conclusion == 'failure' }}

From d5021cab1d31281548ba9f6f701c297c8ee848e7 Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Mon, 3 Jul 2023 18:57:26 +0300
Subject: [PATCH 038/281] Remove double parsing

---
 packages/mermaid/src/diagrams/class/classRenderer.js       | 2 --
 packages/mermaid/src/diagrams/er/erRenderer.js             | 7 -------
 packages/mermaid/src/diagrams/flowchart/flowRenderer.js    | 7 -------
 packages/mermaid/src/diagrams/gantt/ganttRenderer.js       | 2 --
 packages/mermaid/src/diagrams/git/gitGraphRenderer-old.js  | 7 -------
 packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js   | 6 ------
 packages/mermaid/src/diagrams/pie/pieRenderer.js           | 3 ---
 .../src/diagrams/requirement/requirementRenderer.js        | 2 --
 packages/mermaid/src/diagrams/state/stateRenderer.js       | 2 --
 packages/mermaid/src/diagrams/timeline/timelineRenderer.ts | 6 ------
 .../mermaid/src/diagrams/user-journey/journeyRenderer.ts   | 2 --
 11 files changed, 46 deletions(-)

diff --git a/packages/mermaid/src/diagrams/class/classRenderer.js b/packages/mermaid/src/diagrams/class/classRenderer.js
index 3774f7b8c..58def16c2 100644
--- a/packages/mermaid/src/diagrams/class/classRenderer.js
+++ b/packages/mermaid/src/diagrams/class/classRenderer.js
@@ -141,8 +141,6 @@ const insertMarkers = function (elem) {
 export const draw = function (text, id, _version, diagObj) {
   const conf = getConfig().class;
   idCache = {};
-  // diagObj.db.clear();
-  // diagObj.parser.parse(text);
 
   log.info('Rendering diagram ' + text);
 
diff --git a/packages/mermaid/src/diagrams/er/erRenderer.js b/packages/mermaid/src/diagrams/er/erRenderer.js
index 93e22732a..63fb05633 100644
--- a/packages/mermaid/src/diagrams/er/erRenderer.js
+++ b/packages/mermaid/src/diagrams/er/erRenderer.js
@@ -568,13 +568,6 @@ export const draw = function (text, id, _version, diagObj) {
       : select('body');
   // const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
 
-  // Parse the text to populate erDb
-  // try {
-  //   parser.parse(text);
-  // } catch (err) {
-  //   log.debug('Parsing failed');
-  // }
-
   // Get a reference to the svg node that contains the text
   const svg = root.select(`[id='${id}']`);
 
diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer.js b/packages/mermaid/src/diagrams/flowchart/flowRenderer.js
index f69fe93eb..4382aa9a4 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowRenderer.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer.js
@@ -306,13 +306,6 @@ export const draw = function (text, id, _version, diagObj) {
       : select('body');
   const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
 
-  // Parse the graph definition
-  try {
-    diagObj.parser.parse(text);
-  } catch (err) {
-    log.debug('Parsing failed');
-  }
-
   // Fetch the default direction, use TD if none was found
   let dir = diagObj.db.getDirection();
   if (dir === undefined) {
diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
index ff16fef7c..215a4df29 100644
--- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
+++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
@@ -59,8 +59,6 @@ let w;
 export const draw = function (text, id, version, diagObj) {
   const conf = getConfig().gantt;
 
-  // diagObj.db.clear();
-  // parser.parse(text);
   const securityLevel = getConfig().securityLevel;
   // Handle root and Document for when rendering in sandbox mode
   let sandboxElement;
diff --git a/packages/mermaid/src/diagrams/git/gitGraphRenderer-old.js b/packages/mermaid/src/diagrams/git/gitGraphRenderer-old.js
index b8cff72ec..a3b05ad79 100644
--- a/packages/mermaid/src/diagrams/git/gitGraphRenderer-old.js
+++ b/packages/mermaid/src/diagrams/git/gitGraphRenderer-old.js
@@ -1,7 +1,6 @@
 import { curveBasis, line, select } from 'd3';
 
 import db from './gitGraphAst.js';
-import gitGraphParser from './parser/gitGraph.js';
 import { logger } from '../../logger.js';
 import { interpolateToCurve } from '../../utils.js';
 
@@ -328,13 +327,7 @@ function renderLines(svg, commit, direction, branchColor = 0) {
 
 export const draw = function (txt, id, ver) {
   try {
-    const parser = gitGraphParser.parser;
-    parser.yy = db;
-    parser.yy.clear();
-
     logger.debug('in gitgraph renderer', txt + '\n', 'id:', id, ver);
-    // Parse the graph definition
-    parser.parse(txt + '\n');
 
     config = Object.assign(config, apiConfig, db.getOptions());
     logger.debug('effective options', config);
diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js
index 01d675d83..7e741657b 100644
--- a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js
+++ b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js
@@ -167,14 +167,8 @@ function positionNodes(cy) {
 export const draw = async (text, id, version, diagObj) => {
   const conf = getConfig();
 
-  // console.log('Config: ', conf);
   conf.htmlLabels = false;
 
-  // This is done only for throwing the error if the text is not valid.
-  diagObj.db.clear();
-  // Parse the graph definition
-  diagObj.parser.parse(text);
-
   log.debug('Rendering mindmap diagram\n' + text, diagObj.parser);
 
   const securityLevel = getConfig().securityLevel;
diff --git a/packages/mermaid/src/diagrams/pie/pieRenderer.js b/packages/mermaid/src/diagrams/pie/pieRenderer.js
index 1ee34e192..d4242c087 100644
--- a/packages/mermaid/src/diagrams/pie/pieRenderer.js
+++ b/packages/mermaid/src/diagrams/pie/pieRenderer.js
@@ -33,9 +33,6 @@ export const draw = (txt, id, _version, diagObj) => {
     const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
 
     // Parse the Pie Chart definition
-    diagObj.db.clear();
-    diagObj.parser.parse(txt);
-    log.debug('Parsed info diagram');
     const elem = doc.getElementById(id);
     width = elem.parentElement.offsetWidth;
 
diff --git a/packages/mermaid/src/diagrams/requirement/requirementRenderer.js b/packages/mermaid/src/diagrams/requirement/requirementRenderer.js
index b88f5c203..49b782865 100644
--- a/packages/mermaid/src/diagrams/requirement/requirementRenderer.js
+++ b/packages/mermaid/src/diagrams/requirement/requirementRenderer.js
@@ -306,8 +306,6 @@ const elementString = (str) => {
 
 export const draw = (text, id, _version, diagObj) => {
   conf = getConfig().requirement;
-  diagObj.db.clear();
-  diagObj.parser.parse(text);
 
   const securityLevel = conf.securityLevel;
   // Handle root and Document for when rendering in sandbox mode
diff --git a/packages/mermaid/src/diagrams/state/stateRenderer.js b/packages/mermaid/src/diagrams/state/stateRenderer.js
index 74913a748..689d7a0e5 100644
--- a/packages/mermaid/src/diagrams/state/stateRenderer.js
+++ b/packages/mermaid/src/diagrams/state/stateRenderer.js
@@ -57,8 +57,6 @@ export const draw = function (text, id, _version, diagObj) {
       : select('body');
   const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
 
-  // diagObj.db.clear();
-  // parser.parse(text);
   log.debug('Rendering diagram ' + text);
 
   // Fetch the default direction, use TD if none was found
diff --git a/packages/mermaid/src/diagrams/timeline/timelineRenderer.ts b/packages/mermaid/src/diagrams/timeline/timelineRenderer.ts
index 17460bac2..d44174fe4 100644
--- a/packages/mermaid/src/diagrams/timeline/timelineRenderer.ts
+++ b/packages/mermaid/src/diagrams/timeline/timelineRenderer.ts
@@ -30,12 +30,6 @@ export const draw = function (text: string, id: string, version: string, diagObj
   // @ts-expect-error - wrong config?
   const LEFT_MARGIN = conf.leftMargin ?? 50;
 
-  //2. Clear the diagram db before parsing
-  diagObj.db.clear?.();
-
-  //3. Parse the diagram text
-  diagObj.parser.parse(text + '\n');
-
   log.debug('timeline', diagObj.db);
 
   const securityLevel = conf.securityLevel;
diff --git a/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts b/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts
index 9ea880f69..28c83f19d 100644
--- a/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts
+++ b/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts
@@ -49,8 +49,6 @@ const conf = getConfig().journey;
 const LEFT_MARGIN = conf.leftMargin;
 export const draw = function (text, id, version, diagObj) {
   const conf = getConfig().journey;
-  diagObj.db.clear();
-  diagObj.parser.parse(text + '\n');
 
   const securityLevel = getConfig().securityLevel;
   // Handle root and Document for when rendering in sandbox mode

From 5a94256e4f90978ad5dc58c0e8af70478cee9e6a Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Mon, 3 Jul 2023 15:11:02 -0300
Subject: [PATCH 039/281] Allow entity diagram attribute names to start with
 asterisk

---
 .../mermaid/src/diagrams/er/parser/erDiagram.jison     |  2 +-
 .../mermaid/src/diagrams/er/parser/erDiagram.spec.js   | 10 ++++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/mermaid/src/diagrams/er/parser/erDiagram.jison b/packages/mermaid/src/diagrams/er/parser/erDiagram.jison
index 0c6820b49..0a2549268 100644
--- a/packages/mermaid/src/diagrams/er/parser/erDiagram.jison
+++ b/packages/mermaid/src/diagrams/er/parser/erDiagram.jison
@@ -30,7 +30,7 @@ accDescr\s*"{"\s*                                { this.begin("acc_descr_multili
 <block>\s+                      /* skip whitespace in block */
 <block>\b((?:PK)|(?:FK)|(?:UK))\b      return 'ATTRIBUTE_KEY'
 <block>(.*?)[~](.*?)*[~]        return 'ATTRIBUTE_WORD';
-<block>[A-Za-z_][A-Za-z0-9\-_\[\]\(\)]*  return 'ATTRIBUTE_WORD'
+<block>[\*A-Za-z_][A-Za-z0-9\-_\[\]\(\)]*  return 'ATTRIBUTE_WORD'
 <block>\"[^"]*\"                return 'COMMENT';
 <block>[\n]+                    /* nothing */
 <block>"}"                      { this.popState(); return 'BLOCK_STOP'; }
diff --git a/packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js b/packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js
index 6fdc9eaa7..4ab09b2f8 100644
--- a/packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js
+++ b/packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js
@@ -154,6 +154,16 @@ describe('when parsing ER diagram it...', function () {
       expect(entities[entity].attributes[2].attributeName).toBe('author-ref[name](1)');
     });
 
+    it('should allow asterisk at the start of title', function () {
+      const entity = 'BOOK';
+      const attribute = 'string *title';
+
+      erDiagram.parser.parse(`erDiagram\n${entity}{${attribute}}`);
+      const entities = erDb.getEntities();
+      expect(Object.keys(entities).length).toBe(1);
+      expect(entities[entity].attributes.length).toBe(1);
+    });
+
     it('should not allow leading numbers, dashes or brackets', function () {
       const entity = 'BOOK';
       const nonLeadingChars = '0-[]()';

From 12fe6ff26ec4fbb6518611a4a200373a73c01369 Mon Sep 17 00:00:00 2001
From: Lishid <lishid@gmail.com>
Date: Mon, 3 Jul 2023 18:56:00 -0700
Subject: [PATCH 040/281] Fix lint.

---
 packages/mermaid/src/diagrams/flowchart/flowDb.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.js b/packages/mermaid/src/diagrams/flowchart/flowDb.js
index 81a9afb94..ea8fa71d2 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowDb.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowDb.js
@@ -342,7 +342,9 @@ export const setLink = function (ids, linkStr, target) {
   setClass(ids, 'clickable');
 };
 export const getTooltip = function (id) {
-  if (tooltips.hasOwnProperty(id)) return tooltips[id];
+  if (tooltips.hasOwnProperty(id)) {
+    return tooltips[id];
+  }
   return undefined;
 };
 

From 8449a446078ddb5586d0b399f307980448aaf342 Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Wed, 5 Jul 2023 01:15:22 +0300
Subject: [PATCH 041/281] Sankey: Remove duplicated examples

---
 packages/mermaid/src/docs/syntax/sankey.md | 110 ---------------------
 1 file changed, 110 deletions(-)

diff --git a/packages/mermaid/src/docs/syntax/sankey.md b/packages/mermaid/src/docs/syntax/sankey.md
index 32f3663b9..914c7024b 100644
--- a/packages/mermaid/src/docs/syntax/sankey.md
+++ b/packages/mermaid/src/docs/syntax/sankey.md
@@ -12,81 +12,6 @@ The things being connected are called nodes and the connections are called links
 
 This example taken from [observable](https://observablehq.com/@d3/sankey/2?collection=@d3/d3-sankey). It may be rendered a little bit differently, though, in terms of size and colors.
 
-```mermaid
-sankey-beta
-
-Agricultural 'waste',Bio-conversion,124.729
-Bio-conversion,Liquid,0.597
-Bio-conversion,Losses,26.862
-Bio-conversion,Solid,280.322
-Bio-conversion,Gas,81.144
-Biofuel imports,Liquid,35
-Biomass imports,Solid,35
-Coal imports,Coal,11.606
-Coal reserves,Coal,63.965
-Coal,Solid,75.571
-District heating,Industry,10.639
-District heating,Heating and cooling - commercial,22.505
-District heating,Heating and cooling - homes,46.184
-Electricity grid,Over generation / exports,104.453
-Electricity grid,Heating and cooling - homes,113.726
-Electricity grid,H2 conversion,27.14
-Electricity grid,Industry,342.165
-Electricity grid,Road transport,37.797
-Electricity grid,Agriculture,4.412
-Electricity grid,Heating and cooling - commercial,40.858
-Electricity grid,Losses,56.691
-Electricity grid,Rail transport,7.863
-Electricity grid,Lighting & appliances - commercial,90.008
-Electricity grid,Lighting & appliances - homes,93.494
-Gas imports,Ngas,40.719
-Gas reserves,Ngas,82.233
-Gas,Heating and cooling - commercial,0.129
-Gas,Losses,1.401
-Gas,Thermal generation,151.891
-Gas,Agriculture,2.096
-Gas,Industry,48.58
-Geothermal,Electricity grid,7.013
-H2 conversion,H2,20.897
-H2 conversion,Losses,6.242
-H2,Road transport,20.897
-Hydro,Electricity grid,6.995
-Liquid,Industry,121.066
-Liquid,International shipping,128.69
-Liquid,Road transport,135.835
-Liquid,Domestic aviation,14.458
-Liquid,International aviation,206.267
-Liquid,Agriculture,3.64
-Liquid,National navigation,33.218
-Liquid,Rail transport,4.413
-Marine algae,Bio-conversion,4.375
-Ngas,Gas,122.952
-Nuclear,Thermal generation,839.978
-Oil imports,Oil,504.287
-Oil reserves,Oil,107.703
-Oil,Liquid,611.99
-Other waste,Solid,56.587
-Other waste,Bio-conversion,77.81
-Pumped heat,Heating and cooling - homes,193.026
-Pumped heat,Heating and cooling - commercial,70.672
-Solar PV,Electricity grid,59.901
-Solar Thermal,Heating and cooling - homes,19.263
-Solar,Solar Thermal,19.263
-Solar,Solar PV,59.901
-Solid,Agriculture,0.882
-Solid,Thermal generation,400.12
-Solid,Industry,46.477
-Thermal generation,Electricity grid,525.531
-Thermal generation,Losses,787.129
-Thermal generation,District heating,79.329
-Tidal,Electricity grid,9.452
-UK land based bioenergy,Bio-conversion,182.01
-Wave,Electricity grid,19.013
-Wind,Electricity grid,289.366
-```
-
-::: details
-
 ```mermaid-example
 sankey-beta
 
@@ -160,8 +85,6 @@ Wave,Electricity grid,19.013
 Wind,Electricity grid,289.366
 ```
 
-:::
-
 ## Syntax
 
 The idea behind syntax is that a user types `sankey-beta` keyword first, then pastes raw CSV below and get the result.
@@ -184,15 +107,6 @@ Electricity grid,Heating and cooling - homes,113.726
 Electricity grid,H2 conversion,27.14
 ```
 
-```mermaid
-sankey-beta
-
-%% source,target,value
-Electricity grid,Over generation / exports,104.453
-Electricity grid,Heating and cooling - homes,113.726
-Electricity grid,H2 conversion,27.14
-```
-
 ### Empty Lines
 
 CSV does not support empty lines without comma delimeters by default. But you can add them if needed:
@@ -207,16 +121,6 @@ Bio-conversion,Solid,280.322
 Bio-conversion,Gas,81.144
 ```
 
-```mermaid
-sankey-beta
-
-Bio-conversion,Losses,26.862
-
-Bio-conversion,Solid,280.322
-
-Bio-conversion,Gas,81.144
-```
-
 ### Commas
 
 If you need to have a comma, wrap it in double quotes:
@@ -228,13 +132,6 @@ Pumped heat,"Heating and cooling, homes",193.026
 Pumped heat,"Heating and cooling, commercial",70.672
 ```
 
-```mermaid
-sankey-beta
-
-Pumped heat,"Heating and cooling, homes",193.026
-Pumped heat,"Heating and cooling, commercial",70.672
-```
-
 ### Double Quotes
 
 If you need to have double quote, put a pair of them inside quoted string:
@@ -246,13 +143,6 @@ Pumped heat,"Heating and cooling, ""homes""",193.026
 Pumped heat,"Heating and cooling, ""commercial""",70.672
 ```
 
-```mermaid
-sankey-beta
-
-Pumped heat,"Heating and cooling, ""homes""",193.026
-Pumped heat,"Heating and cooling, ""commercial""",70.672
-```
-
 ## Configuration
 
 You can customize link colors, node alignments and diagram dimensions.

From 6f03e22cc410fb2f9103dc161087a9ac75712244 Mon Sep 17 00:00:00 2001
From: nirname <nirname@users.noreply.github.com>
Date: Tue, 4 Jul 2023 22:18:57 +0000
Subject: [PATCH 042/281] Update docs

---
 docs/syntax/sankey.md | 216 ------------------------------------------
 1 file changed, 216 deletions(-)

diff --git a/docs/syntax/sankey.md b/docs/syntax/sankey.md
index bfbfc3621..156e82f5a 100644
--- a/docs/syntax/sankey.md
+++ b/docs/syntax/sankey.md
@@ -164,156 +164,6 @@ Wave,Electricity grid,19.013
 Wind,Electricity grid,289.366
 ```
 
-::: details
-
-```mermaid-example
-sankey-beta
-
-Agricultural 'waste',Bio-conversion,124.729
-Bio-conversion,Liquid,0.597
-Bio-conversion,Losses,26.862
-Bio-conversion,Solid,280.322
-Bio-conversion,Gas,81.144
-Biofuel imports,Liquid,35
-Biomass imports,Solid,35
-Coal imports,Coal,11.606
-Coal reserves,Coal,63.965
-Coal,Solid,75.571
-District heating,Industry,10.639
-District heating,Heating and cooling - commercial,22.505
-District heating,Heating and cooling - homes,46.184
-Electricity grid,Over generation / exports,104.453
-Electricity grid,Heating and cooling - homes,113.726
-Electricity grid,H2 conversion,27.14
-Electricity grid,Industry,342.165
-Electricity grid,Road transport,37.797
-Electricity grid,Agriculture,4.412
-Electricity grid,Heating and cooling - commercial,40.858
-Electricity grid,Losses,56.691
-Electricity grid,Rail transport,7.863
-Electricity grid,Lighting & appliances - commercial,90.008
-Electricity grid,Lighting & appliances - homes,93.494
-Gas imports,Ngas,40.719
-Gas reserves,Ngas,82.233
-Gas,Heating and cooling - commercial,0.129
-Gas,Losses,1.401
-Gas,Thermal generation,151.891
-Gas,Agriculture,2.096
-Gas,Industry,48.58
-Geothermal,Electricity grid,7.013
-H2 conversion,H2,20.897
-H2 conversion,Losses,6.242
-H2,Road transport,20.897
-Hydro,Electricity grid,6.995
-Liquid,Industry,121.066
-Liquid,International shipping,128.69
-Liquid,Road transport,135.835
-Liquid,Domestic aviation,14.458
-Liquid,International aviation,206.267
-Liquid,Agriculture,3.64
-Liquid,National navigation,33.218
-Liquid,Rail transport,4.413
-Marine algae,Bio-conversion,4.375
-Ngas,Gas,122.952
-Nuclear,Thermal generation,839.978
-Oil imports,Oil,504.287
-Oil reserves,Oil,107.703
-Oil,Liquid,611.99
-Other waste,Solid,56.587
-Other waste,Bio-conversion,77.81
-Pumped heat,Heating and cooling - homes,193.026
-Pumped heat,Heating and cooling - commercial,70.672
-Solar PV,Electricity grid,59.901
-Solar Thermal,Heating and cooling - homes,19.263
-Solar,Solar Thermal,19.263
-Solar,Solar PV,59.901
-Solid,Agriculture,0.882
-Solid,Thermal generation,400.12
-Solid,Industry,46.477
-Thermal generation,Electricity grid,525.531
-Thermal generation,Losses,787.129
-Thermal generation,District heating,79.329
-Tidal,Electricity grid,9.452
-UK land based bioenergy,Bio-conversion,182.01
-Wave,Electricity grid,19.013
-Wind,Electricity grid,289.366
-```
-
-```mermaid
-sankey-beta
-
-Agricultural 'waste',Bio-conversion,124.729
-Bio-conversion,Liquid,0.597
-Bio-conversion,Losses,26.862
-Bio-conversion,Solid,280.322
-Bio-conversion,Gas,81.144
-Biofuel imports,Liquid,35
-Biomass imports,Solid,35
-Coal imports,Coal,11.606
-Coal reserves,Coal,63.965
-Coal,Solid,75.571
-District heating,Industry,10.639
-District heating,Heating and cooling - commercial,22.505
-District heating,Heating and cooling - homes,46.184
-Electricity grid,Over generation / exports,104.453
-Electricity grid,Heating and cooling - homes,113.726
-Electricity grid,H2 conversion,27.14
-Electricity grid,Industry,342.165
-Electricity grid,Road transport,37.797
-Electricity grid,Agriculture,4.412
-Electricity grid,Heating and cooling - commercial,40.858
-Electricity grid,Losses,56.691
-Electricity grid,Rail transport,7.863
-Electricity grid,Lighting & appliances - commercial,90.008
-Electricity grid,Lighting & appliances - homes,93.494
-Gas imports,Ngas,40.719
-Gas reserves,Ngas,82.233
-Gas,Heating and cooling - commercial,0.129
-Gas,Losses,1.401
-Gas,Thermal generation,151.891
-Gas,Agriculture,2.096
-Gas,Industry,48.58
-Geothermal,Electricity grid,7.013
-H2 conversion,H2,20.897
-H2 conversion,Losses,6.242
-H2,Road transport,20.897
-Hydro,Electricity grid,6.995
-Liquid,Industry,121.066
-Liquid,International shipping,128.69
-Liquid,Road transport,135.835
-Liquid,Domestic aviation,14.458
-Liquid,International aviation,206.267
-Liquid,Agriculture,3.64
-Liquid,National navigation,33.218
-Liquid,Rail transport,4.413
-Marine algae,Bio-conversion,4.375
-Ngas,Gas,122.952
-Nuclear,Thermal generation,839.978
-Oil imports,Oil,504.287
-Oil reserves,Oil,107.703
-Oil,Liquid,611.99
-Other waste,Solid,56.587
-Other waste,Bio-conversion,77.81
-Pumped heat,Heating and cooling - homes,193.026
-Pumped heat,Heating and cooling - commercial,70.672
-Solar PV,Electricity grid,59.901
-Solar Thermal,Heating and cooling - homes,19.263
-Solar,Solar Thermal,19.263
-Solar,Solar PV,59.901
-Solid,Agriculture,0.882
-Solid,Thermal generation,400.12
-Solid,Industry,46.477
-Thermal generation,Electricity grid,525.531
-Thermal generation,Losses,787.129
-Thermal generation,District heating,79.329
-Tidal,Electricity grid,9.452
-UK land based bioenergy,Bio-conversion,182.01
-Wave,Electricity grid,19.013
-Wind,Electricity grid,289.366
-```
-
-:::
-
 ## Syntax
 
 The idea behind syntax is that a user types `sankey-beta` keyword first, then pastes raw CSV below and get the result.
@@ -345,24 +195,6 @@ Electricity grid,Heating and cooling - homes,113.726
 Electricity grid,H2 conversion,27.14
 ```
 
-```mermaid-example
-sankey-beta
-
-%% source,target,value
-Electricity grid,Over generation / exports,104.453
-Electricity grid,Heating and cooling - homes,113.726
-Electricity grid,H2 conversion,27.14
-```
-
-```mermaid
-sankey-beta
-
-%% source,target,value
-Electricity grid,Over generation / exports,104.453
-Electricity grid,Heating and cooling - homes,113.726
-Electricity grid,H2 conversion,27.14
-```
-
 ### Empty Lines
 
 CSV does not support empty lines without comma delimeters by default. But you can add them if needed:
@@ -387,26 +219,6 @@ Bio-conversion,Solid,280.322
 Bio-conversion,Gas,81.144
 ```
 
-```mermaid-example
-sankey-beta
-
-Bio-conversion,Losses,26.862
-
-Bio-conversion,Solid,280.322
-
-Bio-conversion,Gas,81.144
-```
-
-```mermaid
-sankey-beta
-
-Bio-conversion,Losses,26.862
-
-Bio-conversion,Solid,280.322
-
-Bio-conversion,Gas,81.144
-```
-
 ### Commas
 
 If you need to have a comma, wrap it in double quotes:
@@ -425,20 +237,6 @@ Pumped heat,"Heating and cooling, homes",193.026
 Pumped heat,"Heating and cooling, commercial",70.672
 ```
 
-```mermaid-example
-sankey-beta
-
-Pumped heat,"Heating and cooling, homes",193.026
-Pumped heat,"Heating and cooling, commercial",70.672
-```
-
-```mermaid
-sankey-beta
-
-Pumped heat,"Heating and cooling, homes",193.026
-Pumped heat,"Heating and cooling, commercial",70.672
-```
-
 ### Double Quotes
 
 If you need to have double quote, put a pair of them inside quoted string:
@@ -457,20 +255,6 @@ Pumped heat,"Heating and cooling, ""homes""",193.026
 Pumped heat,"Heating and cooling, ""commercial""",70.672
 ```
 
-```mermaid-example
-sankey-beta
-
-Pumped heat,"Heating and cooling, ""homes""",193.026
-Pumped heat,"Heating and cooling, ""commercial""",70.672
-```
-
-```mermaid
-sankey-beta
-
-Pumped heat,"Heating and cooling, ""homes""",193.026
-Pumped heat,"Heating and cooling, ""commercial""",70.672
-```
-
 ## Configuration
 
 You can customize link colors, node alignments and diagram dimensions.

From 9f5f0a6e665ffcf79ac3777a89edb152a7af30e6 Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Wed, 5 Jul 2023 01:49:58 +0300
Subject: [PATCH 043/281] Reduce sankey width

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

diff --git a/packages/mermaid/src/defaultConfig.ts b/packages/mermaid/src/defaultConfig.ts
index 488493030..cc2b79a80 100644
--- a/packages/mermaid/src/defaultConfig.ts
+++ b/packages/mermaid/src/defaultConfig.ts
@@ -2271,7 +2271,7 @@ const config: Partial<MermaidConfig> = {
     maxNodeWidth: 200,
   },
   sankey: {
-    width: 800,
+    width: 600,
     height: 400,
     linkColor: 'gradient',
     nodeAlignment: 'justify',

From 49747b314db4d269a5dec055d22a0967a1a5a626 Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Tue, 4 Jul 2023 20:44:22 -0300
Subject: [PATCH 044/281] Modify wildcard state of tokens in lexer

---
 .../diagrams/class/parser/classDiagram.jison  | 52 +++++++++----------
 1 file changed, 26 insertions(+), 26 deletions(-)

diff --git a/packages/mermaid/src/diagrams/class/parser/classDiagram.jison b/packages/mermaid/src/diagrams/class/parser/classDiagram.jison
index 7788fcc0c..a8b880c8e 100644
--- a/packages/mermaid/src/diagrams/class/parser/classDiagram.jison
+++ b/packages/mermaid/src/diagrams/class/parser/classDiagram.jison
@@ -72,14 +72,14 @@ accDescr\s*"{"\s*                                { this.begin("acc_descr_multili
 <class-body>[\n]            /* nothing */
 <class-body>[^{}\n]*        { return "MEMBER";}
 
-<*>"cssClass"           return 'CSSCLASS';
-<*>"callback"           return 'CALLBACK';
-<*>"link"               return 'LINK';
-<*>"click"              return 'CLICK';
-<*>"note for"           return 'NOTE_FOR';
-<*>"note"               return 'NOTE';
-<*>"<<"                 return 'ANNOTATION_START';
-<*>">>"                 return 'ANNOTATION_END';
+<INITIAL>"cssClass"           return 'CSSCLASS';
+<INITIAL>"callback"           return 'CALLBACK';
+<INITIAL>"link"               return 'LINK';
+<INITIAL>"click"              return 'CLICK';
+<INITIAL>"note for"           return 'NOTE_FOR';
+<INITIAL>"note"               return 'NOTE';
+<INITIAL>"<<"                 return 'ANNOTATION_START';
+<INITIAL>">>"                 return 'ANNOTATION_END';
 
 /*
 ---interactivity command---
@@ -87,7 +87,7 @@ accDescr\s*"{"\s*                                { this.begin("acc_descr_multili
 line was introduced with 'click'.
 'href "<link>"' attaches the specified link to the node that was specified by 'click'.
 */
-<*>"href"[\s]+["]       this.begin("href");
+<INITIAL>"href"[\s]+["]       this.begin("href");
 <href>["]               this.popState();
 <href>[^"]*             return 'HREF';
 
@@ -99,7 +99,7 @@ the line was introduced with 'click'.
 arguments to the node that was specified by 'click'.
 Function arguments are optional: 'call <callback_name>()' simply executes 'callback_name' without any arguments.
 */
-<*>"call"[\s]+              this.begin("callback_name");
+<INITIAL>"call"[\s]+              this.begin("callback_name");
 <callback_name>\([\s]*\) this.popState();
 <callback_name>\(        this.popState(); this.begin("callback_args");
 <callback_name>[^(]*     return 'CALLBACK_NAME';
@@ -108,7 +108,7 @@ Function arguments are optional: 'call <callback_name>()' simply executes 'callb
 
 <generic>[~]            this.popState();
 <generic>[^~]*          return "GENERICTYPE";
-<*>[~]                  this.begin("generic");
+<INITIAL,class>"~"                  this.begin("generic");
 
 <string>["]             this.popState();
 <string>[^"]*           return "STR";
@@ -116,20 +116,20 @@ Function arguments are optional: 'call <callback_name>()' simply executes 'callb
 
 <bqstring>[`]           this.popState();
 <bqstring>[^`]+         return "BQUOTE_STR";
-<*>[`]                  this.begin("bqstring");
+<INITIAL,class>[`]                  this.begin("bqstring");
 
-<*>"_self"              return 'LINK_TARGET';
-<*>"_blank"             return 'LINK_TARGET';
-<*>"_parent"            return 'LINK_TARGET';
-<*>"_top"               return 'LINK_TARGET';
+<INITIAL>"_self"              return 'LINK_TARGET';
+<INITIAL>"_blank"             return 'LINK_TARGET';
+<INITIAL>"_parent"            return 'LINK_TARGET';
+<INITIAL>"_top"               return 'LINK_TARGET';
 
-<*>\s*\<\|              return 'EXTENSION';
-<*>\s*\|\>              return 'EXTENSION';
-<*>\s*\>                return 'DEPENDENCY';
-<*>\s*\<                return 'DEPENDENCY';
-<*>\s*\*                return 'COMPOSITION';
-<*>\s*o                 return 'AGGREGATION';
-<*>\s*\(\)              return 'LOLLIPOP';
+<INITIAL>\s*\<\|              return 'EXTENSION';
+<INITIAL>\s*\|\>              return 'EXTENSION';
+<INITIAL>\s*\>                return 'DEPENDENCY';
+<INITIAL>\s*\<                return 'DEPENDENCY';
+<INITIAL>\s*\*                return 'COMPOSITION';
+<INITIAL>\s*o                 return 'AGGREGATION';
+<INITIAL>\s*\(\)              return 'LOLLIPOP';
 <*>\-\-                 return 'LINE';
 <*>\.\.                 return 'DOTTED_LINE';
 <*>":"{1}[^:\n;]+       return 'LABEL';
@@ -285,8 +285,8 @@ className
     : alphaNumToken { $$=$1; }
     | classLiteralName { $$=$1; }
     | alphaNumToken className { $$=$1+$2; }
-    | alphaNumToken GENERICTYPE { $$=$1+'~'+$2+'~'; }
-    | classLiteralName GENERICTYPE { $$=$1+'~'+$2+'~'; }
+    | alphaNumToken GENERICTYPE { $$=$1+"~"+$2+"~"; }
+    | classLiteralName GENERICTYPE { $$=$1+"~"+$2+"~"; }
     ;
 
 statement
@@ -321,7 +321,7 @@ classStatements
     ;
 
 classStatement
-    : classIdentifier                                    
+    : classIdentifier
     | classIdentifier STYLE_SEPARATOR alphaNumToken      {yy.setCssClass($1, $3);}
     | classIdentifier STRUCT_START members STRUCT_STOP   {yy.addMembers($1,$3);}
     | classIdentifier STYLE_SEPARATOR alphaNumToken STRUCT_START members STRUCT_STOP {yy.setCssClass($1, $3);yy.addMembers($1,$5);}

From 099f85f014af46491e308f7ba152cc0975c3fe5b Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Tue, 4 Jul 2023 21:07:46 -0300
Subject: [PATCH 045/281] Add unit tests with keywords in notes

---
 .../src/diagrams/class/classDiagram.spec.ts   | 85 +++++++++++++++++++
 1 file changed, 85 insertions(+)

diff --git a/packages/mermaid/src/diagrams/class/classDiagram.spec.ts b/packages/mermaid/src/diagrams/class/classDiagram.spec.ts
index 2182e8c34..99f58898c 100644
--- a/packages/mermaid/src/diagrams/class/classDiagram.spec.ts
+++ b/packages/mermaid/src/diagrams/class/classDiagram.spec.ts
@@ -264,6 +264,91 @@ class C13["With Città foreign language"]
       const str = 'classDiagram\n' + 'note "test"\n';
       parser.parse(str);
     });
+
+    it('should handle note with "cssClass" in it', function () {
+      const str = 'classDiagram\n' + 'note "cssClass"\n';
+      parser.parse(str);
+    });
+
+    it('should handle note with "callback" in it', function () {
+      const str = 'classDiagram\n' + 'note "callback"\n';
+      parser.parse(str);
+    });
+
+    it('should handle note with "link" in it', function () {
+      const str = 'classDiagram\n' + 'note "test"\n';
+      parser.parse(str);
+    });
+
+    it('should handle note with "click" in it', function () {
+      const str = 'classDiagram\n' + 'note "click"\n';
+      parser.parse(str);
+    });
+
+    it('should handle note with "link" in it', function () {
+      const str = 'classDiagram\n' + 'note "test"\n';
+      parser.parse(str);
+    });
+
+    it('should handle note with "note" in it', function () {
+      const str = 'classDiagram\n' + 'note "note"\n';
+      parser.parse(str);
+    });
+
+    it('should handle note with "note for" in it', function () {
+      const str = 'classDiagram\n' + 'note "note for"\n';
+      parser.parse(str);
+    });
+
+    it('should handle note with "<<" in it', function () {
+      const str = 'classDiagram\n' + 'note "<<"\n';
+      parser.parse(str);
+    });
+
+    it('should handle note with ">>" in it', function () {
+      const str = 'classDiagram\n' + 'note ">>"\n';
+      parser.parse(str);
+    });
+
+    it('should handle note with "href " in it', function () {
+      const str = 'classDiagram\n' + 'note "href "\n';
+      parser.parse(str);
+    });
+
+    it('should handle note with "call " in it', function () {
+      const str = 'classDiagram\n' + 'note "call "\n';
+      parser.parse(str);
+    });
+
+    it('should handle note with "~" in it', function () {
+      const str = 'classDiagram\n' + 'note "~"\n';
+      parser.parse(str);
+    });
+
+    it('should handle note with "``" in it', function () {
+      const str = 'classDiagram\n' + 'note "``"\n';
+      parser.parse(str);
+    });
+
+    it('should handle note with "_self" in it', function () {
+      const str = 'classDiagram\n' + 'note "_self"\n';
+      parser.parse(str);
+    });
+
+    it('should handle note with "_blank" in it', function () {
+      const str = 'classDiagram\n' + 'note "_blank"\n';
+      parser.parse(str);
+    });
+
+    it('should handle note with "_parent" in it', function () {
+      const str = 'classDiagram\n' + 'note "_parent"\n';
+      parser.parse(str);
+    });
+
+    it('should handle note with "_top" in it', function () {
+      const str = 'classDiagram\n' + 'note "_top"\n';
+      parser.parse(str);
+    });
   });
 
   describe('when parsing class defined in brackets', function () {

From e3c90ac0848f947b6a6cb7679a22f9c6961c1f82 Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Tue, 4 Jul 2023 21:16:14 -0300
Subject: [PATCH 046/281] Apply formatting to file

---
 .../diagrams/class/parser/classDiagram.jison  | 142 +++++++++---------
 1 file changed, 71 insertions(+), 71 deletions(-)

diff --git a/packages/mermaid/src/diagrams/class/parser/classDiagram.jison b/packages/mermaid/src/diagrams/class/parser/classDiagram.jison
index a8b880c8e..d4ca667cf 100644
--- a/packages/mermaid/src/diagrams/class/parser/classDiagram.jison
+++ b/packages/mermaid/src/diagrams/class/parser/classDiagram.jison
@@ -43,12 +43,12 @@ accDescr\s*"{"\s*                                { this.begin("acc_descr_multili
 <acc_descr_multiline>[\}]                       { this.popState(); }
 <acc_descr_multiline>[^\}]*                     return "acc_descr_multiline_value";
 
-\s*(\r?\n)+                return 'NEWLINE';
-\s+                     /* skip whitespace */
+\s*(\r?\n)+                     return 'NEWLINE';
+\s+                             /* skip whitespace */
 
-"classDiagram-v2"       return 'CLASS_DIAGRAM';
-"classDiagram"          return 'CLASS_DIAGRAM';
-"[*]"                   return 'EDGE_STATE';
+"classDiagram-v2"               return 'CLASS_DIAGRAM';
+"classDiagram"                  return 'CLASS_DIAGRAM';
+"[*]"                           return 'EDGE_STATE';
 
 <INITIAL,namespace>"namespace"  { this.begin('namespace'); return 'NAMESPACE'; }
 <namespace>\s*(\r?\n)+          { this.popState(); return 'NEWLINE'; }
@@ -60,26 +60,26 @@ accDescr\s*"{"\s*                                { this.begin("acc_descr_multili
 <namespace-body>\s+             /* skip whitespace */
 <namespace-body>"[*]"           return 'EDGE_STATE';
 
-<INITIAL,namespace-body>"class"     { this.begin('class'); return 'CLASS';}
-<class>\s*(\r?\n)+          { this.popState(); return 'NEWLINE'; }
-<class>\s+                  /* skip whitespace */
-<class>[}]                  { this.popState(); this.popState(); return 'STRUCT_STOP';}
-<class>[{]                  { this.begin("class-body"); return 'STRUCT_START';}
-<class-body>[}]             { this.popState(); return 'STRUCT_STOP'; }
-<class-body><<EOF>>         return "EOF_IN_STRUCT";
-<class-body>"[*]"           { return 'EDGE_STATE';}
-<class-body>[{]             return "OPEN_IN_STRUCT";
-<class-body>[\n]            /* nothing */
-<class-body>[^{}\n]*        { return "MEMBER";}
+<INITIAL,namespace-body>"class" { this.begin('class'); return 'CLASS';}
+<class>\s*(\r?\n)+              { this.popState(); return 'NEWLINE'; }
+<class>\s+                      /* skip whitespace */
+<class>[}]                      { this.popState(); this.popState(); return 'STRUCT_STOP';}
+<class>[{]                      { this.begin("class-body"); return 'STRUCT_START';}
+<class-body>[}]                 { this.popState(); return 'STRUCT_STOP'; }
+<class-body><<EOF>>             return "EOF_IN_STRUCT";
+<class-body>"[*]"               { return 'EDGE_STATE';}
+<class-body>[{]                 return "OPEN_IN_STRUCT";
+<class-body>[\n]                /* nothing */
+<class-body>[^{}\n]*            { return "MEMBER";}
 
-<INITIAL>"cssClass"           return 'CSSCLASS';
-<INITIAL>"callback"           return 'CALLBACK';
-<INITIAL>"link"               return 'LINK';
-<INITIAL>"click"              return 'CLICK';
-<INITIAL>"note for"           return 'NOTE_FOR';
-<INITIAL>"note"               return 'NOTE';
-<INITIAL>"<<"                 return 'ANNOTATION_START';
-<INITIAL>">>"                 return 'ANNOTATION_END';
+<INITIAL>"cssClass"             return 'CSSCLASS';
+<INITIAL>"callback"             return 'CALLBACK';
+<INITIAL>"link"                 return 'LINK';
+<INITIAL>"click"                return 'CLICK';
+<INITIAL>"note for"             return 'NOTE_FOR';
+<INITIAL>"note"                 return 'NOTE';
+<INITIAL>"<<"                   return 'ANNOTATION_START';
+<INITIAL>">>"                   return 'ANNOTATION_END';
 
 /*
 ---interactivity command---
@@ -87,9 +87,9 @@ accDescr\s*"{"\s*                                { this.begin("acc_descr_multili
 line was introduced with 'click'.
 'href "<link>"' attaches the specified link to the node that was specified by 'click'.
 */
-<INITIAL>"href"[\s]+["]       this.begin("href");
-<href>["]               this.popState();
-<href>[^"]*             return 'HREF';
+<INITIAL>"href"[\s]+["]         this.begin("href");
+<href>["]                       this.popState();
+<href>[^"]*                     return 'HREF';
 
 /*
 ---interactivity command---
@@ -99,52 +99,52 @@ the line was introduced with 'click'.
 arguments to the node that was specified by 'click'.
 Function arguments are optional: 'call <callback_name>()' simply executes 'callback_name' without any arguments.
 */
-<INITIAL>"call"[\s]+              this.begin("callback_name");
-<callback_name>\([\s]*\) this.popState();
-<callback_name>\(        this.popState(); this.begin("callback_args");
-<callback_name>[^(]*     return 'CALLBACK_NAME';
-<callback_args>\)        this.popState();
-<callback_args>[^)]*     return 'CALLBACK_ARGS';
+<INITIAL>"call"[\s]+            this.begin("callback_name");
+<callback_name>\([\s]*\)        this.popState();
+<callback_name>\(               this.popState(); this.begin("callback_args");
+<callback_name>[^(]*            return 'CALLBACK_NAME';
+<callback_args>\)               this.popState();
+<callback_args>[^)]*            return 'CALLBACK_ARGS';
 
-<generic>[~]            this.popState();
-<generic>[^~]*          return "GENERICTYPE";
-<INITIAL,class>"~"                  this.begin("generic");
+<generic>[~]                    this.popState();
+<generic>[^~]*                  return "GENERICTYPE";
+<INITIAL,class>"~"              this.begin("generic");
 
-<string>["]             this.popState();
-<string>[^"]*           return "STR";
-<*>["]                  this.begin("string");
+<string>["]                     this.popState();
+<string>[^"]*                   return "STR";
+<*>["]                          this.begin("string");
 
-<bqstring>[`]           this.popState();
-<bqstring>[^`]+         return "BQUOTE_STR";
-<INITIAL,class>[`]                  this.begin("bqstring");
+<bqstring>[`]                   this.popState();
+<bqstring>[^`]+                 return "BQUOTE_STR";
+<INITIAL,class>[`]              this.begin("bqstring");
 
-<INITIAL>"_self"              return 'LINK_TARGET';
-<INITIAL>"_blank"             return 'LINK_TARGET';
-<INITIAL>"_parent"            return 'LINK_TARGET';
-<INITIAL>"_top"               return 'LINK_TARGET';
+<INITIAL>"_self"                return 'LINK_TARGET';
+<INITIAL>"_blank"               return 'LINK_TARGET';
+<INITIAL>"_parent"              return 'LINK_TARGET';
+<INITIAL>"_top"                 return 'LINK_TARGET';
 
-<INITIAL>\s*\<\|              return 'EXTENSION';
-<INITIAL>\s*\|\>              return 'EXTENSION';
-<INITIAL>\s*\>                return 'DEPENDENCY';
-<INITIAL>\s*\<                return 'DEPENDENCY';
-<INITIAL>\s*\*                return 'COMPOSITION';
-<INITIAL>\s*o                 return 'AGGREGATION';
-<INITIAL>\s*\(\)              return 'LOLLIPOP';
-<*>\-\-                 return 'LINE';
-<*>\.\.                 return 'DOTTED_LINE';
-<*>":"{1}[^:\n;]+       return 'LABEL';
-<*>":"{3}               return 'STYLE_SEPARATOR';
-<*>\-                   return 'MINUS';
-<*>"."                  return 'DOT';
-<*>\+                   return 'PLUS';
-<*>\%                   return 'PCT';
-<*>"="                  return 'EQUALS';
-<*>\=                   return 'EQUALS';
-<*>\w+                  return 'ALPHA';
-<*>"["                  return 'SQS';
-<*>"]"                  return 'SQE';
-<*>[!"#$%&'*+,-.`?\\/]  return 'PUNCTUATION';
-<*>[0-9]+               return 'NUM';
+<INITIAL>\s*\<\|                return 'EXTENSION';
+<INITIAL>\s*\|\>                return 'EXTENSION';
+<INITIAL>\s*\>                  return 'DEPENDENCY';
+<INITIAL>\s*\<                  return 'DEPENDENCY';
+<INITIAL>\s*\*                  return 'COMPOSITION';
+<INITIAL>\s*o                   return 'AGGREGATION';
+<INITIAL>\s*\(\)                return 'LOLLIPOP';
+<*>\-\-                         return 'LINE';
+<*>\.\.                         return 'DOTTED_LINE';
+<*>":"{1}[^:\n;]+               return 'LABEL';
+<*>":"{3}                       return 'STYLE_SEPARATOR';
+<*>\-                           return 'MINUS';
+<*>"."                          return 'DOT';
+<*>\+                           return 'PLUS';
+<*>\%                           return 'PCT';
+<*>"="                          return 'EQUALS';
+<*>\=                           return 'EQUALS';
+<*>\w+                          return 'ALPHA';
+<*>"["                          return 'SQS';
+<*>"]"                          return 'SQE';
+<*>[!"#$%&'*+,-.`?\\/]          return 'PUNCTUATION';
+<*>[0-9]+                       return 'NUM';
 <*>[\u00AA\u00B5\u00BA\u00C0-\u00D6\u00D8-\u00F6]|
 [\u00F8-\u02C1\u02C6-\u02D1\u02E0-\u02E4\u02EC\u02EE\u0370-\u0374\u0376\u0377]|
 [\u037A-\u037D\u0386\u0388-\u038A\u038C\u038E-\u03A1\u03A3-\u03F5]|
@@ -206,9 +206,9 @@ Function arguments are optional: 'call <callback_name>()' simply executes 'callb
 [\uFD50-\uFD8F\uFD92-\uFDC7\uFDF0-\uFDFB\uFE70-\uFE74\uFE76-\uFEFC]|
 [\uFF21-\uFF3A\uFF41-\uFF5A\uFF66-\uFFBE\uFFC2-\uFFC7\uFFCA-\uFFCF]|
 [\uFFD2-\uFFD7\uFFDA-\uFFDC]
-                        return 'UNICODE_TEXT';
-<*>\s                   return 'SPACE';
-<*><<EOF>>              return 'EOF';
+                                return 'UNICODE_TEXT';
+<*>\s                           return 'SPACE';
+<*><<EOF>>                      return 'EOF';
 
 /lex
 

From 34e89098f5357c5b739538877a823470761356cb Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Tue, 4 Jul 2023 21:34:14 -0300
Subject: [PATCH 047/281] Refactor code smells in unit tests

---
 packages/mermaid/src/diagrams/class/classDiagram.spec.ts | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/packages/mermaid/src/diagrams/class/classDiagram.spec.ts b/packages/mermaid/src/diagrams/class/classDiagram.spec.ts
index 99f58898c..f6a2855c0 100644
--- a/packages/mermaid/src/diagrams/class/classDiagram.spec.ts
+++ b/packages/mermaid/src/diagrams/class/classDiagram.spec.ts
@@ -276,7 +276,7 @@ class C13["With Città foreign language"]
     });
 
     it('should handle note with "link" in it', function () {
-      const str = 'classDiagram\n' + 'note "test"\n';
+      const str = 'classDiagram\n' + 'note "link"\n';
       parser.parse(str);
     });
 
@@ -285,11 +285,6 @@ class C13["With Città foreign language"]
       parser.parse(str);
     });
 
-    it('should handle note with "link" in it', function () {
-      const str = 'classDiagram\n' + 'note "test"\n';
-      parser.parse(str);
-    });
-
     it('should handle note with "note" in it', function () {
       const str = 'classDiagram\n' + 'note "note"\n';
       parser.parse(str);

From 382026ed33982f5ce7351148dcbd1b57e1deca19 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Wed, 5 Jul 2023 12:20:56 +0530
Subject: [PATCH 048/281] Fix docs:dev

---
 packages/mermaid/package.json |  6 +++---
 packages/mermaid/src/docs.mts | 12 ++++++------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index 62efec380..c73275a6f 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -27,9 +27,9 @@
     "docs:code": "typedoc src/defaultConfig.ts src/config.ts src/mermaidAPI.ts && prettier --write ./src/docs/config/setup",
     "docs:build": "rimraf ../../docs && pnpm docs:spellcheck && pnpm docs:code && ts-node-esm src/docs.mts",
     "docs:verify": "pnpm docs:spellcheck && pnpm docs:code && ts-node-esm src/docs.mts --verify",
-    "docs:pre:vitepress": "rimraf src/vitepress && pnpm docs:code && ts-node-esm src/docs.mts --vitepress",
-    "docs:build:vitepress": "pnpm docs:pre:vitepress && (cd src/vitepress && pnpm --filter ./ install --no-frozen-lockfile --ignore-scripts && pnpm run build) && cpy --flat src/docs/landing/ ./src/vitepress/.vitepress/dist/landing",
-    "docs:dev": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./ src/vitepress dev\" \"ts-node-esm src/docs.mts --watch --vitepress\"",
+    "docs:pre:vitepress": "rimraf src/vitepress && pnpm docs:code && ts-node-esm src/docs.mts --vitepress && pnpm --filter ./src/vitepress install --no-frozen-lockfile --ignore-scripts ",
+    "docs:build:vitepress": "pnpm docs:pre:vitepress && (cd src/vitepress && pnpm run build) && cpy --flat src/docs/landing/ ./src/vitepress/.vitepress/dist/landing",
+    "docs:dev": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./src/vitepress dev\" \"ts-node-esm src/docs.mts --watch --vitepress\"",
     "docs:serve": "pnpm docs:build:vitepress && vitepress serve src/vitepress",
     "docs:spellcheck": "cspell --config ../../cSpell.json \"src/docs/**/*.md\"",
     "release": "pnpm build",
diff --git a/packages/mermaid/src/docs.mts b/packages/mermaid/src/docs.mts
index 64c77254d..f6efc1169 100644
--- a/packages/mermaid/src/docs.mts
+++ b/packages/mermaid/src/docs.mts
@@ -122,7 +122,7 @@ const changeToFinalDocDir = (file: string): string => {
 const logWasOrShouldBeTransformed = (filename: string, wasCopied: boolean) => {
   const changeMsg = wasCopied ? LOGMSG_TRANSFORMED : LOGMSG_TO_BE_TRANSFORMED;
   let logMsg: string;
-  logMsg = `  File ${changeMsg}: ${filename}`;
+  logMsg = `  File ${changeMsg}: ${filename.replace(FINAL_DOCS_DIR, SOURCE_DOCS_DIR)}`;
   if (wasCopied) {
     logMsg += LOGMSG_COPIED;
   }
@@ -363,14 +363,14 @@ const transformHtml = (filename: string) => {
 
 const getGlobs = (globs: string[]): string[] => {
   globs.push(
-    '!**/dist',
+    '!**/dist/**',
     '!**/redirect.spec.ts',
-    '!**/landing',
-    '!**/node_modules',
-    '!**/user-avatars'
+    '!**/landing/**',
+    '!**/node_modules/**',
+    '!**/user-avatars/**'
   );
   if (!vitepress) {
-    globs.push('!**/.vitepress', '!**/vite.config.ts', '!src/docs/index.md', '!**/package.json');
+    globs.push('!**/.vitepress/**', '!**/vite.config.ts', '!src/docs/index.md', '!**/package.json');
   }
   return globs;
 };

From 34b2b5ba352c24c06492b9bd0207e81ae0774641 Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Wed, 5 Jul 2023 17:25:07 +0300
Subject: [PATCH 049/281] Support docs:dev in docker

---
 packages/mermaid/src/docs/package.json | 2 +-
 run                                    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/src/docs/package.json b/packages/mermaid/src/docs/package.json
index 6e1934022..3dd83fafc 100644
--- a/packages/mermaid/src/docs/package.json
+++ b/packages/mermaid/src/docs/package.json
@@ -3,7 +3,7 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "vitepress --port 3333 --open",
+    "dev": "vitepress --port 3333 --host",
     "build": "pnpm prefetch && vitepress build",
     "build-no-prefetch": "vitepress build",
     "serve": "vitepress serve",
diff --git a/run b/run
index d9f669cab..1d5ef306f 100755
--- a/run
+++ b/run
@@ -27,7 +27,7 @@ $RUN --service-ports mermaid sh -c "npx pnpm run dev"
 ;;
 
 docs:dev)
-$RUN --service-ports mermaid sh -c "cd packages/mermaid/src/docs && npx pnpm prefetch && npx vitepress --port 3333 --host"
+$RUN --service-ports mermaid sh -c "npx pnpm run --filter mermaid docs:dev"
 ;;
 
 cypress)

From 95d62367e90839fe84824ded6da7d40d355c6206 Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Wed, 5 Jul 2023 19:39:05 +0300
Subject: [PATCH 050/281] Add docker-specific command, leave commonly used
 command intact

---
 packages/mermaid/package.json          | 1 +
 packages/mermaid/src/docs/package.json | 3 ++-
 run                                    | 2 +-
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index c73275a6f..e630f80fb 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -30,6 +30,7 @@
     "docs:pre:vitepress": "rimraf src/vitepress && pnpm docs:code && ts-node-esm src/docs.mts --vitepress && pnpm --filter ./src/vitepress install --no-frozen-lockfile --ignore-scripts ",
     "docs:build:vitepress": "pnpm docs:pre:vitepress && (cd src/vitepress && pnpm run build) && cpy --flat src/docs/landing/ ./src/vitepress/.vitepress/dist/landing",
     "docs:dev": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./src/vitepress dev\" \"ts-node-esm src/docs.mts --watch --vitepress\"",
+    "docs:dev:docker": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./src/vitepress dev:docker\" \"ts-node-esm src/docs.mts --watch --vitepress\"",
     "docs:serve": "pnpm docs:build:vitepress && vitepress serve src/vitepress",
     "docs:spellcheck": "cspell --config ../../cSpell.json \"src/docs/**/*.md\"",
     "release": "pnpm build",
diff --git a/packages/mermaid/src/docs/package.json b/packages/mermaid/src/docs/package.json
index 3dd83fafc..4529a7622 100644
--- a/packages/mermaid/src/docs/package.json
+++ b/packages/mermaid/src/docs/package.json
@@ -3,7 +3,8 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "vitepress --port 3333 --host",
+    "dev": "vitepress --port 3333 --open",
+    "dev:docker": "vitepress --port 3333 --host",
     "build": "pnpm prefetch && vitepress build",
     "build-no-prefetch": "vitepress build",
     "serve": "vitepress serve",
diff --git a/run b/run
index 1d5ef306f..cc169e209 100755
--- a/run
+++ b/run
@@ -27,7 +27,7 @@ $RUN --service-ports mermaid sh -c "npx pnpm run dev"
 ;;
 
 docs:dev)
-$RUN --service-ports mermaid sh -c "npx pnpm run --filter mermaid docs:dev"
+$RUN --service-ports mermaid sh -c "npx pnpm run --filter mermaid docs:dev:docker"
 ;;
 
 cypress)

From fcb25aee7cdaad985cbb63740a245e09d1692415 Mon Sep 17 00:00:00 2001
From: Tom PERRILLAT-COLLOMB <tom.perrillat-collomb@protonmail.com>
Date: Wed, 5 Jul 2023 20:57:37 +0200
Subject: [PATCH 051/281] docs(flowchart): add documentation on multiple nodes
 style

---
 docs/syntax/flowchart.md                      | 18 ++++++++++++++++++
 packages/mermaid/src/docs/syntax/flowchart.md | 10 ++++++++++
 2 files changed, 28 insertions(+)

diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md
index a47061025..92678fb6e 100644
--- a/docs/syntax/flowchart.md
+++ b/docs/syntax/flowchart.md
@@ -991,6 +991,24 @@ flowchart LR
     classDef someclass fill:#f96
 ```
 
+This form can be used when declaring multiple links between nodes:
+
+```mermaid-example
+flowchart LR
+    A:::foo & B:::bar --> C:::foobar
+    classDef foo stroke:#f00
+    classDef bar stroke:#0f0
+    classDef foobar stroke:#00f
+```
+
+```mermaid
+flowchart LR
+    A:::foo & B:::bar --> C:::foobar
+    classDef foo stroke:#f00
+    classDef bar stroke:#0f0
+    classDef foobar stroke:#00f
+```
+
 ### Css classes
 
 It is also possible to predefine classes in css styles that can be applied from the graph definition as in the example
diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md
index 80cb242d6..2e3d78c30 100644
--- a/packages/mermaid/src/docs/syntax/flowchart.md
+++ b/packages/mermaid/src/docs/syntax/flowchart.md
@@ -676,6 +676,16 @@ flowchart LR
     classDef someclass fill:#f96
 ```
 
+This form can be used when declaring multiple links between nodes:
+
+```mermaid-example
+flowchart LR
+    A:::foo & B:::bar --> C:::foobar
+    classDef foo stroke:#f00
+    classDef bar stroke:#0f0
+    classDef foobar stroke:#00f
+```
+
 ### Css classes
 
 It is also possible to predefine classes in css styles that can be applied from the graph definition as in the example

From 5e7e3e21c86ca67d3c0d629c8b1238d4cf7b3b69 Mon Sep 17 00:00:00 2001
From: Steph <35910788+huynhicode@users.noreply.github.com>
Date: Wed, 5 Jul 2023 13:42:42 -0700
Subject: [PATCH 052/281] update homepage community link

---
 packages/mermaid/src/docs/.vitepress/components/HomePage.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mermaid/src/docs/.vitepress/components/HomePage.vue b/packages/mermaid/src/docs/.vitepress/components/HomePage.vue
index 19f3912a7..70cd04c44 100644
--- a/packages/mermaid/src/docs/.vitepress/components/HomePage.vue
+++ b/packages/mermaid/src/docs/.vitepress/components/HomePage.vue
@@ -16,7 +16,7 @@ import { teamMembers } from '../contributors';
           <p text-lg max-w-200 text-center leading-7>
             <Contributors />
             <br />
-            <a href="https://chat.vitest.dev" rel="noopener noreferrer">Join the community</a> and
+            <a href="https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE" rel="noopener noreferrer">Join the community</a> and
             get involved!
           </p>
         </div>

From 9251e520abdd107248a2416da08ccb3485a63bb1 Mon Sep 17 00:00:00 2001
From: Steph <35910788+huynhicode@users.noreply.github.com>
Date: Wed, 5 Jul 2023 13:50:33 -0700
Subject: [PATCH 053/281] fix lint

---
 .../mermaid/src/docs/.vitepress/components/HomePage.vue   | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/src/docs/.vitepress/components/HomePage.vue b/packages/mermaid/src/docs/.vitepress/components/HomePage.vue
index 70cd04c44..b6998f249 100644
--- a/packages/mermaid/src/docs/.vitepress/components/HomePage.vue
+++ b/packages/mermaid/src/docs/.vitepress/components/HomePage.vue
@@ -16,8 +16,12 @@ import { teamMembers } from '../contributors';
           <p text-lg max-w-200 text-center leading-7>
             <Contributors />
             <br />
-            <a href="https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE" rel="noopener noreferrer">Join the community</a> and
-            get involved!
+            <a
+              href="https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE"
+              rel="noopener noreferrer"
+              >Join the community</a
+            >
+            and get involved!
           </p>
         </div>
       </main>

From 38013de7114966e8b1a83396703ef8158bb34466 Mon Sep 17 00:00:00 2001
From: Alois Klink <alois@aloisklink.com>
Date: Thu, 6 Jul 2023 01:06:01 +0100
Subject: [PATCH 054/281] fix(quadrant): make quadrant options optional

Make the types of the options in QuadrantChartConfig in the
MermaidConfig optional. All of these (except for the values in
`BaseDiagramConfig`) will be automatically set to their
default values, so they're optional from a user perspective.
---
 packages/mermaid/src/config.type.ts           | 36 +++++++++----------
 .../quadrant-chart/quadrantBuilder.ts         |  5 +--
 2 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts
index 138eee44f..3b5826d1a 100644
--- a/packages/mermaid/src/config.type.ts
+++ b/packages/mermaid/src/config.type.ts
@@ -229,24 +229,24 @@ export interface PieDiagramConfig extends BaseDiagramConfig {
 }
 
 export interface QuadrantChartConfig extends BaseDiagramConfig {
-  chartWidth: number;
-  chartHeight: number;
-  titleFontSize: number;
-  titlePadding: number;
-  quadrantPadding: number;
-  xAxisLabelPadding: number;
-  yAxisLabelPadding: number;
-  xAxisLabelFontSize: number;
-  yAxisLabelFontSize: number;
-  quadrantLabelFontSize: number;
-  quadrantTextTopPadding: number;
-  pointTextPadding: number;
-  pointLabelFontSize: number;
-  pointRadius: number;
-  xAxisPosition: 'top' | 'bottom';
-  yAxisPosition: 'left' | 'right';
-  quadrantInternalBorderStrokeWidth: number;
-  quadrantExternalBorderStrokeWidth: number;
+  chartWidth?: number;
+  chartHeight?: number;
+  titleFontSize?: number;
+  titlePadding?: number;
+  quadrantPadding?: number;
+  xAxisLabelPadding?: number;
+  yAxisLabelPadding?: number;
+  xAxisLabelFontSize?: number;
+  yAxisLabelFontSize?: number;
+  quadrantLabelFontSize?: number;
+  quadrantTextTopPadding?: number;
+  pointTextPadding?: number;
+  pointLabelFontSize?: number;
+  pointRadius?: number;
+  xAxisPosition?: 'top' | 'bottom';
+  yAxisPosition?: 'left' | 'right';
+  quadrantInternalBorderStrokeWidth?: number;
+  quadrantExternalBorderStrokeWidth?: number;
 }
 
 export interface ErDiagramConfig extends BaseDiagramConfig {
diff --git a/packages/mermaid/src/diagrams/quadrant-chart/quadrantBuilder.ts b/packages/mermaid/src/diagrams/quadrant-chart/quadrantBuilder.ts
index 8168551ad..9c1162762 100644
--- a/packages/mermaid/src/diagrams/quadrant-chart/quadrantBuilder.ts
+++ b/packages/mermaid/src/diagrams/quadrant-chart/quadrantBuilder.ts
@@ -1,7 +1,7 @@
 // @ts-ignore: TODO Fix ts errors
 import { scaleLinear } from 'd3';
 import { log } from '../../logger.js';
-import { QuadrantChartConfig } from '../../config.type.js';
+import type { BaseDiagramConfig, QuadrantChartConfig } from '../../config.type.js';
 import defaultConfig from '../../defaultConfig.js';
 import { getThemeVariables } from '../../themes/theme-default.js';
 
@@ -71,7 +71,8 @@ export interface quadrantBuilderData {
   points: QuadrantPointInputType[];
 }
 
-export interface QuadrantBuilderConfig extends QuadrantChartConfig {
+export interface QuadrantBuilderConfig
+  extends Required<Omit<QuadrantChartConfig, keyof BaseDiagramConfig>> {
   showXAxis: boolean;
   showYAxis: boolean;
   showTitle: boolean;

From 5885f5f82a738afd439dca2f8992de110dfe7698 Mon Sep 17 00:00:00 2001
From: Alois Klink <alois@aloisklink.com>
Date: Thu, 6 Jul 2023 01:19:34 +0100
Subject: [PATCH 055/281] test: rename src/config.spec.js to config.spec.ts

---
 packages/mermaid/src/{config.spec.js => config.spec.ts} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename packages/mermaid/src/{config.spec.js => config.spec.ts} (100%)

diff --git a/packages/mermaid/src/config.spec.js b/packages/mermaid/src/config.spec.ts
similarity index 100%
rename from packages/mermaid/src/config.spec.js
rename to packages/mermaid/src/config.spec.ts

From f731853e01339d9cc9e7e5582d70039293a0db7e Mon Sep 17 00:00:00 2001
From: Alois Klink <alois@aloisklink.com>
Date: Thu, 6 Jul 2023 01:20:24 +0100
Subject: [PATCH 056/281] style: fix lint issues in src/config.spec.ts

It looks like our linter automatically converts `let` to `const` in
TypeScript files, but not in JavaScript files.
---
 packages/mermaid/src/config.spec.ts | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/packages/mermaid/src/config.spec.ts b/packages/mermaid/src/config.spec.ts
index 1f7fd976b..c962445e6 100644
--- a/packages/mermaid/src/config.spec.ts
+++ b/packages/mermaid/src/config.spec.ts
@@ -6,16 +6,16 @@ describe('when working with site config', function () {
     configApi.setSiteConfig({});
   });
   it('should set site config and config properly', function () {
-    let config_0 = { foo: 'bar', bar: 0 };
+    const config_0 = { foo: 'bar', bar: 0 };
     configApi.setSiteConfig(config_0);
-    let config_1 = configApi.getSiteConfig();
-    let config_2 = configApi.getConfig();
+    const config_1 = configApi.getSiteConfig();
+    const config_2 = configApi.getConfig();
     expect(config_1.foo).toEqual(config_0.foo);
     expect(config_1.bar).toEqual(config_0.bar);
     expect(config_1).toEqual(config_2);
   });
   it('should respect secure keys when applying directives', function () {
-    let config_0 = {
+    const config_0 = {
       foo: 'bar',
       bar: 'cant-be-changed',
       secure: [...configApi.defaultConfig.secure, 'bar'],
@@ -27,30 +27,30 @@ describe('when working with site config', function () {
     expect(cfg.bar).toBe(config_0.bar);
   });
   it('should set reset config properly', function () {
-    let config_0 = { foo: 'bar', bar: 0 };
+    const config_0 = { foo: 'bar', bar: 0 };
     configApi.setSiteConfig(config_0);
-    let config_1 = { foo: 'baf' };
+    const config_1 = { foo: 'baf' };
     configApi.setConfig(config_1);
-    let config_2 = configApi.getConfig();
+    const config_2 = configApi.getConfig();
     expect(config_2.foo).toEqual(config_1.foo);
     configApi.reset();
-    let config_3 = configApi.getConfig();
+    const config_3 = configApi.getConfig();
     expect(config_3.foo).toEqual(config_0.foo);
-    let config_4 = configApi.getSiteConfig();
+    const config_4 = configApi.getSiteConfig();
     expect(config_4.foo).toEqual(config_0.foo);
   });
   it('should set global reset config properly', function () {
-    let config_0 = { foo: 'bar', bar: 0 };
+    const config_0 = { foo: 'bar', bar: 0 };
     configApi.setSiteConfig(config_0);
-    let config_1 = configApi.getSiteConfig();
+    const config_1 = configApi.getSiteConfig();
     expect(config_1.foo).toEqual(config_0.foo);
-    let config_2 = configApi.getConfig();
+    const config_2 = configApi.getConfig();
     expect(config_2.foo).toEqual(config_0.foo);
     configApi.setConfig({ foobar: 'bar0' });
-    let config_3 = configApi.getConfig();
+    const config_3 = configApi.getConfig();
     expect(config_3.foobar).toEqual('bar0');
     configApi.reset();
-    let config_4 = configApi.getConfig();
+    const config_4 = configApi.getConfig();
     expect(config_4.foobar).toBeUndefined();
   });
 });

From 6ceee7f253ddc20b76b63a7a1b90500f9db0bd11 Mon Sep 17 00:00:00 2001
From: Alois Klink <alois@aloisklink.com>
Date: Thu, 6 Jul 2023 01:27:24 +0100
Subject: [PATCH 057/281] test: fix types in `config.spec.ts`

The `foo`, `bar`, and `foobar` options don't exist in MermaidConfig.

Instead, I've replaced them with:
  - `foo` -> `fontFamily`
  - `bar` -> `fontSize`
  - `foobar` -> `altfontFamily`
---
 packages/mermaid/src/config.spec.ts | 40 ++++++++++++++---------------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/packages/mermaid/src/config.spec.ts b/packages/mermaid/src/config.spec.ts
index c962445e6..7a35614a4 100644
--- a/packages/mermaid/src/config.spec.ts
+++ b/packages/mermaid/src/config.spec.ts
@@ -6,51 +6,51 @@ describe('when working with site config', function () {
     configApi.setSiteConfig({});
   });
   it('should set site config and config properly', function () {
-    const config_0 = { foo: 'bar', bar: 0 };
+    const config_0 = { fontFamily: 'foo-font', fontSize: 150 };
     configApi.setSiteConfig(config_0);
     const config_1 = configApi.getSiteConfig();
     const config_2 = configApi.getConfig();
-    expect(config_1.foo).toEqual(config_0.foo);
-    expect(config_1.bar).toEqual(config_0.bar);
+    expect(config_1.fontFamily).toEqual(config_0.fontFamily);
+    expect(config_1.fontSize).toEqual(config_0.fontSize);
     expect(config_1).toEqual(config_2);
   });
   it('should respect secure keys when applying directives', function () {
     const config_0 = {
-      foo: 'bar',
-      bar: 'cant-be-changed',
-      secure: [...configApi.defaultConfig.secure, 'bar'],
+      fontFamily: 'foo-font',
+      fontSize: 12345, // can't be changed
+      secure: [...configApi.defaultConfig.secure!, 'fontSize'],
     };
     configApi.setSiteConfig(config_0);
-    const directive = { foo: 'baf', bar: 'should-not-be-allowed' };
+    const directive = { fontFamily: 'baf', fontSize: 54321 /* fontSize shouldn't be changed */ };
     const cfg = configApi.updateCurrentConfig(config_0, [directive]);
-    expect(cfg.foo).toEqual(directive.foo);
-    expect(cfg.bar).toBe(config_0.bar);
+    expect(cfg.fontFamily).toEqual(directive.fontFamily);
+    expect(cfg.fontSize).toBe(config_0.fontSize);
   });
   it('should set reset config properly', function () {
-    const config_0 = { foo: 'bar', bar: 0 };
+    const config_0 = { fontFamily: 'foo-font', fontSize: 150 };
     configApi.setSiteConfig(config_0);
-    const config_1 = { foo: 'baf' };
+    const config_1 = { fontFamily: 'baf' };
     configApi.setConfig(config_1);
     const config_2 = configApi.getConfig();
-    expect(config_2.foo).toEqual(config_1.foo);
+    expect(config_2.fontFamily).toEqual(config_1.fontFamily);
     configApi.reset();
     const config_3 = configApi.getConfig();
-    expect(config_3.foo).toEqual(config_0.foo);
+    expect(config_3.fontFamily).toEqual(config_0.fontFamily);
     const config_4 = configApi.getSiteConfig();
-    expect(config_4.foo).toEqual(config_0.foo);
+    expect(config_4.fontFamily).toEqual(config_0.fontFamily);
   });
   it('should set global reset config properly', function () {
-    const config_0 = { foo: 'bar', bar: 0 };
+    const config_0 = { fontFamily: 'foo-font', fontSize: 150 };
     configApi.setSiteConfig(config_0);
     const config_1 = configApi.getSiteConfig();
-    expect(config_1.foo).toEqual(config_0.foo);
+    expect(config_1.fontFamily).toEqual(config_0.fontFamily);
     const config_2 = configApi.getConfig();
-    expect(config_2.foo).toEqual(config_0.foo);
-    configApi.setConfig({ foobar: 'bar0' });
+    expect(config_2.fontFamily).toEqual(config_0.fontFamily);
+    configApi.setConfig({ altFontFamily: 'bar-font' });
     const config_3 = configApi.getConfig();
-    expect(config_3.foobar).toEqual('bar0');
+    expect(config_3.altFontFamily).toEqual('bar-font');
     configApi.reset();
     const config_4 = configApi.getConfig();
-    expect(config_4.foobar).toBeUndefined();
+    expect(config_4.altFontFamily).toBeUndefined();
   });
 });

From a862565a24a6ffd47a689906b4b101aa7bdb80b2 Mon Sep 17 00:00:00 2001
From: Alois Klink <alois@aloisklink.com>
Date: Thu, 6 Jul 2023 01:35:11 +0100
Subject: [PATCH 058/281] test: test partial QuadrantChartConfig options

---
 packages/mermaid/src/config.spec.ts | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/packages/mermaid/src/config.spec.ts b/packages/mermaid/src/config.spec.ts
index 7a35614a4..457cb8244 100644
--- a/packages/mermaid/src/config.spec.ts
+++ b/packages/mermaid/src/config.spec.ts
@@ -26,6 +26,22 @@ describe('when working with site config', function () {
     expect(cfg.fontFamily).toEqual(directive.fontFamily);
     expect(cfg.fontSize).toBe(config_0.fontSize);
   });
+  it('should allow setting partial options', function () {
+    const defaultConfig = configApi.getConfig();
+
+    configApi.setConfig({
+      quadrantChart: {
+        chartHeight: 600,
+      },
+    });
+
+    const updatedConfig = configApi.getConfig();
+
+    // deep options we didn't update should remain the same
+    expect(defaultConfig.quadrantChart!.chartWidth).toEqual(
+      updatedConfig.quadrantChart!.chartWidth
+    );
+  });
   it('should set reset config properly', function () {
     const config_0 = { fontFamily: 'foo-font', fontSize: 150 };
     configApi.setSiteConfig(config_0);

From 4372a54dbaf0304ff7b7866579e8abb011797428 Mon Sep 17 00:00:00 2001
From: Alois Klink <alois@aloisklink.com>
Date: Sun, 4 Dec 2022 23:32:20 +0000
Subject: [PATCH 059/281] docs: add support for ```regexp``` code blocks

Currently, shiki doesn't support code-blocks that use the regexp
language, which means vitepress throws an error on them:

```regexp
^([1-9][0-9]*)(minute|hour|day|week|month)$
```

As a hack until shiki supports them, I've just modified them to get
converted into JavaScript RegEx literal code-blocks, e.g.:

```javascript
/^([1-9][0-9]*)(minute|hour|day|week|month)$/
```
---
 .../mermaid/src/docs/.vitepress/mermaid-markdown-all.ts  | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts b/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts
index 14340462c..30f044d98 100644
--- a/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts
+++ b/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts
@@ -54,6 +54,15 @@ const MermaidExample = async (md: MarkdownRenderer) => {
       return `<div class="tip custom-block"><p class="custom-block-title">NOTE</p><p>${token.content}}</p></div>`;
     }
 
+    if (token.info.trim() === 'regexp') {
+      // shiki doesn't yet support regexp code blocks, but the javascript
+      // one still makes RegExes look good
+      token.info = 'javascript';
+      // use trimEnd to move trailing `\n` outside if the JavaScript regex `/` block
+      token.content = `/${token.content.trimEnd()}/\n`;
+      return defaultRenderer(tokens, index, options, env, slf);
+    }
+
     if (token.info.trim() === 'jison') {
       return `<div class="language-">
       <button class="copy"></button>

From 58b43976ffbf0f063f647e3fc27502eb25ec9a4d Mon Sep 17 00:00:00 2001
From: Alois Klink <alois@aloisklink.com>
Date: Sun, 4 Dec 2022 23:05:26 +0000
Subject: [PATCH 060/281] feat: add Mermaid Config in JSON Schema format

Add a JSON Schema file (in YAML) for the MermaidConfig.

This JSON Schema file follows [JSON Schema 2019-09][1], with some slight
modifications to work with:

- [json-schema-to-typescript][2]
  The `tsType` keyword is used to override the generated TypeScript
  type, when it doesn't match the JSON Schema type.

  This is used in two cases:
    - when the current type cannot be represented in JSON Schema
      (e.g. `FontCalculator`, which is a function)
    - when the JSON Schema type is narrower than the TypeScript type.
      Currently, many enums types are listed as `string` in TypeScript,
      but json-schema-to-typescript converts them to `"val1" | "val2"`.
      I've manually set them to `string | "val1" | "val2"` to avoid
      causing a breaking change in the TypeScript types. We should
      remove these in a future major version of TypeScript.
- [@adobe/jsonschema2md][3]
  The `meta:enum` keyword is used to add documentation for specific enum
  values.

[1]: https://json-schema.org/draft/2019-09/release-notes.html
[2]: https://www.npmjs.com/package/json-schema-to-typescript
[3]: https://www.npmjs.com/package/@adobe/jsonschema2md
---
 .../mermaid/src/schemas/config.schema.yaml    | 1886 +++++++++++++++++
 1 file changed, 1886 insertions(+)
 create mode 100644 packages/mermaid/src/schemas/config.schema.yaml

diff --git a/packages/mermaid/src/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml
new file mode 100644
index 000000000..306aab2cc
--- /dev/null
+++ b/packages/mermaid/src/schemas/config.schema.yaml
@@ -0,0 +1,1886 @@
+# Used for VS Code's YAML plugin to automatically error on invalid types
+# yaml-language-server: $schema=https://json-schema.org/draft/2019-09/schema
+
+# This file defines the MermaidConfig JSON Schema as a YAML file.
+#
+# From this file, the following things can be generated:
+#   - `scripts/create-types-from-json-schema.mjs`
+#     Used to generate the `src/config.type.ts` TypeScript types for MermaidConfig
+#     with the `json-schema-to-typescript` NPM package.
+#   - `.vite/jsonSchemaPlugin.ts`
+#     Used to generate the default values from the `default` keys in this
+#     JSON Schema using the `ajv` NPM package.
+#     Non-JSON values, like functions or `undefined`, still need to be manually
+#     set in `src/defaultConfig.ts`)
+#   - `src/docs.mts`
+#     Used to genereate Markdown documentation for this JSON Schema by using
+#     the `@adobe/jsonschema2md` NPM package.
+
+# Useful things to know when editting this file
+# - Use the `|` character for multi-line strings
+# - Use `meta:enum` to document enum values (from jsonschema2md)
+# - Use `tsType` to override the TypeScript type (from json-schema-to-typescript)
+# - If adding a new object to `MermaidConfig` (e.g. a new diagram type),
+#   you may need to add it to `.vite/jsonSchemaPlugin.ts` and `src/docs.mts`
+#   to get the docs/default values to generate properly.
+$id: https://mermaid-js.github.io/schemas/config.schema.json
+$schema: https://json-schema.org/draft/2019-09/schema
+title: Mermaid Config
+type: object
+additionalProperties: false
+required:
+  - fontFamily
+  - logLevel
+  - securityLevel
+  - startOnLoad
+  - arrowMarkerAbsolute
+  - flowchart
+  - sequence
+  - gantt
+  - journey
+  - class
+  - state
+  - er
+  - pie
+  - quadrantChart
+  - requirement
+  - mindmap
+  - gitGraph
+  - c4
+  - sankey
+properties:
+  theme:
+    description: |
+      Theme, the CSS style sheet.
+      You may also use `themeCSS` to override this value.
+    type: string
+    enum:
+      - default
+      - forest
+      - dark
+      - neutral
+      - 'null' # should this be a `null`-type?
+    meta:enum:
+      'null': Can be set to disable any pre-defined mermaid theme
+    default: 'default'
+    # Allow any string for typescript backwards compatibility (fix in Mermaid v10)
+    tsType: 'string | "default" | "forest" | "dark" | "neutral" | "null"'
+  themeVariables:
+    tsType: any
+  themeCSS:
+    type: string
+  maxTextSize:
+    description: The maximum allowed size of the users text diagram
+    type: number
+    default: 50000
+  darkMode:
+    type: boolean
+    default: false
+  htmlLabels:
+    type: boolean # maybe unused, seems to be copied in each diagram config
+  fontFamily:
+    description: |
+      Specifies the font to be used in the rendered diagrams.
+      Can be any possible CSS `font-family`.
+      See https://developer.mozilla.org/en-US/docs/Web/CSS/font-family
+    type: string
+    default: '"trebuchet ms", verdana, arial, sans-serif;'
+  altFontFamily:
+    # TODO: seems to be unused, except for in tests
+    type: string
+  logLevel:
+    description: |
+      This option decides the amount of logging to be used by mermaid.
+    type:
+      - string
+      - number
+    enum:
+      - trace
+      - 0
+      - debug
+      - 1
+      - info
+      - 2
+      - warn
+      - 3
+      - error
+      - 4
+      - fatal
+      - 5
+    meta:enum:
+      trace: Equivalent to 0
+      debug: Equivalent to 1
+      info: Equivalent to 2
+      warn: Equivalent to 3
+      error: Equivalent to 4
+      fatal: Equivalent to 5 (default)
+    default: 5
+    # Allow any number or string for typescript backwards compatibility (fix in Mermaid v10)
+    tsType: 'number | string | 0 | 2 | 1 | "trace" | "debug" | "info" | "warn" | "error" | "fatal" | 3 | 4 | 5 | undefined'
+  securityLevel:
+    description: Level of trust for parsed diagram
+    type: string
+    enum:
+      - strict
+      - loose
+      - antiscript
+      - sandbox
+    meta:enum:
+      strict: (**default**) HTML tags in the text are encoded and click functionality is disabled.
+      antiscript: HTML tags in text are allowed (only script elements are removed), and click functionality is enabled.
+      loose: HTML tags in text are allowed and click functionality is enabled.
+      sandbox: |
+        With this security level, all rendering takes place in a sandboxed iframe.
+        This prevent any JavaScript from running in the context.
+        This may hinder interactive functionality of the diagram, like scripts, popups in the sequence diagram, or links to other tabs or targets, etc.
+    default: strict
+    # Allow any string for typescript backwards compatibility (fix in Mermaid v10)
+    tsType: 'string | "strict" | "loose" | "antiscript" | "sandbox" | undefined'
+  startOnLoad:
+    description: Dictates whether mermaid starts on Page load
+    type: boolean
+    default: true
+  arrowMarkerAbsolute:
+    &arrowMarkerAbsolute # YAML anchor, can be used later with `*arrowMarkerAbsolute`
+    description: |
+      Controls whether or arrow markers in html code are absolute paths or anchors.
+      This matters if you are using base tag settings.
+    type: boolean
+    default: false
+  secure:
+    description: |
+      This option controls which `currentConfig` keys are considered secure and
+      can only be changed via call to `mermaidAPI.initialize`.
+      Calls to `mermaidAPI.reinitialize` cannot make changes to the secure keys
+      in the current `currentConfig`.
+
+      This prevents malicious graph directives from overriding a site's default security.
+    default: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
+    type: array
+    items:
+      type: string
+    uniqueItems: false # Should be enabled, but it may be a breaking change from the old config
+  deterministicIds:
+    description: |
+      This option controls if the generated ids of nodes in the SVG are
+      generated randomly or based on a seed.
+      If set to `false`, the IDs are generated based on the current date and
+      thus are not deterministic. This is the default behavior.
+
+      This matters if your files are checked into source control e.g. git and
+      should not change unless content is changed.
+    type: boolean
+    default: false
+  deterministicIDSeed:
+    description: |
+      This option is the optional seed for deterministic ids.
+      If set to `undefined` but deterministicIds is `true`, a simple number iterator is used.
+      You can set this attribute to base the seed on a static string.
+    type: string
+  flowchart:
+    $ref: '#/$defs/FlowchartDiagramConfig'
+  sequence:
+    $ref: '#/$defs/SequenceDiagramConfig'
+  gantt:
+    $ref: '#/$defs/GanttDiagramConfig'
+  journey:
+    $ref: '#/$defs/JourneyDiagramConfig'
+  timeline:
+    $ref: '#/$defs/TimelineDiagramConfig'
+  class:
+    $ref: '#/$defs/ClassDiagramConfig'
+  state:
+    $ref: '#/$defs/StateDiagramConfig'
+  er:
+    $ref: '#/$defs/ErDiagramConfig'
+  pie:
+    $ref: '#/$defs/PieDiagramConfig'
+  quadrantChart:
+    $ref: '#/$defs/QuadrantChartConfig'
+  requirement:
+    $ref: '#/$defs/RequirementDiagramConfig'
+  mindmap:
+    $ref: '#/$defs/MindmapDiagramConfig'
+  gitGraph:
+    $ref: '#/$defs/GitGraphDiagramConfig'
+  c4:
+    $ref: '#/$defs/C4DiagramConfig'
+  sankey:
+    $ref: '#/$defs/SankeyDiagramConfig'
+  dompurifyConfig:
+    title: DOM Purify Configuration
+    description: Configuration options to pass to the `dompurify` library.
+    type: object
+    tsType: "import('dompurify').Config"
+  wrap:
+    type: boolean
+  fontSize:
+    type: number
+    default: 16
+
+$defs: # JSON Schema definition (maybe we should move these to a seperate file)
+  BaseDiagramConfig:
+    # TODO: More config needs to be moved here
+    title: Base Diagram Config
+    type: object
+    properties:
+      useWidth:
+        type: number
+      useMaxWidth:
+        description: |
+          When this flag is set to `true`, the height and width is set to 100%
+          and is then scaled with the available space.
+          If set to `false`, the absolute space required is used.
+        type: boolean
+        default: true
+  C4DiagramConfig:
+    title: C4 Diagram Config
+    allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }]
+    description: The object containing configurations specific for c4 diagrams
+    type: object
+    unevaluatedProperties: false
+    required:
+      - diagramMarginX
+      - diagramMarginY
+      - c4ShapeMargin
+      - c4ShapePadding
+      - width
+      - height
+      - boxMargin
+      - useMaxWidth
+      - c4ShapeInRow
+      - c4BoundaryInRow
+    properties:
+      diagramMarginX:
+        description: |
+          Margin to the right and left of the c4 diagram, must be a positive value.
+        type: integer
+        default: 50
+        minimum: 0
+      diagramMarginY:
+        description: |
+          Margin to the over and under the c4 diagram, must be a positive value.
+        type: integer
+        default: 10
+        minimum: 0
+      c4ShapeMargin:
+        description: Margin between shapes
+        type: integer
+        default: 50
+        minimum: 0
+      c4ShapePadding:
+        description: Padding between shapes
+        type: integer
+        default: 20
+        minimum: 0
+      width:
+        description: Width of person boxes
+        type: integer
+        default: 216
+        minimum: 0
+      height:
+        description: Height of person boxes
+        type: integer
+        default: 60
+        minimum: 0
+      boxMargin:
+        description: Margin around boxes
+        type: integer
+        default: 10
+        minimum: 0
+      c4ShapeInRow:
+        description: How many shapes to place in each row.
+        type: integer
+        default: 4
+        minimum: 0
+      nextLinePaddingX:
+        # TODO: add description
+        type: number
+        default: 0
+      c4BoundaryInRow:
+        description: How many boundaries to place in each row.
+        type: integer
+        default: 2
+        minimum: 0
+
+      # --------------------------------------------------------------------- #
+      # Default font values
+      # --------------------------------------------------------------------- #
+      personFontSize:
+        description: This sets the font size of Person shape for the diagram
+        type: &fontSizeType ['string', 'number'] # YAML anchor
+        default: 14
+      personFontFamily:
+        description: This sets the font weight of Person shape for the diagram
+        type: string
+        default: '"Open Sans", sans-serif'
+      personFontWeight:
+        description: This sets the font weight of Person shape for the diagram
+        type: ['string', 'number']
+        default: normal
+      external_personFontSize:
+        description: This sets the font size of External Person shape for the diagram
+        type: *fontSizeType
+        default: 14
+      external_personFontFamily:
+        description: This sets the font family of External Person shape for the diagram
+        type: string
+        default: '"Open Sans", sans-serif'
+      external_personFontWeight:
+        description: This sets the font weight of External Person shape for the diagram
+        type: ['string', 'number']
+        default: normal
+      systemFontSize:
+        description: This sets the font size of System shape for the diagram
+        type: *fontSizeType
+        default: 14
+      systemFontFamily:
+        description: This sets the font family of System shape for the diagram
+        type: string
+        default: '"Open Sans", sans-serif'
+      systemFontWeight:
+        description: This sets the font weight of System shape for the diagram
+        type: ['string', 'number']
+        default: normal
+      external_systemFontSize:
+        description: This sets the font size of External System shape for the diagram
+        type: *fontSizeType
+        default: 14
+      external_systemFontFamily:
+        description: This sets the font family of External System shape for the diagram
+        type: string
+        default: '"Open Sans", sans-serif'
+      external_systemFontWeight:
+        description: This sets the font weight of External System shape for the diagram
+        type: ['string', 'number']
+        default: normal
+      system_dbFontSize:
+        description: This sets the font size of System DB shape for the diagram
+        type: *fontSizeType
+        default: 14
+      system_dbFontFamily:
+        description: This sets the font family of System DB shape for the diagram
+        type: string
+        default: '"Open Sans", sans-serif'
+      system_dbFontWeight:
+        description: This sets the font weight of System DB shape for the diagram
+        type: ['string', 'number']
+        default: normal
+      external_system_dbFontSize:
+        description: This sets the font size of External System DB shape for the diagram
+        type: *fontSizeType
+        default: 14
+      external_system_dbFontFamily:
+        description: This sets the font family of External System DB shape for the diagram
+        type: string
+        default: '"Open Sans", sans-serif'
+      external_system_dbFontWeight:
+        description: This sets the font weight of External System DB shape for the diagram
+        type: ['string', 'number']
+        default: normal
+      system_queueFontSize:
+        description: This sets the font size of System Queue shape for the diagram
+        type: *fontSizeType
+        default: 14
+      system_queueFontFamily:
+        description: This sets the font family of System Queue shape for the diagram
+        type: string
+        default: '"Open Sans", sans-serif'
+      system_queueFontWeight:
+        description: This sets the font weight of System Queue shape for the diagram
+        type: ['string', 'number']
+        default: normal
+      external_system_queueFontSize:
+        description: This sets the font size of External System Queue shape for the diagram
+        type: *fontSizeType
+        default: 14
+      external_system_queueFontFamily:
+        description: This sets the font family of External System Queue shape for the diagram
+        type: string
+        default: '"Open Sans", sans-serif'
+      external_system_queueFontWeight:
+        description: This sets the font weight of External System Queue shape for the diagram
+        type: ['string', 'number']
+        default: normal
+      boundaryFontSize:
+        description: This sets the font size of Boundary shape for the diagram
+        type: *fontSizeType
+        default: 14
+      boundaryFontFamily:
+        description: This sets the font family of Boundary shape for the diagram
+        type: string
+        default: '"Open Sans", sans-serif'
+      boundaryFontWeight:
+        description: This sets the font weight of Boundary shape for the diagram
+        type: ['string', 'number']
+        default: normal
+      messageFontSize:
+        description: This sets the font size of Message shape for the diagram
+        type: *fontSizeType
+        default: 12
+      messageFontFamily:
+        description: This sets the font family of Message shape for the diagram
+        type: string
+        default: '"Open Sans", sans-serif'
+      messageFontWeight:
+        description: This sets the font weight of Message shape for the diagram
+        type: ['string', 'number']
+        default: normal
+
+      containerFontSize:
+        description: This sets the font size of Container shape for the diagram
+        type: *fontSizeType
+        default: 14
+      containerFontFamily:
+        description: This sets the font family of Container shape for the diagram
+        type: string
+        default: '"Open Sans", sans-serif'
+      containerFontWeight:
+        description: This sets the font weight of Container shape for the diagram
+        type: ['string', 'number']
+        default: normal
+      external_containerFontSize:
+        description: This sets the font size of External Container shape for the diagram
+        type: *fontSizeType
+        default: 14
+      external_containerFontFamily:
+        description: This sets the font family of External Container shape for the diagram
+        type: string
+        default: '"Open Sans", sans-serif'
+      external_containerFontWeight:
+        description: This sets the font weight of External Container shape for the diagram
+        type: ['string', 'number']
+        default: normal
+
+      container_dbFontSize:
+        description: This sets the font size of Container DB shape for the diagram
+        type: *fontSizeType
+        default: 14
+      container_dbFontFamily:
+        description: This sets the font family of Container DB shape for the diagram
+        type: string
+        default: '"Open Sans", sans-serif'
+      container_dbFontWeight:
+        description: This sets the font weight of Container DB shape for the diagram
+        type: ['string', 'number']
+        default: normal
+      external_container_dbFontSize:
+        description: This sets the font size of External Container DB shape for the diagram
+        type: *fontSizeType
+        default: 14
+      external_container_dbFontFamily:
+        description: This sets the font family of External Container DB shape for the diagram
+        type: string
+        default: '"Open Sans", sans-serif'
+      external_container_dbFontWeight:
+        description: This sets the font weight of External Container DB shape for the diagram
+        type: ['string', 'number']
+        default: normal
+
+      container_queueFontSize:
+        description: This sets the font size of Container Queue shape for the diagram
+        type: *fontSizeType
+        default: 14
+      container_queueFontFamily:
+        description: This sets the font family of Container Queue shape for the diagram
+        type: string
+        default: '"Open Sans", sans-serif'
+      container_queueFontWeight:
+        description: This sets the font weight of Container Queue shape for the diagram
+        type: ['string', 'number']
+        default: normal
+      external_container_queueFontSize:
+        description: This sets the font size of External Container Queue shape for the diagram
+        type: *fontSizeType
+        default: 14
+      external_container_queueFontFamily:
+        description: This sets the font family of External Container Queue shape for the diagram
+        type: string
+        default: '"Open Sans", sans-serif'
+      external_container_queueFontWeight:
+        description: This sets the font weight of External Container Queue shape for the diagram
+        type: ['string', 'number']
+        default: normal
+
+      componentFontSize:
+        description: This sets the font size of Component shape for the diagram
+        type: *fontSizeType
+        default: 14
+      componentFontFamily:
+        description: This sets the font family of Component shape for the diagram
+        type: string
+        default: '"Open Sans", sans-serif'
+      componentFontWeight:
+        description: This sets the font weight of Component shape for the diagram
+        type: ['string', 'number']
+        default: normal
+      external_componentFontSize:
+        description: This sets the font size of External Component shape for the diagram
+        type: *fontSizeType
+        default: 14
+      external_componentFontFamily:
+        description: This sets the font family of External Component shape for the diagram
+        type: string
+        default: '"Open Sans", sans-serif'
+      external_componentFontWeight:
+        description: This sets the font weight of External Component shape for the diagram
+        type: ['string', 'number']
+        default: normal
+
+      component_dbFontSize:
+        description: This sets the font size of Component DB shape for the diagram
+        type: *fontSizeType
+        default: 14
+      component_dbFontFamily:
+        description: This sets the font family of Component DB shape for the diagram
+        type: string
+        default: '"Open Sans", sans-serif'
+      component_dbFontWeight:
+        description: This sets the font weight of Component DB shape for the diagram
+        type: ['string', 'number']
+        default: normal
+      external_component_dbFontSize:
+        description: This sets the font size of External Component DB shape for the diagram
+        type: *fontSizeType
+        default: 14
+      external_component_dbFontFamily:
+        description: This sets the font family of External Component DB shape for the diagram
+        type: string
+        default: '"Open Sans", sans-serif'
+      external_component_dbFontWeight:
+        description: This sets the font weight of External Component DB shape for the diagram
+        type: ['string', 'number']
+        default: normal
+
+      component_queueFontSize:
+        description: This sets the font size of Component Queue shape for the diagram
+        type: *fontSizeType
+        default: 14
+      component_queueFontFamily:
+        description: This sets the font family of Component Queue shape for the diagram
+        type: string
+        default: '"Open Sans", sans-serif'
+      component_queueFontWeight:
+        description: This sets the font weight of Component Queue shape for the diagram
+        type: ['string', 'number']
+        default: normal
+      external_component_queueFontSize:
+        description: This sets the font size of External Component Queue shape for the diagram
+        type: *fontSizeType
+        default: 14
+      external_component_queueFontFamily:
+        description: This sets the font family of External Component Queue shape for the diagram
+        type: string
+        default: '"Open Sans", sans-serif'
+      external_component_queueFontWeight:
+        description: This sets the font weight of External Component Queue shape for the diagram
+        type: ['string', 'number']
+        default: normal
+
+      wrap:
+        description: This sets the auto-wrap state for the diagram
+        type: boolean
+        default: true
+      wrapPadding:
+        description: This sets the auto-wrap padding for the diagram (sides only)
+        type: number
+        default: 10
+
+      # --------------------------------------------------------------------- #
+      # Colors
+      # --------------------------------------------------------------------- #
+      person_bg_color:
+        type: string
+        default: '#08427B'
+      person_border_color:
+        type: string
+        default: '#073B6F'
+      external_person_bg_color:
+        type: string
+        default: '#686868'
+      external_person_border_color:
+        type: string
+        default: '#8A8A8A'
+      system_bg_color:
+        type: string
+        default: '#1168BD'
+      system_border_color:
+        type: string
+        default: '#3C7FC0'
+      system_db_bg_color:
+        type: string
+        default: '#1168BD'
+      system_db_border_color:
+        type: string
+        default: '#3C7FC0'
+      system_queue_bg_color:
+        type: string
+        default: '#1168BD'
+      system_queue_border_color:
+        type: string
+        default: '#3C7FC0'
+      external_system_bg_color:
+        type: string
+        default: '#999999'
+      external_system_border_color:
+        type: string
+        default: '#8A8A8A'
+      external_system_db_bg_color:
+        type: string
+        default: '#999999'
+      external_system_db_border_color:
+        type: string
+        default: '#8A8A8A'
+      external_system_queue_bg_color:
+        type: string
+        default: '#999999'
+      external_system_queue_border_color:
+        type: string
+        default: '#8A8A8A'
+      container_bg_color:
+        type: string
+        default: '#438DD5'
+      container_border_color:
+        type: string
+        default: '#3C7FC0'
+      container_db_bg_color:
+        type: string
+        default: '#438DD5'
+      container_db_border_color:
+        type: string
+        default: '#3C7FC0'
+      container_queue_bg_color:
+        type: string
+        default: '#438DD5'
+      container_queue_border_color:
+        type: string
+        default: '#3C7FC0'
+      external_container_bg_color:
+        type: string
+        default: '#B3B3B3'
+      external_container_border_color:
+        type: string
+        default: '#A6A6A6'
+      external_container_db_bg_color:
+        type: string
+        default: '#B3B3B3'
+      external_container_db_border_color:
+        type: string
+        default: '#A6A6A6'
+      external_container_queue_bg_color:
+        type: string
+        default: '#B3B3B3'
+      external_container_queue_border_color:
+        type: string
+        default: '#A6A6A6'
+      component_bg_color:
+        type: string
+        default: '#85BBF0'
+      component_border_color:
+        type: string
+        default: '#78A8D8'
+      component_db_bg_color:
+        type: string
+        default: '#85BBF0'
+      component_db_border_color:
+        type: string
+        default: '#78A8D8'
+      component_queue_bg_color:
+        type: string
+        default: '#85BBF0'
+      component_queue_border_color:
+        type: string
+        default: '#78A8D8'
+      external_component_bg_color:
+        type: string
+        default: '#CCCCCC'
+      external_component_border_color:
+        type: string
+        default: '#BFBFBF'
+      external_component_db_bg_color:
+        type: string
+        default: '#CCCCCC'
+      external_component_db_border_color:
+        type: string
+        default: '#BFBFBF'
+      external_component_queue_bg_color:
+        type: string
+        default: '#CCCCCC'
+      external_component_queue_border_color:
+        type: string
+        default: '#BFBFBF'
+
+      # Font Calculators
+      # By default, these all return the values from this configuration.
+      personFont: { '$ref': '#/$defs/FontCalculator' }
+      external_personFont: { '$ref': '#/$defs/FontCalculator' }
+      systemFont: { '$ref': '#/$defs/FontCalculator' }
+      external_systemFont: { '$ref': '#/$defs/FontCalculator' }
+      system_dbFont: { '$ref': '#/$defs/FontCalculator' }
+      external_system_dbFont: { '$ref': '#/$defs/FontCalculator' }
+      system_queueFont: { '$ref': '#/$defs/FontCalculator' }
+      external_system_queueFont: { '$ref': '#/$defs/FontCalculator' }
+      containerFont: { '$ref': '#/$defs/FontCalculator' }
+      external_containerFont: { '$ref': '#/$defs/FontCalculator' }
+      container_dbFont: { '$ref': '#/$defs/FontCalculator' }
+      external_container_dbFont: { '$ref': '#/$defs/FontCalculator' }
+      container_queueFont: { '$ref': '#/$defs/FontCalculator' }
+      external_container_queueFont: { '$ref': '#/$defs/FontCalculator' }
+      componentFont: { '$ref': '#/$defs/FontCalculator' }
+      external_componentFont: { '$ref': '#/$defs/FontCalculator' }
+      component_dbFont: { '$ref': '#/$defs/FontCalculator' }
+      external_component_dbFont: { '$ref': '#/$defs/FontCalculator' }
+      component_queueFont: { '$ref': '#/$defs/FontCalculator' }
+      external_component_queueFont: { '$ref': '#/$defs/FontCalculator' }
+      boundaryFont: { '$ref': '#/$defs/FontCalculator' }
+      messageFont: { '$ref': '#/$defs/FontCalculator' }
+
+  GitGraphDiagramConfig:
+    title: Git Graph Diagram Config
+    allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }]
+    type: object
+    unevaluatedProperties: false
+    required:
+      - titleTopMargin
+    properties:
+      titleTopMargin:
+        # TODO: I've removed the `Git` part from this description, so that I
+        # could $ref: "#/$defs/GitGraphDiagramConfig/properties/titleTopMargin"
+        # this field in other diagrams
+        description: Margin top for the text over the diagram
+        type: integer
+        default: 25
+        minimum: 0
+      diagramPadding:
+        type: number
+        default: 8
+      nodeLabel:
+        allOf: [{ $ref: '#/$defs/NodeLabel' }]
+        type: object
+        default:
+          width: 75
+          height: 100
+          x: -25
+          y: 0
+      mainBranchName:
+        type: string
+        default: 'main'
+      mainBranchOrder:
+        type: number
+        default: 0
+      showCommitLabel:
+        type: boolean
+        default: true
+      showBranches:
+        type: boolean
+        default: true
+      rotateCommitLabel:
+        type: boolean
+        default: true
+      # YAML anchor reference, don't use $ref since ajv doesn't load defaults
+      arrowMarkerAbsolute: *arrowMarkerAbsolute
+
+  NodeLabel:
+    title: Node Label
+    type: object
+    properties:
+      width:
+        type: number
+      height:
+        type: number
+      x:
+        type: number
+      y:
+        type: number
+
+  RequirementDiagramConfig:
+    title: Requirement Diagram Config
+    allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }]
+    description: The object containing configurations specific for req diagrams
+    type: object
+    unevaluatedProperties: false
+    required:
+      - useMaxWidth
+    properties:
+      rect_fill:
+        type: string
+        default: '#f9f9f9'
+      text_color:
+        type: string
+        default: '#333'
+      rect_border_size:
+        type: string
+        default: '0.5px'
+      rect_border_color:
+        type: string
+        default: '#bbb'
+      rect_min_width:
+        type: number
+        default: 200
+      rect_min_height:
+        type: number
+        default: 200
+      fontSize:
+        type: number # TODO, should this be `type: *fontSizeType` (aka string too)
+        default: 14
+      rect_padding:
+        type: number
+        default: 10
+      line_height:
+        type: number
+        default: 20
+
+  MindmapDiagramConfig:
+    title: Mindmap Diagram Config
+    allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }]
+    description: The object containing configurations specific for mindmap diagrams
+    type: object
+    unevaluatedProperties: false
+    required:
+      - useMaxWidth
+      - padding
+      - maxNodeWidth
+    properties:
+      padding:
+        type: number
+        default: 10
+      maxNodeWidth:
+        type: number
+        default: 200
+
+  PieDiagramConfig:
+    title: Pie Diagram Config
+    allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }]
+    type: object
+    unevaluatedProperties: false
+    properties:
+      textPosition:
+        type: number
+        minimum: 0
+        maximum: 1
+        description: |
+          Axial position of slice's label from zero at the center to 1 at the outside edges.
+        default: 0.75
+
+  QuadrantChartConfig:
+    title: Quadrant Chart Config
+    allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }]
+    type: object
+    unevaluatedProperties: false
+    required:
+      - chartWidth
+      - chartHeight
+      - titleFontSize
+      - titlePadding
+      - quadrantPadding
+      - xAxisLabelPadding
+      - yAxisLabelPadding
+      - xAxisLabelFontSize
+      - yAxisLabelFontSize
+      - quadrantLabelFontSize
+      - quadrantTextTopPadding
+      - pointTextPadding
+      - pointLabelFontSize
+      - pointRadius
+      - xAxisPosition
+      - yAxisPosition
+      - quadrantInternalBorderStrokeWidth
+      - quadrantExternalBorderStrokeWidth
+      - useMaxWidth
+    properties:
+      chartWidth:
+        description: Width of the chart
+        type: number
+        minimum: 0
+        default: 500
+      chartHeight:
+        description: Height of the chart
+        type: number
+        minimum: 0
+        default: 500
+      titleFontSize:
+        description: Chart title top and bottom padding
+        type: number
+        minimum: 0
+        default: 20
+      titlePadding:
+        description: Padding around the quadrant square
+        type: number
+        minimum: 0
+        default: 10
+      quadrantPadding:
+        description: quadrant title padding from top if the quadrant is rendered on top
+        type: number
+        minimum: 0
+        default: 5
+      xAxisLabelPadding:
+        description: Padding around x-axis labels
+        type: number
+        minimum: 0
+        default: 5
+      yAxisLabelPadding:
+        description: Padding around y-axis labels
+        type: number
+        minimum: 0
+        default: 5
+      xAxisLabelFontSize:
+        description: x-axis label font size
+        type: number
+        minimum: 0
+        default: 16
+      yAxisLabelFontSize:
+        description: y-axis label font size
+        type: number
+        minimum: 0
+        default: 16
+      quadrantLabelFontSize:
+        description: quadrant title font size
+        type: number
+        minimum: 0
+        default: 16
+      quadrantTextTopPadding:
+        description: quadrant title padding from top if the quadrant is rendered on top
+        type: number
+        minimum: 0
+        default: 5
+      pointTextPadding:
+        description: padding between point and point label
+        type: number
+        minimum: 0
+        default: 5
+      pointLabelFontSize:
+        description: point title font size
+        type: number
+        minimum: 0
+        default: 12
+      pointRadius:
+        description: radius of the point to be drawn
+        type: number
+        minimum: 0
+        default: 5
+      xAxisPosition:
+        description: position of x-axis labels
+        type: string
+        enum:
+          - top
+          - bottom
+        default: top
+      yAxisPosition:
+        description: position of y-axis labels
+        type: string
+        enum:
+          - left
+          - right
+        default: left
+      quadrantInternalBorderStrokeWidth:
+        description: stroke width of edges of the box that are inside the quadrant
+        type: number
+        minimum: 0
+        default: 1
+      quadrantExternalBorderStrokeWidth:
+        description: stroke width of edges of the box that are outside the quadrant
+        type: number
+        minimum: 0
+        default: 2
+
+  ErDiagramConfig:
+    title: Er Diagram Config
+    allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }]
+    description: The object containing configurations specific for entity relationship diagrams
+    type: object
+    unevaluatedProperties: false
+    required:
+      - titleTopMargin
+      - diagramPadding
+      - layoutDirection
+      - minEntityWidth
+      - minEntityHeight
+      - entityPadding
+      - stroke
+      - fill
+      # TODO: fontSize is the only property that is not required, is this correct?
+      - useMaxWidth
+    properties:
+      titleTopMargin:
+        $ref: '#/$defs/GitGraphDiagramConfig/properties/titleTopMargin'
+        default: 25
+      diagramPadding:
+        description: |
+          The amount of padding around the diagram as a whole so that embedded
+          diagrams have margins, expressed in pixels.
+        type: integer
+        default: 20
+        minimum: 0
+      layoutDirection:
+        description: Directional bias for layout of entities
+        type: string
+        enum: ['TB', 'BT', 'LR', 'RL']
+        meta:enum:
+          TB: Top-Bottom
+          BT: Bottom-Top
+          LR: Left-Right
+          RL: Right to Left
+        default: TB
+        # Allow any string for typescript backwards compatibility (fix in Mermaid v10)
+        tsType: 'string | "TB" | "BT" | "LR" | "RL"'
+      minEntityWidth:
+        description: The minimum width of an entity box. Expressed in pixels.
+        type: integer
+        default: 100
+        minimum: 0
+      minEntityHeight:
+        description: The minimum height of an entity box. Expressed in pixels.
+        type: integer
+        default: 75
+        minimum: 0
+      entityPadding:
+        description: |
+          The minimum internal padding between text in an entity box and the enclosing box borders.
+          Expressed in pixels.
+        type: integer
+        default: 15
+        minimum: 0
+      stroke:
+        description: Stroke color of box edges and lines.
+        type: string
+        default: gray
+      fill:
+        description: Fill color of entity boxes
+        type: string
+        default: honeydew
+      fontSize:
+        description: Font size (expressed as an integer representing a number of pixels)
+        type: integer
+        default: 12
+        minimum: 0
+
+  StateDiagramConfig:
+    title: State Diagram Config
+    allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }]
+    description: The object containing configurations specific for entity relationship diagrams
+    type: object
+    unevaluatedProperties: false
+    required:
+      - titleTopMargin
+      - useMaxWidth
+      - defaultRenderer
+    properties:
+      titleTopMargin:
+        $ref: '#/$defs/GitGraphDiagramConfig/properties/titleTopMargin'
+        default: 25
+      arrowMarkerAbsolute:
+        # TODO: use $ref: '#/properties/arrowMarkerAbsolute' to copy main setting
+        type: boolean
+      dividerMargin:
+        type: number
+        default: 10
+      sizeUnit:
+        type: number
+        default: 5
+      padding:
+        type: number
+        default: 8
+      textHeight:
+        type: number
+        default: 10
+      titleShift:
+        type: number
+        default: -15
+      noteMargin:
+        type: number
+        default: 10
+      forkWidth:
+        type: number
+        default: 70
+      forkHeight:
+        type: number
+        default: 7
+      # Used
+      miniPadding:
+        type: number
+        default: 2
+      fontSizeFactor:
+        description: |
+          Font size factor, this is used to guess the width of the edges labels
+          before rendering by dagre layout.
+          This might need updating if/when switching font
+        type: number
+        default: 5.02
+      fontSize:
+        type: number
+        default: 24
+      labelHeight:
+        type: number
+        default: 16
+      edgeLengthFactor:
+        type: string
+        default: '20'
+      compositTitleSize:
+        type: number
+        default: 35
+      radius:
+        type: number
+        default: 5
+      defaultRenderer:
+        description: |
+          Decides which rendering engine that is to be used for the rendering.
+        type: string
+        enum:
+          - dagre-d3
+          - dagre-wrapper
+          - elk
+        # todo, check this, old docs said dagre-d3 even though value was dagre-wrapper
+        default: dagre-wrapper
+        meta:enum:
+          dagre-d3: The [dagre-d3-es](https://www.npmjs.com/package/dagre-d3-es) library.
+          dagre-wrapper: wrapper for dagre implemented in mermaid
+          elk: Layout using [elkjs](https://github.com/kieler/elkjs)
+        # Allow any string for typescript backwards compatibility (fix in Mermaid v10)
+        tsType: 'string | "dagre-d3" | "dagre-wrapper" | "elk"'
+
+  ClassDiagramConfig:
+    title: Class Diagram Config
+    allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }]
+    type: object
+    unevaluatedProperties: false
+    required:
+      - titleTopMargin
+      - useMaxWidth
+      - defaultRenderer
+    properties:
+      titleTopMargin:
+        $ref: '#/$defs/GitGraphDiagramConfig/properties/titleTopMargin'
+        default: 25
+      # YAML anchor reference, don't use $ref since ajv doesn't load defaults
+      arrowMarkerAbsolute: *arrowMarkerAbsolute
+      dividerMargin:
+        type: number
+        default: 10
+      padding:
+        type: number
+        default: 5
+      textHeight:
+        type: number
+        default: 10
+      defaultRenderer:
+        $ref: '#/$defs/StateDiagramConfig/properties/defaultRenderer'
+        default: dagre-wrapper
+      nodeSpacing:
+        type: integer
+        minimum: 0
+        # should the default value be 50?
+        # see https://github.com/mermaid-js/mermaid/blob/7647ae317a7b2130e32777248d25a9c4d24b8f9f/packages/mermaid/src/diagrams/class/classRenderer-v2.ts#L258
+      rankSpacing:
+        type: integer
+        minimum: 0
+        # should the default value be 50?
+        # see https://github.com/mermaid-js/mermaid/blob/7647ae317a7b2130e32777248d25a9c4d24b8f9f/packages/mermaid/src/diagrams/class/classRenderer-v2.ts#L259
+      diagramPadding:
+        $ref: '#/$defs/ErDiagramConfig/properties/diagramPadding'
+      htmlLabels:
+        type: boolean
+        default: false
+
+  JourneyDiagramConfig:
+    title: Journey Diagram Config
+    allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }]
+    description: |
+      The object containing configurations specific for journey diagrams
+    type: object
+    unevaluatedProperties: false
+    required:
+      - diagramMarginX
+      - diagramMarginY
+      - leftMargin
+      - width
+      - height
+      - boxMargin
+      - boxTextMargin
+      - noteMargin
+      - messageMargin
+      - messageAlign
+      - bottomMarginAdj
+      - useMaxWidth
+      - rightAngles
+    properties:
+      diagramMarginX:
+        $ref: '#/$defs/C4DiagramConfig/properties/diagramMarginX'
+        default: 50
+      diagramMarginY:
+        $ref: '#/$defs/C4DiagramConfig/properties/diagramMarginY'
+        default: 10
+      leftMargin:
+        description: Margin between actors
+        type: integer
+        default: 150
+        minimum: 0
+      width:
+        description: Width of actor boxes
+        type: integer
+        default: 150
+        minimum: 0
+      height:
+        description: Height of actor boxes
+        type: integer
+        default: 50
+        minimum: 0
+      boxMargin:
+        description: Margin around loop boxes
+        type: integer
+        default: 10
+        minimum: 0
+      boxTextMargin:
+        description: Margin around the text in loop/alt/opt boxes
+        type: integer
+        default: 5
+        minimum: 0
+      noteMargin:
+        description: Margin around notes
+        type: integer
+        default: 10
+        minimum: 0
+      messageMargin:
+        description: Space between messages.
+        type: integer
+        default: 35
+        minimum: 0
+      messageAlign:
+        description: Multiline message alignment
+        type: string
+        enum:
+          - left
+          - center
+          - right
+        default: center
+        # Allow any string for typescript backwards compatibility (fix in Mermaid v10)
+        tsType: 'string | "left" | "center" | "right"'
+      bottomMarginAdj:
+        description: |
+          Prolongs the edge of the diagram downwards.
+
+          Depending on css styling this might need adjustment.
+        type: integer
+        default: 1
+        minimum: 0
+      rightAngles:
+        description: |
+          Curved Arrows become Right Angles
+
+          This will display arrows that start and begin at the same node as
+          right angles, rather than as curves.
+        type: boolean
+        default: false
+      taskFontSize:
+        type: *fontSizeType
+        default: 14
+      taskFontFamily:
+        type: string
+        default: '"Open Sans", sans-serif'
+      taskMargin:
+        type: number
+        default: 50
+      activationWidth:
+        description: Width of activation box
+        type: number
+        default: 10
+      textPlacement:
+        description: |
+          text placement as: tspan | fo | old only text as before
+        type: string
+        # TODO, should this be an enum?
+        default: fo
+      actorColours:
+        type: array
+        items:
+          type: string
+        default: ['#8FBC8F', '#7CFC00', '#00FFFF', '#20B2AA', '#B0E0E6', '#FFFFE0']
+      sectionFills:
+        type: array
+        items:
+          type: string
+        default: ['#191970', '#8B008B', '#4B0082', '#2F4F4F', '#800000', '#8B4513', '#00008B']
+      sectionColours:
+        type: array
+        items:
+          type: string
+        default: ['#fff']
+
+  TimelineDiagramConfig:
+    # added by https://github.com/mermaid-js/mermaid/commit/0d5246fbc730bf15463d7183fe4400a1e2fc492c
+    title: Timeline Diagram Config
+    allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }]
+    type: object
+    unevaluatedProperties: false
+    required:
+      - diagramMarginX
+      - diagramMarginY
+      - leftMargin
+      - width
+      - height
+      - boxMargin
+      - boxTextMargin
+      - noteMargin
+      - messageMargin
+      - messageAlign
+      - bottomMarginAdj
+      - useMaxWidth
+    properties:
+      diagramMarginX:
+        $ref: '#/$defs/C4DiagramConfig/properties/diagramMarginX'
+        default: 50
+      diagramMarginY:
+        $ref: '#/$defs/C4DiagramConfig/properties/diagramMarginY'
+        default: 10
+      leftMargin:
+        description: Margin between actors
+        type: integer
+        default: 150
+        minimum: 0
+      width:
+        description: Width of actor boxes
+        type: integer
+        default: 150
+        minimum: 0
+      height:
+        description: Height of actor boxes
+        type: integer
+        default: 50
+        minimum: 0
+      padding:
+        type: number
+        # should the default value be 50?
+        # see https://github.com/mermaid-js/mermaid/blob/7647ae317a7b2130e32777248d25a9c4d24b8f9f/packages/mermaid/src/diagrams/timeline/timelineRenderer.ts#L237
+      boxMargin:
+        description: Margin around loop boxes
+        type: integer
+        default: 10
+        minimum: 0
+      boxTextMargin:
+        description: Margin around the text in loop/alt/opt boxes
+        type: integer
+        default: 5
+        minimum: 0
+      noteMargin:
+        description: Margin around notes
+        type: integer
+        default: 10
+        minimum: 0
+      messageMargin:
+        description: Space between messages.
+        type: integer
+        default: 35
+        minimum: 0
+      messageAlign:
+        description: Multiline message alignment
+        type: string
+        enum:
+          - left
+          - center
+          - right
+        default: center
+        # Allow any string for typescript backwards compatibility (fix in Mermaid v10)
+        tsType: 'string | "left" | "center" | "right"'
+      bottomMarginAdj:
+        description: |
+          Prolongs the edge of the diagram downwards.
+
+          Depending on css styling this might need adjustment.
+        type: integer
+        default: 1
+        minimum: 0
+      rightAngles:
+        description: |
+          Curved Arrows become Right Angles
+
+          This will display arrows that start and begin at the same node as
+          right angles, rather than as curves.
+        type: boolean
+        default: false
+      taskFontSize:
+        type: *fontSizeType
+        default: 14
+      taskFontFamily:
+        type: string
+        default: '"Open Sans", sans-serif'
+      taskMargin:
+        type: number
+        default: 50
+      activationWidth:
+        description: Width of activation box
+        type: number
+        default: 10
+      textPlacement:
+        description: |
+          text placement as: tspan | fo | old only text as before
+        type: string
+        # TODO, should this be an enum?
+        default: fo
+      actorColours:
+        type: array
+        items:
+          type: string
+        default: ['#8FBC8F', '#7CFC00', '#00FFFF', '#20B2AA', '#B0E0E6', '#FFFFE0']
+      sectionFills:
+        type: array
+        items:
+          type: string
+        default: ['#191970', '#8B008B', '#4B0082', '#2F4F4F', '#800000', '#8B4513', '#00008B']
+      sectionColours:
+        type: array
+        items:
+          type: string
+        default: ['#fff']
+      disableMulticolor:
+        # added by https://github.com/mermaid-js/mermaid/commit/652a42fe1aed7911a781a84716940a973b995639
+        type: boolean
+        default: false
+
+  GanttDiagramConfig:
+    title: Gantt Diagram Config
+    allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }]
+    description: |
+      The object containing configurations specific for gantt diagrams
+    type: object
+    unevaluatedProperties: false
+    required:
+      - titleTopMargin
+      - barHeight
+      - topPadding
+      - rightPadding
+      - leftPadding
+      - gridLineStartPadding
+      - fontSize
+      - sectionFontSize
+      - numberSectionStyles
+      - axisFormat
+      - useMaxWidth
+      - topAxis
+    properties:
+      titleTopMargin:
+        $ref: '#/$defs/GitGraphDiagramConfig/properties/titleTopMargin'
+        default: 25
+      barHeight:
+        description: The height of the bars in the graph
+        type: integer
+        default: 20
+        minimum: 0
+      barGap:
+        description: The margin between the different activities in the gantt diagram
+        type: integer
+        default: 4
+        minimum: 0
+      topPadding:
+        description: |
+          Margin between title and gantt diagram and between axis and gantt diagram.
+        type: integer
+        default: 50
+        minimum: 0
+      rightPadding:
+        description: |
+          The space allocated for the section name to the right of the activities
+        type: integer
+        default: 75
+        minimum: 0
+      leftPadding:
+        description: |
+          The space allocated for the section name to the left of the activities
+        type: integer
+        default: 75
+        minimum: 0
+      gridLineStartPadding:
+        description: Vertical starting position of the grid lines
+        type: integer
+        default: 35
+        minimum: 0
+      fontSize:
+        description: Font size
+        type: integer
+        default: 11
+        minimum: 0
+      sectionFontSize:
+        description: Font size for sections
+        type: integer
+        # TODO: typescript type for this also allows strings, but the docs say only integers
+        tsType: 'string | number'
+        default: 11
+        minimum: 0
+      numberSectionStyles:
+        description: The number of alternating section styles
+        type: integer
+        default: 4
+        minimum: 0
+      axisFormat:
+        description: |
+          Date/time format of the axis
+
+          This might need adjustment to match your locale and preferences.
+        type: string
+        default: '%Y-%m-%d'
+      tickInterval:
+        description: |
+          axis ticks
+
+          Pattern is:
+
+          ```javascript
+          /^([1-9][0-9]*)(minute|hour|day|week|month)$/
+          ```
+        type: string
+        pattern: ^([1-9][0-9]*)(minute|hour|day|week|month)$
+      topAxis:
+        description: |
+          When this flag is set, date labels will be added to the top of the chart
+        type: boolean
+        default: false
+      displayMode:
+        description: |
+          Controls the display mode.
+        type: string
+        enum:
+          - ''
+          - compact
+        meta:enum:
+          compact: Enables displaying multiple tasks on the same row.
+        default: ''
+        # Allow any string for typescript backwards compatibility (fix in Mermaid v10)
+        tsType: 'string | "compact"'
+
+  SequenceDiagramConfig:
+    title: Sequence Diagram Config
+    allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }]
+    description: The object containing configurations specific for sequence diagrams
+    type: object
+    unevaluatedProperties: false
+    required:
+      - activationWidth
+      - diagramMarginX
+      - diagramMarginY
+      - actorMargin
+      - width
+      - height
+      - boxMargin
+      - boxTextMargin
+      - noteMargin
+      - messageMargin
+      - messageAlign
+      - mirrorActors
+      - forceMenus
+      - bottomMarginAdj
+      - useMaxWidth
+      - rightAngles
+      - showSequenceNumbers
+      - actorFontSize
+      - actorFontFamily
+      - actorFontWeight
+      - noteFontSize
+      - noteFontFamily
+      - noteFontWeight
+      - noteAlign
+      - messageFontSize
+      - messageFontFamily
+      - messageFontWeight
+    properties:
+      arrowMarkerAbsolute:
+        type: boolean # TODO, is this actually used here (it has no default value but was in types)
+      hideUnusedParticipants:
+        type: boolean
+        default: false
+      activationWidth:
+        description: Width of the activation rect
+        type: integer
+        default: 10
+        minimum: 0
+      diagramMarginX:
+        description: Margin to the right and left of the sequence diagram
+        type: integer
+        default: 50
+        minimum: 0
+      diagramMarginY:
+        description: Margin to the over and under the sequence diagram
+        type: integer
+        default: 10
+        minimum: 0
+      actorMargin:
+        description: Margin between actors
+        type: integer
+        default: 50
+        minimum: 0
+      width:
+        $ref: '#/$defs/JourneyDiagramConfig/properties/width'
+        default: 150
+      height:
+        $ref: '#/$defs/JourneyDiagramConfig/properties/height'
+        default: 65
+      boxMargin:
+        $ref: '#/$defs/JourneyDiagramConfig/properties/boxMargin'
+        default: 10
+      boxTextMargin:
+        $ref: '#/$defs/JourneyDiagramConfig/properties/boxTextMargin'
+        default: 5
+      noteMargin:
+        $ref: '#/$defs/JourneyDiagramConfig/properties/noteMargin'
+        default: 10
+      messageMargin:
+        $ref: '#/$defs/JourneyDiagramConfig/properties/messageMargin'
+        default: 35
+      messageAlign:
+        $ref: '#/$defs/JourneyDiagramConfig/properties/messageAlign'
+        default: center
+      mirrorActors:
+        description: |
+          Mirror actors under diagram
+        type: boolean
+        default: true
+      forceMenus:
+        description: |
+          forces actor popup menus to always be visible (to support E2E testing).
+        type: boolean
+        default: false
+      bottomMarginAdj:
+        $ref: '#/$defs/JourneyDiagramConfig/properties/bottomMarginAdj'
+        default: 1
+      rightAngles:
+        $ref: '#/$defs/JourneyDiagramConfig/properties/rightAngles'
+        default: false
+      showSequenceNumbers:
+        description: This will show the node numbers
+        type: boolean
+        default: false
+      actorFontSize:
+        description: This sets the font size of the actor's description
+        type: *fontSizeType
+        default: 14
+      actorFontFamily:
+        description: This sets the font family of the actor's description
+        type: string
+        default: '"Open Sans", sans-serif'
+      actorFontWeight:
+        description: This sets the font weight of the actor's description
+        type: ['string', 'number']
+        default: 400
+
+      noteFontSize:
+        description: This sets the font size of actor-attached notes
+        type: *fontSizeType
+        default: 14
+      noteFontFamily:
+        description: This sets the font family of actor-attached notes
+        type: string
+        default: '"trebuchet ms", verdana, arial, sans-serif'
+      noteFontWeight:
+        description: This sets the font weight of actor-attached notes
+        type: ['string', 'number']
+        default: 400
+      noteAlign:
+        description: This sets the text alignment of actor-attached notes
+        type: string
+        enum: ['left', 'center', 'right']
+        default: 'center'
+        # Allow any string for typescript backwards compatibility (fix in Mermaid v10)
+        tsType: 'string | "left" | "center" | "right"'
+
+      messageFontSize:
+        description: This sets the font size of actor messages
+        type: *fontSizeType
+        default: 16
+      messageFontFamily:
+        description: This sets the font family of actor messages
+        type: string
+        default: '"trebuchet ms", verdana, arial, sans-serif'
+      messageFontWeight:
+        description: This sets the font weight of actor messages
+        type: ['string', 'number']
+        default: 400
+
+      wrap:
+        description: This sets the auto-wrap state for the diagram
+        type: boolean
+        default: false # different from C4 Diagram
+      wrapPadding:
+        $ref: '#/$defs/C4DiagramConfig/properties/wrapPadding'
+        default: 10
+      labelBoxWidth:
+        description: This sets the width of the loop-box (loop, alt, opt, par)
+        type: number
+        default: 50
+      labelBoxHeight:
+        description: This sets the height of the loop-box (loop, alt, opt, par)
+        type: number
+        default: 20
+      messageFont: { '$ref': '#/$defs/FontCalculator' }
+      noteFont: { '$ref': '#/$defs/FontCalculator' }
+      actorFont: { '$ref': '#/$defs/FontCalculator' }
+
+  FlowchartDiagramConfig:
+    title: Flowchart Diagram Config
+    allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }]
+    description: The object containing configurations specific for flowcharts
+    type: object
+    unevaluatedProperties: false
+    required:
+      - titleTopMargin
+      - diagramPadding
+      - htmlLabels
+      - nodeSpacing
+      - rankSpacing
+      - curve
+      - useMaxWidth
+      - defaultRenderer
+      - wrappingWidth
+    properties:
+      titleTopMargin:
+        $ref: '#/$defs/GitGraphDiagramConfig/properties/titleTopMargin'
+        default: 25
+      arrowMarkerAbsolute:
+        type: boolean # TODO, is this actually used here (it has no default value but was in types)
+      diagramPadding:
+        $ref: '#/$defs/ErDiagramConfig/properties/diagramPadding'
+        default: 8
+      htmlLabels:
+        description: |
+          Flag for setting whether or not a html tag should be used for rendering labels on the edges.
+        type: boolean
+        default: true
+      nodeSpacing:
+        description: |
+          Defines the spacing between nodes on the same level
+
+          Pertains to horizontal spacing for TB (top to bottom) or BT (bottom to top) graphs,
+          and the vertical spacing for LR as well as RL graphs.
+        type: integer
+        default: 50
+        minimum: 0
+      rankSpacing:
+        description: |
+          Defines the spacing between nodes on different levels
+
+          Pertains to horizontal spacing for TB (top to bottom) or BT (bottom to top) graphs,
+          and the vertical spacing for LR as well as RL graphs.
+        type: integer
+        default: 50
+        minimum: 0
+      curve:
+        description: |
+          Defines how mermaid renders curves for flowcharts.
+        type: string
+        enum: ['basis', 'linear', 'cardinal']
+        default: 'basis'
+        # Allow any string for typescript backwards compatibility (fix in Mermaid v10)
+        tsType: 'string | "basis" | "linear" | "cardinal"'
+      padding:
+        description: |
+          Represents the padding between the labels and the shape
+
+          **Only used in new experimental rendering.**
+        type: number
+        default: 15
+      defaultRenderer:
+        $ref: '#/$defs/StateDiagramConfig/properties/defaultRenderer'
+        default: dagre-wrapper
+      wrappingWidth:
+        description: |
+          Width of nodes where text is wrapped.
+
+          When using markdown strings the text ius wrapped automatically, this
+          value sets the max width of a text before it continues on a new line.
+        type: number
+        default: 200
+
+  SankeyLinkColor:
+    description: |
+      Picks the color of the sankey diagram links, using the colors of the source and/or target of the links.
+    type: string
+    enum:
+      - source
+      - target
+      - gradient
+    meta:enum:
+      source: Use the source of sankey link for the color of the link.
+      target: Use the target of sankey link for the color of the link.
+      gradient: Use a gradient of the source and target for the color of the link.
+    default: gradient
+
+  SankeyNodeAlignment:
+    description: |
+      Controls the alignment of the Sankey diagrams.
+
+      See <https://github.com/d3/d3-sankey#alignments>.
+    type: string
+    enum:
+      - left
+      - right
+      - center
+      - justify
+    meta:enum:
+      left: Align all inputs to the left.
+      right: Align all outputs to the right.
+      center: Like `left`, except that nodes without any incoming links are moved as right as possible.
+      justify: Like `left`, except that nodes without any outgoing links are moved to the far right.
+    default: justify
+
+  SankeyDiagramConfig:
+    title: Sankey Diagram Config
+    allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }]
+    description: The object containing configurations specific for sankey diagrams.
+    type: object
+    unevaluatedProperties: false
+    properties:
+      width:
+        type: number
+        default: 600
+      height:
+        type: number
+        default: 400
+      linkColor:
+        description: |
+          The color of the links in the sankey diagram.
+        anyOf:
+          - $ref: '#/$defs/SankeyLinkColor'
+          - description: An arbtirary [CSS color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value)
+            type: string
+        default: gradient
+      nodeAlignment:
+        $ref: '#/$defs/SankeyNodeAlignment'
+        default: justify
+      useMaxWidth:
+        default: false
+
+  FontCalculator:
+    title: Font Calculator
+    description: |
+      JavaScript function that returns a `FontConfig`.
+
+      By default, these return the appropriate `*FontSize`, `*FontFamily`, `*FontWeight`
+      values.
+
+      For example, the font calculator called `boundaryFont` might be defined as:
+
+      ```javascript
+      boundaryFont: function () {
+        return {
+          fontFamily: this.boundaryFontFamily,
+          fontSize: this.boundaryFontSize,
+          fontWeight: this.boundaryFontWeight,
+        };
+      }
+      ```
+    tsType: '() => Partial<FontConfig>'
+
+  FontConfig:
+    title: Font Config
+    type: object
+    additionalProperties: false
+    properties:
+      fontSize:
+        title: CSS Font Size
+        description: The font size to use
+        type: *fontSizeType
+        default: 14
+      fontFamily:
+        description: The CSS [`font-family`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family) to use.
+        type: string
+        default: '"Open Sans", sans-serif'
+      fontWeight:
+        description: The font weight to use.
+        type: ['string', 'number']
+        default: normal

From 52a1243da58244adafc6b7053776239865b3d5ac Mon Sep 17 00:00:00 2001
From: Alois Klink <alois@aloisklink.com>
Date: Thu, 22 Dec 2022 01:19:02 +0000
Subject: [PATCH 061/281] build: use vite to get default mermaid config

Adds a vitepress JsonSchema plugin that automatically loads
the Mermaid Config JSON Schema from a .schema.yaml file and
gets the default values from it.
---
 .vite/build.ts                             |    2 +
 .vite/jsonSchemaPlugin.ts                  |  150 ++
 docs/config/setup/modules/defaultConfig.md |   35 +-
 package.json                               |    1 +
 packages/mermaid/src/defaultConfig.ts      | 2110 +-------------------
 pnpm-lock.yaml                             |   33 +-
 vite.config.ts                             |    2 +
 7 files changed, 217 insertions(+), 2116 deletions(-)
 create mode 100644 .vite/jsonSchemaPlugin.ts

diff --git a/.vite/build.ts b/.vite/build.ts
index 85c9b7fa0..b89df9e31 100644
--- a/.vite/build.ts
+++ b/.vite/build.ts
@@ -2,6 +2,7 @@ import { build, InlineConfig, type PluginOption } from 'vite';
 import { resolve } from 'path';
 import { fileURLToPath } from 'url';
 import jisonPlugin from './jisonPlugin.js';
+import jsonSchemaPlugin from './jsonSchemaPlugin.js';
 import { readFileSync } from 'fs';
 import typescript from '@rollup/plugin-typescript';
 import { visualizer } from 'rollup-plugin-visualizer';
@@ -121,6 +122,7 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
     },
     plugins: [
       jisonPlugin(),
+      jsonSchemaPlugin(), // handles `.schema.yaml` files
       // @ts-expect-error According to the type definitions, rollup plugins are incompatible with vite
       typescript({ compilerOptions: { declaration: false } }),
       istanbul({
diff --git a/.vite/jsonSchemaPlugin.ts b/.vite/jsonSchemaPlugin.ts
new file mode 100644
index 000000000..671a9612e
--- /dev/null
+++ b/.vite/jsonSchemaPlugin.ts
@@ -0,0 +1,150 @@
+import { load, JSON_SCHEMA } from 'js-yaml';
+import assert from 'node:assert';
+import Ajv2019, { type JSONSchemaType } from 'ajv/dist/2019.js';
+import { PluginOption } from 'vite';
+
+import type { MermaidConfig, BaseDiagramConfig } from '../packages/mermaid/src/config.type.js';
+
+/**
+ * All of the keys in the mermaid config that have a mermaid diagram config.
+ */
+const MERMAID_CONFIG_DIAGRAM_KEYS = [
+  'flowchart',
+  'sequence',
+  'gantt',
+  'journey',
+  'class',
+  'state',
+  'er',
+  'pie',
+  'quadrantChart',
+  'requirement',
+  'mindmap',
+  'timeline',
+  'gitGraph',
+  'c4',
+  'sankey',
+] as const;
+
+/**
+ * Generate default values from the JSON Schema.
+ *
+ * AJV does not support nested default values yet (or default values with $ref),
+ * so we need to manually find them (this may be fixed in ajv v9).
+ *
+ * @param mermaidConfigSchema - The Mermaid JSON Schema to use.
+ * @returns The default mermaid config object.
+ */
+function generateDefaults(mermaidConfigSchema: JSONSchemaType<MermaidConfig>) {
+  const ajv = new Ajv2019({
+    useDefaults: true,
+    allowUnionTypes: true,
+    strict: true,
+  });
+
+  ajv.addKeyword({
+    keyword: 'meta:enum', // used by jsonschema2md
+    errors: false,
+  });
+  ajv.addKeyword({
+    keyword: 'tsType', // used by json-schema-to-typescript
+    errors: false,
+  });
+
+  // ajv currently doesn't support nested default values, see https://github.com/ajv-validator/ajv/issues/1718
+  // (may be fixed in v9) so we need to manually use sub-schemas
+  const mermaidDefaultConfig = {};
+
+  assert.ok(mermaidConfigSchema.$defs);
+  const baseDiagramConfig = mermaidConfigSchema.$defs.BaseDiagramConfig;
+
+  for (const key of MERMAID_CONFIG_DIAGRAM_KEYS) {
+    const subSchemaRef = mermaidConfigSchema.properties[key].$ref;
+    const [root, defs, defName] = subSchemaRef.split('/');
+    assert.strictEqual(root, '#');
+    assert.strictEqual(defs, '$defs');
+    const subSchema = {
+      $schema: mermaidConfigSchema.$schema,
+      $defs: mermaidConfigSchema.$defs,
+      ...mermaidConfigSchema.$defs[defName],
+    } as JSONSchemaType<BaseDiagramConfig>;
+
+    const validate = ajv.compile(subSchema);
+
+    mermaidDefaultConfig[key] = {};
+
+    for (const required of subSchema.required ?? []) {
+      if (subSchema.properties[required] === undefined && baseDiagramConfig.properties[required]) {
+        mermaidDefaultConfig[key][required] = baseDiagramConfig.properties[required].default;
+      }
+    }
+    if (!validate(mermaidDefaultConfig[key])) {
+      throw new Error(
+        `schema for subconfig ${key} does not have valid defaults! Errors were ${JSON.stringify(
+          validate.errors,
+          undefined,
+          2
+        )}`
+      );
+    }
+  }
+
+  const validate = ajv.compile(mermaidConfigSchema);
+
+  if (!validate(mermaidDefaultConfig)) {
+    throw new Error(
+      `Mermaid config JSON Schema does not have valid defaults! Errors were ${JSON.stringify(
+        validate.errors,
+        undefined,
+        2
+      )}`
+    );
+  }
+
+  return mermaidDefaultConfig;
+}
+
+/**
+ * Vite plugin that handles JSON Schemas saved as a `.schema.yaml` file.
+ *
+ * Use `my-example.schema.yaml?only-defaults=true` to only load the default values.
+ */
+export default function jsonSchemaPlugin(): PluginOption {
+  return {
+    name: 'json-schema-plugin',
+    transform(src: string, id: string) {
+      const idAsUrl = new URL(id, 'file:///');
+
+      if (!idAsUrl.pathname.endsWith('schema.yaml')) {
+        return;
+      }
+
+      if (idAsUrl.searchParams.get('only-defaults')) {
+        const jsonSchema = load(src, {
+          filename: idAsUrl.pathname,
+          // only allow JSON types in our YAML doc (will probably be default in YAML 1.3)
+          // e.g. `true` will be parsed a boolean `true`, `True` will be parsed as string `"True"`.
+          schema: JSON_SCHEMA,
+        }) as JSONSchemaType<MermaidConfig>;
+        return {
+          code: `export default ${JSON.stringify(generateDefaults(jsonSchema), undefined, 2)};`,
+          map: null, // no source map
+        };
+      } else {
+        return {
+          code: `export default ${JSON.stringify(
+            load(src, {
+              filename: idAsUrl.pathname,
+              // only allow JSON types in our YAML doc (will probably be default in YAML 1.3)
+              // e.g. `true` will be parsed a boolean `true`, `True` will be parsed as string `"True"`.
+              schema: JSON_SCHEMA,
+            }),
+            undefined,
+            2
+          )};`,
+          map: null, // provide source map if available
+        };
+      }
+    },
+  };
+}
diff --git a/docs/config/setup/modules/defaultConfig.md b/docs/config/setup/modules/defaultConfig.md
index 793dfffae..a55ec1808 100644
--- a/docs/config/setup/modules/defaultConfig.md
+++ b/docs/config/setup/modules/defaultConfig.md
@@ -14,7 +14,7 @@
 
 #### Defined in
 
-[defaultConfig.ts:2300](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L2300)
+[defaultConfig.ts:266](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L266)
 
 ---
 
@@ -22,35 +22,12 @@
 
 • `Const` **default**: `Partial`<`MermaidConfig`>
 
-**Configuration methods in Mermaid version 8.6.0 have been updated, to learn more\[[click
-here](8.6.0_docs.md)].**
+Default mermaid configuration options.
 
-## **What follows are config instructions for older versions**
-
-These are the default options which can be overridden with the initialization call like so:
-
-**Example 1:**
-
-```js
-mermaid.initialize({ flowchart: { htmlLabels: false } });
-```
-
-**Example 2:**
-
-```html
-<script>
-  const config = {
-    startOnLoad: true,
-    flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' },
-    securityLevel: 'loose',
-  };
-  mermaid.initialize(config);
-</script>
-```
-
-A summary of all options and their defaults is found [here](#mermaidapi-configuration-defaults).
-A description of each option follows below.
+Please see the Mermaid config JSON Schema for the default JSON values.
+Non-JSON JS default values are listed in this file, e.g. functions, or
+`undefined` (explicitly set so that `configKeys` finds them).
 
 #### Defined in
 
-[defaultConfig.ts:33](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L33)
+[defaultConfig.ts:16](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L16)
diff --git a/package.json b/package.json
index 738d1796a..e21e02d14 100644
--- a/package.json
+++ b/package.json
@@ -81,6 +81,7 @@
     "@vitest/coverage-v8": "^0.32.2",
     "@vitest/spy": "^0.32.2",
     "@vitest/ui": "^0.32.2",
+    "ajv": "^8.12.0",
     "concurrently": "^8.0.1",
     "cors": "^2.8.5",
     "coveralls": "^3.1.1",
diff --git a/packages/mermaid/src/defaultConfig.ts b/packages/mermaid/src/defaultConfig.ts
index cc2b79a80..62b361cff 100644
--- a/packages/mermaid/src/defaultConfig.ts
+++ b/packages/mermaid/src/defaultConfig.ts
@@ -1,559 +1,29 @@
 import theme from './themes/index.js';
 import { type MermaidConfig } from './config.type.js';
+
+// Uses our custom Vite jsonSchemaPlugin to load only the default values from
+// our JSON Schema
+// @ts-expect-error This file is automatically generated via a custom Vite plugin
+import defaultConfigJson from './schemas/config.schema.yaml?only-defaults=true';
+
 /**
- * **Configuration methods in Mermaid version 8.6.0 have been updated, to learn more[[click
- * here](8.6.0_docs.md)].**
+ * Default mermaid configuration options.
  *
- * ## **What follows are config instructions for older versions**
- *
- * These are the default options which can be overridden with the initialization call like so:
- *
- * **Example 1:**
- *
- * ```js
- * mermaid.initialize({ flowchart:{ htmlLabels: false } });
- * ```
- *
- * **Example 2:**
- *
- * ```html
- * <script>
- * const config = {
- *   startOnLoad:true,
- *   flowchart:{ useMaxWidth:true, htmlLabels:true, curve:'cardinal'},
- *   securityLevel:'loose',
- * };
- * mermaid.initialize(config);
- * </script>
- * ```
- *
- * A summary of all options and their defaults is found [here](#mermaidapi-configuration-defaults).
- * A description of each option follows below.
+ * Please see the Mermaid config JSON Schema for the default JSON values.
+ * Non-JSON JS default values are listed in this file, e.g. functions, or
+ * `undefined` (explicitly set so that `configKeys` finds them).
  */
 const config: Partial<MermaidConfig> = {
-  /**
-   * Theme , the CSS style sheet
-   *
-   * | Parameter | Description     | Type   | Required | Values                                         |
-   * | --------- | --------------- | ------ | -------- | ---------------------------------------------- |
-   * | theme     | Built in Themes | string | Optional | 'default', 'forest', 'dark', 'neutral', 'null' |
-   *
-   * **Notes:** To disable any pre-defined mermaid theme, use "null".
-   *
-   * @example
-   *
-   * ```js
-   * {
-   *   "theme": "forest",
-   *   "themeCSS": ".node rect { fill: red; }"
-   * }
-   * ```
-   */
-  theme: 'default',
-  themeVariables: theme['default'].getThemeVariables(),
-  themeCSS: undefined,
-  /* **maxTextSize** - The maximum allowed size of the users text diagram */
-  maxTextSize: 50000,
-  darkMode: false,
-
-  /**
-   * | Parameter  | Description                                            | Type   | Required | Values                      |
-   * | ---------- | ------------------------------------------------------ | ------ | -------- | --------------------------- |
-   * | fontFamily | specifies the font to be used in the rendered diagrams | string | Required | Any Possible CSS FontFamily |
-   *
-   * **Notes:** Default value: '"trebuchet ms", verdana, arial, sans-serif;'.
-   */
-  fontFamily: '"trebuchet ms", verdana, arial, sans-serif;',
-
-  /**
-   * | Parameter | Description                                           | Type             | Required | Values                                        |
-   * | --------- | ----------------------------------------------------- | ---------------- | -------- | --------------------------------------------- |
-   * | logLevel  | This option decides the amount of logging to be used. | string \| number | Required | 'trace','debug','info','warn','error','fatal' |
-   *
-   * **Notes:**
-   *
-   * - Trace: 0
-   * - Debug: 1
-   * - Info: 2
-   * - Warn: 3
-   * - Error: 4
-   * - Fatal: 5 (default)
-   */
-  logLevel: 5,
-
-  /**
-   * | Parameter     | Description                       | Type   | Required | Values                                     |
-   * | ------------- | --------------------------------- | ------ | -------- | ------------------------------------------ |
-   * | securityLevel | Level of trust for parsed diagram | string | Required | 'sandbox', 'strict', 'loose', 'antiscript' |
-   *
-   * **Notes**:
-   *
-   * - **strict**: (**default**) HTML tags in the text are encoded and click functionality is disabled.
-   * - **antiscript**: HTML tags in text are allowed (only script elements are removed), and click
-   *   functionality is enabled.
-   * - **loose**: HTML tags in text are allowed and click functionality is enabled.
-   * - **sandbox**: With this security level, all rendering takes place in a sandboxed iframe. This
-   *   prevent any JavaScript from running in the context. This may hinder interactive functionality
-   *   of the diagram, like scripts, popups in the sequence diagram, links to other tabs or targets, etc.
-   */
-  securityLevel: 'strict',
-
-  /**
-   * | Parameter   | Description                                  | Type    | Required | Values      |
-   * | ----------- | -------------------------------------------- | ------- | -------- | ----------- |
-   * | startOnLoad | Dictates whether mermaid starts on Page load | boolean | Required | true, false |
-   *
-   * **Notes:** Default value: true
-   */
-  startOnLoad: true,
-
-  /**
-   * | Parameter           | Description                                                                  | Type    | Required | Values      |
-   * | ------------------- | ---------------------------------------------------------------------------- | ------- | -------- | ----------- |
-   * | arrowMarkerAbsolute | Controls whether or arrow markers in html code are absolute paths or anchors | boolean | Required | true, false |
-   *
-   * **Notes**:
-   *
-   * This matters if you are using base tag settings.
-   *
-   * Default value: false
-   */
-  arrowMarkerAbsolute: false,
-
-  /**
-   * This option controls which currentConfig keys are considered _secure_ and can only be changed
-   * via call to mermaidAPI.initialize. Calls to mermaidAPI.reinitialize cannot make changes to the
-   * `secure` keys in the current currentConfig. This prevents malicious graph directives from
-   * overriding a site's default security.
-   *
-   * **Notes**:
-   *
-   * Default value: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
-   */
-  secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
-  /**
-   * This option controls if the generated ids of nodes in the SVG are generated randomly or based
-   * on a seed. If set to false, the IDs are generated based on the current date and thus are not
-   * deterministic. This is the default behavior.
-   *
-   * **Notes**:
-   *
-   * This matters if your files are checked into source control e.g. git and should not change unless
-   * content is changed.
-   *
-   * Default value: false
-   */
-  deterministicIds: false,
-
-  /**
-   * This option is the optional seed for deterministic ids. if set to undefined but
-   * deterministicIds is true, a simple number iterator is used. You can set this attribute to base
-   * the seed on a static string.
-   */
+  ...defaultConfigJson,
+  // Set, even though they're `undefined` so that `configKeys` finds these keys
+  // TODO: Should we replace these with `null` so that they can go in the JSON Schema?
   deterministicIDSeed: undefined,
+  themeCSS: undefined,
 
-  /** The object containing configurations specific for flowcharts */
-  flowchart: {
-    /**
-     * ### titleTopMargin
-     *
-     * | Parameter      | Description                                    | Type    | Required | Values             |
-     * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ |
-     * | titleTopMargin | Margin top for the text over the flowchart     | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 25
-     */
-    titleTopMargin: 25,
-
-    /**
-     * | Parameter      | Description                                     | Type    | Required | Values             |
-     * | -------------- | ----------------------------------------------- | ------- | -------- | ------------------ |
-     * | diagramPadding | Amount of padding around the diagram as a whole | Integer | Required | Any Positive Value |
-     *
-     * **Notes:**
-     *
-     * The amount of padding around the diagram as a whole so that embedded diagrams have margins,
-     * expressed in pixels
-     *
-     * Default value: 8
-     */
-    diagramPadding: 8,
-
-    /**
-     * | Parameter  | Description                                                                                  | Type    | Required | Values      |
-     * | ---------- | -------------------------------------------------------------------------------------------- | ------- | -------- | ----------- |
-     * | htmlLabels | Flag for setting whether or not a html tag should be used for rendering labels on the edges. | boolean | Required | true, false |
-     *
-     * **Notes:** Default value: true.
-     */
-    htmlLabels: true,
-
-    /**
-     * | Parameter   | Description                                         | Type    | Required | Values              |
-     * | ----------- | --------------------------------------------------- | ------- | -------- | ------------------- |
-     * | nodeSpacing | Defines the spacing between nodes on the same level | Integer | Required | Any positive Number |
-     *
-     * **Notes:**
-     *
-     * Pertains to horizontal spacing for TB (top to bottom) or BT (bottom to top) graphs, and the
-     * vertical spacing for LR as well as RL graphs.**
-     *
-     * Default value: 50
-     */
-    nodeSpacing: 50,
-
-    /**
-     * | Parameter   | Description                                           | Type    | Required | Values              |
-     * | ----------- | ----------------------------------------------------- | ------- | -------- | ------------------- |
-     * | rankSpacing | Defines the spacing between nodes on different levels | Integer | Required | Any Positive Number |
-     *
-     * **Notes**:
-     *
-     * Pertains to vertical spacing for TB (top to bottom) or BT (bottom to top), and the horizontal
-     * spacing for LR as well as RL graphs.
-     *
-     * Default value 50
-     */
-    rankSpacing: 50,
-
-    /**
-     * | Parameter | Description                                        | Type   | Required | Values                        |
-     * | --------- | -------------------------------------------------- | ------ | -------- | ----------------------------- |
-     * | curve     | Defines how mermaid renders curves for flowcharts. | string | Required | 'basis', 'linear', 'cardinal' |
-     *
-     * **Notes:**
-     *
-     * Default Value: 'basis'
-     */
-    curve: 'basis',
-    // Only used in new experimental rendering
-    // represents the padding between the labels and the shape
-    padding: 15,
-
-    /**
-     * | Parameter   | Description | Type    | Required | Values      |
-     * | ----------- | ----------- | ------- | -------- | ----------- |
-     * | useMaxWidth | See notes   | boolean | 4        | true, false |
-     *
-     * **Notes:**
-     *
-     * When this flag is set the height and width is set to 100% and is then scaling with the
-     * available space if not the absolute space required is used.
-     *
-     * Default value: true
-     */
-    useMaxWidth: true,
-
-    /**
-     * | Parameter       | Description | Type    | Required | Values                  |
-     * | --------------- | ----------- | ------- | -------- | ----------------------- |
-     * | defaultRenderer | See notes   | boolean | 4        | dagre-d3, dagre-wrapper, elk |
-     *
-     * **Notes:**
-     *
-     * Decides which rendering engine that is to be used for the rendering. Legal values are:
-     * dagre-d3 dagre-wrapper - wrapper for dagre implemented in mermaid, elk for layout using
-     * elkjs
-     *
-     * Default value: 'dagre-wrapper'
-     */
-    defaultRenderer: 'dagre-wrapper',
-    /**
-     * | Parameter       | Description | Type    | Required | Values                  |
-     * | --------------- | ----------- | ------- | -------- | ----------------------- |
-     * | wrappingWidth   | See notes   | number  | 4        | width of nodes where text is wrapped |
-     *
-     * **Notes:**
-     *
-     * When using markdown strings the text ius wrapped automatically, this
-     * value sets the max width of a text before it continues on a new line.
-     * Default value: 'dagre-wrapper'
-     */
-    wrappingWidth: 200,
-  },
-
-  /** The object containing configurations specific for sequence diagrams */
+  // add non-JSON default config values
+  themeVariables: theme['default'].getThemeVariables(),
   sequence: {
-    hideUnusedParticipants: false,
-    /**
-     * | Parameter       | Description                  | Type    | Required | Values             |
-     * | --------------- | ---------------------------- | ------- | -------- | ------------------ |
-     * | activationWidth | Width of the activation rect | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value :10
-     */
-    activationWidth: 10,
-
-    /**
-     * | Parameter      | Description                                          | Type    | Required | Values             |
-     * | -------------- | ---------------------------------------------------- | ------- | -------- | ------------------ |
-     * | diagramMarginX | Margin to the right and left of the sequence diagram | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 50
-     */
-    diagramMarginX: 50,
-
-    /**
-     * | Parameter      | Description                                       | Type    | Required | Values             |
-     * | -------------- | ------------------------------------------------- | ------- | -------- | ------------------ |
-     * | diagramMarginY | Margin to the over and under the sequence diagram | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 10
-     */
-    diagramMarginY: 10,
-
-    /**
-     * | Parameter   | Description           | Type    | Required | Values             |
-     * | ----------- | --------------------- | ------- | -------- | ------------------ |
-     * | actorMargin | Margin between actors | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 50
-     */
-    actorMargin: 50,
-
-    /**
-     * | Parameter | Description          | Type    | Required | Values             |
-     * | --------- | -------------------- | ------- | -------- | ------------------ |
-     * | width     | Width of actor boxes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 150
-     */
-    width: 150,
-
-    /**
-     * | Parameter | Description           | Type    | Required | Values             |
-     * | --------- | --------------------- | ------- | -------- | ------------------ |
-     * | height    | Height of actor boxes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 65
-     */
-    height: 65,
-
-    /**
-     * | Parameter | Description              | Type    | Required | Values             |
-     * | --------- | ------------------------ | ------- | -------- | ------------------ |
-     * | boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 10
-     */
-    boxMargin: 10,
-
-    /**
-     * | Parameter     | Description                                  | Type    | Required | Values             |
-     * | ------------- | -------------------------------------------- | ------- | -------- | ------------------ |
-     * | boxTextMargin | Margin around the text in loop/alt/opt boxes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 5
-     */
-    boxTextMargin: 5,
-
-    /**
-     * | Parameter  | Description         | Type    | Required | Values             |
-     * | ---------- | ------------------- | ------- | -------- | ------------------ |
-     * | noteMargin | margin around notes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 10
-     */
-    noteMargin: 10,
-
-    /**
-     * | Parameter     | Description            | Type    | Required | Values             |
-     * | ------------- | ---------------------- | ------- | -------- | ------------------ |
-     * | messageMargin | Space between messages | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 35
-     */
-    messageMargin: 35,
-
-    /**
-     * | Parameter    | Description                 | Type   | Required | Values                    |
-     * | ------------ | --------------------------- | ------ | -------- | ------------------------- |
-     * | messageAlign | Multiline message alignment | string | Required | 'left', 'center', 'right' |
-     *
-     * **Notes:** Default value: 'center'
-     */
-    messageAlign: 'center',
-
-    /**
-     * | Parameter    | Description                 | Type    | Required | Values      |
-     * | ------------ | --------------------------- | ------- | -------- | ----------- |
-     * | mirrorActors | Mirror actors under diagram | boolean | Required | true, false |
-     *
-     * **Notes:** Default value: true
-     */
-    mirrorActors: true,
-
-    /**
-     * | Parameter  | Description                                                             | Type    | Required | Values      |
-     * | ---------- | ----------------------------------------------------------------------- | ------- | -------- | ----------- |
-     * | forceMenus | forces actor popup menus to always be visible (to support E2E testing). | Boolean | Required | True, False |
-     *
-     * **Notes:**
-     *
-     * Default value: false.
-     */
-    forceMenus: false,
-
-    /**
-     * | Parameter       | Description                                | Type    | Required | Values             |
-     * | --------------- | ------------------------------------------ | ------- | -------- | ------------------ |
-     * | bottomMarginAdj | Prolongs the edge of the diagram downwards | Integer | Required | Any Positive Value |
-     *
-     * **Notes:**
-     *
-     * Depending on css styling this might need adjustment.
-     *
-     * Default value: 1
-     */
-    bottomMarginAdj: 1,
-
-    /**
-     * | Parameter   | Description | Type    | Required | Values      |
-     * | ----------- | ----------- | ------- | -------- | ----------- |
-     * | useMaxWidth | See Notes   | boolean | Required | true, false |
-     *
-     * **Notes:** When this flag is set to true, the height and width is set to 100% and is then
-     * scaling with the available space. If set to false, the absolute space required is used.
-     *
-     * Default value: true
-     */
-    useMaxWidth: true,
-
-    /**
-     * | Parameter   | Description                          | Type    | Required | Values      |
-     * | ----------- | ------------------------------------ | ------- | -------- | ----------- |
-     * | rightAngles | display curve arrows as right angles | boolean | Required | true, false |
-     *
-     * **Notes:**
-     *
-     * This will display arrows that start and begin at the same node as right angles, rather than a
-     * curve
-     *
-     * Default value: false
-     */
-    rightAngles: false,
-
-    /**
-     * | Parameter           | Description                     | Type    | Required | Values      |
-     * | ------------------- | ------------------------------- | ------- | -------- | ----------- |
-     * | showSequenceNumbers | This will show the node numbers | boolean | Required | true, false |
-     *
-     * **Notes:** Default value: false
-     */
-    showSequenceNumbers: false,
-
-    /**
-     * | Parameter     | Description                                        | Type    | Required | Values             |
-     * | ------------- | -------------------------------------------------- | ------- | -------- | ------------------ |
-     * | actorFontSize | This sets the font size of the actor's description | Integer | Require  | Any Positive Value |
-     *
-     * **Notes:** **Default value 14**..
-     */
-    actorFontSize: 14,
-
-    /**
-     * | Parameter       | Description                                          | Type   | Required | Values                      |
-     * | --------------- | ---------------------------------------------------- | ------ | -------- | --------------------------- |
-     * | actorFontFamily | This sets the font family of the actor's description | string | Required | Any Possible CSS FontFamily |
-     *
-     * **Notes:** Default value: "'Open Sans", sans-serif'
-     */
-    actorFontFamily: '"Open Sans", sans-serif',
-
-    /**
-     * This sets the font weight of the actor's description
-     *
-     * **Notes:** Default value: 400.
-     */
-    actorFontWeight: 400,
-
-    /**
-     * | Parameter    | Description                                     | Type    | Required | Values             |
-     * | ------------ | ----------------------------------------------- | ------- | -------- | ------------------ |
-     * | noteFontSize | This sets the font size of actor-attached notes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 14
-     */
-    noteFontSize: 14,
-
-    /**
-     * | Parameter      | Description                                        | Type   | Required | Values                      |
-     * | -------------- | -------------------------------------------------- | ------ | -------- | --------------------------- |
-     * | noteFontFamily | This sets the font family of actor-attached notes. | string | Required | Any Possible CSS FontFamily |
-     *
-     * **Notes:** Default value: ''"trebuchet ms", verdana, arial, sans-serif'
-     */
-    noteFontFamily: '"trebuchet ms", verdana, arial, sans-serif',
-
-    /**
-     * This sets the font weight of the note's description
-     *
-     * **Notes:** Default value: 400
-     */
-    noteFontWeight: 400,
-
-    /**
-     * | Parameter | Description                                          | Type   | Required | Values                    |
-     * | --------- | ---------------------------------------------------- | ------ | -------- | ------------------------- |
-     * | noteAlign | This sets the text alignment of actor-attached notes | string | required | 'left', 'center', 'right' |
-     *
-     * **Notes:** Default value: 'center'
-     */
-    noteAlign: 'center',
-
-    /**
-     * | Parameter       | Description                               | Type    | Required | Values              |
-     * | --------------- | ----------------------------------------- | ------- | -------- | ------------------- |
-     * | messageFontSize | This sets the font size of actor messages | Integer | Required | Any Positive Number |
-     *
-     * **Notes:** Default value: 16
-     */
-    messageFontSize: 16,
-
-    /**
-     * | Parameter         | Description                                 | Type   | Required | Values                      |
-     * | ----------------- | ------------------------------------------- | ------ | -------- | --------------------------- |
-     * | messageFontFamily | This sets the font family of actor messages | string | Required | Any Possible CSS FontFamily |
-     *
-     * **Notes:** Default value: '"trebuchet ms", verdana, arial, sans-serif'
-     */
-    messageFontFamily: '"trebuchet ms", verdana, arial, sans-serif',
-
-    /**
-     * This sets the font weight of the message's description
-     *
-     * **Notes:** Default value: 400.
-     */
-    messageFontWeight: 400,
-
-    /**
-     * This sets the auto-wrap state for the diagram
-     *
-     * **Notes:** Default value: false.
-     */
-    wrap: false,
-
-    /**
-     * This sets the auto-wrap padding for the diagram (sides only)
-     *
-     * **Notes:** Default value: 0.
-     */
-    wrapPadding: 10,
-
-    /**
-     * This sets the width of the loop-box (loop, alt, opt, par)
-     *
-     * **Notes:** Default value: 50.
-     */
-    labelBoxWidth: 50,
-
-    /**
-     * This sets the height of the loop-box (loop, alt, opt, par)
-     *
-     * **Notes:** Default value: 20.
-     */
-    labelBoxHeight: 20,
-
+    ...defaultConfigJson.sequence,
     messageFont: function () {
       return {
         fontFamily: this.messageFontFamily,
@@ -576,1476 +46,14 @@ const config: Partial<MermaidConfig> = {
       };
     },
   },
-
-  /** The object containing configurations specific for gantt diagrams */
   gantt: {
-    /**
-     * ### titleTopMargin
-     *
-     * | Parameter      | Description                                    | Type    | Required | Values             |
-     * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ |
-     * | titleTopMargin | Margin top for the text over the gantt diagram | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 25
-     */
-    titleTopMargin: 25,
-
-    /**
-     * | Parameter | Description                         | Type    | Required | Values             |
-     * | --------- | ----------------------------------- | ------- | -------- | ------------------ |
-     * | barHeight | The height of the bars in the graph | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 20
-     */
-    barHeight: 20,
-
-    /**
-     * | Parameter | Description                                                      | Type    | Required | Values             |
-     * | --------- | ---------------------------------------------------------------- | ------- | -------- | ------------------ |
-     * | barGap    | The margin between the different activities in the gantt diagram | Integer | Optional | Any Positive Value |
-     *
-     * **Notes:** Default value: 4
-     */
-    barGap: 4,
-
-    /**
-     * | Parameter  | Description                                                                | Type    | Required | Values             |
-     * | ---------- | -------------------------------------------------------------------------- | ------- | -------- | ------------------ |
-     * | topPadding | Margin between title and gantt diagram and between axis and gantt diagram. | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 50
-     */
-    topPadding: 50,
-
-    /**
-     * | Parameter    | Description                                                             | Type    | Required | Values             |
-     * | ------------ | ----------------------------------------------------------------------- | ------- | -------- | ------------------ |
-     * | rightPadding | The space allocated for the section name to the right of the activities | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 75
-     */
-    rightPadding: 75,
-
-    /**
-     * | Parameter   | Description                                                            | Type    | Required | Values             |
-     * | ----------- | ---------------------------------------------------------------------- | ------- | -------- | ------------------ |
-     * | leftPadding | The space allocated for the section name to the left of the activities | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 75
-     */
-    leftPadding: 75,
-
-    /**
-     * | Parameter            | Description                                  | Type    | Required | Values             |
-     * | -------------------- | -------------------------------------------- | ------- | -------- | ------------------ |
-     * | gridLineStartPadding | Vertical starting position of the grid lines | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 35
-     */
-    gridLineStartPadding: 35,
-
-    /**
-     * | Parameter | Description | Type    | Required | Values             |
-     * | --------- | ----------- | ------- | -------- | ------------------ |
-     * | fontSize  | Font size   | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 11
-     */
-    fontSize: 11,
-
-    /**
-     * | Parameter       | Description            | Type    | Required | Values             |
-     * | --------------- | ---------------------- | ------- | -------- | ------------------ |
-     * | sectionFontSize | Font size for sections | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 11
-     */
-    sectionFontSize: 11,
-
-    /**
-     * | Parameter           | Description                              | Type    | Required | Values             |
-     * | ------------------- | ---------------------------------------- | ------- | -------- | ------------------ |
-     * | numberSectionStyles | The number of alternating section styles | Integer | 4        | Any Positive Value |
-     *
-     * **Notes:** Default value: 4
-     */
-    numberSectionStyles: 4,
-
-    /**
-     * | Parameter   | Description               | Type   | Required | Values    |
-     * | ----------- | ------------------------- | ------ | -------- | --------- |
-     * | displayMode | Controls the display mode | string | 4        | 'compact' |
-     *
-     * **Notes**:
-     *
-     * - **compact**: Enables displaying multiple tasks on the same row.
-     */
-    displayMode: '',
-
-    /**
-     * | Parameter  | Description                  | Type | Required | Values           |
-     * | ---------- | ---------------------------- | ---- | -------- | ---------------- |
-     * | axisFormat | Date/time format of the axis | 3    | Required | Date in yy-mm-dd |
-     *
-     * **Notes:**
-     *
-     * This might need adjustment to match your locale and preferences
-     *
-     * Default value: '%Y-%m-%d'.
-     */
-    axisFormat: '%Y-%m-%d',
-
-    /**
-     * | Parameter    | Description | Type   | Required | Values  |
-     * | ------------ | ------------| ------ | -------- | ------- |
-     * | tickInterval | axis ticks  | string | Optional | string  |
-     *
-     * **Notes:**
-     *
-     * Pattern is /^([1-9][0-9]*)(minute|hour|day|week|month)$/
-     *
-     * Default value: undefined
-     */
+    ...defaultConfigJson.gantt,
     tickInterval: undefined,
-    /**
-     * | Parameter   | Description | Type    | Required | Values      |
-     * | ----------- | ----------- | ------- | -------- | ----------- |
-     * | useMaxWidth | See notes   | boolean | 4        | true, false |
-     *
-     * **Notes:**
-     *
-     * When this flag is set the height and width is set to 100% and is then scaling with the
-     * available space if not the absolute space required is used.
-     *
-     * Default value: true
-     */
-    useMaxWidth: true,
-
-    /**
-     * | Parameter | Description | Type    | Required | Values      |
-     * | --------- | ----------- | ------- | -------- | ----------- |
-     * | topAxis   | See notes   | Boolean | 4        | True, False |
-     *
-     * **Notes:** when this flag is set date labels will be added to the top of the chart
-     *
-     * **Default value false**.
-     */
-    topAxis: false,
-
-    useWidth: undefined,
+    useWidth: undefined, // can probably be removed since `configKeys` already includes this
   },
-
-  /** The object containing configurations specific for journey diagrams */
-  journey: {
-    /**
-     * | Parameter      | Description                                          | Type    | Required | Values             |
-     * | -------------- | ---------------------------------------------------- | ------- | -------- | ------------------ |
-     * | diagramMarginX | Margin to the right and left of the sequence diagram | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 50
-     */
-    diagramMarginX: 50,
-
-    /**
-     * | Parameter      | Description                                        | Type    | Required | Values             |
-     * | -------------- | -------------------------------------------------- | ------- | -------- | ------------------ |
-     * | diagramMarginY | Margin to the over and under the sequence diagram. | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 10
-     */
-    diagramMarginY: 10,
-
-    /**
-     * | Parameter   | Description           | Type    | Required | Values             |
-     * | ----------- | --------------------- | ------- | -------- | ------------------ |
-     * | actorMargin | Margin between actors | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 50
-     */
-    leftMargin: 150,
-
-    /**
-     * | Parameter | Description          | Type    | Required | Values             |
-     * | --------- | -------------------- | ------- | -------- | ------------------ |
-     * | width     | Width of actor boxes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 150
-     */
-    width: 150,
-
-    /**
-     * | Parameter | Description           | Type    | Required | Values             |
-     * | --------- | --------------------- | ------- | -------- | ------------------ |
-     * | height    | Height of actor boxes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 65
-     */
-    height: 50,
-
-    /**
-     * | Parameter | Description              | Type    | Required | Values             |
-     * | --------- | ------------------------ | ------- | -------- | ------------------ |
-     * | boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 10
-     */
-    boxMargin: 10,
-
-    /**
-     * | Parameter     | Description                                  | Type    | Required | Values             |
-     * | ------------- | -------------------------------------------- | ------- | -------- | ------------------ |
-     * | boxTextMargin | Margin around the text in loop/alt/opt boxes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 5
-     */
-    boxTextMargin: 5,
-
-    /**
-     * | Parameter  | Description         | Type    | Required | Values             |
-     * | ---------- | ------------------- | ------- | -------- | ------------------ |
-     * | noteMargin | Margin around notes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 10
-     */
-    noteMargin: 10,
-
-    /**
-     * | Parameter     | Description             | Type    | Required | Values             |
-     * | ------------- | ----------------------- | ------- | -------- | ------------------ |
-     * | messageMargin | Space between messages. | Integer | Required | Any Positive Value |
-     *
-     * **Notes:**
-     *
-     * Space between messages.
-     *
-     * Default value: 35
-     */
-    messageMargin: 35,
-
-    /**
-     * | Parameter    | Description                 | Type | Required | Values                    |
-     * | ------------ | --------------------------- | ---- | -------- | ------------------------- |
-     * | messageAlign | Multiline message alignment | 3    | 4        | 'left', 'center', 'right' |
-     *
-     * **Notes:** Default value: 'center'
-     */
-    messageAlign: 'center',
-
-    /**
-     * | Parameter       | Description                                | Type    | Required | Values             |
-     * | --------------- | ------------------------------------------ | ------- | -------- | ------------------ |
-     * | bottomMarginAdj | Prolongs the edge of the diagram downwards | Integer | 4        | Any Positive Value |
-     *
-     * **Notes:**
-     *
-     * Depending on css styling this might need adjustment.
-     *
-     * Default value: 1
-     */
-    bottomMarginAdj: 1,
-
-    /**
-     * | Parameter   | Description | Type    | Required | Values      |
-     * | ----------- | ----------- | ------- | -------- | ----------- |
-     * | useMaxWidth | See notes   | boolean | 4        | true, false |
-     *
-     * **Notes:**
-     *
-     * When this flag is set the height and width is set to 100% and is then scaling with the
-     * available space if not the absolute space required is used.
-     *
-     * Default value: true
-     */
-    useMaxWidth: true,
-
-    /**
-     * | Parameter   | Description                       | Type | Required | Values      |
-     * | ----------- | --------------------------------- | ---- | -------- | ----------- |
-     * | rightAngles | Curved Arrows become Right Angles | 3    | 4        | true, false |
-     *
-     * **Notes:**
-     *
-     * This will display arrows that start and begin at the same node as right angles, rather than a
-     * curves
-     *
-     * Default value: false
-     */
-    rightAngles: false,
-    taskFontSize: 14,
-    taskFontFamily: '"Open Sans", sans-serif',
-    taskMargin: 50,
-    // width of activation box
-    activationWidth: 10,
-
-    // text placement as: tspan | fo | old only text as before
-    textPlacement: 'fo',
-    actorColours: ['#8FBC8F', '#7CFC00', '#00FFFF', '#20B2AA', '#B0E0E6', '#FFFFE0'],
-
-    sectionFills: ['#191970', '#8B008B', '#4B0082', '#2F4F4F', '#800000', '#8B4513', '#00008B'],
-    sectionColours: ['#fff'],
-  },
-  /** The object containing configurations specific for timeline diagrams */
-  timeline: {
-    /**
-     * | Parameter      | Description                                          | Type    | Required | Values             |
-     * | -------------- | ---------------------------------------------------- | ------- | -------- | ------------------ |
-     * | diagramMarginX | Margin to the right and left of the sequence diagram | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 50
-     */
-    diagramMarginX: 50,
-
-    /**
-     * | Parameter      | Description                                        | Type    | Required | Values             |
-     * | -------------- | -------------------------------------------------- | ------- | -------- | ------------------ |
-     * | diagramMarginY | Margin to the over and under the sequence diagram. | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 10
-     */
-    diagramMarginY: 10,
-
-    /**
-     * | Parameter   | Description           | Type    | Required | Values             |
-     * | ----------- | --------------------- | ------- | -------- | ------------------ |
-     * | actorMargin | Margin between actors | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 50
-     */
-    leftMargin: 150,
-
-    /**
-     * | Parameter | Description          | Type    | Required | Values             |
-     * | --------- | -------------------- | ------- | -------- | ------------------ |
-     * | width     | Width of actor boxes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 150
-     */
-    width: 150,
-
-    /**
-     * | Parameter | Description           | Type    | Required | Values             |
-     * | --------- | --------------------- | ------- | -------- | ------------------ |
-     * | height    | Height of actor boxes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 65
-     */
-    height: 50,
-
-    /**
-     * | Parameter | Description              | Type    | Required | Values             |
-     * | --------- | ------------------------ | ------- | -------- | ------------------ |
-     * | boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 10
-     */
-    boxMargin: 10,
-
-    /**
-     * | Parameter     | Description                                  | Type    | Required | Values             |
-     * | ------------- | -------------------------------------------- | ------- | -------- | ------------------ |
-     * | boxTextMargin | Margin around the text in loop/alt/opt boxes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 5
-     */
-    boxTextMargin: 5,
-
-    /**
-     * | Parameter  | Description         | Type    | Required | Values             |
-     * | ---------- | ------------------- | ------- | -------- | ------------------ |
-     * | noteMargin | Margin around notes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 10
-     */
-    noteMargin: 10,
-
-    /**
-     * | Parameter     | Description             | Type    | Required | Values             |
-     * | ------------- | ----------------------- | ------- | -------- | ------------------ |
-     * | messageMargin | Space between messages. | Integer | Required | Any Positive Value |
-     *
-     * **Notes:**
-     *
-     * Space between messages.
-     *
-     * Default value: 35
-     */
-    messageMargin: 35,
-
-    /**
-     * | Parameter    | Description                 | Type | Required | Values                    |
-     * | ------------ | --------------------------- | ---- | -------- | ------------------------- |
-     * | messageAlign | Multiline message alignment | 3    | 4        | 'left', 'center', 'right' |
-     *
-     * **Notes:** Default value: 'center'
-     */
-    messageAlign: 'center',
-
-    /**
-     * | Parameter       | Description                                | Type    | Required | Values             |
-     * | --------------- | ------------------------------------------ | ------- | -------- | ------------------ |
-     * | bottomMarginAdj | Prolongs the edge of the diagram downwards | Integer | 4        | Any Positive Value |
-     *
-     * **Notes:**
-     *
-     * Depending on css styling this might need adjustment.
-     *
-     * Default value: 1
-     */
-    bottomMarginAdj: 1,
-
-    /**
-     * | Parameter   | Description | Type    | Required | Values      |
-     * | ----------- | ----------- | ------- | -------- | ----------- |
-     * | useMaxWidth | See notes   | boolean | 4        | true, false |
-     *
-     * **Notes:**
-     *
-     * When this flag is set the height and width is set to 100% and is then scaling with the
-     * available space if not the absolute space required is used.
-     *
-     * Default value: true
-     */
-    useMaxWidth: true,
-
-    /**
-     * | Parameter   | Description                       | Type | Required | Values      |
-     * | ----------- | --------------------------------- | ---- | -------- | ----------- |
-     * | rightAngles | Curved Arrows become Right Angles | 3    | 4        | true, false |
-     *
-     * **Notes:**
-     *
-     * This will display arrows that start and begin at the same node as right angles, rather than a
-     * curves
-     *
-     * Default value: false
-     */
-    rightAngles: false,
-    taskFontSize: 14,
-    taskFontFamily: '"Open Sans", sans-serif',
-    taskMargin: 50,
-    // width of activation box
-    activationWidth: 10,
-
-    // text placement as: tspan | fo | old only text as before
-    textPlacement: 'fo',
-    actorColours: ['#8FBC8F', '#7CFC00', '#00FFFF', '#20B2AA', '#B0E0E6', '#FFFFE0'],
-
-    sectionFills: ['#191970', '#8B008B', '#4B0082', '#2F4F4F', '#800000', '#8B4513', '#00008B'],
-    sectionColours: ['#fff'],
-    disableMulticolor: false,
-  },
-  class: {
-    /**
-     * ### titleTopMargin
-     *
-     * | Parameter      | Description                                    | Type    | Required | Values             |
-     * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ |
-     * | titleTopMargin | Margin top for the text over the class diagram | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 25
-     */
-    titleTopMargin: 25,
-    arrowMarkerAbsolute: false,
-    dividerMargin: 10,
-    padding: 5,
-    textHeight: 10,
-
-    /**
-     * | Parameter   | Description | Type    | Required | Values      |
-     * | ----------- | ----------- | ------- | -------- | ----------- |
-     * | useMaxWidth | See notes   | boolean | 4        | true, false |
-     *
-     * **Notes:**
-     *
-     * When this flag is set the height and width is set to 100% and is then scaling with the
-     * available space if not the absolute space required is used.
-     *
-     * Default value: true
-     */
-    useMaxWidth: true,
-    /**
-     * | Parameter       | Description | Type    | Required | Values                  |
-     * | --------------- | ----------- | ------- | -------- | ----------------------- |
-     * | defaultRenderer | See notes   | boolean | 4        | dagre-d3, dagre-wrapper |
-     *
-     * **Notes**:
-     *
-     * Decides which rendering engine that is to be used for the rendering. Legal values are:
-     * dagre-d3 dagre-wrapper - wrapper for dagre implemented in mermaid
-     *
-     * Default value: 'dagre-d3'
-     */
-    defaultRenderer: 'dagre-wrapper',
-  },
-  state: {
-    /**
-     * ### titleTopMargin
-     *
-     * | Parameter      | Description                                    | Type    | Required | Values             |
-     * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ |
-     * | titleTopMargin | Margin top for the text over the state diagram | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 25
-     */
-    titleTopMargin: 25,
-    dividerMargin: 10,
-    sizeUnit: 5,
-    padding: 8,
-    textHeight: 10,
-    titleShift: -15,
-    noteMargin: 10,
-    forkWidth: 70,
-    forkHeight: 7,
-    // Used
-    miniPadding: 2,
-    // Font size factor, this is used to guess the width of the edges labels before rendering by dagre
-    // layout. This might need updating if/when switching font
-    fontSizeFactor: 5.02,
-    fontSize: 24,
-    labelHeight: 16,
-    edgeLengthFactor: '20',
-    compositTitleSize: 35,
-    radius: 5,
-    /**
-     * | Parameter   | Description | Type    | Required | Values      |
-     * | ----------- | ----------- | ------- | -------- | ----------- |
-     * | useMaxWidth | See notes   | boolean | 4        | true, false |
-     *
-     * **Notes:**
-     *
-     * When this flag is set the height and width is set to 100% and is then scaling with the
-     * available space if not the absolute space required is used.
-     *
-     * Default value: true
-     */
-    useMaxWidth: true,
-    /**
-     * | Parameter       | Description | Type    | Required | Values                  |
-     * | --------------- | ----------- | ------- | -------- | ----------------------- |
-     * | defaultRenderer | See notes   | boolean | 4        | dagre-d3, dagre-wrapper |
-     *
-     * **Notes:**
-     *
-     * Decides which rendering engine that is to be used for the rendering. Legal values are:
-     * dagre-d3 dagre-wrapper - wrapper for dagre implemented in mermaid
-     *
-     * Default value: 'dagre-d3'
-     */
-    defaultRenderer: 'dagre-wrapper',
-  },
-
-  /** The object containing configurations specific for entity relationship diagrams */
-  er: {
-    /**
-     * ### titleTopMargin
-     *
-     * | Parameter      | Description                                    | Type    | Required | Values             |
-     * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ |
-     * | titleTopMargin | Margin top for the text over the diagram       | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 25
-     */
-    titleTopMargin: 25,
-
-    /**
-     * | Parameter      | Description                                     | Type    | Required | Values             |
-     * | -------------- | ----------------------------------------------- | ------- | -------- | ------------------ |
-     * | diagramPadding | Amount of padding around the diagram as a whole | Integer | Required | Any Positive Value |
-     *
-     * **Notes:**
-     *
-     * The amount of padding around the diagram as a whole so that embedded diagrams have margins,
-     * expressed in pixels
-     *
-     * Default value: 20
-     */
-    diagramPadding: 20,
-
-    /**
-     * | Parameter       | Description                              | Type   | Required | Values                 |
-     * | --------------- | ---------------------------------------- | ------ | -------- | ---------------------- |
-     * | layoutDirection | Directional bias for layout of entities. | string | Required | "TB", "BT", "LR", "RL" |
-     *
-     * **Notes:**
-     *
-     * 'TB' for Top-Bottom, 'BT'for Bottom-Top, 'LR' for Left-Right, or 'RL' for Right to Left.
-     *
-     * T = top, B = bottom, L = left, and R = right.
-     *
-     * Default value: 'TB'
-     */
-    layoutDirection: 'TB',
-
-    /**
-     * | Parameter      | Description                        | Type    | Required | Values             |
-     * | -------------- | ---------------------------------- | ------- | -------- | ------------------ |
-     * | minEntityWidth | The minimum width of an entity box | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Expressed in pixels. Default value: 100
-     */
-    minEntityWidth: 100,
-
-    /**
-     * | Parameter       | Description                         | Type    | Required | Values             |
-     * | --------------- | ----------------------------------- | ------- | -------- | ------------------ |
-     * | minEntityHeight | The minimum height of an entity box | Integer | 4        | Any Positive Value |
-     *
-     * **Notes:** Expressed in pixels Default value: 75
-     */
-    minEntityHeight: 75,
-
-    /**
-     * | Parameter     | Description                                                  | Type    | Required | Values             |
-     * | ------------- | ------------------------------------------------------------ | ------- | -------- | ------------------ |
-     * | entityPadding | Minimum internal padding between text in box and box borders | Integer | 4        | Any Positive Value |
-     *
-     * **Notes:**
-     *
-     * The minimum internal padding between text in an entity box and the enclosing box borders,
-     * expressed in pixels.
-     *
-     * Default value: 15
-     */
-    entityPadding: 15,
-
-    /**
-     * | Parameter | Description                         | Type   | Required | Values               |
-     * | --------- | ----------------------------------- | ------ | -------- | -------------------- |
-     * | stroke    | Stroke color of box edges and lines | string | 4        | Any recognized color |
-     *
-     * **Notes:** Default value: 'gray'
-     */
-    stroke: 'gray',
-
-    /**
-     * | Parameter | Description                | Type   | Required | Values               |
-     * | --------- | -------------------------- | ------ | -------- | -------------------- |
-     * | fill      | Fill color of entity boxes | string | 4        | Any recognized color |
-     *
-     * **Notes:** Default value: 'honeydew'
-     */
-    fill: 'honeydew',
-
-    /**
-     * | Parameter | Description         | Type    | Required | Values             |
-     * | --------- | ------------------- | ------- | -------- | ------------------ |
-     * | fontSize  | Font Size in pixels | Integer |          | Any Positive Value |
-     *
-     * **Notes:**
-     *
-     * Font size (expressed as an integer representing a number of pixels) Default value: 12
-     */
-    fontSize: 12,
-
-    /**
-     * | Parameter   | Description | Type    | Required | Values      |
-     * | ----------- | ----------- | ------- | -------- | ----------- |
-     * | useMaxWidth | See Notes   | boolean | Required | true, false |
-     *
-     * **Notes:**
-     *
-     * When this flag is set to true, the diagram width is locked to 100% and scaled based on
-     * available space. If set to false, the diagram reserves its absolute width.
-     *
-     * Default value: true
-     */
-    useMaxWidth: true,
-  },
-
-  /** The object containing configurations specific for pie diagrams */
-  pie: {
-    useWidth: undefined,
-
-    /**
-     * | Parameter   | Description | Type    | Required | Values      |
-     * | ----------- | ----------- | ------- | -------- | ----------- |
-     * | useMaxWidth | See Notes   | boolean | Required | true, false |
-     *
-     * **Notes:**
-     *
-     * When this flag is set to true, the diagram width is locked to 100% and scaled based on
-     * available space. If set to false, the diagram reserves its absolute width.
-     *
-     * Default value: true
-     */
-    useMaxWidth: true,
-
-    /**
-     * | Parameter    | Description                                                                      | Type    | Required | Values              |
-     * | ------------ | -------------------------------------------------------------------------------- | ------- | -------- | ------------------- |
-     * | textPosition | Axial position of slice's label from zero at the center to 1 at the outside edge | Number  | Optional | Decimal from 0 to 1 |
-     *
-     * **Notes:** Default value: 0.75
-     */
-    textPosition: 0.75,
-  },
-
-  quadrantChart: {
-    /**
-     * | Parameter       | Description                        | Type    | Required | Values              |
-     * | --------------- | ---------------------------------- | ------- | -------- | ------------------- |
-     * | chartWidth      | Width of the chart                 | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 500
-     */
-    chartWidth: 500,
-    /**
-     * | Parameter       | Description                        | Type    | Required | Values              |
-     * | --------------- | ---------------------------------- | ------- | -------- | ------------------- |
-     * | chartHeight     | Height of the chart                | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 500
-     */
-    chartHeight: 500,
-    /**
-     * | Parameter          | Description                        | Type    | Required | Values              |
-     * | ------------------ | ---------------------------------- | ------- | -------- | ------------------- |
-     * | titlePadding       | Chart title top and bottom padding | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 10
-     */
-    titlePadding: 10,
-    /**
-     * | Parameter          | Description                        | Type    | Required | Values              |
-     * | ------------------ | ---------------------------------- | ------- | -------- | ------------------- |
-     * | titleFontSize      | Chart title font size              | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 20
-     */
-    titleFontSize: 20,
-    /**
-     * | Parameter       | Description                        | Type    | Required | Values              |
-     * | --------------- | ---------------------------------- | ------- | -------- | ------------------- |
-     * | quadrantPadding | Padding around the quadrant square | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 5
-     */
-    quadrantPadding: 5,
-    /**
-     * | Parameter              | Description                                                                | Type    | Required | Values              |
-     * | ---------------------- | -------------------------------------------------------------------------- | ------- | -------- | ------------------- |
-     * | quadrantTextTopPadding | quadrant title padding from top if the quadrant is rendered on top         | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 5
-     */
-    quadrantTextTopPadding: 5,
-    /**
-     * | Parameter             | Description                        | Type    | Required | Values              |
-     * | ------------------    | ---------------------------------- | ------- | -------- | ------------------- |
-     * | quadrantLabelFontSize | quadrant title font size           | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 16
-     */
-    quadrantLabelFontSize: 16,
-    /**
-     * | Parameter                         | Description                                                   | Type    | Required | Values              |
-     * | --------------------------------- | ------------------------------------------------------------- | ------- | -------- | ------------------- |
-     * | quadrantInternalBorderStrokeWidth | stroke width of edges of the box that are inside the quadrant | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 1
-     */
-    quadrantInternalBorderStrokeWidth: 1,
-    /**
-     * | Parameter                         | Description                                                    | Type    | Required | Values              |
-     * | --------------------------------- | -------------------------------------------------------------- | ------- | -------- | ------------------- |
-     * | quadrantExternalBorderStrokeWidth | stroke width of edges of the box that are outside the quadrant | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 2
-     */
-    quadrantExternalBorderStrokeWidth: 2,
-    /**
-     * | Parameter         | Description                        | Type    | Required | Values              |
-     * | ---------------   | ---------------------------------- | ------- | -------- | ------------------- |
-     * | xAxisLabelPadding | Padding around x-axis labels       | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 5
-     */
-    xAxisLabelPadding: 5,
-    /**
-     * | Parameter          | Description                        | Type    | Required | Values              |
-     * | ------------------ | ---------------------------------- | ------- | -------- | ------------------- |
-     * | xAxisLabelFontSize | x-axis label font size             | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 16
-     */
-    xAxisLabelFontSize: 16,
-    /**
-     * | Parameter     | Description                     | Type    | Required | Values              |
-     * | ------------- | ------------------------------- | ------- | -------- | ------------------- |
-     * | xAxisPosition | position of x-axis labels       | string  | Optional | 'top' or 'bottom'   |
-     *
-     * **Notes:**
-     * Default value: top
-     */
-    xAxisPosition: 'top',
-    /**
-     * | Parameter         | Description                        | Type    | Required | Values              |
-     * | ---------------   | ---------------------------------- | ------- | -------- | ------------------- |
-     * | yAxisLabelPadding | Padding around y-axis labels       | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 5
-     */
-    yAxisLabelPadding: 5,
-    /**
-     * | Parameter          | Description                        | Type    | Required | Values              |
-     * | ------------------ | ---------------------------------- | ------- | -------- | ------------------- |
-     * | yAxisLabelFontSize | y-axis label font size             | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 16
-     */
-    yAxisLabelFontSize: 16,
-    /**
-     * | Parameter     | Description                     | Type    | Required | Values              |
-     * | ------------- | ------------------------------- | ------- | -------- | ------------------- |
-     * | yAxisPosition | position of y-axis labels       | string  | Optional | 'left' or 'right'   |
-     *
-     * **Notes:**
-     * Default value: left
-     */
-    yAxisPosition: 'left',
-    /**
-     * | Parameter              | Description                            | Type    | Required | Values              |
-     * | ---------------------- | -------------------------------------- | ------- | -------- | ------------------- |
-     * | pointTextPadding       | padding between point and point label  | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 5
-     */
-    pointTextPadding: 5,
-    /**
-     * | Parameter              | Description            | Type    | Required | Values              |
-     * | ---------------------- | ---------------------- | ------- | -------- | ------------------- |
-     * | pointTextPadding       | point title font size  | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 12
-     */
-    pointLabelFontSize: 12,
-    /**
-     * | Parameter     | Description                     | Type    | Required | Values              |
-     * | ------------- | ------------------------------- | ------- | -------- | ------------------- |
-     * | pointRadius   | radius of the point to be drawn | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 5
-     */
-    pointRadius: 5,
-    /**
-     * | Parameter   | Description | Type    | Required | Values      |
-     * | ----------- | ----------- | ------- | -------- | ----------- |
-     * | useMaxWidth | See Notes   | boolean | Required | true, false |
-     *
-     * **Notes:**
-     *
-     * When this flag is set to true, the diagram width is locked to 100% and scaled based on
-     * available space. If set to false, the diagram reserves its absolute width.
-     *
-     * Default value: true
-     */
-    useMaxWidth: true,
-  },
-
-  /** The object containing configurations specific for req diagrams */
-  requirement: {
-    useWidth: undefined,
-
-    /**
-     * | Parameter   | Description | Type    | Required | Values      |
-     * | ----------- | ----------- | ------- | -------- | ----------- |
-     * | useMaxWidth | See Notes   | boolean | Required | true, false |
-     *
-     * **Notes:**
-     *
-     * When this flag is set to true, the diagram width is locked to 100% and scaled based on
-     * available space. If set to false, the diagram reserves its absolute width.
-     *
-     * Default value: true
-     */
-    useMaxWidth: true,
-
-    rect_fill: '#f9f9f9',
-    text_color: '#333',
-    rect_border_size: '0.5px',
-    rect_border_color: '#bbb',
-    rect_min_width: 200,
-    rect_min_height: 200,
-    fontSize: 14,
-    rect_padding: 10,
-    line_height: 20,
-  },
-  gitGraph: {
-    /**
-     * ### titleTopMargin
-     *
-     * | Parameter      | Description                                    | Type    | Required | Values             |
-     * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ |
-     * | titleTopMargin | Margin top for the text over the Git diagram   | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 25
-     */
-    titleTopMargin: 25,
-    diagramPadding: 8,
-    nodeLabel: {
-      width: 75,
-      height: 100,
-      x: -25,
-      y: 0,
-    },
-    mainBranchName: 'main',
-    mainBranchOrder: 0,
-    showCommitLabel: true,
-    showBranches: true,
-    rotateCommitLabel: true,
-  },
-
-  /** The object containing configurations specific for c4 diagrams */
   c4: {
+    ...defaultConfigJson.c4,
     useWidth: undefined,
-
-    /**
-     * | Parameter      | Description                                    | Type    | Required | Values             |
-     * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ |
-     * | diagramMarginX | Margin to the right and left of the c4 diagram | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 50
-     */
-    diagramMarginX: 50,
-
-    /**
-     * | Parameter      | Description                                 | Type    | Required | Values             |
-     * | -------------- | ------------------------------------------- | ------- | -------- | ------------------ |
-     * | diagramMarginY | Margin to the over and under the c4 diagram | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 10
-     */
-    diagramMarginY: 10,
-
-    /**
-     * | Parameter     | Description           | Type    | Required | Values             |
-     * | ------------- | --------------------- | ------- | -------- | ------------------ |
-     * | c4ShapeMargin | Margin between shapes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 50
-     */
-    c4ShapeMargin: 50,
-
-    /**
-     * | Parameter      | Description            | Type    | Required | Values             |
-     * | -------------- | ---------------------- | ------- | -------- | ------------------ |
-     * | c4ShapePadding | Padding between shapes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 20
-     */
-    c4ShapePadding: 20,
-
-    /**
-     * | Parameter | Description           | Type    | Required | Values             |
-     * | --------- | --------------------- | ------- | -------- | ------------------ |
-     * | width     | Width of person boxes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 216
-     */
-    width: 216,
-
-    /**
-     * | Parameter | Description            | Type    | Required | Values             |
-     * | --------- | ---------------------- | ------- | -------- | ------------------ |
-     * | height    | Height of person boxes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 60
-     */
-    height: 60,
-
-    /**
-     * | Parameter | Description         | Type    | Required | Values             |
-     * | --------- | ------------------- | ------- | -------- | ------------------ |
-     * | boxMargin | Margin around boxes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 10
-     */
-    boxMargin: 10,
-
-    /**
-     * | Parameter   | Description | Type    | Required | Values      |
-     * | ----------- | ----------- | ------- | -------- | ----------- |
-     * | useMaxWidth | See Notes   | boolean | Required | true, false |
-     *
-     * **Notes:** When this flag is set to true, the height and width is set to 100% and is then
-     * scaling with the available space. If set to false, the absolute space required is used.
-     *
-     * Default value: true
-     */
-    useMaxWidth: true,
-
-    /**
-     * | Parameter    | Description | Type    | Required | Values             |
-     * | ------------ | ----------- | ------- | -------- | ------------------ |
-     * | c4ShapeInRow | See Notes   | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** How many shapes to place in each row.
-     *
-     * Default value: 4
-     */
-    c4ShapeInRow: 4,
-
-    nextLinePaddingX: 0,
-
-    /**
-     * | Parameter       | Description | Type    | Required | Values             |
-     * | --------------- | ----------- | ------- | -------- | ------------------ |
-     * | c4BoundaryInRow | See Notes   | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** How many boundaries to place in each row.
-     *
-     * Default value: 2
-     */
-    c4BoundaryInRow: 2,
-
-    /**
-     * This sets the font size of Person shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    personFontSize: 14,
-    /**
-     * This sets the font family of Person shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    personFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of Person shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    personFontWeight: 'normal',
-
-    /**
-     * This sets the font size of External Person shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    external_personFontSize: 14,
-    /**
-     * This sets the font family of External Person shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    external_personFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of External Person shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    external_personFontWeight: 'normal',
-
-    /**
-     * This sets the font size of System shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    systemFontSize: 14,
-    /**
-     * This sets the font family of System shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    systemFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of System shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    systemFontWeight: 'normal',
-
-    /**
-     * This sets the font size of External System shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    external_systemFontSize: 14,
-    /**
-     * This sets the font family of External System shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    external_systemFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of External System shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    external_systemFontWeight: 'normal',
-
-    /**
-     * This sets the font size of System DB shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    system_dbFontSize: 14,
-    /**
-     * This sets the font family of System DB shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    system_dbFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of System DB shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    system_dbFontWeight: 'normal',
-
-    /**
-     * This sets the font size of External System DB shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    external_system_dbFontSize: 14,
-    /**
-     * This sets the font family of External System DB shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    external_system_dbFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of External System DB shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    external_system_dbFontWeight: 'normal',
-
-    /**
-     * This sets the font size of System Queue shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    system_queueFontSize: 14,
-    /**
-     * This sets the font family of System Queue shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    system_queueFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of System Queue shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    system_queueFontWeight: 'normal',
-
-    /**
-     * This sets the font size of External System Queue shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    external_system_queueFontSize: 14,
-    /**
-     * This sets the font family of External System Queue shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    external_system_queueFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of External System Queue shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    external_system_queueFontWeight: 'normal',
-
-    /**
-     * This sets the font size of Boundary shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    boundaryFontSize: 14,
-    /**
-     * This sets the font family of Boundary shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    boundaryFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of Boundary shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    boundaryFontWeight: 'normal',
-
-    /**
-     * This sets the font size of Message shape for the diagram
-     *
-     * **Notes:** Default value: 12.
-     */
-    messageFontSize: 12,
-    /**
-     * This sets the font family of Message shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    messageFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of Message shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    messageFontWeight: 'normal',
-
-    /**
-     * This sets the font size of Container shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    containerFontSize: 14,
-    /**
-     * This sets the font family of Container shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    containerFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of Container shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    containerFontWeight: 'normal',
-
-    /**
-     * This sets the font size of External Container shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    external_containerFontSize: 14,
-    /**
-     * This sets the font family of External Container shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    external_containerFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of External Container shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    external_containerFontWeight: 'normal',
-
-    /**
-     * This sets the font size of Container DB shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    container_dbFontSize: 14,
-    /**
-     * This sets the font family of Container DB shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    container_dbFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of Container DB shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    container_dbFontWeight: 'normal',
-
-    /**
-     * This sets the font size of External Container DB shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    external_container_dbFontSize: 14,
-    /**
-     * This sets the font family of External Container DB shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    external_container_dbFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of External Container DB shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    external_container_dbFontWeight: 'normal',
-
-    /**
-     * This sets the font size of Container Queue shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    container_queueFontSize: 14,
-    /**
-     * This sets the font family of Container Queue shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    container_queueFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of Container Queue shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    container_queueFontWeight: 'normal',
-
-    /**
-     * This sets the font size of External Container Queue shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    external_container_queueFontSize: 14,
-    /**
-     * This sets the font family of External Container Queue shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    external_container_queueFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of External Container Queue shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    external_container_queueFontWeight: 'normal',
-
-    /**
-     * This sets the font size of Component shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    componentFontSize: 14,
-    /**
-     * This sets the font family of Component shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    componentFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of Component shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    componentFontWeight: 'normal',
-
-    /**
-     * This sets the font size of External Component shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    external_componentFontSize: 14,
-    /**
-     * This sets the font family of External Component shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    external_componentFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of External Component shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    external_componentFontWeight: 'normal',
-
-    /**
-     * This sets the font size of Component DB shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    component_dbFontSize: 14,
-    /**
-     * This sets the font family of Component DB shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    component_dbFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of Component DB shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    component_dbFontWeight: 'normal',
-
-    /**
-     * This sets the font size of External Component DB shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    external_component_dbFontSize: 14,
-    /**
-     * This sets the font family of External Component DB shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    external_component_dbFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of External Component DB shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    external_component_dbFontWeight: 'normal',
-
-    /**
-     * This sets the font size of Component Queue shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    component_queueFontSize: 14,
-    /**
-     * This sets the font family of Component Queue shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    component_queueFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of Component Queue shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    component_queueFontWeight: 'normal',
-
-    /**
-     * This sets the font size of External Component Queue shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    external_component_queueFontSize: 14,
-    /**
-     * This sets the font family of External Component Queue shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    external_component_queueFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of External Component Queue shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    external_component_queueFontWeight: 'normal',
-
-    /**
-     * This sets the auto-wrap state for the diagram
-     *
-     * **Notes:** Default value: true.
-     */
-    wrap: true,
-
-    /**
-     * This sets the auto-wrap padding for the diagram (sides only)
-     *
-     * **Notes:** Default value: 0.
-     */
-    wrapPadding: 10,
-
     personFont: function () {
       return {
         fontFamily: this.personFontFamily,
@@ -2221,72 +229,30 @@ const config: Partial<MermaidConfig> = {
         fontWeight: this.messageFontWeight,
       };
     },
-
-    // ' Colors
-    // ' ##################################
-    person_bg_color: '#08427B',
-    person_border_color: '#073B6F',
-    external_person_bg_color: '#686868',
-    external_person_border_color: '#8A8A8A',
-    system_bg_color: '#1168BD',
-    system_border_color: '#3C7FC0',
-    system_db_bg_color: '#1168BD',
-    system_db_border_color: '#3C7FC0',
-    system_queue_bg_color: '#1168BD',
-    system_queue_border_color: '#3C7FC0',
-    external_system_bg_color: '#999999',
-    external_system_border_color: '#8A8A8A',
-    external_system_db_bg_color: '#999999',
-    external_system_db_border_color: '#8A8A8A',
-    external_system_queue_bg_color: '#999999',
-    external_system_queue_border_color: '#8A8A8A',
-    container_bg_color: '#438DD5',
-    container_border_color: '#3C7FC0',
-    container_db_bg_color: '#438DD5',
-    container_db_border_color: '#3C7FC0',
-    container_queue_bg_color: '#438DD5',
-    container_queue_border_color: '#3C7FC0',
-    external_container_bg_color: '#B3B3B3',
-    external_container_border_color: '#A6A6A6',
-    external_container_db_bg_color: '#B3B3B3',
-    external_container_db_border_color: '#A6A6A6',
-    external_container_queue_bg_color: '#B3B3B3',
-    external_container_queue_border_color: '#A6A6A6',
-    component_bg_color: '#85BBF0',
-    component_border_color: '#78A8D8',
-    component_db_bg_color: '#85BBF0',
-    component_db_border_color: '#78A8D8',
-    component_queue_bg_color: '#85BBF0',
-    component_queue_border_color: '#78A8D8',
-    external_component_bg_color: '#CCCCCC',
-    external_component_border_color: '#BFBFBF',
-    external_component_db_bg_color: '#CCCCCC',
-    external_component_db_border_color: '#BFBFBF',
-    external_component_queue_bg_color: '#CCCCCC',
-    external_component_queue_border_color: '#BFBFBF',
   },
-  mindmap: {
-    useMaxWidth: true,
-    padding: 10,
-    maxNodeWidth: 200,
+  pie: {
+    ...defaultConfigJson.pie,
+    useWidth: undefined,
   },
-  sankey: {
-    width: 600,
-    height: 400,
-    linkColor: 'gradient',
-    nodeAlignment: 'justify',
+  requirement: {
+    ...defaultConfigJson.requirement,
+    useWidth: undefined,
+  },
+  gitGraph: {
+    ...defaultConfigJson.gitGraph,
+    // TODO: This is a temporary override for `gitGraph`, since every other
+    //       diagram does have `useMaxWidth`, but instead sets it to `true`.
+    //       Should we set this to `true` instead?
+    useMaxWidth: false,
+  },
+  sankey: {
+    ...defaultConfigJson.sankey,
+    // this is false, unlike every other diagram (other than gitGraph)
+    // TODO: can we make this default to `true` instead?
     useMaxWidth: false,
   },
-  fontSize: 16,
 };
 
-if (config.class) {
-  config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
-}
-if (config.gitGraph) {
-  config.gitGraph.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
-}
-
 const keyify = (obj: any, prefix = ''): string[] =>
   Object.keys(obj).reduce((res: string[], el): string[] => {
     if (Array.isArray(obj[el])) {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 832703bae..919087c7c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -71,6 +71,9 @@ importers:
       '@vitest/ui':
         specifier: ^0.32.2
         version: 0.32.2(vitest@0.32.2)
+      ajv:
+        specifier: ^8.12.0
+        version: 8.12.0
       concurrently:
         specifier: ^8.0.1
         version: 8.0.1
@@ -663,13 +666,13 @@ packages:
     resolution: {integrity: sha512-qe8Nmh9rYI/HIspLSTwtbMFPj6dISG6+dJnOguTlPNXtCvS2uezdxscVBb7/3DrmNbQK49TDqpkSQ1chbRGdpQ==}
     dev: true
 
-  /@apideck/better-ajv-errors@0.3.6(ajv@8.11.0):
+  /@apideck/better-ajv-errors@0.3.6(ajv@8.12.0):
     resolution: {integrity: sha512-P+ZygBLZtkp0qqOAJJVX4oX/sFo5JR3eBWwwuqHHhK0GIgQOKWrAfiAaWX0aArHkRWHMuggFEgAZNxVPwPZYaA==}
     engines: {node: '>=10'}
     peerDependencies:
       ajv: '>=8'
     dependencies:
-      ajv: 8.11.0
+      ajv: 8.12.0
       json-schema: 0.4.0
       jsonpointer: 5.0.1
       leven: 3.1.0
@@ -2258,7 +2261,7 @@ packages:
     engines: {node: '>=v14'}
     dependencies:
       '@commitlint/types': 17.4.4
-      ajv: 8.11.0
+      ajv: 8.12.0
     dev: true
 
   /@commitlint/ensure@17.4.4:
@@ -5799,7 +5802,7 @@ packages:
       indent-string: 5.0.0
     dev: true
 
-  /ajv-formats@2.1.1(ajv@8.11.0):
+  /ajv-formats@2.1.1(ajv@8.12.0):
     resolution: {integrity: sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==}
     peerDependencies:
       ajv: ^8.0.0
@@ -5807,7 +5810,7 @@ packages:
       ajv:
         optional: true
     dependencies:
-      ajv: 8.11.0
+      ajv: 8.12.0
     dev: true
 
   /ajv-keywords@3.5.2(ajv@6.12.6):
@@ -5818,12 +5821,12 @@ packages:
       ajv: 6.12.6
     dev: true
 
-  /ajv-keywords@5.1.0(ajv@8.11.0):
+  /ajv-keywords@5.1.0(ajv@8.12.0):
     resolution: {integrity: sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==}
     peerDependencies:
       ajv: ^8.8.2
     dependencies:
-      ajv: 8.11.0
+      ajv: 8.12.0
       fast-deep-equal: 3.1.3
     dev: true
 
@@ -5836,8 +5839,8 @@ packages:
       uri-js: 4.4.1
     dev: true
 
-  /ajv@8.11.0:
-    resolution: {integrity: sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==}
+  /ajv@8.12.0:
+    resolution: {integrity: sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==}
     dependencies:
       fast-deep-equal: 3.1.3
       json-schema-traverse: 1.0.0
@@ -11063,7 +11066,7 @@ packages:
   /light-my-request@4.12.0:
     resolution: {integrity: sha512-0y+9VIfJEsPVzK5ArSIJ8Dkxp8QMP7/aCuxCUtG/tr9a2NoOf/snATE/OUc05XUplJCEnRh6gTkH7xh9POt1DQ==}
     dependencies:
-      ajv: 8.11.0
+      ajv: 8.12.0
       cookie: 0.5.0
       process-warning: 1.0.0
       set-cookie-parser: 2.6.0
@@ -13514,9 +13517,9 @@ packages:
     engines: {node: '>= 12.13.0'}
     dependencies:
       '@types/json-schema': 7.0.11
-      ajv: 8.11.0
-      ajv-formats: 2.1.1(ajv@8.11.0)
-      ajv-keywords: 5.1.0(ajv@8.11.0)
+      ajv: 8.12.0
+      ajv-formats: 2.1.1(ajv@8.12.0)
+      ajv-keywords: 5.1.0(ajv@8.12.0)
     dev: true
 
   /search-insights@2.6.0:
@@ -15924,7 +15927,7 @@ packages:
     resolution: {integrity: sha512-CttE7WCYW9sZC+nUYhQg3WzzGPr4IHmrPnjKiu3AMXsiNQKx+l4hHl63WTrnicLmKEKHScWDH8xsGBdrYgtBzg==}
     engines: {node: '>=16.0.0'}
     dependencies:
-      '@apideck/better-ajv-errors': 0.3.6(ajv@8.11.0)
+      '@apideck/better-ajv-errors': 0.3.6(ajv@8.12.0)
       '@babel/core': 7.12.3
       '@babel/preset-env': 7.20.2(@babel/core@7.12.3)
       '@babel/runtime': 7.21.0
@@ -15932,7 +15935,7 @@ packages:
       '@rollup/plugin-node-resolve': 11.2.1(rollup@2.79.1)
       '@rollup/plugin-replace': 2.4.2(rollup@2.79.1)
       '@surma/rollup-plugin-off-main-thread': 2.2.3
-      ajv: 8.11.0
+      ajv: 8.12.0
       common-tags: 1.8.2
       fast-json-stable-stringify: 2.1.0
       fs-extra: 9.1.0
diff --git a/vite.config.ts b/vite.config.ts
index 36d08351e..080ff981f 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,4 +1,5 @@
 import jison from './.vite/jisonPlugin.js';
+import jsonSchemaPlugin from './.vite/jsonSchemaPlugin.js';
 import typescript from '@rollup/plugin-typescript';
 import { defineConfig } from 'vitest/config';
 
@@ -8,6 +9,7 @@ export default defineConfig({
   },
   plugins: [
     jison(),
+    jsonSchemaPlugin(), // handles .schema.yaml JSON Schema files
     // @ts-expect-error According to the type definitions, rollup plugins are incompatible with vite
     typescript({ compilerOptions: { declaration: false } }),
   ],

From 0230722d361b56d5b524bbb434912767c7ab70ad Mon Sep 17 00:00:00 2001
From: Alois Klink <alois@aloisklink.com>
Date: Thu, 22 Dec 2022 01:55:55 +0000
Subject: [PATCH 062/281] build(docs): build JSON Schema docs

Automatically build documentation for JSON Schema.

This is only built when running with `--vitepress`,
as it currently produces loads of markdown files, which I feel like
we shouldn't be committing.

This currently manually uses some internal `jsonschema2md` functions
so that we can manually control the Markdown output.
---
 packages/mermaid/package.json |   2 +
 packages/mermaid/src/docs.mts |  99 ++++++++++++++++++++++-
 pnpm-lock.yaml                | 146 +++++++++++++++++++++++++++++++++-
 3 files changed, 243 insertions(+), 4 deletions(-)

diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index c73275a6f..cd193f8a5 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -74,6 +74,7 @@
     "web-worker": "^1.2.0"
   },
   "devDependencies": {
+    "@adobe/jsonschema2md": "^7.1.4",
     "@types/cytoscape": "^3.19.9",
     "@types/d3": "^7.4.0",
     "@types/d3-sankey": "^0.12.1",
@@ -109,6 +110,7 @@
     "typedoc-plugin-markdown": "^3.15.2",
     "typescript": "^5.0.4",
     "unist-util-flatmap": "^1.0.0",
+    "unist-util-visit": "^4.1.2",
     "vitepress": "^1.0.0-alpha.72",
     "vitepress-plugin-search": "^1.0.4-alpha.20"
   },
diff --git a/packages/mermaid/src/docs.mts b/packages/mermaid/src/docs.mts
index f6efc1169..1a5ed5ea0 100644
--- a/packages/mermaid/src/docs.mts
+++ b/packages/mermaid/src/docs.mts
@@ -34,7 +34,7 @@ import { readFileSync, writeFileSync, mkdirSync, existsSync, rmSync, rmdirSync }
 import { exec } from 'child_process';
 import { globby } from 'globby';
 import { JSDOM } from 'jsdom';
-import type { Code, Root } from 'mdast';
+import type { Code, ListItem, Root, Text } from 'mdast';
 import { posix, dirname, relative, join } from 'path';
 import prettier from 'prettier';
 import { remark } from 'remark';
@@ -44,6 +44,7 @@ import chokidar from 'chokidar';
 import mm from 'micromatch';
 // @ts-ignore No typescript declaration file
 import flatmap from 'unist-util-flatmap';
+import { visit } from 'unist-util-visit';
 
 const MERMAID_MAJOR_VERSION = (
   JSON.parse(readFileSync('../mermaid/package.json', 'utf8')).version as string
@@ -150,6 +151,7 @@ const copyTransformedContents = (filename: string, doCopy = false, transformedCo
   }
 
   filesTransformed.add(fileInFinalDocDir);
+
   if (doCopy) {
     writeFileSync(fileInFinalDocDir, newBuffer);
   }
@@ -321,6 +323,93 @@ const transformMarkdown = (file: string) => {
   copyTransformedContents(file, !verifyOnly, formatted);
 };
 
+import { load, JSON_SCHEMA } from 'js-yaml';
+// @ts-ignore: we're importing internal jsonschema2md functions
+import { default as schemaLoader } from '@adobe/jsonschema2md/lib/schemaProxy.js';
+// @ts-ignore: we're importing internal jsonschema2md functions
+import { default as traverseSchemas } from '@adobe/jsonschema2md/lib/traverseSchema.js';
+// @ts-ignore: we're importing internal jsonschema2md functions
+import { default as buildMarkdownFromSchema } from '@adobe/jsonschema2md/lib/markdownBuilder.js';
+// @ts-ignore: we're importing internal jsonschema2md functions
+import { default as jsonSchemaReadmeBuilder } from '@adobe/jsonschema2md/lib/readmeBuilder.js';
+
+/**
+ * Transforms the given JSON Schema into Markdown documentation
+ */
+async function transormJsonSchema(file: string) {
+  const yamlContents = readSyncedUTF8file(file);
+  const jsonSchema = load(yamlContents, {
+    filename: file,
+    // only allow JSON types in our YAML doc (will probably be default in YAML 1.3)
+    // e.g. `true` will be parsed a boolean `true`, `True` will be parsed as string `"True"`.
+    schema: JSON_SCHEMA,
+  });
+
+  // write .schema.json files
+  const jsonFileName = file
+    .replace('.schema.yaml', '.schema.json')
+    .replace('src/schemas/', 'src/docs/schemas/');
+  copyTransformedContents(jsonFileName, !verifyOnly, JSON.stringify(jsonSchema, undefined, 2));
+
+  const schemas = traverseSchemas([schemaLoader()(file, jsonSchema)]);
+
+  // ignore output of this function
+  // for some reason, without calling this function, we get some broken links
+  // this is probably a bug in @adobe/jsonschema2md
+  jsonSchemaReadmeBuilder({ readme: true })(schemas);
+
+  // write Markdown files
+  const markdownFiles = buildMarkdownFromSchema({
+    header: true,
+    // links,
+    includeProperties: ['tsType'], // Custom TypeScript type
+    exampleFormat: 'json',
+    // skipProperties,
+  })(schemas);
+
+  for (const [name, markdownAst] of Object.entries(markdownFiles)) {
+    /*
+     * Converts list entries of shape '- tsType: () => Partial<FontConfig>'
+     * into '- tsType: `() => Partial<FontConfig>`' (e.g. escaping with back-ticks),
+     * as otherwise VitePress doesn't like the <FontConfig> bit.
+     */
+    visit(markdownAst as Root, 'listItem', (listEntry: ListItem) => {
+      let listText: Text;
+      const blockItem = listEntry.children[0];
+      if (blockItem.type === 'paragraph' && blockItem.children[0].type === 'text') {
+        listText = blockItem.children[0];
+      } // @ts-expect-error: MD AST output from @adobe/jsonschema2md is technically wrong
+      else if (blockItem.type === 'text') {
+        listText = blockItem;
+      } else {
+        return; // skip
+      }
+
+      if (listText.value.startsWith('tsType: ')) {
+        listText.value = listText.value.replace(/tsType: (.*)/g, 'tsType: `$1`');
+      }
+    });
+
+    const transformed = remark()
+      .use(remarkGfm)
+      .use(remarkFrontmatter, ['yaml']) // support YAML front-matter in Markdown
+      .use(transformMarkdownAst, {
+        // mermaid project specific plugin
+        originalFilename: file,
+        addAutogeneratedWarning: !noHeader,
+        removeYAML: !noHeader,
+      })
+      .stringify(markdownAst as Root);
+
+    const formatted = prettier.format(transformed, {
+      parser: 'markdown',
+      ...prettierConfig,
+    });
+    const newFileName = join('src', 'docs', 'config', 'schema-docs', `${name}.md`);
+    copyTransformedContents(newFileName, !verifyOnly, formatted);
+  }
+}
+
 /**
  * Transform an HTML file and write the transformed file to the directory for published
  * documentation
@@ -388,6 +477,14 @@ const main = async () => {
   const sourceDirGlob = posix.join('.', SOURCE_DOCS_DIR, '**');
   const action = verifyOnly ? 'Verifying' : 'Transforming';
 
+  if (vitepress) {
+    console.log(`${action} 1 .schema.yaml file`);
+    await transormJsonSchema('src/schemas/config.schema.yaml');
+  } else {
+    // skip because this creates so many Markdown files that it lags git
+    console.log('Skipping 1 .schema.yaml file');
+  }
+
   const mdFileGlobs = getGlobs([posix.join(sourceDirGlob, '*.md')]);
   const mdFiles = await getFilesFromGlobs(mdFileGlobs);
   console.log(`${action} ${mdFiles.length} markdown files...`);
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 919087c7c..fad43866e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -255,6 +255,9 @@ importers:
         specifier: ^1.2.0
         version: 1.2.0
     devDependencies:
+      '@adobe/jsonschema2md':
+        specifier: ^7.1.4
+        version: 7.1.4
       '@types/cytoscape':
         specifier: ^3.19.9
         version: 3.19.9
@@ -360,6 +363,9 @@ importers:
       unist-util-flatmap:
         specifier: ^1.0.0
         version: 1.0.0
+      unist-util-visit:
+        specifier: ^4.1.2
+        version: 4.1.2
       vitepress:
         specifier: ^1.0.0-alpha.72
         version: 1.0.0-alpha.72(@algolia/client-search@4.14.2)(@types/node@18.16.0)
@@ -487,6 +493,43 @@ importers:
 
 packages:
 
+  /@adobe/helix-log@6.0.0:
+    resolution: {integrity: sha512-+9gpf49sFDmZLV3gtjY+RmEUistqYJdVWpiqlRYpxE59x5bHFzYf93dZ7fljSTBtZdVq8lm97HxrTUloh5HvRg==}
+    dependencies:
+      big.js: 6.2.1
+      colorette: 2.0.20
+      ferrum: 1.9.4
+      phin: 3.7.0
+      polka: 0.5.2
+    dev: true
+
+  /@adobe/jsonschema2md@7.1.4:
+    resolution: {integrity: sha512-sqzH/G+2oNZi5ltwbl0hGJacGTDpXv7uUykzh+LD/DNfOIjUq577b1HbES/JP5yWcp4YkX4I3V5Kxltewr0BUg==}
+    engines: {node: '>= 14.0.0'}
+    hasBin: true
+    dependencies:
+      '@adobe/helix-log': 6.0.0
+      '@types/json-schema': 7.0.11
+      '@types/mdast': 3.0.11
+      es2015-i18n-tag: 1.6.1
+      ferrum: 1.9.4
+      fs-extra: 11.0.0
+      github-slugger: 2.0.0
+      js-yaml: 4.1.0
+      json-schema: 0.4.0
+      mdast-builder: 1.1.1
+      mdast-util-to-string: 3.1.0
+      readdirp: 3.6.0
+      remark-gfm: 3.0.1
+      remark-parse: 10.0.1
+      remark-stringify: 10.0.2
+      unified: 10.1.2
+      unist-util-inspect: 7.0.1
+      yargs: 17.6.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@algolia/autocomplete-core@1.8.2:
     resolution: {integrity: sha512-mTeshsyFhAqw/ebqNsQpMtbnjr+qVOSKXArEj4K0d7sqc8It1XD0gkASwecm9mF/jlOQ4Z9RNg1HbdA8JPdRwQ==}
     dependencies:
@@ -1029,6 +1072,11 @@ packages:
     engines: {node: '>=12.13.0'}
     dev: true
 
+  /@arr/every@1.0.1:
+    resolution: {integrity: sha512-UQFQ6SgyJ6LX42W8rHCs8KVc0JS0tzVL9ct4XYedJukskYVWTo49tNiMEK9C2HTyarbNiT/RVIRSY82vH+6sTg==}
+    engines: {node: '>=4'}
+    dev: true
+
   /@babel/code-frame@7.18.6:
     resolution: {integrity: sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==}
     engines: {node: '>=6.9.0'}
@@ -3863,6 +3911,10 @@ packages:
       tslib: 2.5.0
     dev: true
 
+  /@polka/url@0.5.0:
+    resolution: {integrity: sha512-oZLYFEAzUKyi3SKnXvj32ZCEGH6RDnao7COuCVhDydMS9NrCSVXhM79VaKyP5+Zc33m0QXEd2DN3UkU7OsHcfw==}
+    dev: true
+
   /@polka/url@1.0.0-next.21:
     resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==}
     dev: true
@@ -6250,6 +6302,10 @@ packages:
       tweetnacl: 0.14.5
     dev: true
 
+  /big.js@6.2.1:
+    resolution: {integrity: sha512-bCtHMwL9LeDIozFn+oNhhFoq+yQ3BNdnsLSASUxLciOb1vgvpHsIO1dsENiGMgbb4SkP5TrzWzRiLddn8ahVOQ==}
+    dev: true
+
   /binary-extensions@2.2.0:
     resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
     engines: {node: '>=8'}
@@ -6524,6 +6580,10 @@ packages:
     resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
     dev: true
 
+  /centra@2.6.0:
+    resolution: {integrity: sha512-dgh+YleemrT8u85QL11Z6tYhegAs3MMxsaWAq/oXeAmYJ7VxL3SI9TZtnfaEvNDMAPolj25FXIb3S+HCI4wQaQ==}
+    dev: true
+
   /chai@4.3.7:
     resolution: {integrity: sha512-HLnAzZ2iupm25PlN0xFreAlBA5zaBSv3og0DdeGA4Ar6h6rJ3A0rolRUKJhSF2V10GZKDgWF/VmAEsNWjCRB+A==}
     engines: {node: '>=4'}
@@ -7302,6 +7362,10 @@ packages:
   /csstype@3.1.2:
     resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==}
 
+  /cuint@0.2.2:
+    resolution: {integrity: sha512-d4ZVpCW31eWwCMe1YT3ur7mUDnTXbgwyzaL320DrcRT45rfjYxkt5QWLrmOJ+/UEAI2+fQgKe/fCjR8l4TpRgw==}
+    dev: true
+
   /cypress-image-snapshot@4.0.1(cypress@12.10.0)(jest@29.5.0):
     resolution: {integrity: sha512-PBpnhX/XItlx3/DAk5ozsXQHUi72exybBNH5Mpqj1DVmjq+S5Jd9WE5CRa4q5q0zuMZb2V2VpXHth6MjFpgj9Q==}
     engines: {node: '>=8'}
@@ -8174,6 +8238,11 @@ packages:
       is-symbol: 1.0.4
     dev: true
 
+  /es2015-i18n-tag@1.6.1:
+    resolution: {integrity: sha512-MYoh9p+JTkgnzBh0MEBON6xUyzdmwT6wzsmmFJvZujGSXiI2kM+3XvFl6+AcIO2eeL6VWgtX9szSiDTMwDxyYA==}
+    engines: {node: '>= 4.0.0'}
+    dev: true
+
   /es6-error@4.1.1:
     resolution: {integrity: sha512-Um/+FxMr9CISWh0bi5Zv0iOD+4cFh5qLeks1qhAopKVAJw3drgKbKySikp7wGhDL0HPeaja0P5ULZrxLkniUVg==}
     dev: true
@@ -8834,6 +8903,10 @@ packages:
     engines: {node: '>= 4.9.1'}
     dev: true
 
+  /fastestsmallesttextencoderdecoder@1.0.22:
+    resolution: {integrity: sha512-Pb8d48e+oIuY4MaM64Cd7OW1gt4nxCHs7/ddPPZ/Ic3sg8yVGM7O9wDvZ7us6ScaUupzM+pfBolwtYhN1IxBIw==}
+    dev: true
+
   /fastify-plugin@3.0.1:
     resolution: {integrity: sha512-qKcDXmuZadJqdTm6vlCqioEbyewF60b/0LOFCcYN1B6BIZGlYJumWWOYs70SFYLDAH4YqdE1cxH/RKMG7rFxgA==}
     dev: true
@@ -8891,6 +8964,14 @@ packages:
       pend: 1.2.0
     dev: true
 
+  /ferrum@1.9.4:
+    resolution: {integrity: sha512-ooNerLoIht/dK4CQJux93z/hnt9JysrXniJCI3r6YRgmHeXC57EJ8XaTCT1Gm8LfhIAeWxyJA0O7d/W3pqDYRg==}
+    dependencies:
+      fastestsmallesttextencoderdecoder: 1.0.22
+      lodash.isplainobject: 4.0.6
+      xxhashjs: 0.2.2
+    dev: true
+
   /fetch-blob@3.2.0:
     resolution: {integrity: sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==}
     engines: {node: ^12.20 || >= 14.13}
@@ -9113,6 +9194,15 @@ packages:
     resolution: {integrity: sha512-cHEpEQHUg0f8XdtZCc2ZAhrHzKzT0MrFUTcvx+hfxYu7rGMDc5SKoXFh+n4YigxsHXRzc6OrCshdR1bWH6HHyg==}
     dev: true
 
+  /fs-extra@11.0.0:
+    resolution: {integrity: sha512-4YxRvMi4P5C3WQTvdRfrv5UVqbISpqjORFQAW5QPiKAauaxNCwrEdIi6pG3tDFhKKpMen+enEhHIzB/tvIO+/w==}
+    engines: {node: '>=14.14'}
+    dependencies:
+      graceful-fs: 4.2.10
+      jsonfile: 6.1.0
+      universalify: 2.0.0
+    dev: true
+
   /fs-extra@11.1.1:
     resolution: {integrity: sha512-MGIE4HOvQCeUCzmlHs0vXpih4ysz4wg9qiSAu6cd42lVwPbTM1TjV7RusoyQqMmk/95gdQZX72u+YW+c3eEpFQ==}
     engines: {node: '>=14.14'}
@@ -9269,6 +9359,10 @@ packages:
       through2: 4.0.2
     dev: true
 
+  /github-slugger@2.0.0:
+    resolution: {integrity: sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw==}
+    dev: true
+
   /glob-parent@5.1.2:
     resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
     engines: {node: '>= 6'}
@@ -11376,6 +11470,13 @@ packages:
     engines: {node: '>= 12'}
     hasBin: true
 
+  /matchit@1.1.0:
+    resolution: {integrity: sha512-+nGYoOlfHmxe5BW5tE0EMJppXEwdSf8uBA1GTZC7Q77kbT35+VKLYJMzVNWCHSsga1ps1tPYFtFyvxvKzWVmMA==}
+    engines: {node: '>=6'}
+    dependencies:
+      '@arr/every': 1.0.1
+    dev: true
+
   /md5-hex@3.0.1:
     resolution: {integrity: sha512-BUiRtTtV39LIJwinWBjqVsU9xhdnz7/i889V859IBFpuqGAj6LuOvHv5XLbgZ2R7ptJoJaEcxkv88/h25T7Ciw==}
     engines: {node: '>=8'}
@@ -11383,6 +11484,12 @@ packages:
       blueimp-md5: 2.19.0
     dev: true
 
+  /mdast-builder@1.1.1:
+    resolution: {integrity: sha512-a3KBk/LmYD6wKsWi8WJrGU/rXR4yuF4Men0JO0z6dSZCm5FrXXWTRDjqK0vGSqa+1M6p9edeuypZAZAzSehTUw==}
+    dependencies:
+      '@types/unist': 2.0.6
+    dev: true
+
   /mdast-util-find-and-replace@2.2.1:
     resolution: {integrity: sha512-SobxkQXFAdd4b5WmEakmkVoh18icjQRxGy5OWTCzgsLRm1Fu/KCtwD1HIQSsmq5ZRjVH0Ehwg6/Fn3xIUk+nKw==}
     dependencies:
@@ -11491,7 +11598,7 @@ packages:
       longest-streak: 3.0.1
       mdast-util-to-string: 3.1.0
       micromark-util-decode-string: 1.0.2
-      unist-util-visit: 4.1.1
+      unist-util-visit: 4.1.2
       zwitch: 2.0.2
     dev: true
 
@@ -12568,6 +12675,13 @@ packages:
     resolution: {integrity: sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==}
     dev: true
 
+  /phin@3.7.0:
+    resolution: {integrity: sha512-DqnVNrpYhKGBZppNKprD+UJylMeEKOZxHgPB+ZP6mGzf3uA2uox4Ep9tUm+rUc8WLIdHT3HcAE4X8fhwQA9JKg==}
+    engines: {node: '>= 8'}
+    dependencies:
+      centra: 2.6.0
+    dev: true
+
   /picocolors@1.0.0:
     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
 
@@ -12696,6 +12810,13 @@ packages:
     hasBin: true
     dev: true
 
+  /polka@0.5.2:
+    resolution: {integrity: sha512-FVg3vDmCqP80tOrs+OeNlgXYmFppTXdjD5E7I4ET1NjvtNmQrb1/mJibybKkb/d4NA7YWAr1ojxuhpL3FHqdlw==}
+    dependencies:
+      '@polka/url': 0.5.0
+      trouter: 2.0.1
+    dev: true
+
   /postcss-import@15.1.0(postcss@8.4.24):
     resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
     engines: {node: '>=14.0.0'}
@@ -14537,6 +14658,13 @@ packages:
     resolution: {integrity: sha512-AqTiAOLcj85xS7vQ8QkAV41hPDIJ71XJB4RCUrzo/1GM2CQwhkJGaf9Hgr7BOugMRpgGUrqRg/DrBDl4H40+8g==}
     dev: true
 
+  /trouter@2.0.1:
+    resolution: {integrity: sha512-kr8SKKw94OI+xTGOkfsvwZQ8mWoikZDd2n8XZHjJVZUARZT+4/VV6cacRS6CLsH9bNm+HFIPU1Zx4CnNnb4qlQ==}
+    engines: {node: '>=6'}
+    dependencies:
+      matchit: 1.1.0
+    dev: true
+
   /ts-dedent@2.2.0:
     resolution: {integrity: sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==}
     engines: {node: '>=6.10'}
@@ -14823,6 +14951,12 @@ packages:
     resolution: {integrity: sha512-IG32jcKJlhARCYT2LsYPJWdoXYkzz3ESAdl1aa2hn9Auh+cgUmU6wgkII4yCc/1GgeWibRdELdCZh/p3QKQ1dQ==}
     dev: true
 
+  /unist-util-inspect@7.0.1:
+    resolution: {integrity: sha512-gEPeSrsYXus8012VJ00p9uZC8D0iogtLLiHlBgvS61hU22KNKduQhMKezJm83viHlLf3TYS2y9SDEFglWPDMKw==}
+    dependencies:
+      '@types/unist': 2.0.6
+    dev: true
+
   /unist-util-is@5.1.1:
     resolution: {integrity: sha512-F5CZ68eYzuSvJjGhCLPL3cYx45IxkqXSetCcRgUXtbcm50X2L9oOWQlfUfDdAf+6Pd27YDblBfdtmsThXmwpbQ==}
     dev: true
@@ -14845,8 +14979,8 @@ packages:
       unist-util-is: 5.1.1
     dev: true
 
-  /unist-util-visit@4.1.1:
-    resolution: {integrity: sha512-n9KN3WV9k4h1DxYR1LoajgN93wpEi/7ZplVe02IoB4gH5ctI1AaF2670BLHQYbwj+pY83gFtyeySFiyMHJklrg==}
+  /unist-util-visit@4.1.2:
+    resolution: {integrity: sha512-MSd8OUGISqHdVvfY9TPhyK2VdUrPgxkUtWSuMHF6XAAFuL4LokseigBnZtPnJMu+FbynTkFNnFlyjxpVKujMRg==}
     dependencies:
       '@types/unist': 2.0.6
       unist-util-is: 5.1.1
@@ -16165,6 +16299,12 @@ packages:
     resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==}
     dev: true
 
+  /xxhashjs@0.2.2:
+    resolution: {integrity: sha512-AkTuIuVTET12tpsVIQo+ZU6f/qDmKuRUcjaqR+OIvm+aCBsZ95i7UVY5WJ9TMsSaZ0DA2WxoZ4acu0sPH+OKAw==}
+    dependencies:
+      cuint: 0.2.2
+    dev: true
+
   /y18n@4.0.3:
     resolution: {integrity: sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==}
     dev: true

From 7c3a73d4a860c7ded69e465985e9ac9e4a55d6df Mon Sep 17 00:00:00 2001
From: Alois Klink <alois@aloisklink.com>
Date: Mon, 5 Dec 2022 04:35:05 +0000
Subject: [PATCH 063/281] build(types): add script to generate Config types

Add script `packages/mermaid/scripts/create-types-from-json-schema.mts`
to automatically generate the TypeScript definition for `MermaidConfig`
from the `MermaidConfig` JSON Schema at
`packages/mermaid/src/schemas/config.schema.yaml`.

To do this, we are using this library
[`json-schema-to-typescript`][1], which is also used by Webpack to
generate their types from their JSON Schema.

In order to make sure that this isn't a breaking change, the script
makes all fields **optional**, as that is what the original typescript
file has.

Additionally, I've put in some custom logic into the script, so that
the exact same order is used for the TypeScript file, to make the
`git diff` easier to review. In the future, we can remove this custom
logic, once we no longer need to worry about `git merge` conflicts.

[1]: https://github.com/bcherny/json-schema-to-typescript
---
 .eslintrc.cjs                                 |   4 +
 .prettierignore                               |   2 +
 packages/mermaid/.lintstagedrc.mjs            |   1 +
 packages/mermaid/package.json                 |   4 +
 .../scripts/create-types-from-json-schema.mts | 252 ++++++++++++++++++
 pnpm-lock.yaml                                | 182 ++++++++++++-
 6 files changed, 441 insertions(+), 4 deletions(-)
 create mode 100644 packages/mermaid/scripts/create-types-from-json-schema.mts

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 342d15d9f..cae97e586 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -38,6 +38,10 @@ module.exports = {
     'lodash',
     'unicorn',
   ],
+  ignorePatterns: [
+    // this file is automatically generated by `pnpm run --filter mermaid types:build-config`
+    'packages/mermaid/src/config.type.ts',
+  ],
   rules: {
     curly: 'error',
     'no-console': 'error',
diff --git a/.prettierignore b/.prettierignore
index b50a94e84..6f2d55369 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -7,3 +7,5 @@ pnpm-lock.yaml
 stats
 packages/mermaid/src/docs/.vitepress/components.d.ts
 .nyc_output
+# Autogenerated by `pnpm run --filter mermaid types:build-config`
+packages/mermaid/src/config.type.ts
diff --git a/packages/mermaid/.lintstagedrc.mjs b/packages/mermaid/.lintstagedrc.mjs
index fe79ad254..955000e20 100644
--- a/packages/mermaid/.lintstagedrc.mjs
+++ b/packages/mermaid/.lintstagedrc.mjs
@@ -4,4 +4,5 @@ export default {
   'src/docs/**': ['pnpm --filter mermaid run docs:build --git'],
   'src/docs.mts': ['pnpm --filter mermaid run docs:build --git'],
   'src/(defaultConfig|config|mermaidAPI).ts': ['pnpm --filter mermaid run docs:build --git'],
+  'src/schemas/config.schema.yaml': ['pnpm --filter mermaid run types:build-config --git'],
 };
diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index cd193f8a5..66bac897f 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -32,6 +32,8 @@
     "docs:dev": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./src/vitepress dev\" \"ts-node-esm src/docs.mts --watch --vitepress\"",
     "docs:serve": "pnpm docs:build:vitepress && vitepress serve src/vitepress",
     "docs:spellcheck": "cspell --config ../../cSpell.json \"src/docs/**/*.md\"",
+    "types:build-config": "ts-node-esm --transpileOnly scripts/create-types-from-json-schema.mts",
+    "types:verify-config": "ts-node-esm scripts/create-types-from-json-schema.mts --verify",
     "release": "pnpm build",
     "prepublishOnly": "cpy '../../README.*' ./ --cwd=. && pnpm -w run build"
   },
@@ -88,6 +90,7 @@
     "@types/uuid": "^9.0.1",
     "@typescript-eslint/eslint-plugin": "^5.59.0",
     "@typescript-eslint/parser": "^5.59.0",
+    "ajv": "^8.11.2",
     "chokidar": "^3.5.3",
     "concurrently": "^8.0.1",
     "coveralls": "^3.1.1",
@@ -98,6 +101,7 @@
     "jison": "^0.4.18",
     "js-base64": "^3.7.5",
     "jsdom": "^22.0.0",
+    "json-schema-to-typescript": "^11.0.3",
     "micromatch": "^4.0.5",
     "path-browserify": "^1.0.1",
     "prettier": "^2.8.8",
diff --git a/packages/mermaid/scripts/create-types-from-json-schema.mts b/packages/mermaid/scripts/create-types-from-json-schema.mts
new file mode 100644
index 000000000..e81ea70ff
--- /dev/null
+++ b/packages/mermaid/scripts/create-types-from-json-schema.mts
@@ -0,0 +1,252 @@
+/**
+ * Script to load Mermaid Config JSON Schema from YAML and to:
+ *
+ * - Validate JSON Schema
+ *
+ * Then to generate:
+ *
+ * - config.types.ts TypeScript file
+ */
+
+/* eslint-disable no-console */
+
+import { readFile, writeFile } from 'node:fs/promises';
+import { join } from 'node:path';
+import assert from 'node:assert';
+import { execFile } from 'node:child_process';
+import { promisify } from 'node:util';
+
+import { load, JSON_SCHEMA } from 'js-yaml';
+import { compile, type JSONSchema } from 'json-schema-to-typescript';
+
+import _Ajv2019, { type JSONSchemaType } from 'ajv/dist/2019.js';
+
+// Workaround for wrong AJV types, see
+// https://github.com/ajv-validator/ajv/issues/2132#issuecomment-1290409907
+const Ajv2019 = _Ajv2019 as unknown as typeof _Ajv2019.default;
+
+// !!! -- The config.type.js file is created by this script -- !!!
+import type { MermaidConfig } from '../src/config.type.js';
+
+// options for running the main command
+const verifyOnly = process.argv.includes('--verify');
+/** If `true`, automatically `git add` any changes (i.e. during `pnpm run pre-commit`)*/
+const git = process.argv.includes('--git');
+
+/**
+ * All of the keys in the mermaid config that have a mermaid diagram config.
+ */
+const MERMAID_CONFIG_DIAGRAM_KEYS = [
+  'flowchart',
+  'sequence',
+  'gantt',
+  'journey',
+  'class',
+  'state',
+  'er',
+  'pie',
+  'quadrantChart',
+  'requirement',
+  'mindmap',
+  'timeline',
+  'gitGraph',
+  'c4',
+  'sankey',
+];
+
+/**
+ * Loads the MermaidConfig JSON schema YAML file.
+ *
+ * @returns The loaded JSON Schema, use {@link validateSchema} to confirm it is a valid JSON Schema.
+ */
+async function loadJsonSchemaFromYaml() {
+  const configSchemaFile = join('src', 'schemas', 'config.schema.yaml');
+  const contentsYaml = await readFile(configSchemaFile, { encoding: 'utf8' });
+  const jsonSchema = load(contentsYaml, {
+    filename: configSchemaFile,
+    // only allow JSON types in our YAML doc (will probably be default in YAML 1.3)
+    // e.g. `true` will be parsed a boolean `true`, `True` will be parsed as string `"True"`.
+    schema: JSON_SCHEMA,
+  });
+  return jsonSchema;
+}
+
+/**
+ * Asserts that the given value is a valid JSON Schema object.
+ *
+ * @param jsonSchema - The value to validate as JSON Schema 2019-09
+ * @throws {Error} if the given object is invalid.
+ */
+function validateSchema(jsonSchema: unknown): asserts jsonSchema is JSONSchemaType<MermaidConfig> {
+  if (typeof jsonSchema !== 'object') {
+    throw new Error(`jsonSchema param is not an object: actual type is ${typeof jsonSchema}`);
+  }
+  if (jsonSchema === null) {
+    throw new Error('jsonSchema param must not be null');
+  }
+  const ajv = new Ajv2019({
+    allErrors: true,
+    allowUnionTypes: true,
+    strict: true,
+  });
+
+  ajv.addKeyword({
+    keyword: 'meta:enum', // used by jsonschema2md (in docs.mts script)
+    errors: false,
+  });
+  ajv.addKeyword({
+    keyword: 'tsType', // used by json-schema-to-typescript
+    errors: false,
+  });
+
+  ajv.compile(jsonSchema);
+}
+
+/**
+ * Generate a typescript definition from a JSON Schema using json-schema-to-typescript.
+ *
+ * @param mermaidConfigSchema - The input JSON Schema.
+ */
+async function generateTypescript(mermaidConfigSchema: JSONSchemaType<MermaidConfig>) {
+  /**
+   * Replace all usages of `allOf` with `extends`.
+   *
+   * `extends` is only valid JSON Schema in very old versions of JSON Schema.
+   * However, json-schema-to-typescript creates much nicer types when using
+   * `extends`, so we should use them instead when possible.
+   *
+   * @param schema - The input schema.
+   * @returns The schema with `allOf` replaced with `extends`.
+   */
+  function replaceAllOfWithExtends(schema: JSONSchemaType<Record<string, any>>) {
+    if (schema['allOf']) {
+      const { allOf, ...schemaWithoutAllOf } = schema;
+      return {
+        ...schemaWithoutAllOf,
+        extends: allOf,
+      };
+    }
+    return schema;
+  }
+
+  /**
+   * For backwards compatibility with older Mermaid Typescript defs,
+   * we need to make all value optional instead of required.
+   *
+   * This is because the `MermaidConfig` type is used as an input, and everything is optional,
+   * since all the required values have default values.s
+   *
+   * In the future, we should make make the input to Mermaid `Partial<MermaidConfig>`.
+   *
+   * @todo TODO: Remove this function when Mermaid releases a new breaking change.
+   * @param schema - The input schema.
+   * @returns The schema with all required values removed.
+   */
+  function removeRequired(schema: JSONSchemaType<Record<string, any>>) {
+    return { ...schema, required: [] };
+  }
+
+  /**
+   * This is a temporary hack to control the order the types are generated in.
+   *
+   * By default, json-schema-to-typescript outputs the $defs in the order they
+   * are used, then any unused schemas at the end.
+   *
+   * **The only purpose of this function is to make the `git diff` simpler**
+   * **We should remove this later to simplify the code**
+   *
+   * @todo TODO: Remove this function in a future PR.
+   * @param schema - The input schema.
+   * @returns The schema with all `$ref`s removed.
+   */
+  function unrefSubschemas(schema: JSONSchemaType<Record<string, any>>) {
+    return {
+      ...schema,
+      properties: Object.fromEntries(
+        Object.entries(schema.properties).map(([key, propertySchema]) => {
+          if (MERMAID_CONFIG_DIAGRAM_KEYS.includes(key)) {
+            const { $ref, ...propertySchemaWithoutRef } = propertySchema as JSONSchemaType<unknown>;
+            if ($ref === undefined) {
+              throw Error(
+                `subSchema ${key} is in MERMAID_CONFIG_DIAGRAM_KEYS but does not have a $ref field`
+              );
+            }
+            const [
+              _root, // eslint-disable-line @typescript-eslint/no-unused-vars
+              _defs, // eslint-disable-line @typescript-eslint/no-unused-vars
+              defName,
+            ] = $ref.split('/');
+            return [
+              key,
+              {
+                ...propertySchemaWithoutRef,
+                tsType: defName,
+              },
+            ];
+          }
+          return [key, propertySchema];
+        })
+      ),
+    };
+  }
+
+  assert.ok(mermaidConfigSchema.$defs);
+  const modifiedSchema = {
+    ...unrefSubschemas(removeRequired(mermaidConfigSchema)),
+
+    $defs: Object.fromEntries(
+      Object.entries(mermaidConfigSchema.$defs).map(([key, subSchema]) => {
+        return [key, removeRequired(replaceAllOfWithExtends(subSchema))];
+      })
+    ),
+  };
+
+  const typescriptFile = await compile(
+    modifiedSchema as JSONSchema, // json-schema-to-typescript only allows JSON Schema 4 as input type
+    'MermaidConfig',
+    {
+      additionalProperties: false, // in JSON Schema 2019-09, these are called `unevaluatedProperties`
+      unreachableDefinitions: true, // definition for FontConfig is unreachable
+    }
+  );
+
+  // TODO, should we somehow use the functions from `docs.mts` instead?
+  if (verifyOnly) {
+    const originalFile = await readFile('./src/config.type.ts', { encoding: 'utf-8' });
+    if (typescriptFile !== originalFile) {
+      console.error('❌ Error: ./src/config.type.ts will be changed.');
+      console.error("Please run 'pnpm run --filter mermaid types:build-config' to update this");
+      process.exitCode = 1;
+    } else {
+      console.log('✅ ./src/config.type.ts will be unchanged');
+    }
+  } else {
+    console.log('Writing typescript file to ./src/config.type.ts');
+    await writeFile('./src/config.type.ts', typescriptFile, { encoding: 'utf8' });
+    if (git) {
+      console.log('📧 Git: Adding ./src/config.type.ts changed');
+      await promisify(execFile)('git', ['add', './src/config.type.ts']);
+    }
+  }
+}
+
+/** Main function */
+async function main() {
+  if (verifyOnly) {
+    console.log(
+      'Verifying that ./src/config.type.ts is in sync with src/schemas/config.schema.yaml'
+    );
+  }
+
+  const configJsonSchema = await loadJsonSchemaFromYaml();
+
+  validateSchema(configJsonSchema);
+
+  // Generate types from JSON Schema
+  await generateTypescript(configJsonSchema);
+}
+
+main().catch((error) => {
+  console.error(error);
+  process.exitCode = 1;
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fad43866e..303985a31 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -297,6 +297,9 @@ importers:
       '@typescript-eslint/parser':
         specifier: ^5.59.0
         version: 5.59.0(eslint@8.39.0)(typescript@5.0.4)
+      ajv:
+        specifier: ^8.11.2
+        version: 8.12.0
       chokidar:
         specifier: ^3.5.3
         version: 3.5.3
@@ -327,6 +330,9 @@ importers:
       jsdom:
         specifier: ^22.0.0
         version: 22.0.0
+      json-schema-to-typescript:
+        specifier: ^11.0.3
+        version: 11.0.3
       micromatch:
         specifier: ^4.0.5
         version: 4.0.5
@@ -2258,6 +2264,15 @@ packages:
       '@babel/helper-validator-identifier': 7.19.1
       to-fast-properties: 2.0.0
 
+  /@bcherny/json-schema-ref-parser@9.0.9:
+    resolution: {integrity: sha512-vmEmnJCfpkLdas++9OYg6riIezTYqTHpqUTODJzHLzs5UnXujbOJW9VwcVCnyo1mVRt32FRr23iXBx/sX8YbeQ==}
+    dependencies:
+      '@jsdevtools/ono': 7.1.3
+      '@types/json-schema': 7.0.11
+      call-me-maybe: 1.0.2
+      js-yaml: 4.1.0
+    dev: true
+
   /@bcoe/v8-coverage@0.2.3:
     resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==}
     dev: true
@@ -3857,6 +3872,10 @@ packages:
       '@jridgewell/resolve-uri': 3.1.0
       '@jridgewell/sourcemap-codec': 1.4.14
 
+  /@jsdevtools/ono@7.1.3:
+    resolution: {integrity: sha512-4JQNk+3mVzK3xh2rqd6RB4J46qUR19azEHBneZyTZM+c456qOrbbM/5xcR8huNCCcbVt7+UmizG6GuUvPvKUYg==}
+    dev: true
+
   /@leichtgewicht/ip-codec@2.0.4:
     resolution: {integrity: sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==}
     dev: true
@@ -4437,6 +4456,13 @@ packages:
     resolution: {integrity: sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==}
     dev: true
 
+  /@types/glob@7.2.0:
+    resolution: {integrity: sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA==}
+    dependencies:
+      '@types/minimatch': 5.1.2
+      '@types/node': 18.16.0
+    dev: true
+
   /@types/graceful-fs@4.1.5:
     resolution: {integrity: sha512-anKkLmZZ+xm4p8JWBf4hElkM4XR+EZeA2M9BAkkTldmcyDY4mbdIJnRghDJH3Ov5ooY7/UAoENtmdMSkaAd7Cw==}
     dependencies:
@@ -4537,6 +4563,10 @@ packages:
     resolution: {integrity: sha512-Y4XFY5VJAuw0FgAqPNd6NNoV44jbq9Bz2L7Rh/J6jLTiHBSBJa9fxqQIvkIld4GsoDOcCbvzOUAbLPsSKKg+uA==}
     dev: true
 
+  /@types/minimatch@5.1.2:
+    resolution: {integrity: sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA==}
+    dev: true
+
   /@types/minimist@1.2.2:
     resolution: {integrity: sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==}
     dev: true
@@ -6004,7 +6034,6 @@ packages:
 
   /any-promise@1.3.0:
     resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
-    dev: false
 
   /anymatch@3.1.2:
     resolution: {integrity: sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==}
@@ -6525,6 +6554,10 @@ packages:
       get-intrinsic: 1.2.0
     dev: true
 
+  /call-me-maybe@1.0.2:
+    resolution: {integrity: sha512-HpX65o1Hnr9HH25ojC1YGs7HCQLq0GCOibSaWER0eNpgJ/Z1MZv2mTc7+xh6WOPxbRVcmgbv4hGU+uSQ/2xFZQ==}
+    dev: true
+
   /callsites@3.1.0:
     resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
     engines: {node: '>=6'}
@@ -6752,6 +6785,17 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
+  /cli-color@2.0.3:
+    resolution: {integrity: sha512-OkoZnxyC4ERN3zLzZaY9Emb7f/MhBOIpePv0Ycok0fJYT+Ouo00UBEIwsVsr0yoow++n5YWlSUgST9GKhNHiRQ==}
+    engines: {node: '>=0.10'}
+    dependencies:
+      d: 1.0.1
+      es5-ext: 0.10.62
+      es6-iterator: 2.0.3
+      memoizee: 0.4.15
+      timers-ext: 0.1.7
+    dev: true
+
   /cli-cursor@3.1.0:
     resolution: {integrity: sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==}
     engines: {node: '>=8'}
@@ -7730,6 +7774,13 @@ packages:
       d3-zoom: 3.0.0
     dev: false
 
+  /d@1.0.1:
+    resolution: {integrity: sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==}
+    dependencies:
+      es5-ext: 0.10.62
+      type: 1.2.0
+    dev: true
+
   /dagre-d3-es@7.0.10:
     resolution: {integrity: sha512-qTCQmEhcynucuaZgY5/+ti3X/rnszKZhEQH/ZdWdtP1tA/y3VoHJzcVrO9pjjJCNpigfscAtoUB5ONcd2wNn0A==}
     dependencies:
@@ -8243,10 +8294,44 @@ packages:
     engines: {node: '>= 4.0.0'}
     dev: true
 
+  /es5-ext@0.10.62:
+    resolution: {integrity: sha512-BHLqn0klhEpnOKSrzn/Xsz2UIW8j+cGmo9JLzr8BiUapV8hPL9+FliFqjwr9ngW7jWdnxv6eO+/LqyhJVqgrjA==}
+    engines: {node: '>=0.10'}
+    requiresBuild: true
+    dependencies:
+      es6-iterator: 2.0.3
+      es6-symbol: 3.1.3
+      next-tick: 1.1.0
+    dev: true
+
   /es6-error@4.1.1:
     resolution: {integrity: sha512-Um/+FxMr9CISWh0bi5Zv0iOD+4cFh5qLeks1qhAopKVAJw3drgKbKySikp7wGhDL0HPeaja0P5ULZrxLkniUVg==}
     dev: true
 
+  /es6-iterator@2.0.3:
+    resolution: {integrity: sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==}
+    dependencies:
+      d: 1.0.1
+      es5-ext: 0.10.62
+      es6-symbol: 3.1.3
+    dev: true
+
+  /es6-symbol@3.1.3:
+    resolution: {integrity: sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==}
+    dependencies:
+      d: 1.0.1
+      ext: 1.7.0
+    dev: true
+
+  /es6-weak-map@2.0.3:
+    resolution: {integrity: sha512-p5um32HOTO1kP+w7PRnB+5lQ43Z6muuMuIMffvDN8ZB4GcnjLBV6zGStpbASIMk4DCAvEaamhe2zhyCb/QXXsA==}
+    dependencies:
+      d: 1.0.1
+      es5-ext: 0.10.62
+      es6-iterator: 2.0.3
+      es6-symbol: 3.1.3
+    dev: true
+
   /esbuild@0.17.18:
     resolution: {integrity: sha512-z1lix43jBs6UKjcZVKOw2xx69ffE2aG0PygLL5qJ9OS/gy0Ewd1gW/PUQIOIQGXBHWNywSc0floSKoMFF8aK2w==}
     engines: {node: '>=12'}
@@ -8671,6 +8756,13 @@ packages:
     engines: {node: '>= 0.6'}
     dev: true
 
+  /event-emitter@0.3.5:
+    resolution: {integrity: sha512-D9rRn9y7kLPnJ+hMq7S/nhvoKwwvVJahBi2BPmx3bvbsEdK3W9ii8cBSGjP+72/LnM4n6fo3+dkCX5FeTQruXA==}
+    dependencies:
+      d: 1.0.1
+      es5-ext: 0.10.62
+    dev: true
+
   /event-stream@3.3.4:
     resolution: {integrity: sha512-QHpkERcGsR0T7Qm3HNJSyXKEEj8AHNxkY3PK8TS2KJvQ7NiSHe3DDpwVKKtoYprL/AreyzFBeIkBIWChAqn60g==}
     dependencies:
@@ -8819,6 +8911,12 @@ packages:
       - supports-color
     dev: true
 
+  /ext@1.7.0:
+    resolution: {integrity: sha512-6hxeJYaL110a9b5TEJSj0gojyHQAmA2ch5Os+ySCiA1QGdS697XWY1pzsrSjqA9LDEEgdB/KypIlR59RcLuHYw==}
+    dependencies:
+      type: 2.7.2
+    dev: true
+
   /extend@3.0.2:
     resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
     dev: true
@@ -9375,6 +9473,16 @@ packages:
     dependencies:
       is-glob: 4.0.3
 
+  /glob-promise@4.2.2(glob@7.2.3):
+    resolution: {integrity: sha512-xcUzJ8NWN5bktoTIX7eOclO1Npxd/dyVqUJxlLIDasT4C7KZyqlPIwkdJ0Ypiy3p2ZKahTjK4M9uC3sNSfNMzw==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      glob: ^7.1.6
+    dependencies:
+      '@types/glob': 7.2.0
+      glob: 7.2.3
+    dev: true
+
   /glob-to-regexp@0.4.1:
     resolution: {integrity: sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==}
     dev: true
@@ -10164,6 +10272,10 @@ packages:
     resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
     dev: true
 
+  /is-promise@2.2.2:
+    resolution: {integrity: sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==}
+    dev: true
+
   /is-regex@1.1.4:
     resolution: {integrity: sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==}
     engines: {node: '>= 0.4'}
@@ -10993,6 +11105,27 @@ packages:
     resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
     dev: true
 
+  /json-schema-to-typescript@11.0.3:
+    resolution: {integrity: sha512-EaEE9Y4VZ8b9jW5zce5a9L3+p4C9AqgIRHbNVDJahfMnoKzcd4sDb98BLxLdQhJEuRAXyKLg4H66NKm80W8ilg==}
+    engines: {node: '>=12.0.0'}
+    hasBin: true
+    dependencies:
+      '@bcherny/json-schema-ref-parser': 9.0.9
+      '@types/json-schema': 7.0.11
+      '@types/lodash': 4.14.194
+      '@types/prettier': 2.7.2
+      cli-color: 2.0.3
+      get-stdin: 8.0.0
+      glob: 7.2.3
+      glob-promise: 4.2.2(glob@7.2.3)
+      is-glob: 4.0.3
+      lodash: 4.17.21
+      minimist: 1.2.8
+      mkdirp: 1.0.4
+      mz: 2.7.0
+      prettier: 2.8.8
+    dev: true
+
   /json-schema-traverse@0.4.1:
     resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
     dev: true
@@ -11401,6 +11534,12 @@ packages:
     engines: {node: 14 || >=16.14}
     dev: true
 
+  /lru-queue@0.1.0:
+    resolution: {integrity: sha512-BpdYkt9EvGl8OfWHDQPISVpcl5xZthb+XPsbELj5AQXxIC8IriDZIQYjBJPEm5rS420sjZ0TLEzRcq5KdBhYrQ==}
+    dependencies:
+      es5-ext: 0.10.62
+    dev: true
+
   /lunr@2.3.9:
     resolution: {integrity: sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow==}
     dev: true
@@ -11629,6 +11768,19 @@ packages:
       fs-monkey: 1.0.3
     dev: true
 
+  /memoizee@0.4.15:
+    resolution: {integrity: sha512-UBWmJpLZd5STPm7PMUlOw/TSy972M+z8gcyQ5veOnSDRREz/0bmpyTfKt3/51DhEBqCZQn1udM/5flcSPYhkdQ==}
+    dependencies:
+      d: 1.0.1
+      es5-ext: 0.10.62
+      es6-weak-map: 2.0.3
+      event-emitter: 0.3.5
+      is-promise: 2.2.2
+      lru-queue: 0.1.0
+      next-tick: 1.1.0
+      timers-ext: 0.1.7
+    dev: true
+
   /meow@10.1.5:
     resolution: {integrity: sha512-/d+PQ4GKmGvM9Bee/DPa8z3mXs/pkvJE2KEThngVNOqtmljC6K7NMPxtc2JeZYTmpWb9k/TmxjeL18ez3h7vCw==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -12043,6 +12195,12 @@ packages:
       minimist: 1.2.8
     dev: true
 
+  /mkdirp@1.0.4:
+    resolution: {integrity: sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==}
+    engines: {node: '>=10'}
+    hasBin: true
+    dev: true
+
   /mlly@1.2.0:
     resolution: {integrity: sha512-+c7A3CV0KGdKcylsI6khWyts/CYrGTrRVo4R/I7u/cUsy0Conxa6LUhiEzVKIw14lc2L5aiO4+SeVe4TeGRKww==}
     dependencies:
@@ -12086,7 +12244,6 @@ packages:
       any-promise: 1.3.0
       object-assign: 4.1.1
       thenify-all: 1.6.0
-    dev: false
 
   /nanoid@3.3.6:
     resolution: {integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==}
@@ -12114,6 +12271,10 @@ packages:
     resolution: {integrity: sha512-9iN1ka/9zmX1ZvLV9ewJYEk9h7RyRRtqdK0woXcqohu8EWIerfPUjYJPg0ULy0UqP7cslmdGc8xKDJcojlKiaw==}
     dev: true
 
+  /next-tick@1.1.0:
+    resolution: {integrity: sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==}
+    dev: true
+
   /nice-try@1.0.5:
     resolution: {integrity: sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==}
     dev: true
@@ -14491,13 +14652,11 @@ packages:
     engines: {node: '>=0.8'}
     dependencies:
       thenify: 3.3.1
-    dev: false
 
   /thenify@3.3.1:
     resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
     dependencies:
       any-promise: 1.3.0
-    dev: false
 
   /thread-stream@2.3.0:
     resolution: {integrity: sha512-kaDqm1DET9pp3NXwR8382WHbnpXnRkN9xGN9dQt3B2+dmXiW8X1SOwmFOxAErEQ47ObhZ96J6yhZNXuyCOL7KA==}
@@ -14536,6 +14695,13 @@ packages:
     engines: {node: '>=4'}
     dev: true
 
+  /timers-ext@0.1.7:
+    resolution: {integrity: sha512-b85NUNzTSdodShTIbky6ZF02e8STtVVfD+fu4aXXShEELpozH+bCpJLYMPZbsABN2wDH7fJpqIoXxJpzbf0NqQ==}
+    dependencies:
+      es5-ext: 0.10.62
+      next-tick: 1.1.0
+    dev: true
+
   /tiny-glob@0.2.9:
     resolution: {integrity: sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg==}
     dependencies:
@@ -14812,6 +14978,14 @@ packages:
       mime-types: 2.1.35
     dev: true
 
+  /type@1.2.0:
+    resolution: {integrity: sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg==}
+    dev: true
+
+  /type@2.7.2:
+    resolution: {integrity: sha512-dzlvlNlt6AXU7EBSfpAscydQ7gXB+pPGsPnfJnZpiNJBDj7IaJzQlBZYGdEi4R9HmPdBv2XmWJ6YUtoTa7lmCw==}
+    dev: true
+
   /typed-array-length@1.0.4:
     resolution: {integrity: sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==}
     dependencies:

From eb5d65fabc831cd0433eb2e13f9ab31e9921fe3a Mon Sep 17 00:00:00 2001
From: Alois Klink <alois@aloisklink.com>
Date: Sun, 19 Feb 2023 21:43:27 +0000
Subject: [PATCH 064/281] build(types): create types from config JSON Schema

Runs `pnpm --filter mermaid run types:build-config` to automatically
generate typescript types for `MermaidConfig` from the
JSON Schema file.
---
 packages/mermaid/src/config.type.ts | 978 ++++++++++++++++++++++++++--
 1 file changed, 928 insertions(+), 50 deletions(-)

diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts
index 3b5826d1a..352181c86 100644
--- a/packages/mermaid/src/config.type.ts
+++ b/packages/mermaid/src/config.type.ts
@@ -1,22 +1,144 @@
-// TODO: This was auto generated from defaultConfig. Needs to be verified.
+/* eslint-disable */
+/**
+ * This file was automatically generated by json-schema-to-typescript.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run json-schema-to-typescript to regenerate this file.
+ */
 
-import DOMPurify from 'dompurify';
+/**
+ * Configuration options to pass to the `dompurify` library.
+ */
+export type DOMPurifyConfiguration = import("dompurify").Config;
+/**
+ * JavaScript function that returns a `FontConfig`.
+ *
+ * By default, these return the appropriate `*FontSize`, `*FontFamily`, `*FontWeight`
+ * values.
+ *
+ * For example, the font calculator called `boundaryFont` might be defined as:
+ *
+ * ```javascript
+ * boundaryFont: function () {
+ *   return {
+ *     fontFamily: this.boundaryFontFamily,
+ *     fontSize: this.boundaryFontSize,
+ *     fontWeight: this.boundaryFontWeight,
+ *   };
+ * }
+ * ```
+ *
+ *
+ * This interface was referenced by `MermaidConfig`'s JSON-Schema
+ * via the `definition` "FontCalculator".
+ */
+export type FontCalculator = () => Partial<FontConfig>;
+/**
+ * Picks the color of the sankey diagram links, using the colors of the source and/or target of the links.
+ *
+ *
+ * This interface was referenced by `MermaidConfig`'s JSON-Schema
+ * via the `definition` "SankeyLinkColor".
+ */
+export type SankeyLinkColor = "source" | "target" | "gradient";
+/**
+ * Controls the alignment of the Sankey diagrams.
+ *
+ * See <https://github.com/d3/d3-sankey#alignments>.
+ *
+ *
+ * This interface was referenced by `MermaidConfig`'s JSON-Schema
+ * via the `definition` "SankeyNodeAlignment".
+ */
+export type SankeyNodeAlignment = "left" | "right" | "center" | "justify";
+/**
+ * The font size to use
+ */
+export type CSSFontSize = string | number;
 
 export interface MermaidConfig {
-  theme?: string;
+  /**
+   * Theme, the CSS style sheet.
+   * You may also use `themeCSS` to override this value.
+   *
+   */
+  theme?: string | "default" | "forest" | "dark" | "neutral" | "null";
   themeVariables?: any;
   themeCSS?: string;
+  /**
+   * The maximum allowed size of the users text diagram
+   */
   maxTextSize?: number;
   darkMode?: boolean;
   htmlLabels?: boolean;
+  /**
+   * Specifies the font to be used in the rendered diagrams.
+   * Can be any possible CSS `font-family`.
+   * See https://developer.mozilla.org/en-US/docs/Web/CSS/font-family
+   *
+   */
   fontFamily?: string;
   altFontFamily?: string;
-  logLevel?: number;
-  securityLevel?: string;
+  /**
+   * This option decides the amount of logging to be used by mermaid.
+   *
+   */
+  logLevel?:
+    | number
+    | string
+    | 0
+    | 2
+    | 1
+    | "trace"
+    | "debug"
+    | "info"
+    | "warn"
+    | "error"
+    | "fatal"
+    | 3
+    | 4
+    | 5
+    | undefined;
+  /**
+   * Level of trust for parsed diagram
+   */
+  securityLevel?: string | "strict" | "loose" | "antiscript" | "sandbox" | undefined;
+  /**
+   * Dictates whether mermaid starts on Page load
+   */
   startOnLoad?: boolean;
+  /**
+   * Controls whether or arrow markers in html code are absolute paths or anchors.
+   * This matters if you are using base tag settings.
+   *
+   */
   arrowMarkerAbsolute?: boolean;
+  /**
+   * This option controls which `currentConfig` keys are considered secure and
+   * can only be changed via call to `mermaidAPI.initialize`.
+   * Calls to `mermaidAPI.reinitialize` cannot make changes to the secure keys
+   * in the current `currentConfig`.
+   *
+   * This prevents malicious graph directives from overriding a site's default security.
+   *
+   */
   secure?: string[];
+  /**
+   * This option controls if the generated ids of nodes in the SVG are
+   * generated randomly or based on a seed.
+   * If set to `false`, the IDs are generated based on the current date and
+   * thus are not deterministic. This is the default behavior.
+   *
+   * This matters if your files are checked into source control e.g. git and
+   * should not change unless content is changed.
+   *
+   */
   deterministicIds?: boolean;
+  /**
+   * This option is the optional seed for deterministic ids.
+   * If set to `undefined` but deterministicIds is `true`, a simple number iterator is used.
+   * You can set this attribute to base the seed on a static string.
+   *
+   */
   deterministicIDSeed?: string;
   flowchart?: FlowchartDiagramConfig;
   sequence?: SequenceDiagramConfig;
@@ -33,95 +155,341 @@ export interface MermaidConfig {
   gitGraph?: GitGraphDiagramConfig;
   c4?: C4DiagramConfig;
   sankey?: SankeyDiagramConfig;
-  dompurifyConfig?: DOMPurify.Config;
+  dompurifyConfig?: DOMPurifyConfiguration;
   wrap?: boolean;
   fontSize?: number;
 }
-
-// TODO: More configs needs to be moved in here
+/**
+ * This interface was referenced by `MermaidConfig`'s JSON-Schema
+ * via the `definition` "BaseDiagramConfig".
+ */
 export interface BaseDiagramConfig {
   useWidth?: number;
+  /**
+   * When this flag is set to `true`, the height and width is set to 100%
+   * and is then scaled with the available space.
+   * If set to `false`, the absolute space required is used.
+   *
+   */
   useMaxWidth?: boolean;
 }
-
+/**
+ * The object containing configurations specific for c4 diagrams
+ *
+ * This interface was referenced by `MermaidConfig`'s JSON-Schema
+ * via the `definition` "C4DiagramConfig".
+ */
 export interface C4DiagramConfig extends BaseDiagramConfig {
+  /**
+   * Margin to the right and left of the c4 diagram, must be a positive value.
+   *
+   */
   diagramMarginX?: number;
+  /**
+   * Margin to the over and under the c4 diagram, must be a positive value.
+   *
+   */
   diagramMarginY?: number;
+  /**
+   * Margin between shapes
+   */
   c4ShapeMargin?: number;
+  /**
+   * Padding between shapes
+   */
   c4ShapePadding?: number;
+  /**
+   * Width of person boxes
+   */
   width?: number;
+  /**
+   * Height of person boxes
+   */
   height?: number;
+  /**
+   * Margin around boxes
+   */
   boxMargin?: number;
+  /**
+   * How many shapes to place in each row.
+   */
   c4ShapeInRow?: number;
   nextLinePaddingX?: number;
+  /**
+   * How many boundaries to place in each row.
+   */
   c4BoundaryInRow?: number;
+  /**
+   * This sets the font size of Person shape for the diagram
+   */
   personFontSize?: string | number;
+  /**
+   * This sets the font weight of Person shape for the diagram
+   */
   personFontFamily?: string;
+  /**
+   * This sets the font weight of Person shape for the diagram
+   */
   personFontWeight?: string | number;
+  /**
+   * This sets the font size of External Person shape for the diagram
+   */
   external_personFontSize?: string | number;
+  /**
+   * This sets the font family of External Person shape for the diagram
+   */
   external_personFontFamily?: string;
+  /**
+   * This sets the font weight of External Person shape for the diagram
+   */
   external_personFontWeight?: string | number;
+  /**
+   * This sets the font size of System shape for the diagram
+   */
   systemFontSize?: string | number;
+  /**
+   * This sets the font family of System shape for the diagram
+   */
   systemFontFamily?: string;
+  /**
+   * This sets the font weight of System shape for the diagram
+   */
   systemFontWeight?: string | number;
+  /**
+   * This sets the font size of External System shape for the diagram
+   */
   external_systemFontSize?: string | number;
+  /**
+   * This sets the font family of External System shape for the diagram
+   */
   external_systemFontFamily?: string;
+  /**
+   * This sets the font weight of External System shape for the diagram
+   */
   external_systemFontWeight?: string | number;
+  /**
+   * This sets the font size of System DB shape for the diagram
+   */
   system_dbFontSize?: string | number;
+  /**
+   * This sets the font family of System DB shape for the diagram
+   */
   system_dbFontFamily?: string;
+  /**
+   * This sets the font weight of System DB shape for the diagram
+   */
   system_dbFontWeight?: string | number;
+  /**
+   * This sets the font size of External System DB shape for the diagram
+   */
   external_system_dbFontSize?: string | number;
+  /**
+   * This sets the font family of External System DB shape for the diagram
+   */
   external_system_dbFontFamily?: string;
+  /**
+   * This sets the font weight of External System DB shape for the diagram
+   */
   external_system_dbFontWeight?: string | number;
+  /**
+   * This sets the font size of System Queue shape for the diagram
+   */
   system_queueFontSize?: string | number;
+  /**
+   * This sets the font family of System Queue shape for the diagram
+   */
   system_queueFontFamily?: string;
+  /**
+   * This sets the font weight of System Queue shape for the diagram
+   */
   system_queueFontWeight?: string | number;
+  /**
+   * This sets the font size of External System Queue shape for the diagram
+   */
   external_system_queueFontSize?: string | number;
+  /**
+   * This sets the font family of External System Queue shape for the diagram
+   */
   external_system_queueFontFamily?: string;
+  /**
+   * This sets the font weight of External System Queue shape for the diagram
+   */
   external_system_queueFontWeight?: string | number;
+  /**
+   * This sets the font size of Boundary shape for the diagram
+   */
   boundaryFontSize?: string | number;
+  /**
+   * This sets the font family of Boundary shape for the diagram
+   */
   boundaryFontFamily?: string;
+  /**
+   * This sets the font weight of Boundary shape for the diagram
+   */
   boundaryFontWeight?: string | number;
+  /**
+   * This sets the font size of Message shape for the diagram
+   */
   messageFontSize?: string | number;
+  /**
+   * This sets the font family of Message shape for the diagram
+   */
   messageFontFamily?: string;
+  /**
+   * This sets the font weight of Message shape for the diagram
+   */
   messageFontWeight?: string | number;
+  /**
+   * This sets the font size of Container shape for the diagram
+   */
   containerFontSize?: string | number;
+  /**
+   * This sets the font family of Container shape for the diagram
+   */
   containerFontFamily?: string;
+  /**
+   * This sets the font weight of Container shape for the diagram
+   */
   containerFontWeight?: string | number;
+  /**
+   * This sets the font size of External Container shape for the diagram
+   */
   external_containerFontSize?: string | number;
+  /**
+   * This sets the font family of External Container shape for the diagram
+   */
   external_containerFontFamily?: string;
+  /**
+   * This sets the font weight of External Container shape for the diagram
+   */
   external_containerFontWeight?: string | number;
+  /**
+   * This sets the font size of Container DB shape for the diagram
+   */
   container_dbFontSize?: string | number;
+  /**
+   * This sets the font family of Container DB shape for the diagram
+   */
   container_dbFontFamily?: string;
+  /**
+   * This sets the font weight of Container DB shape for the diagram
+   */
   container_dbFontWeight?: string | number;
+  /**
+   * This sets the font size of External Container DB shape for the diagram
+   */
   external_container_dbFontSize?: string | number;
+  /**
+   * This sets the font family of External Container DB shape for the diagram
+   */
   external_container_dbFontFamily?: string;
+  /**
+   * This sets the font weight of External Container DB shape for the diagram
+   */
   external_container_dbFontWeight?: string | number;
+  /**
+   * This sets the font size of Container Queue shape for the diagram
+   */
   container_queueFontSize?: string | number;
+  /**
+   * This sets the font family of Container Queue shape for the diagram
+   */
   container_queueFontFamily?: string;
+  /**
+   * This sets the font weight of Container Queue shape for the diagram
+   */
   container_queueFontWeight?: string | number;
+  /**
+   * This sets the font size of External Container Queue shape for the diagram
+   */
   external_container_queueFontSize?: string | number;
+  /**
+   * This sets the font family of External Container Queue shape for the diagram
+   */
   external_container_queueFontFamily?: string;
+  /**
+   * This sets the font weight of External Container Queue shape for the diagram
+   */
   external_container_queueFontWeight?: string | number;
+  /**
+   * This sets the font size of Component shape for the diagram
+   */
   componentFontSize?: string | number;
+  /**
+   * This sets the font family of Component shape for the diagram
+   */
   componentFontFamily?: string;
+  /**
+   * This sets the font weight of Component shape for the diagram
+   */
   componentFontWeight?: string | number;
+  /**
+   * This sets the font size of External Component shape for the diagram
+   */
   external_componentFontSize?: string | number;
+  /**
+   * This sets the font family of External Component shape for the diagram
+   */
   external_componentFontFamily?: string;
+  /**
+   * This sets the font weight of External Component shape for the diagram
+   */
   external_componentFontWeight?: string | number;
+  /**
+   * This sets the font size of Component DB shape for the diagram
+   */
   component_dbFontSize?: string | number;
+  /**
+   * This sets the font family of Component DB shape for the diagram
+   */
   component_dbFontFamily?: string;
+  /**
+   * This sets the font weight of Component DB shape for the diagram
+   */
   component_dbFontWeight?: string | number;
+  /**
+   * This sets the font size of External Component DB shape for the diagram
+   */
   external_component_dbFontSize?: string | number;
+  /**
+   * This sets the font family of External Component DB shape for the diagram
+   */
   external_component_dbFontFamily?: string;
+  /**
+   * This sets the font weight of External Component DB shape for the diagram
+   */
   external_component_dbFontWeight?: string | number;
+  /**
+   * This sets the font size of Component Queue shape for the diagram
+   */
   component_queueFontSize?: string | number;
+  /**
+   * This sets the font family of Component Queue shape for the diagram
+   */
   component_queueFontFamily?: string;
+  /**
+   * This sets the font weight of Component Queue shape for the diagram
+   */
   component_queueFontWeight?: string | number;
+  /**
+   * This sets the font size of External Component Queue shape for the diagram
+   */
   external_component_queueFontSize?: string | number;
+  /**
+   * This sets the font family of External Component Queue shape for the diagram
+   */
   external_component_queueFontFamily?: string;
+  /**
+   * This sets the font weight of External Component Queue shape for the diagram
+   */
   external_component_queueFontWeight?: string | number;
+  /**
+   * This sets the auto-wrap state for the diagram
+   */
   wrap?: boolean;
+  /**
+   * This sets the auto-wrap padding for the diagram (sides only)
+   */
   wrapPadding?: number;
   person_bg_color?: string;
   person_border_color?: string;
@@ -186,8 +554,14 @@ export interface C4DiagramConfig extends BaseDiagramConfig {
   boundaryFont?: FontCalculator;
   messageFont?: FontCalculator;
 }
-
+/**
+ * This interface was referenced by `MermaidConfig`'s JSON-Schema
+ * via the `definition` "GitGraphDiagramConfig".
+ */
 export interface GitGraphDiagramConfig extends BaseDiagramConfig {
+  /**
+   * Margin top for the text over the diagram
+   */
   titleTopMargin?: number;
   diagramPadding?: number;
   nodeLabel?: NodeLabel;
@@ -196,16 +570,29 @@ export interface GitGraphDiagramConfig extends BaseDiagramConfig {
   showCommitLabel?: boolean;
   showBranches?: boolean;
   rotateCommitLabel?: boolean;
+  /**
+   * Controls whether or arrow markers in html code are absolute paths or anchors.
+   * This matters if you are using base tag settings.
+   *
+   */
   arrowMarkerAbsolute?: boolean;
 }
-
+/**
+ * This interface was referenced by `MermaidConfig`'s JSON-Schema
+ * via the `definition` "NodeLabel".
+ */
 export interface NodeLabel {
   width?: number;
   height?: number;
   x?: number;
   y?: number;
 }
-
+/**
+ * The object containing configurations specific for req diagrams
+ *
+ * This interface was referenced by `MermaidConfig`'s JSON-Schema
+ * via the `definition` "RequirementDiagramConfig".
+ */
 export interface RequirementDiagramConfig extends BaseDiagramConfig {
   rect_fill?: string;
   text_color?: string;
@@ -217,51 +604,163 @@ export interface RequirementDiagramConfig extends BaseDiagramConfig {
   rect_padding?: number;
   line_height?: number;
 }
-
+/**
+ * The object containing configurations specific for mindmap diagrams
+ *
+ * This interface was referenced by `MermaidConfig`'s JSON-Schema
+ * via the `definition` "MindmapDiagramConfig".
+ */
 export interface MindmapDiagramConfig extends BaseDiagramConfig {
-  useMaxWidth: boolean;
-  padding: number;
-  maxNodeWidth: number;
+  padding?: number;
+  maxNodeWidth?: number;
 }
-
+/**
+ * This interface was referenced by `MermaidConfig`'s JSON-Schema
+ * via the `definition` "PieDiagramConfig".
+ */
 export interface PieDiagramConfig extends BaseDiagramConfig {
+  /**
+   * Axial position of slice's label from zero at the center to 1 at the outside edges.
+   *
+   */
   textPosition?: number;
 }
-
+/**
+ * This interface was referenced by `MermaidConfig`'s JSON-Schema
+ * via the `definition` "QuadrantChartConfig".
+ */
 export interface QuadrantChartConfig extends BaseDiagramConfig {
+  /**
+   * Width of the chart
+   */
   chartWidth?: number;
+  /**
+   * Height of the chart
+   */
   chartHeight?: number;
+  /**
+   * Chart title top and bottom padding
+   */
   titleFontSize?: number;
+  /**
+   * Padding around the quadrant square
+   */
   titlePadding?: number;
+  /**
+   * quadrant title padding from top if the quadrant is rendered on top
+   */
   quadrantPadding?: number;
+  /**
+   * Padding around x-axis labels
+   */
   xAxisLabelPadding?: number;
+  /**
+   * Padding around y-axis labels
+   */
   yAxisLabelPadding?: number;
+  /**
+   * x-axis label font size
+   */
   xAxisLabelFontSize?: number;
+  /**
+   * y-axis label font size
+   */
   yAxisLabelFontSize?: number;
+  /**
+   * quadrant title font size
+   */
   quadrantLabelFontSize?: number;
+  /**
+   * quadrant title padding from top if the quadrant is rendered on top
+   */
   quadrantTextTopPadding?: number;
+  /**
+   * padding between point and point label
+   */
   pointTextPadding?: number;
+  /**
+   * point title font size
+   */
   pointLabelFontSize?: number;
+  /**
+   * radius of the point to be drawn
+   */
   pointRadius?: number;
-  xAxisPosition?: 'top' | 'bottom';
-  yAxisPosition?: 'left' | 'right';
+  /**
+   * position of x-axis labels
+   */
+  xAxisPosition?: "top" | "bottom";
+  /**
+   * position of y-axis labels
+   */
+  yAxisPosition?: "left" | "right";
+  /**
+   * stroke width of edges of the box that are inside the quadrant
+   */
   quadrantInternalBorderStrokeWidth?: number;
+  /**
+   * stroke width of edges of the box that are outside the quadrant
+   */
   quadrantExternalBorderStrokeWidth?: number;
 }
-
+/**
+ * The object containing configurations specific for entity relationship diagrams
+ *
+ * This interface was referenced by `MermaidConfig`'s JSON-Schema
+ * via the `definition` "ErDiagramConfig".
+ */
 export interface ErDiagramConfig extends BaseDiagramConfig {
+  /**
+   * Margin top for the text over the diagram
+   */
   titleTopMargin?: number;
+  /**
+   * The amount of padding around the diagram as a whole so that embedded
+   * diagrams have margins, expressed in pixels.
+   *
+   */
   diagramPadding?: number;
-  layoutDirection?: string;
+  /**
+   * Directional bias for layout of entities
+   */
+  layoutDirection?: string | "TB" | "BT" | "LR" | "RL";
+  /**
+   * The minimum width of an entity box. Expressed in pixels.
+   */
   minEntityWidth?: number;
+  /**
+   * The minimum height of an entity box. Expressed in pixels.
+   */
   minEntityHeight?: number;
+  /**
+   * The minimum internal padding between text in an entity box and the enclosing box borders.
+   * Expressed in pixels.
+   *
+   */
   entityPadding?: number;
+  /**
+   * Stroke color of box edges and lines.
+   */
   stroke?: string;
+  /**
+   * Fill color of entity boxes
+   */
   fill?: string;
+  /**
+   * Font size (expressed as an integer representing a number of pixels)
+   */
   fontSize?: number;
 }
-
+/**
+ * The object containing configurations specific for entity relationship diagrams
+ *
+ * This interface was referenced by `MermaidConfig`'s JSON-Schema
+ * via the `definition` "StateDiagramConfig".
+ */
 export interface StateDiagramConfig extends BaseDiagramConfig {
+  /**
+   * Margin top for the text over the diagram
+   */
   titleTopMargin?: number;
   arrowMarkerAbsolute?: boolean;
   dividerMargin?: number;
@@ -273,161 +772,540 @@ export interface StateDiagramConfig extends BaseDiagramConfig {
   forkWidth?: number;
   forkHeight?: number;
   miniPadding?: number;
+  /**
+   * Font size factor, this is used to guess the width of the edges labels
+   * before rendering by dagre layout.
+   * This might need updating if/when switching font
+   *
+   */
   fontSizeFactor?: number;
   fontSize?: number;
   labelHeight?: number;
   edgeLengthFactor?: string;
   compositTitleSize?: number;
   radius?: number;
-  defaultRenderer?: string;
+  /**
+   * Decides which rendering engine that is to be used for the rendering.
+   *
+   */
+  defaultRenderer?: string | "dagre-d3" | "dagre-wrapper" | "elk";
 }
-
+/**
+ * This interface was referenced by `MermaidConfig`'s JSON-Schema
+ * via the `definition` "ClassDiagramConfig".
+ */
 export interface ClassDiagramConfig extends BaseDiagramConfig {
+  /**
+   * Margin top for the text over the diagram
+   */
   titleTopMargin?: number;
+  /**
+   * Controls whether or arrow markers in html code are absolute paths or anchors.
+   * This matters if you are using base tag settings.
+   *
+   */
   arrowMarkerAbsolute?: boolean;
   dividerMargin?: number;
   padding?: number;
   textHeight?: number;
-  defaultRenderer?: string;
+  /**
+   * Decides which rendering engine that is to be used for the rendering.
+   *
+   */
+  defaultRenderer?: string | "dagre-d3" | "dagre-wrapper" | "elk";
   nodeSpacing?: number;
   rankSpacing?: number;
+  /**
+   * The amount of padding around the diagram as a whole so that embedded
+   * diagrams have margins, expressed in pixels.
+   *
+   */
   diagramPadding?: number;
   htmlLabels?: boolean;
 }
-
+/**
+ * The object containing configurations specific for journey diagrams
+ *
+ *
+ * This interface was referenced by `MermaidConfig`'s JSON-Schema
+ * via the `definition` "JourneyDiagramConfig".
+ */
 export interface JourneyDiagramConfig extends BaseDiagramConfig {
+  /**
+   * Margin to the right and left of the c4 diagram, must be a positive value.
+   *
+   */
   diagramMarginX?: number;
+  /**
+   * Margin to the over and under the c4 diagram, must be a positive value.
+   *
+   */
   diagramMarginY?: number;
+  /**
+   * Margin between actors
+   */
   leftMargin?: number;
+  /**
+   * Width of actor boxes
+   */
   width?: number;
+  /**
+   * Height of actor boxes
+   */
   height?: number;
+  /**
+   * Margin around loop boxes
+   */
   boxMargin?: number;
+  /**
+   * Margin around the text in loop/alt/opt boxes
+   */
   boxTextMargin?: number;
+  /**
+   * Margin around notes
+   */
   noteMargin?: number;
+  /**
+   * Space between messages.
+   */
   messageMargin?: number;
-  messageAlign?: string;
+  /**
+   * Multiline message alignment
+   */
+  messageAlign?: string | "left" | "center" | "right";
+  /**
+   * Prolongs the edge of the diagram downwards.
+   *
+   * Depending on css styling this might need adjustment.
+   *
+   */
   bottomMarginAdj?: number;
+  /**
+   * Curved Arrows become Right Angles
+   *
+   * This will display arrows that start and begin at the same node as
+   * right angles, rather than as curves.
+   *
+   */
   rightAngles?: boolean;
   taskFontSize?: string | number;
   taskFontFamily?: string;
   taskMargin?: number;
+  /**
+   * Width of activation box
+   */
   activationWidth?: number;
+  /**
+   * text placement as: tspan | fo | old only text as before
+   *
+   */
   textPlacement?: string;
   actorColours?: string[];
   sectionFills?: string[];
   sectionColours?: string[];
 }
-
+/**
+ * This interface was referenced by `MermaidConfig`'s JSON-Schema
+ * via the `definition` "TimelineDiagramConfig".
+ */
 export interface TimelineDiagramConfig extends BaseDiagramConfig {
+  /**
+   * Margin to the right and left of the c4 diagram, must be a positive value.
+   *
+   */
   diagramMarginX?: number;
+  /**
+   * Margin to the over and under the c4 diagram, must be a positive value.
+   *
+   */
   diagramMarginY?: number;
+  /**
+   * Margin between actors
+   */
   leftMargin?: number;
+  /**
+   * Width of actor boxes
+   */
   width?: number;
+  /**
+   * Height of actor boxes
+   */
   height?: number;
   padding?: number;
+  /**
+   * Margin around loop boxes
+   */
   boxMargin?: number;
+  /**
+   * Margin around the text in loop/alt/opt boxes
+   */
   boxTextMargin?: number;
+  /**
+   * Margin around notes
+   */
   noteMargin?: number;
+  /**
+   * Space between messages.
+   */
   messageMargin?: number;
-  messageAlign?: string;
+  /**
+   * Multiline message alignment
+   */
+  messageAlign?: string | "left" | "center" | "right";
+  /**
+   * Prolongs the edge of the diagram downwards.
+   *
+   * Depending on css styling this might need adjustment.
+   *
+   */
   bottomMarginAdj?: number;
+  /**
+   * Curved Arrows become Right Angles
+   *
+   * This will display arrows that start and begin at the same node as
+   * right angles, rather than as curves.
+   *
+   */
   rightAngles?: boolean;
   taskFontSize?: string | number;
   taskFontFamily?: string;
   taskMargin?: number;
+  /**
+   * Width of activation box
+   */
   activationWidth?: number;
+  /**
+   * text placement as: tspan | fo | old only text as before
+   *
+   */
   textPlacement?: string;
   actorColours?: string[];
   sectionFills?: string[];
   sectionColours?: string[];
   disableMulticolor?: boolean;
-  useMaxWidth?: boolean;
 }
-
+/**
+ * The object containing configurations specific for gantt diagrams
+ *
+ *
+ * This interface was referenced by `MermaidConfig`'s JSON-Schema
+ * via the `definition` "GanttDiagramConfig".
+ */
 export interface GanttDiagramConfig extends BaseDiagramConfig {
+  /**
+   * Margin top for the text over the diagram
+   */
   titleTopMargin?: number;
+  /**
+   * The height of the bars in the graph
+   */
   barHeight?: number;
+  /**
+   * The margin between the different activities in the gantt diagram
+   */
   barGap?: number;
+  /**
+   * Margin between title and gantt diagram and between axis and gantt diagram.
+   *
+   */
   topPadding?: number;
+  /**
+   * The space allocated for the section name to the right of the activities
+   *
+   */
   rightPadding?: number;
+  /**
+   * The space allocated for the section name to the left of the activities
+   *
+   */
   leftPadding?: number;
+  /**
+   * Vertical starting position of the grid lines
+   */
   gridLineStartPadding?: number;
+  /**
+   * Font size
+   */
   fontSize?: number;
+  /**
+   * Font size for sections
+   */
   sectionFontSize?: string | number;
+  /**
+   * The number of alternating section styles
+   */
   numberSectionStyles?: number;
+  /**
+   * Date/time format of the axis
+   *
+   * This might need adjustment to match your locale and preferences.
+   *
+   */
   axisFormat?: string;
+  /**
+   * axis ticks
+   *
+   * Pattern is:
+   *
+   * ```javascript
+   * /^([1-9][0-9]*)(minute|hour|day|week|month)$/
+   * ```
+   *
+   */
   tickInterval?: string;
+  /**
+   * When this flag is set, date labels will be added to the top of the chart
+   *
+   */
   topAxis?: boolean;
-  displayMode?: string;
+  /**
+   * Controls the display mode.
+   *
+   */
+  displayMode?: string | "compact";
 }
-
+/**
+ * The object containing configurations specific for sequence diagrams
+ *
+ * This interface was referenced by `MermaidConfig`'s JSON-Schema
+ * via the `definition` "SequenceDiagramConfig".
+ */
 export interface SequenceDiagramConfig extends BaseDiagramConfig {
   arrowMarkerAbsolute?: boolean;
   hideUnusedParticipants?: boolean;
+  /**
+   * Width of the activation rect
+   */
   activationWidth?: number;
+  /**
+   * Margin to the right and left of the sequence diagram
+   */
   diagramMarginX?: number;
+  /**
+   * Margin to the over and under the sequence diagram
+   */
   diagramMarginY?: number;
+  /**
+   * Margin between actors
+   */
   actorMargin?: number;
+  /**
+   * Width of actor boxes
+   */
   width?: number;
+  /**
+   * Height of actor boxes
+   */
   height?: number;
+  /**
+   * Margin around loop boxes
+   */
   boxMargin?: number;
+  /**
+   * Margin around the text in loop/alt/opt boxes
+   */
   boxTextMargin?: number;
+  /**
+   * Margin around notes
+   */
   noteMargin?: number;
+  /**
+   * Space between messages.
+   */
   messageMargin?: number;
-  messageAlign?: string;
+  /**
+   * Multiline message alignment
+   */
+  messageAlign?: string | "left" | "center" | "right";
+  /**
+   * Mirror actors under diagram
+   *
+   */
   mirrorActors?: boolean;
+  /**
+   * forces actor popup menus to always be visible (to support E2E testing).
+   *
+   */
   forceMenus?: boolean;
+  /**
+   * Prolongs the edge of the diagram downwards.
+   *
+   * Depending on css styling this might need adjustment.
+   *
+   */
   bottomMarginAdj?: number;
+  /**
+   * Curved Arrows become Right Angles
+   *
+   * This will display arrows that start and begin at the same node as
+   * right angles, rather than as curves.
+   *
+   */
   rightAngles?: boolean;
+  /**
+   * This will show the node numbers
+   */
   showSequenceNumbers?: boolean;
+  /**
+   * This sets the font size of the actor's description
+   */
   actorFontSize?: string | number;
+  /**
+   * This sets the font family of the actor's description
+   */
   actorFontFamily?: string;
+  /**
+   * This sets the font weight of the actor's description
+   */
   actorFontWeight?: string | number;
+  /**
+   * This sets the font size of actor-attached notes
+   */
   noteFontSize?: string | number;
+  /**
+   * This sets the font family of actor-attached notes
+   */
   noteFontFamily?: string;
+  /**
+   * This sets the font weight of actor-attached notes
+   */
   noteFontWeight?: string | number;
-  noteAlign?: string;
+  /**
+   * This sets the text alignment of actor-attached notes
+   */
+  noteAlign?: string | "left" | "center" | "right";
+  /**
+   * This sets the font size of actor messages
+   */
   messageFontSize?: string | number;
+  /**
+   * This sets the font family of actor messages
+   */
   messageFontFamily?: string;
+  /**
+   * This sets the font weight of actor messages
+   */
   messageFontWeight?: string | number;
+  /**
+   * This sets the auto-wrap state for the diagram
+   */
   wrap?: boolean;
+  /**
+   * This sets the auto-wrap padding for the diagram (sides only)
+   */
   wrapPadding?: number;
+  /**
+   * This sets the width of the loop-box (loop, alt, opt, par)
+   */
   labelBoxWidth?: number;
+  /**
+   * This sets the height of the loop-box (loop, alt, opt, par)
+   */
   labelBoxHeight?: number;
   messageFont?: FontCalculator;
   noteFont?: FontCalculator;
   actorFont?: FontCalculator;
 }
-
+/**
+ * The object containing configurations specific for flowcharts
+ *
+ * This interface was referenced by `MermaidConfig`'s JSON-Schema
+ * via the `definition` "FlowchartDiagramConfig".
+ */
 export interface FlowchartDiagramConfig extends BaseDiagramConfig {
+  /**
+   * Margin top for the text over the diagram
+   */
   titleTopMargin?: number;
   arrowMarkerAbsolute?: boolean;
+  /**
+   * The amount of padding around the diagram as a whole so that embedded
+   * diagrams have margins, expressed in pixels.
+   *
+   */
   diagramPadding?: number;
+  /**
+   * Flag for setting whether or not a html tag should be used for rendering labels on the edges.
+   *
+   */
   htmlLabels?: boolean;
+  /**
+   * Defines the spacing between nodes on the same level
+   *
+   * Pertains to horizontal spacing for TB (top to bottom) or BT (bottom to top) graphs,
+   * and the vertical spacing for LR as well as RL graphs.
+   *
+   */
   nodeSpacing?: number;
+  /**
+   * Defines the spacing between nodes on different levels
+   *
+   * Pertains to horizontal spacing for TB (top to bottom) or BT (bottom to top) graphs,
+   * and the vertical spacing for LR as well as RL graphs.
+   *
+   */
   rankSpacing?: number;
-  curve?: string;
+  /**
+   * Defines how mermaid renders curves for flowcharts.
+   *
+   */
+  curve?: string | "basis" | "linear" | "cardinal";
+  /**
+   * Represents the padding between the labels and the shape
+   *
+   * **Only used in new experimental rendering.**
+   *
+   */
   padding?: number;
-  defaultRenderer?: string;
+  /**
+   * Decides which rendering engine that is to be used for the rendering.
+   *
+   */
+  defaultRenderer?: string | "dagre-d3" | "dagre-wrapper" | "elk";
+  /**
+   * Width of nodes where text is wrapped.
+   *
+   * When using markdown strings the text ius wrapped automatically, this
+   * value sets the max width of a text before it continues on a new line.
+   *
+   */
   wrappingWidth?: number;
 }
-
-export type SankeyLinkColor = 'source' | 'target' | 'gradient';
-export type SankeyNodeAlignment = 'left' | 'right' | 'center' | 'justify';
-
+/**
+ * The object containing configurations specific for sankey diagrams.
+ *
+ * This interface was referenced by `MermaidConfig`'s JSON-Schema
+ * via the `definition` "SankeyDiagramConfig".
+ */
 export interface SankeyDiagramConfig extends BaseDiagramConfig {
   width?: number;
   height?: number;
+  /**
+   * The color of the links in the sankey diagram.
+   *
+   */
   linkColor?: SankeyLinkColor | string;
-  nodeAlignment?: SankeyNodeAlignment;
+  /**
+   * Controls the alignment of the Sankey diagrams.
+   *
+   * See <https://github.com/d3/d3-sankey#alignments>.
+   *
+   */
+  nodeAlignment?: "left" | "right" | "center" | "justify";
+  useMaxWidth?: boolean;
 }
-
+/**
+ * This interface was referenced by `MermaidConfig`'s JSON-Schema
+ * via the `definition` "FontConfig".
+ */
 export interface FontConfig {
-  fontSize?: string | number;
+  fontSize?: CSSFontSize;
+  /**
+   * The CSS [`font-family`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family) to use.
+   */
   fontFamily?: string;
+  /**
+   * The font weight to use.
+   */
   fontWeight?: string | number;
 }
-
-export type FontCalculator = () => Partial<FontConfig>;
-
-export {};

From 063cb124cd64a64c068aea8c417628a3e4058307 Mon Sep 17 00:00:00 2001
From: Alois Klink <alois@aloisklink.com>
Date: Sun, 11 Dec 2022 18:42:52 +0000
Subject: [PATCH 065/281] test(config): add temp test for defaultConfig

Adds a temporary test to ensure that the new defaultConfig,
generated by Vite automatically from the `MermaidConfig` JSON Schema,
has the same values as the old defaultConfig
(taken from
https://github.com/mermaid-js/mermaid/blob/38013de7114966e8b1a83396703ef8158bb34466/packages/mermaid/src/defaultConfig.ts)

The only minor difference seems to be that:
  - `gitGraph` now has a default `useMaxWidth: false` option
    (previously used to be `undefined`),
  - `class` now has a `htmlLabels` value of `false` instead of `undefined`.
---
 packages/mermaid/src/config.spec.js      |   37 +
 packages/mermaid/src/oldDefaultConfig.ts | 2306 ++++++++++++++++++++++
 2 files changed, 2343 insertions(+)
 create mode 100644 packages/mermaid/src/oldDefaultConfig.ts

diff --git a/packages/mermaid/src/config.spec.js b/packages/mermaid/src/config.spec.js
index 1f7fd976b..b143c837a 100644
--- a/packages/mermaid/src/config.spec.js
+++ b/packages/mermaid/src/config.spec.js
@@ -1,3 +1,4 @@
+import isObject from 'lodash-es/isObject.js';
 import * as configApi from './config.js';
 
 describe('when working with site config', function () {
@@ -53,4 +54,40 @@ describe('when working with site config', function () {
     let config_4 = configApi.getConfig();
     expect(config_4.foobar).toBeUndefined();
   });
+
+  it('test new default config', async function () {
+    const { default: oldDefault } = await import('./oldDefaultConfig.js');
+    // gitGraph used to not have this option (aka it was `undefined`)
+    oldDefault.gitGraph.useMaxWidth = false;
+
+    // class diagrams used to not have these options set (aka they were `undefined`)
+    oldDefault.class.htmlLabels = false;
+
+    const { default: newDefault } = await import('./defaultConfig.js');
+
+    // check subsets of the objects, to improve vitest error messages
+    // we can't just use `expect(newDefault).to.deep.equal(oldDefault);`
+    // because the functions in the config won't be the same
+    expect(new Set(Object.keys(newDefault))).to.deep.equal(new Set(Object.keys(oldDefault)));
+
+    for (const key in newDefault) {
+      // recurse through object, since we want to treat functions differently
+      if (!Array.isArray(newDefault[key]) && isObject(newDefault[key])) {
+        expect(new Set(Object.keys(newDefault[key]))).to.deep.equal(
+          new Set(Object.keys(oldDefault[key]))
+        );
+        for (const key2 in newDefault[key]) {
+          if (typeof newDefault[key][key2] === 'function') {
+            expect(newDefault[key][key2].toString()).to.deep.equal(
+              oldDefault[key][key2].toString()
+            );
+          } else {
+            expect(newDefault[key]).to.have.deep.property(key2, oldDefault[key][key2]);
+          }
+        }
+      } else {
+        expect(newDefault[key]).to.deep.equal(oldDefault[key]);
+      }
+    }
+  });
 });
diff --git a/packages/mermaid/src/oldDefaultConfig.ts b/packages/mermaid/src/oldDefaultConfig.ts
new file mode 100644
index 000000000..fbbd39f2a
--- /dev/null
+++ b/packages/mermaid/src/oldDefaultConfig.ts
@@ -0,0 +1,2306 @@
+/**
+ * Temporary file for testing whether the new mermaid configuration defined in
+ * packages/mermaid/src/schemas/config.schema.yaml has the exact same default config.
+ */
+
+import theme from './themes/index.js';
+import { type MermaidConfig } from './config.type.js';
+/**
+ * **Configuration methods in Mermaid version 8.6.0 have been updated, to learn more[[click
+ * here](8.6.0_docs.md)].**
+ *
+ * ## **What follows are config instructions for older versions**
+ *
+ * These are the default options which can be overridden with the initialization call like so:
+ *
+ * **Example 1:**
+ *
+ * ```js
+ * mermaid.initialize({ flowchart:{ htmlLabels: false } });
+ * ```
+ *
+ * **Example 2:**
+ *
+ * ```html
+ * <script>
+ * const config = {
+ *   startOnLoad:true,
+ *   flowchart:{ useMaxWidth:true, htmlLabels:true, curve:'cardinal'},
+ *   securityLevel:'loose',
+ * };
+ * mermaid.initialize(config);
+ * </script>
+ * ```
+ *
+ * A summary of all options and their defaults is found [here](#mermaidapi-configuration-defaults).
+ * A description of each option follows below.
+ */
+const config: Partial<MermaidConfig> = {
+  /**
+   * Theme , the CSS style sheet
+   *
+   * | Parameter | Description     | Type   | Required | Values                                         |
+   * | --------- | --------------- | ------ | -------- | ---------------------------------------------- |
+   * | theme     | Built in Themes | string | Optional | 'default', 'forest', 'dark', 'neutral', 'null' |
+   *
+   * **Notes:** To disable any pre-defined mermaid theme, use "null".
+   *
+   * @example
+   *
+   * ```js
+   * {
+   *   "theme": "forest",
+   *   "themeCSS": ".node rect { fill: red; }"
+   * }
+   * ```
+   */
+  theme: 'default',
+  themeVariables: theme['default'].getThemeVariables(),
+  themeCSS: undefined,
+  /* **maxTextSize** - The maximum allowed size of the users text diagram */
+  maxTextSize: 50000,
+  darkMode: false,
+
+  /**
+   * | Parameter  | Description                                            | Type   | Required | Values                      |
+   * | ---------- | ------------------------------------------------------ | ------ | -------- | --------------------------- |
+   * | fontFamily | specifies the font to be used in the rendered diagrams | string | Required | Any Possible CSS FontFamily |
+   *
+   * **Notes:** Default value: '"trebuchet ms", verdana, arial, sans-serif;'.
+   */
+  fontFamily: '"trebuchet ms", verdana, arial, sans-serif;',
+
+  /**
+   * | Parameter | Description                                           | Type             | Required | Values                                        |
+   * | --------- | ----------------------------------------------------- | ---------------- | -------- | --------------------------------------------- |
+   * | logLevel  | This option decides the amount of logging to be used. | string \| number | Required | 'trace','debug','info','warn','error','fatal' |
+   *
+   * **Notes:**
+   *
+   * - Trace: 0
+   * - Debug: 1
+   * - Info: 2
+   * - Warn: 3
+   * - Error: 4
+   * - Fatal: 5 (default)
+   */
+  logLevel: 5,
+
+  /**
+   * | Parameter     | Description                       | Type   | Required | Values                                     |
+   * | ------------- | --------------------------------- | ------ | -------- | ------------------------------------------ |
+   * | securityLevel | Level of trust for parsed diagram | string | Required | 'sandbox', 'strict', 'loose', 'antiscript' |
+   *
+   * **Notes**:
+   *
+   * - **strict**: (**default**) HTML tags in the text are encoded and click functionality is disabled.
+   * - **antiscript**: HTML tags in text are allowed (only script elements are removed), and click
+   *   functionality is enabled.
+   * - **loose**: HTML tags in text are allowed and click functionality is enabled.
+   * - **sandbox**: With this security level, all rendering takes place in a sandboxed iframe. This
+   *   prevent any JavaScript from running in the context. This may hinder interactive functionality
+   *   of the diagram, like scripts, popups in the sequence diagram, links to other tabs or targets, etc.
+   */
+  securityLevel: 'strict',
+
+  /**
+   * | Parameter   | Description                                  | Type    | Required | Values      |
+   * | ----------- | -------------------------------------------- | ------- | -------- | ----------- |
+   * | startOnLoad | Dictates whether mermaid starts on Page load | boolean | Required | true, false |
+   *
+   * **Notes:** Default value: true
+   */
+  startOnLoad: true,
+
+  /**
+   * | Parameter           | Description                                                                  | Type    | Required | Values      |
+   * | ------------------- | ---------------------------------------------------------------------------- | ------- | -------- | ----------- |
+   * | arrowMarkerAbsolute | Controls whether or arrow markers in html code are absolute paths or anchors | boolean | Required | true, false |
+   *
+   * **Notes**:
+   *
+   * This matters if you are using base tag settings.
+   *
+   * Default value: false
+   */
+  arrowMarkerAbsolute: false,
+
+  /**
+   * This option controls which currentConfig keys are considered _secure_ and can only be changed
+   * via call to mermaidAPI.initialize. Calls to mermaidAPI.reinitialize cannot make changes to the
+   * `secure` keys in the current currentConfig. This prevents malicious graph directives from
+   * overriding a site's default security.
+   *
+   * **Notes**:
+   *
+   * Default value: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
+   */
+  secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
+  /**
+   * This option controls if the generated ids of nodes in the SVG are generated randomly or based
+   * on a seed. If set to false, the IDs are generated based on the current date and thus are not
+   * deterministic. This is the default behavior.
+   *
+   * **Notes**:
+   *
+   * This matters if your files are checked into source control e.g. git and should not change unless
+   * content is changed.
+   *
+   * Default value: false
+   */
+  deterministicIds: false,
+
+  /**
+   * This option is the optional seed for deterministic ids. if set to undefined but
+   * deterministicIds is true, a simple number iterator is used. You can set this attribute to base
+   * the seed on a static string.
+   */
+  deterministicIDSeed: undefined,
+
+  /** The object containing configurations specific for flowcharts */
+  flowchart: {
+    /**
+     * ### titleTopMargin
+     *
+     * | Parameter      | Description                                    | Type    | Required | Values             |
+     * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ |
+     * | titleTopMargin | Margin top for the text over the flowchart     | Integer | Required | Any Positive Value |
+     *
+     * **Notes:** Default value: 25
+     */
+    titleTopMargin: 25,
+
+    /**
+     * | Parameter      | Description                                     | Type    | Required | Values             |
+     * | -------------- | ----------------------------------------------- | ------- | -------- | ------------------ |
+     * | diagramPadding | Amount of padding around the diagram as a whole | Integer | Required | Any Positive Value |
+     *
+     * **Notes:**
+     *
+     * The amount of padding around the diagram as a whole so that embedded diagrams have margins,
+     * expressed in pixels
+     *
+     * Default value: 8
+     */
+    diagramPadding: 8,
+
+    /**
+     * | Parameter  | Description                                                                                  | Type    | Required | Values      |
+     * | ---------- | -------------------------------------------------------------------------------------------- | ------- | -------- | ----------- |
+     * | htmlLabels | Flag for setting whether or not a html tag should be used for rendering labels on the edges. | boolean | Required | true, false |
+     *
+     * **Notes:** Default value: true.
+     */
+    htmlLabels: true,
+
+    /**
+     * | Parameter   | Description                                         | Type    | Required | Values              |
+     * | ----------- | --------------------------------------------------- | ------- | -------- | ------------------- |
+     * | nodeSpacing | Defines the spacing between nodes on the same level | Integer | Required | Any positive Number |
+     *
+     * **Notes:**
+     *
+     * Pertains to horizontal spacing for TB (top to bottom) or BT (bottom to top) graphs, and the
+     * vertical spacing for LR as well as RL graphs.**
+     *
+     * Default value: 50
+     */
+    nodeSpacing: 50,
+
+    /**
+     * | Parameter   | Description                                           | Type    | Required | Values              |
+     * | ----------- | ----------------------------------------------------- | ------- | -------- | ------------------- |
+     * | rankSpacing | Defines the spacing between nodes on different levels | Integer | Required | Any Positive Number |
+     *
+     * **Notes**:
+     *
+     * Pertains to vertical spacing for TB (top to bottom) or BT (bottom to top), and the horizontal
+     * spacing for LR as well as RL graphs.
+     *
+     * Default value 50
+     */
+    rankSpacing: 50,
+
+    /**
+     * | Parameter | Description                                        | Type   | Required | Values                        |
+     * | --------- | -------------------------------------------------- | ------ | -------- | ----------------------------- |
+     * | curve     | Defines how mermaid renders curves for flowcharts. | string | Required | 'basis', 'linear', 'cardinal' |
+     *
+     * **Notes:**
+     *
+     * Default Value: 'basis'
+     */
+    curve: 'basis',
+    // Only used in new experimental rendering
+    // represents the padding between the labels and the shape
+    padding: 15,
+
+    /**
+     * | Parameter   | Description | Type    | Required | Values      |
+     * | ----------- | ----------- | ------- | -------- | ----------- |
+     * | useMaxWidth | See notes   | boolean | 4        | true, false |
+     *
+     * **Notes:**
+     *
+     * When this flag is set the height and width is set to 100% and is then scaling with the
+     * available space if not the absolute space required is used.
+     *
+     * Default value: true
+     */
+    useMaxWidth: true,
+
+    /**
+     * | Parameter       | Description | Type    | Required | Values                  |
+     * | --------------- | ----------- | ------- | -------- | ----------------------- |
+     * | defaultRenderer | See notes   | boolean | 4        | dagre-d3, dagre-wrapper, elk |
+     *
+     * **Notes:**
+     *
+     * Decides which rendering engine that is to be used for the rendering. Legal values are:
+     * dagre-d3 dagre-wrapper - wrapper for dagre implemented in mermaid, elk for layout using
+     * elkjs
+     *
+     * Default value: 'dagre-wrapper'
+     */
+    defaultRenderer: 'dagre-wrapper',
+    /**
+     * | Parameter       | Description | Type    | Required | Values                  |
+     * | --------------- | ----------- | ------- | -------- | ----------------------- |
+     * | wrappingWidth   | See notes   | number  | 4        | width of nodes where text is wrapped |
+     *
+     * **Notes:**
+     *
+     * When using markdown strings the text ius wrapped automatically, this
+     * value sets the max width of a text before it continues on a new line.
+     * Default value: 'dagre-wrapper'
+     */
+    wrappingWidth: 200,
+  },
+
+  /** The object containing configurations specific for sequence diagrams */
+  sequence: {
+    hideUnusedParticipants: false,
+    /**
+     * | Parameter       | Description                  | Type    | Required | Values             |
+     * | --------------- | ---------------------------- | ------- | -------- | ------------------ |
+     * | activationWidth | Width of the activation rect | Integer | Required | Any Positive Value |
+     *
+     * **Notes:** Default value :10
+     */
+    activationWidth: 10,
+
+    /**
+     * | Parameter      | Description                                          | Type    | Required | Values             |
+     * | -------------- | ---------------------------------------------------- | ------- | -------- | ------------------ |
+     * | diagramMarginX | Margin to the right and left of the sequence diagram | Integer | Required | Any Positive Value |
+     *
+     * **Notes:** Default value: 50
+     */
+    diagramMarginX: 50,
+
+    /**
+     * | Parameter      | Description                                       | Type    | Required | Values             |
+     * | -------------- | ------------------------------------------------- | ------- | -------- | ------------------ |
+     * | diagramMarginY | Margin to the over and under the sequence diagram | Integer | Required | Any Positive Value |
+     *
+     * **Notes:** Default value: 10
+     */
+    diagramMarginY: 10,
+
+    /**
+     * | Parameter   | Description           | Type    | Required | Values             |
+     * | ----------- | --------------------- | ------- | -------- | ------------------ |
+     * | actorMargin | Margin between actors | Integer | Required | Any Positive Value |
+     *
+     * **Notes:** Default value: 50
+     */
+    actorMargin: 50,
+
+    /**
+     * | Parameter | Description          | Type    | Required | Values             |
+     * | --------- | -------------------- | ------- | -------- | ------------------ |
+     * | width     | Width of actor boxes | Integer | Required | Any Positive Value |
+     *
+     * **Notes:** Default value: 150
+     */
+    width: 150,
+
+    /**
+     * | Parameter | Description           | Type    | Required | Values             |
+     * | --------- | --------------------- | ------- | -------- | ------------------ |
+     * | height    | Height of actor boxes | Integer | Required | Any Positive Value |
+     *
+     * **Notes:** Default value: 65
+     */
+    height: 65,
+
+    /**
+     * | Parameter | Description              | Type    | Required | Values             |
+     * | --------- | ------------------------ | ------- | -------- | ------------------ |
+     * | boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value |
+     *
+     * **Notes:** Default value: 10
+     */
+    boxMargin: 10,
+
+    /**
+     * | Parameter     | Description                                  | Type    | Required | Values             |
+     * | ------------- | -------------------------------------------- | ------- | -------- | ------------------ |
+     * | boxTextMargin | Margin around the text in loop/alt/opt boxes | Integer | Required | Any Positive Value |
+     *
+     * **Notes:** Default value: 5
+     */
+    boxTextMargin: 5,
+
+    /**
+     * | Parameter  | Description         | Type    | Required | Values             |
+     * | ---------- | ------------------- | ------- | -------- | ------------------ |
+     * | noteMargin | margin around notes | Integer | Required | Any Positive Value |
+     *
+     * **Notes:** Default value: 10
+     */
+    noteMargin: 10,
+
+    /**
+     * | Parameter     | Description            | Type    | Required | Values             |
+     * | ------------- | ---------------------- | ------- | -------- | ------------------ |
+     * | messageMargin | Space between messages | Integer | Required | Any Positive Value |
+     *
+     * **Notes:** Default value: 35
+     */
+    messageMargin: 35,
+
+    /**
+     * | Parameter    | Description                 | Type   | Required | Values                    |
+     * | ------------ | --------------------------- | ------ | -------- | ------------------------- |
+     * | messageAlign | Multiline message alignment | string | Required | 'left', 'center', 'right' |
+     *
+     * **Notes:** Default value: 'center'
+     */
+    messageAlign: 'center',
+
+    /**
+     * | Parameter    | Description                 | Type    | Required | Values      |
+     * | ------------ | --------------------------- | ------- | -------- | ----------- |
+     * | mirrorActors | Mirror actors under diagram | boolean | Required | true, false |
+     *
+     * **Notes:** Default value: true
+     */
+    mirrorActors: true,
+
+    /**
+     * | Parameter  | Description                                                             | Type    | Required | Values      |
+     * | ---------- | ----------------------------------------------------------------------- | ------- | -------- | ----------- |
+     * | forceMenus | forces actor popup menus to always be visible (to support E2E testing). | Boolean | Required | True, False |
+     *
+     * **Notes:**
+     *
+     * Default value: false.
+     */
+    forceMenus: false,
+
+    /**
+     * | Parameter       | Description                                | Type    | Required | Values             |
+     * | --------------- | ------------------------------------------ | ------- | -------- | ------------------ |
+     * | bottomMarginAdj | Prolongs the edge of the diagram downwards | Integer | Required | Any Positive Value |
+     *
+     * **Notes:**
+     *
+     * Depending on css styling this might need adjustment.
+     *
+     * Default value: 1
+     */
+    bottomMarginAdj: 1,
+
+    /**
+     * | Parameter   | Description | Type    | Required | Values      |
+     * | ----------- | ----------- | ------- | -------- | ----------- |
+     * | useMaxWidth | See Notes   | boolean | Required | true, false |
+     *
+     * **Notes:** When this flag is set to true, the height and width is set to 100% and is then
+     * scaling with the available space. If set to false, the absolute space required is used.
+     *
+     * Default value: true
+     */
+    useMaxWidth: true,
+
+    /**
+     * | Parameter   | Description                          | Type    | Required | Values      |
+     * | ----------- | ------------------------------------ | ------- | -------- | ----------- |
+     * | rightAngles | display curve arrows as right angles | boolean | Required | true, false |
+     *
+     * **Notes:**
+     *
+     * This will display arrows that start and begin at the same node as right angles, rather than a
+     * curve
+     *
+     * Default value: false
+     */
+    rightAngles: false,
+
+    /**
+     * | Parameter           | Description                     | Type    | Required | Values      |
+     * | ------------------- | ------------------------------- | ------- | -------- | ----------- |
+     * | showSequenceNumbers | This will show the node numbers | boolean | Required | true, false |
+     *
+     * **Notes:** Default value: false
+     */
+    showSequenceNumbers: false,
+
+    /**
+     * | Parameter     | Description                                        | Type    | Required | Values             |
+     * | ------------- | -------------------------------------------------- | ------- | -------- | ------------------ |
+     * | actorFontSize | This sets the font size of the actor's description | Integer | Require  | Any Positive Value |
+     *
+     * **Notes:** **Default value 14**..
+     */
+    actorFontSize: 14,
+
+    /**
+     * | Parameter       | Description                                          | Type   | Required | Values                      |
+     * | --------------- | ---------------------------------------------------- | ------ | -------- | --------------------------- |
+     * | actorFontFamily | This sets the font family of the actor's description | string | Required | Any Possible CSS FontFamily |
+     *
+     * **Notes:** Default value: "'Open Sans", sans-serif'
+     */
+    actorFontFamily: '"Open Sans", sans-serif',
+
+    /**
+     * This sets the font weight of the actor's description
+     *
+     * **Notes:** Default value: 400.
+     */
+    actorFontWeight: 400,
+
+    /**
+     * | Parameter    | Description                                     | Type    | Required | Values             |
+     * | ------------ | ----------------------------------------------- | ------- | -------- | ------------------ |
+     * | noteFontSize | This sets the font size of actor-attached notes | Integer | Required | Any Positive Value |
+     *
+     * **Notes:** Default value: 14
+     */
+    noteFontSize: 14,
+
+    /**
+     * | Parameter      | Description                                        | Type   | Required | Values                      |
+     * | -------------- | -------------------------------------------------- | ------ | -------- | --------------------------- |
+     * | noteFontFamily | This sets the font family of actor-attached notes. | string | Required | Any Possible CSS FontFamily |
+     *
+     * **Notes:** Default value: ''"trebuchet ms", verdana, arial, sans-serif'
+     */
+    noteFontFamily: '"trebuchet ms", verdana, arial, sans-serif',
+
+    /**
+     * This sets the font weight of the note's description
+     *
+     * **Notes:** Default value: 400
+     */
+    noteFontWeight: 400,
+
+    /**
+     * | Parameter | Description                                          | Type   | Required | Values                    |
+     * | --------- | ---------------------------------------------------- | ------ | -------- | ------------------------- |
+     * | noteAlign | This sets the text alignment of actor-attached notes | string | required | 'left', 'center', 'right' |
+     *
+     * **Notes:** Default value: 'center'
+     */
+    noteAlign: 'center',
+
+    /**
+     * | Parameter       | Description                               | Type    | Required | Values              |
+     * | --------------- | ----------------------------------------- | ------- | -------- | ------------------- |
+     * | messageFontSize | This sets the font size of actor messages | Integer | Required | Any Positive Number |
+     *
+     * **Notes:** Default value: 16
+     */
+    messageFontSize: 16,
+
+    /**
+     * | Parameter         | Description                                 | Type   | Required | Values                      |
+     * | ----------------- | ------------------------------------------- | ------ | -------- | --------------------------- |
+     * | messageFontFamily | This sets the font family of actor messages | string | Required | Any Possible CSS FontFamily |
+     *
+     * **Notes:** Default value: '"trebuchet ms", verdana, arial, sans-serif'
+     */
+    messageFontFamily: '"trebuchet ms", verdana, arial, sans-serif',
+
+    /**
+     * This sets the font weight of the message's description
+     *
+     * **Notes:** Default value: 400.
+     */
+    messageFontWeight: 400,
+
+    /**
+     * This sets the auto-wrap state for the diagram
+     *
+     * **Notes:** Default value: false.
+     */
+    wrap: false,
+
+    /**
+     * This sets the auto-wrap padding for the diagram (sides only)
+     *
+     * **Notes:** Default value: 0.
+     */
+    wrapPadding: 10,
+
+    /**
+     * This sets the width of the loop-box (loop, alt, opt, par)
+     *
+     * **Notes:** Default value: 50.
+     */
+    labelBoxWidth: 50,
+
+    /**
+     * This sets the height of the loop-box (loop, alt, opt, par)
+     *
+     * **Notes:** Default value: 20.
+     */
+    labelBoxHeight: 20,
+
+    messageFont: function () {
+      return {
+        fontFamily: this.messageFontFamily,
+        fontSize: this.messageFontSize,
+        fontWeight: this.messageFontWeight,
+      };
+    },
+    noteFont: function () {
+      return {
+        fontFamily: this.noteFontFamily,
+        fontSize: this.noteFontSize,
+        fontWeight: this.noteFontWeight,
+      };
+    },
+    actorFont: function () {
+      return {
+        fontFamily: this.actorFontFamily,
+        fontSize: this.actorFontSize,
+        fontWeight: this.actorFontWeight,
+      };
+    },
+  },
+
+  /** The object containing configurations specific for gantt diagrams */
+  gantt: {
+    /**
+     * ### titleTopMargin
+     *
+     * | Parameter      | Description                                    | Type    | Required | Values             |
+     * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ |
+     * | titleTopMargin | Margin top for the text over the gantt diagram | Integer | Required | Any Positive Value |
+     *
+     * **Notes:** Default value: 25
+     */
+    titleTopMargin: 25,
+
+    /**
+     * | Parameter | Description                         | Type    | Required | Values             |
+     * | --------- | ----------------------------------- | ------- | -------- | ------------------ |
+     * | barHeight | The height of the bars in the graph | Integer | Required | Any Positive Value |
+     *
+     * **Notes:** Default value: 20
+     */
+    barHeight: 20,
+
+    /**
+     * | Parameter | Description                                                      | Type    | Required | Values             |
+     * | --------- | ---------------------------------------------------------------- | ------- | -------- | ------------------ |
+     * | barGap    | The margin between the different activities in the gantt diagram | Integer | Optional | Any Positive Value |
+     *
+     * **Notes:** Default value: 4
+     */
+    barGap: 4,
+
+    /**
+     * | Parameter  | Description                                                                | Type    | Required | Values             |
+     * | ---------- | -------------------------------------------------------------------------- | ------- | -------- | ------------------ |
+     * | topPadding | Margin between title and gantt diagram and between axis and gantt diagram. | Integer | Required | Any Positive Value |
+     *
+     * **Notes:** Default value: 50
+     */
+    topPadding: 50,
+
+    /**
+     * | Parameter    | Description                                                             | Type    | Required | Values             |
+     * | ------------ | ----------------------------------------------------------------------- | ------- | -------- | ------------------ |
+     * | rightPadding | The space allocated for the section name to the right of the activities | Integer | Required | Any Positive Value |
+     *
+     * **Notes:** Default value: 75
+     */
+    rightPadding: 75,
+
+    /**
+     * | Parameter   | Description                                                            | Type    | Required | Values             |
+     * | ----------- | ---------------------------------------------------------------------- | ------- | -------- | ------------------ |
+     * | leftPadding | The space allocated for the section name to the left of the activities | Integer | Required | Any Positive Value |
+     *
+     * **Notes:** Default value: 75
+     */
+    leftPadding: 75,
+
+    /**
+     * | Parameter            | Description                                  | Type    | Required | Values             |
+     * | -------------------- | -------------------------------------------- | ------- | -------- | ------------------ |
+     * | gridLineStartPadding | Vertical starting position of the grid lines | Integer | Required | Any Positive Value |
+     *
+     * **Notes:** Default value: 35
+     */
+    gridLineStartPadding: 35,
+
+    /**
+     * | Parameter | Description | Type    | Required | Values             |
+     * | --------- | ----------- | ------- | -------- | ------------------ |
+     * | fontSize  | Font size   | Integer | Required | Any Positive Value |
+     *
+     * **Notes:** Default value: 11
+     */
+    fontSize: 11,
+
+    /**
+     * | Parameter       | Description            | Type    | Required | Values             |
+     * | --------------- | ---------------------- | ------- | -------- | ------------------ |
+     * | sectionFontSize | Font size for sections | Integer | Required | Any Positive Value |
+     *
+     * **Notes:** Default value: 11
+     */
+    sectionFontSize: 11,
+
+    /**
+     * | Parameter           | Description                              | Type    | Required | Values             |
+     * | ------------------- | ---------------------------------------- | ------- | -------- | ------------------ |
+     * | numberSectionStyles | The number of alternating section styles | Integer | 4        | Any Positive Value |
+     *
+     * **Notes:** Default value: 4
+     */
+    numberSectionStyles: 4,
+
+    /**
+     * | Parameter   | Description               | Type   | Required | Values    |
+     * | ----------- | ------------------------- | ------ | -------- | --------- |
+     * | displayMode | Controls the display mode | string | 4        | 'compact' |
+     *
+     * **Notes**:
+     *
+     * - **compact**: Enables displaying multiple tasks on the same row.
+     */
+    displayMode: '',
+
+    /**
+     * | Parameter  | Description                  | Type | Required | Values           |
+     * | ---------- | ---------------------------- | ---- | -------- | ---------------- |
+     * | axisFormat | Date/time format of the axis | 3    | Required | Date in yy-mm-dd |
+     *
+     * **Notes:**
+     *
+     * This might need adjustment to match your locale and preferences
+     *
+     * Default value: '%Y-%m-%d'.
+     */
+    axisFormat: '%Y-%m-%d',
+
+    /**
+     * | Parameter    | Description | Type   | Required | Values  |
+     * | ------------ | ------------| ------ | -------- | ------- |
+     * | tickInterval | axis ticks  | string | Optional | string  |
+     *
+     * **Notes:**
+     *
+     * Pattern is /^([1-9][0-9]*)(minute|hour|day|week|month)$/
+     *
+     * Default value: undefined
+     */
+    tickInterval: undefined,
+    /**
+     * | Parameter   | Description | Type    | Required | Values      |
+     * | ----------- | ----------- | ------- | -------- | ----------- |
+     * | useMaxWidth | See notes   | boolean | 4        | true, false |
+     *
+     * **Notes:**
+     *
+     * When this flag is set the height and width is set to 100% and is then scaling with the
+     * available space if not the absolute space required is used.
+     *
+     * Default value: true
+     */
+    useMaxWidth: true,
+
+    /**
+     * | Parameter | Description | Type    | Required | Values      |
+     * | --------- | ----------- | ------- | -------- | ----------- |
+     * | topAxis   | See notes   | Boolean | 4        | True, False |
+     *
+     * **Notes:** when this flag is set date labels will be added to the top of the chart
+     *
+     * **Default value false**.
+     */
+    topAxis: false,
+
+    useWidth: undefined,
+  },
+
+  /** The object containing configurations specific for journey diagrams */
+  journey: {
+    /**
+     * | Parameter      | Description                                          | Type    | Required | Values             |
+     * | -------------- | ---------------------------------------------------- | ------- | -------- | ------------------ |
+     * | diagramMarginX | Margin to the right and left of the sequence diagram | Integer | Required | Any Positive Value |
+     *
+     * **Notes:** Default value: 50
+     */
+    diagramMarginX: 50,
+
+    /**
+     * | Parameter      | Description                                        | Type    | Required | Values             |
+     * | -------------- | -------------------------------------------------- | ------- | -------- | ------------------ |
+     * | diagramMarginY | Margin to the over and under the sequence diagram. | Integer | Required | Any Positive Value |
+     *
+     * **Notes:** Default value: 10
+     */
+    diagramMarginY: 10,
+
+    /**
+     * | Parameter   | Description           | Type    | Required | Values             |
+     * | ----------- | --------------------- | ------- | -------- | ------------------ |
+     * | actorMargin | Margin between actors | Integer | Required | Any Positive Value |
+     *
+     * **Notes:** Default value: 50
+     */
+    leftMargin: 150,
+
+    /**
+     * | Parameter | Description          | Type    | Required | Values             |
+     * | --------- | -------------------- | ------- | -------- | ------------------ |
+     * | width     | Width of actor boxes | Integer | Required | Any Positive Value |
+     *
+     * **Notes:** Default value: 150
+     */
+    width: 150,
+
+    /**
+     * | Parameter | Description           | Type    | Required | Values             |
+     * | --------- | --------------------- | ------- | -------- | ------------------ |
+     * | height    | Height of actor boxes | Integer | Required | Any Positive Value |
+     *
+     * **Notes:** Default value: 65
+     */
+    height: 50,
+
+    /**
+     * | Parameter | Description              | Type    | Required | Values             |
+     * | --------- | ------------------------ | ------- | -------- | ------------------ |
+     * | boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value |
+     *
+     * **Notes:** Default value: 10
+     */
+    boxMargin: 10,
+
+    /**
+     * | Parameter     | Description                                  | Type    | Required | Values             |
+     * | ------------- | -------------------------------------------- | ------- | -------- | ------------------ |
+     * | boxTextMargin | Margin around the text in loop/alt/opt boxes | Integer | Required | Any Positive Value |
+     *
+     * **Notes:** Default value: 5
+     */
+    boxTextMargin: 5,
+
+    /**
+     * | Parameter  | Description         | Type    | Required | Values             |
+     * | ---------- | ------------------- | ------- | -------- | ------------------ |
+     * | noteMargin | Margin around notes | Integer | Required | Any Positive Value |
+     *
+     * **Notes:** Default value: 10
+     */
+    noteMargin: 10,
+
+    /**
+     * | Parameter     | Description             | Type    | Required | Values             |
+     * | ------------- | ----------------------- | ------- | -------- | ------------------ |
+     * | messageMargin | Space between messages. | Integer | Required | Any Positive Value |
+     *
+     * **Notes:**
+     *
+     * Space between messages.
+     *
+     * Default value: 35
+     */
+    messageMargin: 35,
+
+    /**
+     * | Parameter    | Description                 | Type | Required | Values                    |
+     * | ------------ | --------------------------- | ---- | -------- | ------------------------- |
+     * | messageAlign | Multiline message alignment | 3    | 4        | 'left', 'center', 'right' |
+     *
+     * **Notes:** Default value: 'center'
+     */
+    messageAlign: 'center',
+
+    /**
+     * | Parameter       | Description                                | Type    | Required | Values             |
+     * | --------------- | ------------------------------------------ | ------- | -------- | ------------------ |
+     * | bottomMarginAdj | Prolongs the edge of the diagram downwards | Integer | 4        | Any Positive Value |
+     *
+     * **Notes:**
+     *
+     * Depending on css styling this might need adjustment.
+     *
+     * Default value: 1
+     */
+    bottomMarginAdj: 1,
+
+    /**
+     * | Parameter   | Description | Type    | Required | Values      |
+     * | ----------- | ----------- | ------- | -------- | ----------- |
+     * | useMaxWidth | See notes   | boolean | 4        | true, false |
+     *
+     * **Notes:**
+     *
+     * When this flag is set the height and width is set to 100% and is then scaling with the
+     * available space if not the absolute space required is used.
+     *
+     * Default value: true
+     */
+    useMaxWidth: true,
+
+    /**
+     * | Parameter   | Description                       | Type | Required | Values      |
+     * | ----------- | --------------------------------- | ---- | -------- | ----------- |
+     * | rightAngles | Curved Arrows become Right Angles | 3    | 4        | true, false |
+     *
+     * **Notes:**
+     *
+     * This will display arrows that start and begin at the same node as right angles, rather than a
+     * curves
+     *
+     * Default value: false
+     */
+    rightAngles: false,
+    taskFontSize: 14,
+    taskFontFamily: '"Open Sans", sans-serif',
+    taskMargin: 50,
+    // width of activation box
+    activationWidth: 10,
+
+    // text placement as: tspan | fo | old only text as before
+    textPlacement: 'fo',
+    actorColours: ['#8FBC8F', '#7CFC00', '#00FFFF', '#20B2AA', '#B0E0E6', '#FFFFE0'],
+
+    sectionFills: ['#191970', '#8B008B', '#4B0082', '#2F4F4F', '#800000', '#8B4513', '#00008B'],
+    sectionColours: ['#fff'],
+  },
+  /** The object containing configurations specific for timeline diagrams */
+  timeline: {
+    /**
+     * | Parameter      | Description                                          | Type    | Required | Values             |
+     * | -------------- | ---------------------------------------------------- | ------- | -------- | ------------------ |
+     * | diagramMarginX | Margin to the right and left of the sequence diagram | Integer | Required | Any Positive Value |
+     *
+     * **Notes:** Default value: 50
+     */
+    diagramMarginX: 50,
+
+    /**
+     * | Parameter      | Description                                        | Type    | Required | Values             |
+     * | -------------- | -------------------------------------------------- | ------- | -------- | ------------------ |
+     * | diagramMarginY | Margin to the over and under the sequence diagram. | Integer | Required | Any Positive Value |
+     *
+     * **Notes:** Default value: 10
+     */
+    diagramMarginY: 10,
+
+    /**
+     * | Parameter   | Description           | Type    | Required | Values             |
+     * | ----------- | --------------------- | ------- | -------- | ------------------ |
+     * | actorMargin | Margin between actors | Integer | Required | Any Positive Value |
+     *
+     * **Notes:** Default value: 50
+     */
+    leftMargin: 150,
+
+    /**
+     * | Parameter | Description          | Type    | Required | Values             |
+     * | --------- | -------------------- | ------- | -------- | ------------------ |
+     * | width     | Width of actor boxes | Integer | Required | Any Positive Value |
+     *
+     * **Notes:** Default value: 150
+     */
+    width: 150,
+
+    /**
+     * | Parameter | Description           | Type    | Required | Values             |
+     * | --------- | --------------------- | ------- | -------- | ------------------ |
+     * | height    | Height of actor boxes | Integer | Required | Any Positive Value |
+     *
+     * **Notes:** Default value: 65
+     */
+    height: 50,
+
+    /**
+     * | Parameter | Description              | Type    | Required | Values             |
+     * | --------- | ------------------------ | ------- | -------- | ------------------ |
+     * | boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value |
+     *
+     * **Notes:** Default value: 10
+     */
+    boxMargin: 10,
+
+    /**
+     * | Parameter     | Description                                  | Type    | Required | Values             |
+     * | ------------- | -------------------------------------------- | ------- | -------- | ------------------ |
+     * | boxTextMargin | Margin around the text in loop/alt/opt boxes | Integer | Required | Any Positive Value |
+     *
+     * **Notes:** Default value: 5
+     */
+    boxTextMargin: 5,
+
+    /**
+     * | Parameter  | Description         | Type    | Required | Values             |
+     * | ---------- | ------------------- | ------- | -------- | ------------------ |
+     * | noteMargin | Margin around notes | Integer | Required | Any Positive Value |
+     *
+     * **Notes:** Default value: 10
+     */
+    noteMargin: 10,
+
+    /**
+     * | Parameter     | Description             | Type    | Required | Values             |
+     * | ------------- | ----------------------- | ------- | -------- | ------------------ |
+     * | messageMargin | Space between messages. | Integer | Required | Any Positive Value |
+     *
+     * **Notes:**
+     *
+     * Space between messages.
+     *
+     * Default value: 35
+     */
+    messageMargin: 35,
+
+    /**
+     * | Parameter    | Description                 | Type | Required | Values                    |
+     * | ------------ | --------------------------- | ---- | -------- | ------------------------- |
+     * | messageAlign | Multiline message alignment | 3    | 4        | 'left', 'center', 'right' |
+     *
+     * **Notes:** Default value: 'center'
+     */
+    messageAlign: 'center',
+
+    /**
+     * | Parameter       | Description                                | Type    | Required | Values             |
+     * | --------------- | ------------------------------------------ | ------- | -------- | ------------------ |
+     * | bottomMarginAdj | Prolongs the edge of the diagram downwards | Integer | 4        | Any Positive Value |
+     *
+     * **Notes:**
+     *
+     * Depending on css styling this might need adjustment.
+     *
+     * Default value: 1
+     */
+    bottomMarginAdj: 1,
+
+    /**
+     * | Parameter   | Description | Type    | Required | Values      |
+     * | ----------- | ----------- | ------- | -------- | ----------- |
+     * | useMaxWidth | See notes   | boolean | 4        | true, false |
+     *
+     * **Notes:**
+     *
+     * When this flag is set the height and width is set to 100% and is then scaling with the
+     * available space if not the absolute space required is used.
+     *
+     * Default value: true
+     */
+    useMaxWidth: true,
+
+    /**
+     * | Parameter   | Description                       | Type | Required | Values      |
+     * | ----------- | --------------------------------- | ---- | -------- | ----------- |
+     * | rightAngles | Curved Arrows become Right Angles | 3    | 4        | true, false |
+     *
+     * **Notes:**
+     *
+     * This will display arrows that start and begin at the same node as right angles, rather than a
+     * curves
+     *
+     * Default value: false
+     */
+    rightAngles: false,
+    taskFontSize: 14,
+    taskFontFamily: '"Open Sans", sans-serif',
+    taskMargin: 50,
+    // width of activation box
+    activationWidth: 10,
+
+    // text placement as: tspan | fo | old only text as before
+    textPlacement: 'fo',
+    actorColours: ['#8FBC8F', '#7CFC00', '#00FFFF', '#20B2AA', '#B0E0E6', '#FFFFE0'],
+
+    sectionFills: ['#191970', '#8B008B', '#4B0082', '#2F4F4F', '#800000', '#8B4513', '#00008B'],
+    sectionColours: ['#fff'],
+    disableMulticolor: false,
+  },
+  class: {
+    /**
+     * ### titleTopMargin
+     *
+     * | Parameter      | Description                                    | Type    | Required | Values             |
+     * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ |
+     * | titleTopMargin | Margin top for the text over the class diagram | Integer | Required | Any Positive Value |
+     *
+     * **Notes:** Default value: 25
+     */
+    titleTopMargin: 25,
+    arrowMarkerAbsolute: false,
+    dividerMargin: 10,
+    padding: 5,
+    textHeight: 10,
+
+    /**
+     * | Parameter   | Description | Type    | Required | Values      |
+     * | ----------- | ----------- | ------- | -------- | ----------- |
+     * | useMaxWidth | See notes   | boolean | 4        | true, false |
+     *
+     * **Notes:**
+     *
+     * When this flag is set the height and width is set to 100% and is then scaling with the
+     * available space if not the absolute space required is used.
+     *
+     * Default value: true
+     */
+    useMaxWidth: true,
+    /**
+     * | Parameter       | Description | Type    | Required | Values                  |
+     * | --------------- | ----------- | ------- | -------- | ----------------------- |
+     * | defaultRenderer | See notes   | boolean | 4        | dagre-d3, dagre-wrapper |
+     *
+     * **Notes**:
+     *
+     * Decides which rendering engine that is to be used for the rendering. Legal values are:
+     * dagre-d3 dagre-wrapper - wrapper for dagre implemented in mermaid
+     *
+     * Default value: 'dagre-d3'
+     */
+    defaultRenderer: 'dagre-wrapper',
+  },
+  state: {
+    /**
+     * ### titleTopMargin
+     *
+     * | Parameter      | Description                                    | Type    | Required | Values             |
+     * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ |
+     * | titleTopMargin | Margin top for the text over the state diagram | Integer | Required | Any Positive Value |
+     *
+     * **Notes:** Default value: 25
+     */
+    titleTopMargin: 25,
+    dividerMargin: 10,
+    sizeUnit: 5,
+    padding: 8,
+    textHeight: 10,
+    titleShift: -15,
+    noteMargin: 10,
+    forkWidth: 70,
+    forkHeight: 7,
+    // Used
+    miniPadding: 2,
+    // Font size factor, this is used to guess the width of the edges labels before rendering by dagre
+    // layout. This might need updating if/when switching font
+    fontSizeFactor: 5.02,
+    fontSize: 24,
+    labelHeight: 16,
+    edgeLengthFactor: '20',
+    compositTitleSize: 35,
+    radius: 5,
+    /**
+     * | Parameter   | Description | Type    | Required | Values      |
+     * | ----------- | ----------- | ------- | -------- | ----------- |
+     * | useMaxWidth | See notes   | boolean | 4        | true, false |
+     *
+     * **Notes:**
+     *
+     * When this flag is set the height and width is set to 100% and is then scaling with the
+     * available space if not the absolute space required is used.
+     *
+     * Default value: true
+     */
+    useMaxWidth: true,
+    /**
+     * | Parameter       | Description | Type    | Required | Values                  |
+     * | --------------- | ----------- | ------- | -------- | ----------------------- |
+     * | defaultRenderer | See notes   | boolean | 4        | dagre-d3, dagre-wrapper |
+     *
+     * **Notes:**
+     *
+     * Decides which rendering engine that is to be used for the rendering. Legal values are:
+     * dagre-d3 dagre-wrapper - wrapper for dagre implemented in mermaid
+     *
+     * Default value: 'dagre-d3'
+     */
+    defaultRenderer: 'dagre-wrapper',
+  },
+
+  /** The object containing configurations specific for entity relationship diagrams */
+  er: {
+    /**
+     * ### titleTopMargin
+     *
+     * | Parameter      | Description                                    | Type    | Required | Values             |
+     * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ |
+     * | titleTopMargin | Margin top for the text over the diagram       | Integer | Required | Any Positive Value |
+     *
+     * **Notes:** Default value: 25
+     */
+    titleTopMargin: 25,
+
+    /**
+     * | Parameter      | Description                                     | Type    | Required | Values             |
+     * | -------------- | ----------------------------------------------- | ------- | -------- | ------------------ |
+     * | diagramPadding | Amount of padding around the diagram as a whole | Integer | Required | Any Positive Value |
+     *
+     * **Notes:**
+     *
+     * The amount of padding around the diagram as a whole so that embedded diagrams have margins,
+     * expressed in pixels
+     *
+     * Default value: 20
+     */
+    diagramPadding: 20,
+
+    /**
+     * | Parameter       | Description                              | Type   | Required | Values                 |
+     * | --------------- | ---------------------------------------- | ------ | -------- | ---------------------- |
+     * | layoutDirection | Directional bias for layout of entities. | string | Required | "TB", "BT", "LR", "RL" |
+     *
+     * **Notes:**
+     *
+     * 'TB' for Top-Bottom, 'BT'for Bottom-Top, 'LR' for Left-Right, or 'RL' for Right to Left.
+     *
+     * T = top, B = bottom, L = left, and R = right.
+     *
+     * Default value: 'TB'
+     */
+    layoutDirection: 'TB',
+
+    /**
+     * | Parameter      | Description                        | Type    | Required | Values             |
+     * | -------------- | ---------------------------------- | ------- | -------- | ------------------ |
+     * | minEntityWidth | The minimum width of an entity box | Integer | Required | Any Positive Value |
+     *
+     * **Notes:** Expressed in pixels. Default value: 100
+     */
+    minEntityWidth: 100,
+
+    /**
+     * | Parameter       | Description                         | Type    | Required | Values             |
+     * | --------------- | ----------------------------------- | ------- | -------- | ------------------ |
+     * | minEntityHeight | The minimum height of an entity box | Integer | 4        | Any Positive Value |
+     *
+     * **Notes:** Expressed in pixels Default value: 75
+     */
+    minEntityHeight: 75,
+
+    /**
+     * | Parameter     | Description                                                  | Type    | Required | Values             |
+     * | ------------- | ------------------------------------------------------------ | ------- | -------- | ------------------ |
+     * | entityPadding | Minimum internal padding between text in box and box borders | Integer | 4        | Any Positive Value |
+     *
+     * **Notes:**
+     *
+     * The minimum internal padding between text in an entity box and the enclosing box borders,
+     * expressed in pixels.
+     *
+     * Default value: 15
+     */
+    entityPadding: 15,
+
+    /**
+     * | Parameter | Description                         | Type   | Required | Values               |
+     * | --------- | ----------------------------------- | ------ | -------- | -------------------- |
+     * | stroke    | Stroke color of box edges and lines | string | 4        | Any recognized color |
+     *
+     * **Notes:** Default value: 'gray'
+     */
+    stroke: 'gray',
+
+    /**
+     * | Parameter | Description                | Type   | Required | Values               |
+     * | --------- | -------------------------- | ------ | -------- | -------------------- |
+     * | fill      | Fill color of entity boxes | string | 4        | Any recognized color |
+     *
+     * **Notes:** Default value: 'honeydew'
+     */
+    fill: 'honeydew',
+
+    /**
+     * | Parameter | Description         | Type    | Required | Values             |
+     * | --------- | ------------------- | ------- | -------- | ------------------ |
+     * | fontSize  | Font Size in pixels | Integer |          | Any Positive Value |
+     *
+     * **Notes:**
+     *
+     * Font size (expressed as an integer representing a number of pixels) Default value: 12
+     */
+    fontSize: 12,
+
+    /**
+     * | Parameter   | Description | Type    | Required | Values      |
+     * | ----------- | ----------- | ------- | -------- | ----------- |
+     * | useMaxWidth | See Notes   | boolean | Required | true, false |
+     *
+     * **Notes:**
+     *
+     * When this flag is set to true, the diagram width is locked to 100% and scaled based on
+     * available space. If set to false, the diagram reserves its absolute width.
+     *
+     * Default value: true
+     */
+    useMaxWidth: true,
+  },
+
+  /** The object containing configurations specific for pie diagrams */
+  pie: {
+    useWidth: undefined,
+
+    /**
+     * | Parameter   | Description | Type    | Required | Values      |
+     * | ----------- | ----------- | ------- | -------- | ----------- |
+     * | useMaxWidth | See Notes   | boolean | Required | true, false |
+     *
+     * **Notes:**
+     *
+     * When this flag is set to true, the diagram width is locked to 100% and scaled based on
+     * available space. If set to false, the diagram reserves its absolute width.
+     *
+     * Default value: true
+     */
+    useMaxWidth: true,
+
+    /**
+     * | Parameter    | Description                                                                      | Type    | Required | Values              |
+     * | ------------ | -------------------------------------------------------------------------------- | ------- | -------- | ------------------- |
+     * | textPosition | Axial position of slice's label from zero at the center to 1 at the outside edge | Number  | Optional | Decimal from 0 to 1 |
+     *
+     * **Notes:** Default value: 0.75
+     */
+    textPosition: 0.75,
+  },
+
+  quadrantChart: {
+    /**
+     * | Parameter       | Description                        | Type    | Required | Values              |
+     * | --------------- | ---------------------------------- | ------- | -------- | ------------------- |
+     * | chartWidth      | Width of the chart                 | number  | Optional | Any positive number |
+     *
+     * **Notes:**
+     * Default value: 500
+     */
+    chartWidth: 500,
+    /**
+     * | Parameter       | Description                        | Type    | Required | Values              |
+     * | --------------- | ---------------------------------- | ------- | -------- | ------------------- |
+     * | chartHeight     | Height of the chart                | number  | Optional | Any positive number |
+     *
+     * **Notes:**
+     * Default value: 500
+     */
+    chartHeight: 500,
+    /**
+     * | Parameter          | Description                        | Type    | Required | Values              |
+     * | ------------------ | ---------------------------------- | ------- | -------- | ------------------- |
+     * | titlePadding       | Chart title top and bottom padding | number  | Optional | Any positive number |
+     *
+     * **Notes:**
+     * Default value: 10
+     */
+    titlePadding: 10,
+    /**
+     * | Parameter          | Description                        | Type    | Required | Values              |
+     * | ------------------ | ---------------------------------- | ------- | -------- | ------------------- |
+     * | titleFontSize      | Chart title font size              | number  | Optional | Any positive number |
+     *
+     * **Notes:**
+     * Default value: 20
+     */
+    titleFontSize: 20,
+    /**
+     * | Parameter       | Description                        | Type    | Required | Values              |
+     * | --------------- | ---------------------------------- | ------- | -------- | ------------------- |
+     * | quadrantPadding | Padding around the quadrant square | number  | Optional | Any positive number |
+     *
+     * **Notes:**
+     * Default value: 5
+     */
+    quadrantPadding: 5,
+    /**
+     * | Parameter              | Description                                                                | Type    | Required | Values              |
+     * | ---------------------- | -------------------------------------------------------------------------- | ------- | -------- | ------------------- |
+     * | quadrantTextTopPadding | quadrant title padding from top if the quadrant is rendered on top         | number  | Optional | Any positive number |
+     *
+     * **Notes:**
+     * Default value: 5
+     */
+    quadrantTextTopPadding: 5,
+    /**
+     * | Parameter             | Description                        | Type    | Required | Values              |
+     * | ------------------    | ---------------------------------- | ------- | -------- | ------------------- |
+     * | quadrantLabelFontSize | quadrant title font size           | number  | Optional | Any positive number |
+     *
+     * **Notes:**
+     * Default value: 16
+     */
+    quadrantLabelFontSize: 16,
+    /**
+     * | Parameter                         | Description                                                   | Type    | Required | Values              |
+     * | --------------------------------- | ------------------------------------------------------------- | ------- | -------- | ------------------- |
+     * | quadrantInternalBorderStrokeWidth | stroke width of edges of the box that are inside the quadrant | number  | Optional | Any positive number |
+     *
+     * **Notes:**
+     * Default value: 1
+     */
+    quadrantInternalBorderStrokeWidth: 1,
+    /**
+     * | Parameter                         | Description                                                    | Type    | Required | Values              |
+     * | --------------------------------- | -------------------------------------------------------------- | ------- | -------- | ------------------- |
+     * | quadrantExternalBorderStrokeWidth | stroke width of edges of the box that are outside the quadrant | number  | Optional | Any positive number |
+     *
+     * **Notes:**
+     * Default value: 2
+     */
+    quadrantExternalBorderStrokeWidth: 2,
+    /**
+     * | Parameter         | Description                        | Type    | Required | Values              |
+     * | ---------------   | ---------------------------------- | ------- | -------- | ------------------- |
+     * | xAxisLabelPadding | Padding around x-axis labels       | number  | Optional | Any positive number |
+     *
+     * **Notes:**
+     * Default value: 5
+     */
+    xAxisLabelPadding: 5,
+    /**
+     * | Parameter          | Description                        | Type    | Required | Values              |
+     * | ------------------ | ---------------------------------- | ------- | -------- | ------------------- |
+     * | xAxisLabelFontSize | x-axis label font size             | number  | Optional | Any positive number |
+     *
+     * **Notes:**
+     * Default value: 16
+     */
+    xAxisLabelFontSize: 16,
+    /**
+     * | Parameter     | Description                     | Type    | Required | Values              |
+     * | ------------- | ------------------------------- | ------- | -------- | ------------------- |
+     * | xAxisPosition | position of x-axis labels       | string  | Optional | 'top' or 'bottom'   |
+     *
+     * **Notes:**
+     * Default value: top
+     */
+    xAxisPosition: 'top',
+    /**
+     * | Parameter         | Description                        | Type    | Required | Values              |
+     * | ---------------   | ---------------------------------- | ------- | -------- | ------------------- |
+     * | yAxisLabelPadding | Padding around y-axis labels       | number  | Optional | Any positive number |
+     *
+     * **Notes:**
+     * Default value: 5
+     */
+    yAxisLabelPadding: 5,
+    /**
+     * | Parameter          | Description                        | Type    | Required | Values              |
+     * | ------------------ | ---------------------------------- | ------- | -------- | ------------------- |
+     * | yAxisLabelFontSize | y-axis label font size             | number  | Optional | Any positive number |
+     *
+     * **Notes:**
+     * Default value: 16
+     */
+    yAxisLabelFontSize: 16,
+    /**
+     * | Parameter     | Description                     | Type    | Required | Values              |
+     * | ------------- | ------------------------------- | ------- | -------- | ------------------- |
+     * | yAxisPosition | position of y-axis labels       | string  | Optional | 'left' or 'right'   |
+     *
+     * **Notes:**
+     * Default value: left
+     */
+    yAxisPosition: 'left',
+    /**
+     * | Parameter              | Description                            | Type    | Required | Values              |
+     * | ---------------------- | -------------------------------------- | ------- | -------- | ------------------- |
+     * | pointTextPadding       | padding between point and point label  | number  | Optional | Any positive number |
+     *
+     * **Notes:**
+     * Default value: 5
+     */
+    pointTextPadding: 5,
+    /**
+     * | Parameter              | Description            | Type    | Required | Values              |
+     * | ---------------------- | ---------------------- | ------- | -------- | ------------------- |
+     * | pointTextPadding       | point title font size  | number  | Optional | Any positive number |
+     *
+     * **Notes:**
+     * Default value: 12
+     */
+    pointLabelFontSize: 12,
+    /**
+     * | Parameter     | Description                     | Type    | Required | Values              |
+     * | ------------- | ------------------------------- | ------- | -------- | ------------------- |
+     * | pointRadius   | radius of the point to be drawn | number  | Optional | Any positive number |
+     *
+     * **Notes:**
+     * Default value: 5
+     */
+    pointRadius: 5,
+    /**
+     * | Parameter   | Description | Type    | Required | Values      |
+     * | ----------- | ----------- | ------- | -------- | ----------- |
+     * | useMaxWidth | See Notes   | boolean | Required | true, false |
+     *
+     * **Notes:**
+     *
+     * When this flag is set to true, the diagram width is locked to 100% and scaled based on
+     * available space. If set to false, the diagram reserves its absolute width.
+     *
+     * Default value: true
+     */
+    useMaxWidth: true,
+  },
+
+  /** The object containing configurations specific for req diagrams */
+  requirement: {
+    useWidth: undefined,
+
+    /**
+     * | Parameter   | Description | Type    | Required | Values      |
+     * | ----------- | ----------- | ------- | -------- | ----------- |
+     * | useMaxWidth | See Notes   | boolean | Required | true, false |
+     *
+     * **Notes:**
+     *
+     * When this flag is set to true, the diagram width is locked to 100% and scaled based on
+     * available space. If set to false, the diagram reserves its absolute width.
+     *
+     * Default value: true
+     */
+    useMaxWidth: true,
+
+    rect_fill: '#f9f9f9',
+    text_color: '#333',
+    rect_border_size: '0.5px',
+    rect_border_color: '#bbb',
+    rect_min_width: 200,
+    rect_min_height: 200,
+    fontSize: 14,
+    rect_padding: 10,
+    line_height: 20,
+  },
+  gitGraph: {
+    /**
+     * ### titleTopMargin
+     *
+     * | Parameter      | Description                                    | Type    | Required | Values             |
+     * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ |
+     * | titleTopMargin | Margin top for the text over the Git diagram   | Integer | Required | Any Positive Value |
+     *
+     * **Notes:** Default value: 25
+     */
+    titleTopMargin: 25,
+    diagramPadding: 8,
+    nodeLabel: {
+      width: 75,
+      height: 100,
+      x: -25,
+      y: 0,
+    },
+    mainBranchName: 'main',
+    mainBranchOrder: 0,
+    showCommitLabel: true,
+    showBranches: true,
+    rotateCommitLabel: true,
+  },
+
+  /** The object containing configurations specific for c4 diagrams */
+  c4: {
+    useWidth: undefined,
+
+    /**
+     * | Parameter      | Description                                    | Type    | Required | Values             |
+     * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ |
+     * | diagramMarginX | Margin to the right and left of the c4 diagram | Integer | Required | Any Positive Value |
+     *
+     * **Notes:** Default value: 50
+     */
+    diagramMarginX: 50,
+
+    /**
+     * | Parameter      | Description                                 | Type    | Required | Values             |
+     * | -------------- | ------------------------------------------- | ------- | -------- | ------------------ |
+     * | diagramMarginY | Margin to the over and under the c4 diagram | Integer | Required | Any Positive Value |
+     *
+     * **Notes:** Default value: 10
+     */
+    diagramMarginY: 10,
+
+    /**
+     * | Parameter     | Description           | Type    | Required | Values             |
+     * | ------------- | --------------------- | ------- | -------- | ------------------ |
+     * | c4ShapeMargin | Margin between shapes | Integer | Required | Any Positive Value |
+     *
+     * **Notes:** Default value: 50
+     */
+    c4ShapeMargin: 50,
+
+    /**
+     * | Parameter      | Description            | Type    | Required | Values             |
+     * | -------------- | ---------------------- | ------- | -------- | ------------------ |
+     * | c4ShapePadding | Padding between shapes | Integer | Required | Any Positive Value |
+     *
+     * **Notes:** Default value: 20
+     */
+    c4ShapePadding: 20,
+
+    /**
+     * | Parameter | Description           | Type    | Required | Values             |
+     * | --------- | --------------------- | ------- | -------- | ------------------ |
+     * | width     | Width of person boxes | Integer | Required | Any Positive Value |
+     *
+     * **Notes:** Default value: 216
+     */
+    width: 216,
+
+    /**
+     * | Parameter | Description            | Type    | Required | Values             |
+     * | --------- | ---------------------- | ------- | -------- | ------------------ |
+     * | height    | Height of person boxes | Integer | Required | Any Positive Value |
+     *
+     * **Notes:** Default value: 60
+     */
+    height: 60,
+
+    /**
+     * | Parameter | Description         | Type    | Required | Values             |
+     * | --------- | ------------------- | ------- | -------- | ------------------ |
+     * | boxMargin | Margin around boxes | Integer | Required | Any Positive Value |
+     *
+     * **Notes:** Default value: 10
+     */
+    boxMargin: 10,
+
+    /**
+     * | Parameter   | Description | Type    | Required | Values      |
+     * | ----------- | ----------- | ------- | -------- | ----------- |
+     * | useMaxWidth | See Notes   | boolean | Required | true, false |
+     *
+     * **Notes:** When this flag is set to true, the height and width is set to 100% and is then
+     * scaling with the available space. If set to false, the absolute space required is used.
+     *
+     * Default value: true
+     */
+    useMaxWidth: true,
+
+    /**
+     * | Parameter    | Description | Type    | Required | Values             |
+     * | ------------ | ----------- | ------- | -------- | ------------------ |
+     * | c4ShapeInRow | See Notes   | Integer | Required | Any Positive Value |
+     *
+     * **Notes:** How many shapes to place in each row.
+     *
+     * Default value: 4
+     */
+    c4ShapeInRow: 4,
+
+    nextLinePaddingX: 0,
+
+    /**
+     * | Parameter       | Description | Type    | Required | Values             |
+     * | --------------- | ----------- | ------- | -------- | ------------------ |
+     * | c4BoundaryInRow | See Notes   | Integer | Required | Any Positive Value |
+     *
+     * **Notes:** How many boundaries to place in each row.
+     *
+     * Default value: 2
+     */
+    c4BoundaryInRow: 2,
+
+    /**
+     * This sets the font size of Person shape for the diagram
+     *
+     * **Notes:** Default value: 14.
+     */
+    personFontSize: 14,
+    /**
+     * This sets the font family of Person shape for the diagram
+     *
+     * **Notes:** Default value: "Open Sans", sans-serif.
+     */
+    personFontFamily: '"Open Sans", sans-serif',
+    /**
+     * This sets the font weight of Person shape for the diagram
+     *
+     * **Notes:** Default value: normal.
+     */
+    personFontWeight: 'normal',
+
+    /**
+     * This sets the font size of External Person shape for the diagram
+     *
+     * **Notes:** Default value: 14.
+     */
+    external_personFontSize: 14,
+    /**
+     * This sets the font family of External Person shape for the diagram
+     *
+     * **Notes:** Default value: "Open Sans", sans-serif.
+     */
+    external_personFontFamily: '"Open Sans", sans-serif',
+    /**
+     * This sets the font weight of External Person shape for the diagram
+     *
+     * **Notes:** Default value: normal.
+     */
+    external_personFontWeight: 'normal',
+
+    /**
+     * This sets the font size of System shape for the diagram
+     *
+     * **Notes:** Default value: 14.
+     */
+    systemFontSize: 14,
+    /**
+     * This sets the font family of System shape for the diagram
+     *
+     * **Notes:** Default value: "Open Sans", sans-serif.
+     */
+    systemFontFamily: '"Open Sans", sans-serif',
+    /**
+     * This sets the font weight of System shape for the diagram
+     *
+     * **Notes:** Default value: normal.
+     */
+    systemFontWeight: 'normal',
+
+    /**
+     * This sets the font size of External System shape for the diagram
+     *
+     * **Notes:** Default value: 14.
+     */
+    external_systemFontSize: 14,
+    /**
+     * This sets the font family of External System shape for the diagram
+     *
+     * **Notes:** Default value: "Open Sans", sans-serif.
+     */
+    external_systemFontFamily: '"Open Sans", sans-serif',
+    /**
+     * This sets the font weight of External System shape for the diagram
+     *
+     * **Notes:** Default value: normal.
+     */
+    external_systemFontWeight: 'normal',
+
+    /**
+     * This sets the font size of System DB shape for the diagram
+     *
+     * **Notes:** Default value: 14.
+     */
+    system_dbFontSize: 14,
+    /**
+     * This sets the font family of System DB shape for the diagram
+     *
+     * **Notes:** Default value: "Open Sans", sans-serif.
+     */
+    system_dbFontFamily: '"Open Sans", sans-serif',
+    /**
+     * This sets the font weight of System DB shape for the diagram
+     *
+     * **Notes:** Default value: normal.
+     */
+    system_dbFontWeight: 'normal',
+
+    /**
+     * This sets the font size of External System DB shape for the diagram
+     *
+     * **Notes:** Default value: 14.
+     */
+    external_system_dbFontSize: 14,
+    /**
+     * This sets the font family of External System DB shape for the diagram
+     *
+     * **Notes:** Default value: "Open Sans", sans-serif.
+     */
+    external_system_dbFontFamily: '"Open Sans", sans-serif',
+    /**
+     * This sets the font weight of External System DB shape for the diagram
+     *
+     * **Notes:** Default value: normal.
+     */
+    external_system_dbFontWeight: 'normal',
+
+    /**
+     * This sets the font size of System Queue shape for the diagram
+     *
+     * **Notes:** Default value: 14.
+     */
+    system_queueFontSize: 14,
+    /**
+     * This sets the font family of System Queue shape for the diagram
+     *
+     * **Notes:** Default value: "Open Sans", sans-serif.
+     */
+    system_queueFontFamily: '"Open Sans", sans-serif',
+    /**
+     * This sets the font weight of System Queue shape for the diagram
+     *
+     * **Notes:** Default value: normal.
+     */
+    system_queueFontWeight: 'normal',
+
+    /**
+     * This sets the font size of External System Queue shape for the diagram
+     *
+     * **Notes:** Default value: 14.
+     */
+    external_system_queueFontSize: 14,
+    /**
+     * This sets the font family of External System Queue shape for the diagram
+     *
+     * **Notes:** Default value: "Open Sans", sans-serif.
+     */
+    external_system_queueFontFamily: '"Open Sans", sans-serif',
+    /**
+     * This sets the font weight of External System Queue shape for the diagram
+     *
+     * **Notes:** Default value: normal.
+     */
+    external_system_queueFontWeight: 'normal',
+
+    /**
+     * This sets the font size of Boundary shape for the diagram
+     *
+     * **Notes:** Default value: 14.
+     */
+    boundaryFontSize: 14,
+    /**
+     * This sets the font family of Boundary shape for the diagram
+     *
+     * **Notes:** Default value: "Open Sans", sans-serif.
+     */
+    boundaryFontFamily: '"Open Sans", sans-serif',
+    /**
+     * This sets the font weight of Boundary shape for the diagram
+     *
+     * **Notes:** Default value: normal.
+     */
+    boundaryFontWeight: 'normal',
+
+    /**
+     * This sets the font size of Message shape for the diagram
+     *
+     * **Notes:** Default value: 12.
+     */
+    messageFontSize: 12,
+    /**
+     * This sets the font family of Message shape for the diagram
+     *
+     * **Notes:** Default value: "Open Sans", sans-serif.
+     */
+    messageFontFamily: '"Open Sans", sans-serif',
+    /**
+     * This sets the font weight of Message shape for the diagram
+     *
+     * **Notes:** Default value: normal.
+     */
+    messageFontWeight: 'normal',
+
+    /**
+     * This sets the font size of Container shape for the diagram
+     *
+     * **Notes:** Default value: 14.
+     */
+    containerFontSize: 14,
+    /**
+     * This sets the font family of Container shape for the diagram
+     *
+     * **Notes:** Default value: "Open Sans", sans-serif.
+     */
+    containerFontFamily: '"Open Sans", sans-serif',
+    /**
+     * This sets the font weight of Container shape for the diagram
+     *
+     * **Notes:** Default value: normal.
+     */
+    containerFontWeight: 'normal',
+
+    /**
+     * This sets the font size of External Container shape for the diagram
+     *
+     * **Notes:** Default value: 14.
+     */
+    external_containerFontSize: 14,
+    /**
+     * This sets the font family of External Container shape for the diagram
+     *
+     * **Notes:** Default value: "Open Sans", sans-serif.
+     */
+    external_containerFontFamily: '"Open Sans", sans-serif',
+    /**
+     * This sets the font weight of External Container shape for the diagram
+     *
+     * **Notes:** Default value: normal.
+     */
+    external_containerFontWeight: 'normal',
+
+    /**
+     * This sets the font size of Container DB shape for the diagram
+     *
+     * **Notes:** Default value: 14.
+     */
+    container_dbFontSize: 14,
+    /**
+     * This sets the font family of Container DB shape for the diagram
+     *
+     * **Notes:** Default value: "Open Sans", sans-serif.
+     */
+    container_dbFontFamily: '"Open Sans", sans-serif',
+    /**
+     * This sets the font weight of Container DB shape for the diagram
+     *
+     * **Notes:** Default value: normal.
+     */
+    container_dbFontWeight: 'normal',
+
+    /**
+     * This sets the font size of External Container DB shape for the diagram
+     *
+     * **Notes:** Default value: 14.
+     */
+    external_container_dbFontSize: 14,
+    /**
+     * This sets the font family of External Container DB shape for the diagram
+     *
+     * **Notes:** Default value: "Open Sans", sans-serif.
+     */
+    external_container_dbFontFamily: '"Open Sans", sans-serif',
+    /**
+     * This sets the font weight of External Container DB shape for the diagram
+     *
+     * **Notes:** Default value: normal.
+     */
+    external_container_dbFontWeight: 'normal',
+
+    /**
+     * This sets the font size of Container Queue shape for the diagram
+     *
+     * **Notes:** Default value: 14.
+     */
+    container_queueFontSize: 14,
+    /**
+     * This sets the font family of Container Queue shape for the diagram
+     *
+     * **Notes:** Default value: "Open Sans", sans-serif.
+     */
+    container_queueFontFamily: '"Open Sans", sans-serif',
+    /**
+     * This sets the font weight of Container Queue shape for the diagram
+     *
+     * **Notes:** Default value: normal.
+     */
+    container_queueFontWeight: 'normal',
+
+    /**
+     * This sets the font size of External Container Queue shape for the diagram
+     *
+     * **Notes:** Default value: 14.
+     */
+    external_container_queueFontSize: 14,
+    /**
+     * This sets the font family of External Container Queue shape for the diagram
+     *
+     * **Notes:** Default value: "Open Sans", sans-serif.
+     */
+    external_container_queueFontFamily: '"Open Sans", sans-serif',
+    /**
+     * This sets the font weight of External Container Queue shape for the diagram
+     *
+     * **Notes:** Default value: normal.
+     */
+    external_container_queueFontWeight: 'normal',
+
+    /**
+     * This sets the font size of Component shape for the diagram
+     *
+     * **Notes:** Default value: 14.
+     */
+    componentFontSize: 14,
+    /**
+     * This sets the font family of Component shape for the diagram
+     *
+     * **Notes:** Default value: "Open Sans", sans-serif.
+     */
+    componentFontFamily: '"Open Sans", sans-serif',
+    /**
+     * This sets the font weight of Component shape for the diagram
+     *
+     * **Notes:** Default value: normal.
+     */
+    componentFontWeight: 'normal',
+
+    /**
+     * This sets the font size of External Component shape for the diagram
+     *
+     * **Notes:** Default value: 14.
+     */
+    external_componentFontSize: 14,
+    /**
+     * This sets the font family of External Component shape for the diagram
+     *
+     * **Notes:** Default value: "Open Sans", sans-serif.
+     */
+    external_componentFontFamily: '"Open Sans", sans-serif',
+    /**
+     * This sets the font weight of External Component shape for the diagram
+     *
+     * **Notes:** Default value: normal.
+     */
+    external_componentFontWeight: 'normal',
+
+    /**
+     * This sets the font size of Component DB shape for the diagram
+     *
+     * **Notes:** Default value: 14.
+     */
+    component_dbFontSize: 14,
+    /**
+     * This sets the font family of Component DB shape for the diagram
+     *
+     * **Notes:** Default value: "Open Sans", sans-serif.
+     */
+    component_dbFontFamily: '"Open Sans", sans-serif',
+    /**
+     * This sets the font weight of Component DB shape for the diagram
+     *
+     * **Notes:** Default value: normal.
+     */
+    component_dbFontWeight: 'normal',
+
+    /**
+     * This sets the font size of External Component DB shape for the diagram
+     *
+     * **Notes:** Default value: 14.
+     */
+    external_component_dbFontSize: 14,
+    /**
+     * This sets the font family of External Component DB shape for the diagram
+     *
+     * **Notes:** Default value: "Open Sans", sans-serif.
+     */
+    external_component_dbFontFamily: '"Open Sans", sans-serif',
+    /**
+     * This sets the font weight of External Component DB shape for the diagram
+     *
+     * **Notes:** Default value: normal.
+     */
+    external_component_dbFontWeight: 'normal',
+
+    /**
+     * This sets the font size of Component Queue shape for the diagram
+     *
+     * **Notes:** Default value: 14.
+     */
+    component_queueFontSize: 14,
+    /**
+     * This sets the font family of Component Queue shape for the diagram
+     *
+     * **Notes:** Default value: "Open Sans", sans-serif.
+     */
+    component_queueFontFamily: '"Open Sans", sans-serif',
+    /**
+     * This sets the font weight of Component Queue shape for the diagram
+     *
+     * **Notes:** Default value: normal.
+     */
+    component_queueFontWeight: 'normal',
+
+    /**
+     * This sets the font size of External Component Queue shape for the diagram
+     *
+     * **Notes:** Default value: 14.
+     */
+    external_component_queueFontSize: 14,
+    /**
+     * This sets the font family of External Component Queue shape for the diagram
+     *
+     * **Notes:** Default value: "Open Sans", sans-serif.
+     */
+    external_component_queueFontFamily: '"Open Sans", sans-serif',
+    /**
+     * This sets the font weight of External Component Queue shape for the diagram
+     *
+     * **Notes:** Default value: normal.
+     */
+    external_component_queueFontWeight: 'normal',
+
+    /**
+     * This sets the auto-wrap state for the diagram
+     *
+     * **Notes:** Default value: true.
+     */
+    wrap: true,
+
+    /**
+     * This sets the auto-wrap padding for the diagram (sides only)
+     *
+     * **Notes:** Default value: 0.
+     */
+    wrapPadding: 10,
+
+    personFont: function () {
+      return {
+        fontFamily: this.personFontFamily,
+        fontSize: this.personFontSize,
+        fontWeight: this.personFontWeight,
+      };
+    },
+
+    external_personFont: function () {
+      return {
+        fontFamily: this.external_personFontFamily,
+        fontSize: this.external_personFontSize,
+        fontWeight: this.external_personFontWeight,
+      };
+    },
+
+    systemFont: function () {
+      return {
+        fontFamily: this.systemFontFamily,
+        fontSize: this.systemFontSize,
+        fontWeight: this.systemFontWeight,
+      };
+    },
+
+    external_systemFont: function () {
+      return {
+        fontFamily: this.external_systemFontFamily,
+        fontSize: this.external_systemFontSize,
+        fontWeight: this.external_systemFontWeight,
+      };
+    },
+
+    system_dbFont: function () {
+      return {
+        fontFamily: this.system_dbFontFamily,
+        fontSize: this.system_dbFontSize,
+        fontWeight: this.system_dbFontWeight,
+      };
+    },
+
+    external_system_dbFont: function () {
+      return {
+        fontFamily: this.external_system_dbFontFamily,
+        fontSize: this.external_system_dbFontSize,
+        fontWeight: this.external_system_dbFontWeight,
+      };
+    },
+
+    system_queueFont: function () {
+      return {
+        fontFamily: this.system_queueFontFamily,
+        fontSize: this.system_queueFontSize,
+        fontWeight: this.system_queueFontWeight,
+      };
+    },
+
+    external_system_queueFont: function () {
+      return {
+        fontFamily: this.external_system_queueFontFamily,
+        fontSize: this.external_system_queueFontSize,
+        fontWeight: this.external_system_queueFontWeight,
+      };
+    },
+
+    containerFont: function () {
+      return {
+        fontFamily: this.containerFontFamily,
+        fontSize: this.containerFontSize,
+        fontWeight: this.containerFontWeight,
+      };
+    },
+
+    external_containerFont: function () {
+      return {
+        fontFamily: this.external_containerFontFamily,
+        fontSize: this.external_containerFontSize,
+        fontWeight: this.external_containerFontWeight,
+      };
+    },
+
+    container_dbFont: function () {
+      return {
+        fontFamily: this.container_dbFontFamily,
+        fontSize: this.container_dbFontSize,
+        fontWeight: this.container_dbFontWeight,
+      };
+    },
+
+    external_container_dbFont: function () {
+      return {
+        fontFamily: this.external_container_dbFontFamily,
+        fontSize: this.external_container_dbFontSize,
+        fontWeight: this.external_container_dbFontWeight,
+      };
+    },
+
+    container_queueFont: function () {
+      return {
+        fontFamily: this.container_queueFontFamily,
+        fontSize: this.container_queueFontSize,
+        fontWeight: this.container_queueFontWeight,
+      };
+    },
+
+    external_container_queueFont: function () {
+      return {
+        fontFamily: this.external_container_queueFontFamily,
+        fontSize: this.external_container_queueFontSize,
+        fontWeight: this.external_container_queueFontWeight,
+      };
+    },
+
+    componentFont: function () {
+      return {
+        fontFamily: this.componentFontFamily,
+        fontSize: this.componentFontSize,
+        fontWeight: this.componentFontWeight,
+      };
+    },
+
+    external_componentFont: function () {
+      return {
+        fontFamily: this.external_componentFontFamily,
+        fontSize: this.external_componentFontSize,
+        fontWeight: this.external_componentFontWeight,
+      };
+    },
+
+    component_dbFont: function () {
+      return {
+        fontFamily: this.component_dbFontFamily,
+        fontSize: this.component_dbFontSize,
+        fontWeight: this.component_dbFontWeight,
+      };
+    },
+
+    external_component_dbFont: function () {
+      return {
+        fontFamily: this.external_component_dbFontFamily,
+        fontSize: this.external_component_dbFontSize,
+        fontWeight: this.external_component_dbFontWeight,
+      };
+    },
+
+    component_queueFont: function () {
+      return {
+        fontFamily: this.component_queueFontFamily,
+        fontSize: this.component_queueFontSize,
+        fontWeight: this.component_queueFontWeight,
+      };
+    },
+
+    external_component_queueFont: function () {
+      return {
+        fontFamily: this.external_component_queueFontFamily,
+        fontSize: this.external_component_queueFontSize,
+        fontWeight: this.external_component_queueFontWeight,
+      };
+    },
+
+    boundaryFont: function () {
+      return {
+        fontFamily: this.boundaryFontFamily,
+        fontSize: this.boundaryFontSize,
+        fontWeight: this.boundaryFontWeight,
+      };
+    },
+
+    messageFont: function () {
+      return {
+        fontFamily: this.messageFontFamily,
+        fontSize: this.messageFontSize,
+        fontWeight: this.messageFontWeight,
+      };
+    },
+
+    // ' Colors
+    // ' ##################################
+    person_bg_color: '#08427B',
+    person_border_color: '#073B6F',
+    external_person_bg_color: '#686868',
+    external_person_border_color: '#8A8A8A',
+    system_bg_color: '#1168BD',
+    system_border_color: '#3C7FC0',
+    system_db_bg_color: '#1168BD',
+    system_db_border_color: '#3C7FC0',
+    system_queue_bg_color: '#1168BD',
+    system_queue_border_color: '#3C7FC0',
+    external_system_bg_color: '#999999',
+    external_system_border_color: '#8A8A8A',
+    external_system_db_bg_color: '#999999',
+    external_system_db_border_color: '#8A8A8A',
+    external_system_queue_bg_color: '#999999',
+    external_system_queue_border_color: '#8A8A8A',
+    container_bg_color: '#438DD5',
+    container_border_color: '#3C7FC0',
+    container_db_bg_color: '#438DD5',
+    container_db_border_color: '#3C7FC0',
+    container_queue_bg_color: '#438DD5',
+    container_queue_border_color: '#3C7FC0',
+    external_container_bg_color: '#B3B3B3',
+    external_container_border_color: '#A6A6A6',
+    external_container_db_bg_color: '#B3B3B3',
+    external_container_db_border_color: '#A6A6A6',
+    external_container_queue_bg_color: '#B3B3B3',
+    external_container_queue_border_color: '#A6A6A6',
+    component_bg_color: '#85BBF0',
+    component_border_color: '#78A8D8',
+    component_db_bg_color: '#85BBF0',
+    component_db_border_color: '#78A8D8',
+    component_queue_bg_color: '#85BBF0',
+    component_queue_border_color: '#78A8D8',
+    external_component_bg_color: '#CCCCCC',
+    external_component_border_color: '#BFBFBF',
+    external_component_db_bg_color: '#CCCCCC',
+    external_component_db_border_color: '#BFBFBF',
+    external_component_queue_bg_color: '#CCCCCC',
+    external_component_queue_border_color: '#BFBFBF',
+  },
+  mindmap: {
+    useMaxWidth: true,
+    padding: 10,
+    maxNodeWidth: 200,
+  },
+  sankey: {
+    width: 600,
+    height: 400,
+    linkColor: 'gradient',
+    nodeAlignment: 'justify',
+    useMaxWidth: false,
+  },
+  fontSize: 16,
+};
+
+if (config.class) {
+  config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
+}
+if (config.gitGraph) {
+  config.gitGraph.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
+}
+
+const keyify = (obj: any, prefix = ''): string[] =>
+  Object.keys(obj).reduce((res: string[], el): string[] => {
+    if (Array.isArray(obj[el])) {
+      return res;
+    } else if (typeof obj[el] === 'object' && obj[el] !== null) {
+      return [...res, prefix + el, ...keyify(obj[el], '')];
+    }
+    return [...res, prefix + el];
+  }, []);
+
+export const configKeys: string[] = keyify(config, '');
+export default config;

From 70a5a1327364d0e41bc600b2a5f79223b8203df0 Mon Sep 17 00:00:00 2001
From: Alois Klink <alois@aloisklink.com>
Date: Sun, 19 Feb 2023 22:08:07 +0000
Subject: [PATCH 066/281] docs: add link to mermaid config docs in sidebar

---
 packages/mermaid/src/docs/.vitepress/config.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/mermaid/src/docs/.vitepress/config.ts b/packages/mermaid/src/docs/.vitepress/config.ts
index 2b2914ca3..330b088d9 100644
--- a/packages/mermaid/src/docs/.vitepress/config.ts
+++ b/packages/mermaid/src/docs/.vitepress/config.ts
@@ -155,6 +155,7 @@ function sidebarConfig() {
         { text: 'Tutorials', link: '/config/Tutorials' },
         { text: 'API-Usage', link: '/config/usage' },
         { text: 'Mermaid API Configuration', link: '/config/setup/README' },
+        { text: 'Mermaid Configuration Options', link: '/config/schema-docs/config' },
         { text: 'Directives', link: '/config/directives' },
         { text: 'Theming', link: '/config/theming' },
         { text: 'Accessibility', link: '/config/accessibility' },

From 23d6a0dab71b89c53119dc7147fc6e0f769cabbb Mon Sep 17 00:00:00 2001
From: Alois Klink <alois@aloisklink.com>
Date: Mon, 20 Feb 2023 03:54:59 +0000
Subject: [PATCH 067/281] ci(lint): check if MermaidConfig types are in sync

Add a CI check that runs
`pnpm run --filter mermaid types:verify-config` and checks whether
the MermaidConfig TypeScript types are in sync with the MermaidConfig
JSON Schema.
---
 .github/workflows/lint.yml | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
index 53b7f484d..493bacaf7 100644
--- a/.github/workflows/lint.yml
+++ b/.github/workflows/lint.yml
@@ -53,6 +53,19 @@ jobs:
               exit 1
           fi
 
+      - name: Verify `./src/config.type.ts` is in sync with `./src/schemas/config.schema.yaml`
+        shell: bash
+        run: |
+          if ! pnpm run --filter mermaid types:verify-config; then
+            ERROR_MESSAGE='Running `pnpm run --filter mermaid types:verify-config` failed.'
+            ERROR_MESSAGE+=' This should be fixed by running'
+            ERROR_MESSAGE+=' `pnpm run --filter mermaid types:build-config`'
+            ERROR_MESSAGE+=' on your local machine.'
+            echo "::error title=Lint failure::${ERROR_MESSAGE}"
+              # make sure to return an error exitcode so that GitHub actions shows a red-cross
+              exit 1
+          fi
+
       - name: Verify Docs
         id: verifyDocs
         working-directory: ./packages/mermaid

From c29088af019a8180ac2f85d79b890cab4cd5fee5 Mon Sep 17 00:00:00 2001
From: Alois Klink <alois@aloisklink.com>
Date: Sun, 26 Feb 2023 02:51:11 +0000
Subject: [PATCH 068/281] build(docs): fix links to `config.schema.json`

Fix the link in some Mermaid Config markdown documentation,
which previously pointed to `src/schemas/config.schema.yaml`,
which went nowhere.

Now, these links point to:
  - config.schema.json (i.e. the generated JSON file, not YAML)
  - links are relative to the markdown documentation

We also needed to store the `schema.json` file in the Vitepress
`public/` folder, as Vitepress otherwise doesn't bundle `.json` files
properly, when running `vitepress build src/vitepress`.
---
 packages/mermaid/src/docs.mts | 36 ++++++++++++++++++++++++++++++++---
 1 file changed, 33 insertions(+), 3 deletions(-)

diff --git a/packages/mermaid/src/docs.mts b/packages/mermaid/src/docs.mts
index 1a5ed5ea0..7ee6e50c8 100644
--- a/packages/mermaid/src/docs.mts
+++ b/packages/mermaid/src/docs.mts
@@ -345,13 +345,30 @@ async function transormJsonSchema(file: string) {
     schema: JSON_SCHEMA,
   });
 
+  /** Location of the `schema.yaml` files */
+  const SCHEMA_INPUT_DIR = 'src/schemas/';
+  /**
+   * Location to store the generated `schema.json` file for the website
+   *
+   * Because Vitepress doesn't handle bundling `.json` files properly, we need
+   * to instead place it into a `public/` subdirectory.
+   */
+  const SCHEMA_OUTPUT_DIR = 'src/docs/public/schemas/';
+  const VITEPRESS_PUBLIC_DIR = 'src/docs/public';
+  /**
+   * Location to store the generated Schema Markdown docs.
+   * Links to JSON Schemas should automatically be rewritten to point to
+   * `SCHEMA_OUTPUT_DIR`.
+   */
+  const SCHEMA_MARKDOWN_OUTPUT_DIR = join('src', 'docs', 'config', 'schema-docs');
+
   // write .schema.json files
   const jsonFileName = file
     .replace('.schema.yaml', '.schema.json')
-    .replace('src/schemas/', 'src/docs/schemas/');
+    .replace(SCHEMA_INPUT_DIR, SCHEMA_OUTPUT_DIR);
   copyTransformedContents(jsonFileName, !verifyOnly, JSON.stringify(jsonSchema, undefined, 2));
 
-  const schemas = traverseSchemas([schemaLoader()(file, jsonSchema)]);
+  const schemas = traverseSchemas([schemaLoader()(jsonFileName, jsonSchema)]);
 
   // ignore output of this function
   // for some reason, without calling this function, we get some broken links
@@ -365,6 +382,19 @@ async function transormJsonSchema(file: string) {
     includeProperties: ['tsType'], // Custom TypeScript type
     exampleFormat: 'json',
     // skipProperties,
+    /**
+     * Automatically rewrite schema paths passed to `schemaLoader`
+     * (e.g. src/docs/schemas/config.schema.json)
+     * to relative links (e.g. /schemas/config.schema.json)
+     *
+     * See https://vitepress.vuejs.org/guide/asset-handling
+     *
+     * @param origin - Original schema path (relative to this script).
+     * @returns New absolute Vitepress path to schema
+     */
+    rewritelinks: (origin: string) => {
+      return `/${relative(VITEPRESS_PUBLIC_DIR, origin)}`;
+    },
   })(schemas);
 
   for (const [name, markdownAst] of Object.entries(markdownFiles)) {
@@ -405,7 +435,7 @@ async function transormJsonSchema(file: string) {
       parser: 'markdown',
       ...prettierConfig,
     });
-    const newFileName = join('src', 'docs', 'config', 'schema-docs', `${name}.md`);
+    const newFileName = join(SCHEMA_MARKDOWN_OUTPUT_DIR, `${name}.md`);
     copyTransformedContents(newFileName, !verifyOnly, formatted);
   }
 }

From d2e62022f1c55d667b3e031c6d9a7fd04c7cd2a7 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Thu, 6 Jul 2023 11:09:09 +0530
Subject: [PATCH 069/281] Avoid downloading avtars everytime on docs:dev

---
 packages/mermaid/package.json                 |   2 +-
 packages/mermaid/src/docs.mts                 |  16 +--
 .../src/docs/.vitepress/contributors.ts       | 112 +-----------------
 packages/mermaid/src/docs/.vitepress/data.ts  | 110 +++++++++++++++++
 .../.vitepress/scripts/fetch-contributors.ts  |  12 +-
 5 files changed, 131 insertions(+), 121 deletions(-)
 create mode 100644 packages/mermaid/src/docs/.vitepress/data.ts

diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index e630f80fb..0f9337708 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -27,7 +27,7 @@
     "docs:code": "typedoc src/defaultConfig.ts src/config.ts src/mermaidAPI.ts && prettier --write ./src/docs/config/setup",
     "docs:build": "rimraf ../../docs && pnpm docs:spellcheck && pnpm docs:code && ts-node-esm src/docs.mts",
     "docs:verify": "pnpm docs:spellcheck && pnpm docs:code && ts-node-esm src/docs.mts --verify",
-    "docs:pre:vitepress": "rimraf src/vitepress && pnpm docs:code && ts-node-esm src/docs.mts --vitepress && pnpm --filter ./src/vitepress install --no-frozen-lockfile --ignore-scripts ",
+    "docs:pre:vitepress": "pnpm --filter ./src/docs prefetch && rimraf src/vitepress && pnpm docs:code && ts-node-esm src/docs.mts --vitepress && pnpm --filter ./src/vitepress install --no-frozen-lockfile --ignore-scripts",
     "docs:build:vitepress": "pnpm docs:pre:vitepress && (cd src/vitepress && pnpm run build) && cpy --flat src/docs/landing/ ./src/vitepress/.vitepress/dist/landing",
     "docs:dev": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./src/vitepress dev\" \"ts-node-esm src/docs.mts --watch --vitepress\"",
     "docs:dev:docker": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./src/vitepress dev:docker\" \"ts-node-esm src/docs.mts --watch --vitepress\"",
diff --git a/packages/mermaid/src/docs.mts b/packages/mermaid/src/docs.mts
index f6efc1169..7e701bb20 100644
--- a/packages/mermaid/src/docs.mts
+++ b/packages/mermaid/src/docs.mts
@@ -362,15 +362,15 @@ const transformHtml = (filename: string) => {
 };
 
 const getGlobs = (globs: string[]): string[] => {
-  globs.push(
-    '!**/dist/**',
-    '!**/redirect.spec.ts',
-    '!**/landing/**',
-    '!**/node_modules/**',
-    '!**/user-avatars/**'
-  );
+  globs.push('!**/dist/**', '!**/redirect.spec.ts', '!**/landing/**', '!**/node_modules/**');
   if (!vitepress) {
-    globs.push('!**/.vitepress/**', '!**/vite.config.ts', '!src/docs/index.md', '!**/package.json');
+    globs.push(
+      '!**/.vitepress/**',
+      '!**/vite.config.ts',
+      '!src/docs/index.md',
+      '!**/package.json',
+      '!**/user-avatars/**'
+    );
   }
   return globs;
 };
diff --git a/packages/mermaid/src/docs/.vitepress/contributors.ts b/packages/mermaid/src/docs/.vitepress/contributors.ts
index bef2c1311..5a80ac3fe 100644
--- a/packages/mermaid/src/docs/.vitepress/contributors.ts
+++ b/packages/mermaid/src/docs/.vitepress/contributors.ts
@@ -1,30 +1,5 @@
 import contributorUsernamesJson from './contributor-names.json';
-
-export interface Contributor {
-  name: string;
-  avatar: string;
-}
-
-export interface SocialEntry {
-  icon: string | { svg: string };
-  link: string;
-}
-
-export interface CoreTeam {
-  name: string;
-  // required to download avatars from GitHub
-  github: string;
-  avatar?: string;
-  twitter?: string;
-  mastodon?: string;
-  sponsor?: string;
-  website?: string;
-  linkedIn?: string;
-  title?: string;
-  org?: string;
-  desc?: string;
-  links?: SocialEntry[];
-}
+import { CoreTeam, knut, plainTeamMembers } from './data.js';
 
 const contributorUsernames: string[] = contributorUsernamesJson;
 
@@ -54,91 +29,6 @@ const createLinks = (tm: CoreTeam): CoreTeam => {
   return tm;
 };
 
-const knut: CoreTeam = {
-  github: 'knsv',
-  name: 'Knut Sveidqvist',
-  title: 'Creator',
-  twitter: 'knutsveidqvist',
-  sponsor: 'https://github.com/sponsors/knsv',
-};
-
-const plainTeamMembers: CoreTeam[] = [
-  {
-    github: 'NeilCuzon',
-    name: 'Neil Cuzon',
-    title: 'Developer',
-  },
-  {
-    github: 'tylerlong',
-    name: 'Tyler Liu',
-    title: 'Developer',
-  },
-  {
-    github: 'sidharthv96',
-    name: 'Sidharth Vinod',
-    title: 'Developer',
-    twitter: 'sidv42',
-    mastodon: 'https://techhub.social/@sidv',
-    sponsor: 'https://github.com/sponsors/sidharthv96',
-    linkedIn: 'sidharth-vinod',
-    website: 'https://sidharth.dev',
-  },
-  {
-    github: 'ashishjain0512',
-    name: 'Ashish Jain',
-    title: 'Developer',
-  },
-  {
-    github: 'mmorel-35',
-    name: 'Matthieu Morel',
-    title: 'Developer',
-    linkedIn: 'matthieumorel35',
-  },
-  {
-    github: 'aloisklink',
-    name: 'Alois Klink',
-    title: 'Developer',
-    linkedIn: 'aloisklink',
-    website: 'https://aloisklink.com',
-  },
-  {
-    github: 'pbrolin47',
-    name: 'Per Brolin',
-    title: 'Developer',
-  },
-  {
-    github: 'Yash-Singh1',
-    name: 'Yash Singh',
-    title: 'Developer',
-  },
-  {
-    github: 'GDFaber',
-    name: 'Marc Faber',
-    title: 'Developer',
-    linkedIn: 'marc-faber',
-  },
-  {
-    github: 'MindaugasLaganeckas',
-    name: 'Mindaugas Laganeckas',
-    title: 'Developer',
-  },
-  {
-    github: 'jgreywolf',
-    name: 'Justin Greywolf',
-    title: 'Developer',
-  },
-  {
-    github: 'IOrlandoni',
-    name: 'Nacho Orlandoni',
-    title: 'Developer',
-  },
-  {
-    github: 'huynhicode',
-    name: 'Steph Huynh',
-    title: 'Developer',
-  },
-];
-
 const teamMembers = plainTeamMembers.map((tm) => createLinks(tm));
 teamMembers.sort(
   (a, b) => contributorUsernames.indexOf(a.github) - contributorUsernames.indexOf(b.github)
diff --git a/packages/mermaid/src/docs/.vitepress/data.ts b/packages/mermaid/src/docs/.vitepress/data.ts
new file mode 100644
index 000000000..e8bb07ce8
--- /dev/null
+++ b/packages/mermaid/src/docs/.vitepress/data.ts
@@ -0,0 +1,110 @@
+export interface Contributor {
+  name: string;
+  avatar: string;
+}
+
+export interface SocialEntry {
+  icon: string | { svg: string };
+  link: string;
+}
+
+export interface CoreTeam {
+  name: string;
+  // required to download avatars from GitHub
+  github: string;
+  avatar?: string;
+  twitter?: string;
+  mastodon?: string;
+  sponsor?: string;
+  website?: string;
+  linkedIn?: string;
+  title?: string;
+  org?: string;
+  desc?: string;
+  links?: SocialEntry[];
+}
+
+export const knut: CoreTeam = {
+  github: 'knsv',
+  name: 'Knut Sveidqvist',
+  title: 'Creator',
+  twitter: 'knutsveidqvist',
+  sponsor: 'https://github.com/sponsors/knsv',
+};
+
+export const plainTeamMembers: CoreTeam[] = [
+  {
+    github: 'NeilCuzon',
+    name: 'Neil Cuzon',
+    title: 'Developer',
+  },
+  {
+    github: 'tylerlong',
+    name: 'Tyler Liu',
+    title: 'Developer',
+  },
+  {
+    github: 'sidharthv96',
+    name: 'Sidharth Vinod',
+    title: 'Developer',
+    twitter: 'sidv42',
+    mastodon: 'https://techhub.social/@sidv',
+    sponsor: 'https://github.com/sponsors/sidharthv96',
+    linkedIn: 'sidharth-vinod',
+    website: 'https://sidharth.dev',
+  },
+  {
+    github: 'ashishjain0512',
+    name: 'Ashish Jain',
+    title: 'Developer',
+  },
+  {
+    github: 'mmorel-35',
+    name: 'Matthieu Morel',
+    title: 'Developer',
+    linkedIn: 'matthieumorel35',
+  },
+  {
+    github: 'aloisklink',
+    name: 'Alois Klink',
+    title: 'Developer',
+    linkedIn: 'aloisklink',
+    website: 'https://aloisklink.com',
+  },
+  {
+    github: 'pbrolin47',
+    name: 'Per Brolin',
+    title: 'Developer',
+  },
+  {
+    github: 'Yash-Singh1',
+    name: 'Yash Singh',
+    title: 'Developer',
+  },
+  {
+    github: 'GDFaber',
+    name: 'Marc Faber',
+    title: 'Developer',
+    linkedIn: 'marc-faber',
+  },
+  {
+    github: 'MindaugasLaganeckas',
+    name: 'Mindaugas Laganeckas',
+    title: 'Developer',
+  },
+  {
+    github: 'jgreywolf',
+    name: 'Justin Greywolf',
+    title: 'Developer',
+  },
+  {
+    github: 'IOrlandoni',
+    name: 'Nacho Orlandoni',
+    title: 'Developer',
+  },
+  {
+    github: 'huynhicode',
+    name: 'Steph Huynh',
+    title: 'Developer',
+  },
+];
diff --git a/packages/mermaid/src/docs/.vitepress/scripts/fetch-contributors.ts b/packages/mermaid/src/docs/.vitepress/scripts/fetch-contributors.ts
index a810fc30f..53df066c9 100644
--- a/packages/mermaid/src/docs/.vitepress/scripts/fetch-contributors.ts
+++ b/packages/mermaid/src/docs/.vitepress/scripts/fetch-contributors.ts
@@ -1,6 +1,8 @@
 // Adapted from https://github.dev/vitest-dev/vitest/blob/991ff33ab717caee85ef6cbe1c16dc514186b4cc/scripts/update-contributors.ts#L6
 
 import { writeFile } from 'node:fs/promises';
+import { knut, plainTeamMembers } from '../data.js';
+import { existsSync } from 'node:fs';
 
 const pathContributors = new URL('../contributor-names.json', import.meta.url);
 
@@ -35,7 +37,15 @@ async function fetchContributors() {
 }
 
 async function generate() {
-  const collaborators = await fetchContributors();
+  if (existsSync(pathContributors)) {
+    // Only fetch contributors once, when running locally.
+    // In CI, the file won't exist, so it'll fetch every time as expected.
+    return;
+  }
+  // Will fetch all contributors only in CI to speed up local development.
+  const collaborators = process.env.CI
+    ? await fetchContributors()
+    : [knut, ...plainTeamMembers].map((m) => m.github);
   await writeFile(pathContributors, JSON.stringify(collaborators, null, 2) + '\n', 'utf8');
 }
 

From db30f21ac5a6aefa7988bcc90c6fd626baef51d9 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Thu, 6 Jul 2023 11:16:41 +0530
Subject: [PATCH 070/281] Turn off codecov project status check

---
 .github/codecov.yaml | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/.github/codecov.yaml b/.github/codecov.yaml
index 3db0811ad..950edb6a9 100644
--- a/.github/codecov.yaml
+++ b/.github/codecov.yaml
@@ -11,5 +11,7 @@ comment:
 coverage:
   status:
     project:
-      default:
-        threshold: 2%
+      off
+      # Turing off for now as code coverage isn't stable and causes unnecessary build failures.
+      # default:
+      #   threshold: 2%

From 4d0c461fa3ac64e2bba9d1cfd400ce5ddb82b7da Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Thu, 6 Jul 2023 11:32:37 +0530
Subject: [PATCH 071/281] chore: Reduce codecov pushes

pushes to non-develop branches will not send coverage reports.
This might reduce the coverage variability issue we're having.
---
 .github/workflows/e2e.yml  | 3 ++-
 .github/workflows/test.yml | 2 ++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index 63e20e575..6777a1e4f 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -47,7 +47,8 @@ jobs:
           VITEST_COVERAGE: true
       - name: Upload Coverage to Codecov
         uses: codecov/codecov-action@v3
-        if: steps.cypress.conclusion == 'success'
+        # Run step only pushes to develop and pull_requests
+        if: ${{ steps.cypress.conclusion == 'success' && (github.event_name == 'pull_request' || github.ref == 'refs/heads/develop')}}
         with:
           files: coverage/cypress/lcov.info
           flags: e2e
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index ba77d83bc..7c32795e8 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -43,6 +43,8 @@ jobs:
 
       - name: Upload Coverage to Codecov
         uses: codecov/codecov-action@v3
+        # Run step only pushes to develop and pull_requests
+        if: ${{ github.event_name == 'pull_request' || github.ref == 'refs/heads/develop' }}
         with:
           files: ./coverage/vitest/lcov.info
           flags: unit

From a3d95ceec44d0a98e79a9f1c7131e0443567e6cc Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Thu, 6 Jul 2023 11:36:16 +0530
Subject: [PATCH 072/281] Bump zenuml package version

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

diff --git a/packages/mermaid-zenuml/package.json b/packages/mermaid-zenuml/package.json
index cb8da96b6..1050dd781 100644
--- a/packages/mermaid-zenuml/package.json
+++ b/packages/mermaid-zenuml/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mermaid-js/mermaid-zenuml",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "MermaidJS plugin for ZenUML integration",
   "module": "dist/mermaid-zenuml.core.mjs",
   "types": "dist/detector.d.ts",

From aaec16ed6c743ab8a787f2cbc942c9a84044f823 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Thu, 6 Jul 2023 11:58:55 +0530
Subject: [PATCH 073/281] chore: Remove lint warnings in example-diagram

---
 .prettierignore                                                | 3 ++-
 packages/mermaid-example-diagram/src/exampleDiagramDb.js       | 1 -
 packages/mermaid-example-diagram/src/exampleDiagramRenderer.js | 1 -
 packages/mermaid-example-diagram/src/mermaidUtils.ts           | 2 +-
 4 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/.prettierignore b/.prettierignore
index b50a94e84..61ba3d013 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -5,5 +5,6 @@ coverage
 # Autogenerated by PNPM
 pnpm-lock.yaml
 stats
-packages/mermaid/src/docs/.vitepress/components.d.ts
+**/.vitepress/components.d.ts
+**/.vitepress/cache
 .nyc_output
diff --git a/packages/mermaid-example-diagram/src/exampleDiagramDb.js b/packages/mermaid-example-diagram/src/exampleDiagramDb.js
index a5fa88e6d..21ba9e248 100644
--- a/packages/mermaid-example-diagram/src/exampleDiagramDb.js
+++ b/packages/mermaid-example-diagram/src/exampleDiagramDb.js
@@ -22,7 +22,6 @@ export const setInfo = (inf) => {
   info = inf;
 };
 
-/** @returns Returns the info flag */
 export const getInfo = () => {
   return info;
 };
diff --git a/packages/mermaid-example-diagram/src/exampleDiagramRenderer.js b/packages/mermaid-example-diagram/src/exampleDiagramRenderer.js
index 2c6839203..9b3854aaf 100644
--- a/packages/mermaid-example-diagram/src/exampleDiagramRenderer.js
+++ b/packages/mermaid-example-diagram/src/exampleDiagramRenderer.js
@@ -8,7 +8,6 @@ import { log, getConfig, setupGraphViewbox } from './mermaidUtils.js';
  * @param {any} text
  * @param {any} id
  * @param {any} version
- * @param diagObj
  */
 export const draw = (text, id, version) => {
   try {
diff --git a/packages/mermaid-example-diagram/src/mermaidUtils.ts b/packages/mermaid-example-diagram/src/mermaidUtils.ts
index 44cc85f73..eeeca05c5 100644
--- a/packages/mermaid-example-diagram/src/mermaidUtils.ts
+++ b/packages/mermaid-example-diagram/src/mermaidUtils.ts
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 const warning = (s: string) => {
   // Todo remove debug code
   // eslint-disable-next-line no-console
@@ -28,7 +29,6 @@ export let setLogLevel: (level: keyof typeof LEVELS | number | string) => void;
 export let getConfig: () => object;
 export let sanitizeText: (str: string) => string;
 export let commonDb: () => object;
-// eslint-disable @typescript-eslint/no-explicit-any
 export let setupGraphViewbox: (
   graph: any,
   svgElem: any,

From c17dc15c572208f3a1ffc084dd781a56a5e0b60b Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Thu, 6 Jul 2023 15:54:27 +0530
Subject: [PATCH 074/281] chore: Rename to teamMembers

---
 packages/mermaid/src/docs/.vitepress/contributors.ts            | 2 +-
 .../mermaid/src/docs/.vitepress/scripts/fetch-contributors.ts   | 2 +-
 .../mermaid/src/docs/.vitepress/{data.ts => teamMembers.ts}     | 0
 3 files changed, 2 insertions(+), 2 deletions(-)
 rename packages/mermaid/src/docs/.vitepress/{data.ts => teamMembers.ts} (100%)

diff --git a/packages/mermaid/src/docs/.vitepress/contributors.ts b/packages/mermaid/src/docs/.vitepress/contributors.ts
index 5a80ac3fe..724b48fcb 100644
--- a/packages/mermaid/src/docs/.vitepress/contributors.ts
+++ b/packages/mermaid/src/docs/.vitepress/contributors.ts
@@ -1,5 +1,5 @@
 import contributorUsernamesJson from './contributor-names.json';
-import { CoreTeam, knut, plainTeamMembers } from './data.js';
+import { CoreTeam, knut, plainTeamMembers } from './teamMembers.js';
 
 const contributorUsernames: string[] = contributorUsernamesJson;
 
diff --git a/packages/mermaid/src/docs/.vitepress/scripts/fetch-contributors.ts b/packages/mermaid/src/docs/.vitepress/scripts/fetch-contributors.ts
index 53df066c9..da7621b29 100644
--- a/packages/mermaid/src/docs/.vitepress/scripts/fetch-contributors.ts
+++ b/packages/mermaid/src/docs/.vitepress/scripts/fetch-contributors.ts
@@ -1,7 +1,7 @@
 // Adapted from https://github.dev/vitest-dev/vitest/blob/991ff33ab717caee85ef6cbe1c16dc514186b4cc/scripts/update-contributors.ts#L6
 
 import { writeFile } from 'node:fs/promises';
-import { knut, plainTeamMembers } from '../data.js';
+import { knut, plainTeamMembers } from '../teamMembers.js';
 import { existsSync } from 'node:fs';
 
 const pathContributors = new URL('../contributor-names.json', import.meta.url);
diff --git a/packages/mermaid/src/docs/.vitepress/data.ts b/packages/mermaid/src/docs/.vitepress/teamMembers.ts
similarity index 100%
rename from packages/mermaid/src/docs/.vitepress/data.ts
rename to packages/mermaid/src/docs/.vitepress/teamMembers.ts

From f5484636aae16327f84042505c6355d962727f25 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Thu, 6 Jul 2023 16:12:09 +0530
Subject: [PATCH 075/281] createText to TS

---
 .../mermaid/src/rendering-util/{createText.js => createText.ts}   | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename packages/mermaid/src/rendering-util/{createText.js => createText.ts} (100%)

diff --git a/packages/mermaid/src/rendering-util/createText.js b/packages/mermaid/src/rendering-util/createText.ts
similarity index 100%
rename from packages/mermaid/src/rendering-util/createText.js
rename to packages/mermaid/src/rendering-util/createText.ts

From 60a93f7377a468547a316a3049ebcd88f8839c6a Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Thu, 6 Jul 2023 20:34:17 +0530
Subject: [PATCH 076/281] Handle proper formatting for markdown strings

---
 .../mermaid/src/rendering-util/createText.ts  | 103 ++++++------------
 .../handle-markdown-text.spec.ts              |  21 +++-
 .../rendering-util/handle-markdown-text.ts    |   7 +-
 .../src/rendering-util/splitText.spec.ts      |  46 +++++++-
 .../mermaid/src/rendering-util/splitText.ts   |  72 +++++++-----
 .../mermaid/src/rendering-util/types.d.ts     |   7 ++
 6 files changed, 145 insertions(+), 111 deletions(-)
 create mode 100644 packages/mermaid/src/rendering-util/types.d.ts

diff --git a/packages/mermaid/src/rendering-util/createText.ts b/packages/mermaid/src/rendering-util/createText.ts
index 06fba94c7..4afe2f7f2 100644
--- a/packages/mermaid/src/rendering-util/createText.ts
+++ b/packages/mermaid/src/rendering-util/createText.ts
@@ -1,25 +1,17 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// @ts-nocheck TODO: Fix types
 import { log } from '../logger.js';
 import { decodeEntities } from '../mermaidAPI.js';
 import { markdownToHTML, markdownToLines } from '../rendering-util/handle-markdown-text.js';
 import { splitLineToFitWidth } from './splitText.js';
-/**
- * @param dom
- * @param styleFn
- */
+import { MarkdownLine, MarkdownWord } from './types.js';
+
 function applyStyle(dom, styleFn) {
   if (styleFn) {
     dom.attr('style', styleFn);
   }
 }
 
-/**
- * @param element
- * @param {any} node
- * @param width
- * @param classes
- * @param addBackground
- * @returns {SVGForeignObjectElement} Node
- */
 function addHtmlSpan(element, node, width, classes, addBackground = false) {
   const fo = element.append('foreignObject');
   // const newEl = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
@@ -65,12 +57,12 @@ function addHtmlSpan(element, node, width, classes, addBackground = false) {
 /**
  * Creates a tspan element with the specified attributes for text positioning.
  *
- * @param {object} textElement - The parent text element to append the tspan element.
- * @param {number} lineIndex - The index of the current line in the structuredText array.
- * @param {number} lineHeight - The line height value for the text.
- * @returns {object} The created tspan element.
+ * @param textElement - The parent text element to append the tspan element.
+ * @param lineIndex - The index of the current line in the structuredText array.
+ * @param lineHeight - The line height value for the text.
+ * @returns The created tspan element.
  */
-function createTspan(textElement, lineIndex, lineHeight) {
+function createTspan(textElement: any, lineIndex: number, lineHeight: number) {
   return textElement
     .append('tspan')
     .attr('class', 'text-outer-tspan')
@@ -79,55 +71,41 @@ function createTspan(textElement, lineIndex, lineHeight) {
     .attr('dy', lineHeight + 'em');
 }
 
-/**
- * Compute the width of rendered text
- * @param {object} parentNode
- * @param {number} lineHeight
- * @param {string} text
- * @returns {number}
- */
-function computeWidthOfText(parentNode, lineHeight, text) {
+function computeWidthOfText(parentNode: any, lineHeight: number, line: MarkdownLine): number {
   const testElement = parentNode.append('text');
   const testSpan = createTspan(testElement, 1, lineHeight);
-  updateTextContentAndStyles(testSpan, [{ content: text, type: 'normal' }]);
+  updateTextContentAndStyles(testSpan, line);
   const textLength = testSpan.node().getComputedTextLength();
   testElement.remove();
   return textLength;
 }
 
-/**
- * Creates a formatted text element by breaking lines and applying styles based on
- * the given structuredText.
- *
- * @param {number} width - The maximum allowed width of the text.
- * @param {object} g - The parent group element to append the formatted text.
- * @param {Array} structuredText - The structured text data to format.
- * @param addBackground
- */
-function createFormattedText(width, g, structuredText, addBackground = false) {
+function createFormattedText(
+  width: number,
+  g: any,
+  structuredText: MarkdownWord[][],
+  addBackground = false
+) {
   const lineHeight = 1.1;
   const labelGroup = g.append('g');
-  let bkg = labelGroup.insert('rect').attr('class', 'background');
+  const bkg = labelGroup.insert('rect').attr('class', 'background');
   const textElement = labelGroup.append('text').attr('y', '-10.1');
   let lineIndex = 0;
-  structuredText.forEach((line) => {
+  for (const line of structuredText) {
     /**
      * Preprocess raw string content of line data
      * Creating an array of strings pre-split to satisfy width limit
      */
-    let fullStr = line.map((data) => data.content).join(' ');
-    const checkWidth = (str) => computeWidthOfText(labelGroup, lineHeight, str) <= width;
-    const linesUnderWidth = checkWidth(fullStr)
-      ? [fullStr]
-      : splitLineToFitWidth(fullStr, checkWidth);
+    const checkWidth = (line: MarkdownLine) =>
+      computeWidthOfText(labelGroup, lineHeight, line) <= width;
+    const linesUnderWidth = checkWidth(line) ? [line] : splitLineToFitWidth(line, checkWidth);
     /** Add each prepared line as a tspan to the parent node */
-    const preparedLines = linesUnderWidth.map((w) => ({ content: w, type: line.type }));
-    for (const preparedLine of preparedLines) {
-      let tspan = createTspan(textElement, lineIndex, lineHeight);
-      updateTextContentAndStyles(tspan, [preparedLine]);
+    for (const preparedLine of linesUnderWidth) {
+      const tspan = createTspan(textElement, lineIndex, lineHeight);
+      updateTextContentAndStyles(tspan, preparedLine);
       lineIndex++;
     }
-  });
+  }
   if (addBackground) {
     const bbox = textElement.node().getBBox();
     const padding = 2;
@@ -143,44 +121,25 @@ function createFormattedText(width, g, structuredText, addBackground = false) {
   }
 }
 
-/**
- * Updates the text content and styles of the given tspan element based on the
- * provided wrappedLine data.
- *
- * @param {object} tspan - The tspan element to update.
- * @param {Array} wrappedLine - The line data to apply to the tspan element.
- */
-function updateTextContentAndStyles(tspan, wrappedLine) {
+function updateTextContentAndStyles(tspan: any, wrappedLine: MarkdownWord[]) {
   tspan.text('');
 
   wrappedLine.forEach((word, index) => {
     const innerTspan = tspan
       .append('tspan')
-      .attr('font-style', word.type === 'em' ? 'italic' : 'normal')
+      .attr('font-style', word.type === 'emphasis' ? 'italic' : 'normal')
       .attr('class', 'text-inner-tspan')
       .attr('font-weight', word.type === 'strong' ? 'bold' : 'normal');
-    const special = ['"', "'", '.', ',', ':', ';', '!', '?', '(', ')', '[', ']', '{', '}'];
+    // const special = ['"', "'", '.', ',', ':', ';', '!', '?', '(', ')', '[', ']', '{', '}'];
     if (index === 0) {
       innerTspan.text(word.content);
     } else {
+      // TODO: check what joiner to use.
       innerTspan.text(' ' + word.content);
     }
   });
 }
 
-/**
- *
- * @param el
- * @param {*} text
- * @param {*} param1
- * @param root0
- * @param root0.style
- * @param root0.isTitle
- * @param root0.classes
- * @param root0.useHtmlLabels
- * @param root0.isNode
- * @returns
- */
 // Note when using from flowcharts converting the API isNode means classes should be set accordingly. When using htmlLabels => to sett classes to'nodeLabel' when isNode=true otherwise 'edgeLabel'
 // When not using htmlLabels => to set classes to 'title-row' when isTitle=true otherwise 'title-row'
 export const createText = (
@@ -210,7 +169,7 @@ export const createText = (
       ),
       labelStyle: style.replace('fill:', 'color:'),
     };
-    let vertexNode = addHtmlSpan(el, node, width, classes, addSvgBackground);
+    const vertexNode = addHtmlSpan(el, node, width, classes, addSvgBackground);
     return vertexNode;
   } else {
     const structuredText = markdownToLines(text);
diff --git a/packages/mermaid/src/rendering-util/handle-markdown-text.spec.ts b/packages/mermaid/src/rendering-util/handle-markdown-text.spec.ts
index 8ae519cfa..3ca7a3d7a 100644
--- a/packages/mermaid/src/rendering-util/handle-markdown-text.spec.ts
+++ b/packages/mermaid/src/rendering-util/handle-markdown-text.spec.ts
@@ -152,9 +152,8 @@ test('markdownToLines - Only italic formatting', () => {
 });
 
 it('markdownToLines - Mixed formatting', () => {
-  const input = `*Italic* and **bold** formatting`;
-
-  const expectedOutput = [
+  let input = `*Italic* and **bold** formatting`;
+  let expected = [
     [
       { content: 'Italic', type: 'emphasis' },
       { content: 'and', type: 'normal' },
@@ -162,9 +161,21 @@ it('markdownToLines - Mixed formatting', () => {
       { content: 'formatting', type: 'normal' },
     ],
   ];
+  expect(markdownToLines(input)).toEqual(expected);
 
-  const output = markdownToLines(input);
-  expect(output).toEqual(expectedOutput);
+  input = `*Italic with space* and **bold ws** formatting`;
+  expected = [
+    [
+      { content: 'Italic', type: 'emphasis' },
+      { content: 'with', type: 'emphasis' },
+      { content: 'space', type: 'emphasis' },
+      { content: 'and', type: 'normal' },
+      { content: 'bold', type: 'strong' },
+      { content: 'ws', type: 'strong' },
+      { content: 'formatting', type: 'normal' },
+    ],
+  ];
+  expect(markdownToLines(input)).toEqual(expected);
 });
 
 it('markdownToLines - Mixed formatting', () => {
diff --git a/packages/mermaid/src/rendering-util/handle-markdown-text.ts b/packages/mermaid/src/rendering-util/handle-markdown-text.ts
index 04dbe5b76..ae76faf8a 100644
--- a/packages/mermaid/src/rendering-util/handle-markdown-text.ts
+++ b/packages/mermaid/src/rendering-util/handle-markdown-text.ts
@@ -1,6 +1,7 @@
 import type { Content } from 'mdast';
 import { fromMarkdown } from 'mdast-util-from-markdown';
 import { dedent } from 'ts-dedent';
+import { MarkdownLine, MarkdownWordType } from './types.js';
 
 /**
  * @param markdown - markdown to process
@@ -17,13 +18,13 @@ function preprocessMarkdown(markdown: string): string {
 /**
  * @param markdown - markdown to split into lines
  */
-export function markdownToLines(markdown: string) {
+export function markdownToLines(markdown: string): MarkdownLine[] {
   const preprocessedMarkdown = preprocessMarkdown(markdown);
   const { children } = fromMarkdown(preprocessedMarkdown);
-  const lines: { content: string; type: string }[][] = [[]];
+  const lines: MarkdownLine[] = [[]];
   let currentLine = 0;
 
-  function processNode(node: Content, parentType = 'normal') {
+  function processNode(node: Content, parentType: MarkdownWordType = 'normal') {
     if (node.type === 'text') {
       const textLines = node.value.split('\n');
       textLines.forEach((textLine, index) => {
diff --git a/packages/mermaid/src/rendering-util/splitText.spec.ts b/packages/mermaid/src/rendering-util/splitText.spec.ts
index 3dafb80ee..a09d683d3 100644
--- a/packages/mermaid/src/rendering-util/splitText.spec.ts
+++ b/packages/mermaid/src/rendering-util/splitText.spec.ts
@@ -1,5 +1,6 @@
-import { splitTextToChars, splitLineToFitWidth, type CheckFitFunction } from './splitText.js';
+import { splitTextToChars, splitLineToFitWidth, splitLineToWords } from './splitText.js';
 import { describe, it, expect } from 'vitest';
+import type { CheckFitFunction, MarkdownLine, MarkdownWordType } from './types.js';
 
 describe('splitText', () => {
   it.each([
@@ -13,12 +14,35 @@ describe('splitText', () => {
 });
 
 describe('split lines', () => {
+  /**
+   * Creates a checkFunction for a given width
+   * @param width - width of characters to fit in a line
+   * @returns checkFunction
+   */
   const createCheckFn = (width: number): CheckFitFunction => {
-    return (text: string) => {
-      return splitTextToChars(text).length <= width;
+    return (text: MarkdownLine) => {
+      // Join all words into a single string
+      const joinedContent = text.map((w) => w.content).join('');
+      const characters = splitTextToChars(joinedContent);
+      return characters.length <= width;
     };
   };
 
+  it('should create valid checkFit function', () => {
+    const checkFit5 = createCheckFn(5);
+    expect(checkFit5([{ content: 'hello', type: 'normal' }])).toBe(true);
+    expect(
+      checkFit5([
+        { content: 'hello', type: 'normal' },
+        { content: 'world', type: 'normal' },
+      ])
+    ).toBe(false);
+    const checkFit1 = createCheckFn(1);
+    expect(checkFit1([{ content: 'A', type: 'normal' }])).toBe(true);
+    expect(checkFit1([{ content: '🏳️‍⚧️', type: 'normal' }])).toBe(true);
+    expect(checkFit1([{ content: '🏳️‍⚧️🏳️‍⚧️', type: 'normal' }])).toBe(false);
+  });
+
   it.each([
     // empty string
     { str: 'hello world', width: 7, split: ['hello', 'world'] },
@@ -40,7 +64,10 @@ describe('split lines', () => {
     'should split $str into lines of $width characters',
     ({ str, split, width }: { str: string; width: number; split: string[] }) => {
       const checkFn = createCheckFn(width);
-      expect(splitLineToFitWidth(str, checkFn)).toEqual(split);
+      const line: MarkdownLine = getLineFromString(str);
+      expect(splitLineToFitWidth(line, checkFn)).toEqual(
+        split.map((str) => splitLineToWords(str).map((content) => ({ content, type: 'normal' })))
+      );
     }
   );
 
@@ -48,8 +75,17 @@ describe('split lines', () => {
     const checkFn: CheckFitFunction = createCheckFn(6);
     const str = `Flag
   🏳️‍⚧️ this 🏳️‍🌈`;
-    expect(() => splitLineToFitWidth(str, checkFn)).toThrowErrorMatchingInlineSnapshot(
+    expect(() =>
+      splitLineToFitWidth(getLineFromString(str), checkFn)
+    ).toThrowErrorMatchingInlineSnapshot(
       '"splitLineToFitWidth does not support newlines in the line"'
     );
   });
 });
+
+const getLineFromString = (str: string, type: MarkdownWordType = 'normal'): MarkdownLine => {
+  return splitLineToWords(str).map((content) => ({
+    content,
+    type,
+  }));
+};
diff --git a/packages/mermaid/src/rendering-util/splitText.ts b/packages/mermaid/src/rendering-util/splitText.ts
index c1d25ea13..f32f3aacf 100644
--- a/packages/mermaid/src/rendering-util/splitText.ts
+++ b/packages/mermaid/src/rendering-util/splitText.ts
@@ -1,4 +1,4 @@
-export type CheckFitFunction = (text: string) => boolean;
+import type { CheckFitFunction, MarkdownLine, MarkdownWord, MarkdownWordType } from './types.js';
 
 /**
  * Splits a string into graphemes if available, otherwise characters.
@@ -13,7 +13,7 @@ export function splitTextToChars(text: string): string[] {
 /**
  * Splits a string into words.
  */
-function splitLineToWords(text: string): string[] {
+export function splitLineToWords(text: string): string[] {
   if (Intl.Segmenter) {
     return [...new Intl.Segmenter(undefined, { granularity: 'word' }).segment(text)].map(
       (s) => s.segment
@@ -34,46 +34,61 @@ function splitLineToWords(text: string): string[] {
  * @param word - Word to split
  * @returns [first part of word that fits, rest of word]
  */
-export function splitWordToFitWidth(checkFit: CheckFitFunction, word: string): [string, string] {
-  const characters = splitTextToChars(word);
+export function splitWordToFitWidth(
+  checkFit: CheckFitFunction,
+  word: MarkdownWord
+): [MarkdownWord, MarkdownWord] {
+  const characters = splitTextToChars(word.content);
   if (characters.length === 0) {
-    return ['', ''];
+    return [
+      { content: '', type: word.type },
+      { content: '', type: word.type },
+    ];
   }
-  return splitWordToFitWidthRecursion(checkFit, [], characters);
+  return splitWordToFitWidthRecursion(checkFit, [], characters, word.type);
 }
 
 function splitWordToFitWidthRecursion(
   checkFit: CheckFitFunction,
   usedChars: string[],
-  remainingChars: string[]
-): [string, string] {
+  remainingChars: string[],
+  type: MarkdownWordType
+): [MarkdownWord, MarkdownWord] {
   // eslint-disable-next-line no-console
   console.error({ usedChars, remainingChars });
   if (remainingChars.length === 0) {
-    return [usedChars.join(''), ''];
+    return [
+      { content: usedChars.join(''), type },
+      { content: '', type },
+    ];
   }
   const [nextChar, ...rest] = remainingChars;
   const newWord = [...usedChars, nextChar];
-  if (checkFit(newWord.join(''))) {
-    return splitWordToFitWidthRecursion(checkFit, newWord, rest);
+  if (checkFit([{ content: newWord.join(''), type }])) {
+    return splitWordToFitWidthRecursion(checkFit, newWord, rest, type);
   }
-  return [usedChars.join(''), remainingChars.join('')];
+  return [
+    { content: usedChars.join(''), type },
+    { content: remainingChars.join(''), type },
+  ];
 }
 
-export function splitLineToFitWidth(line: string, checkFit: CheckFitFunction): string[] {
-  if (line.includes('\n')) {
+export function splitLineToFitWidth(
+  line: MarkdownLine,
+  checkFit: CheckFitFunction
+): MarkdownLine[] {
+  if (line.some(({ content }) => content.includes('\n'))) {
     throw new Error('splitLineToFitWidth does not support newlines in the line');
   }
-  const words = splitLineToWords(line);
-  return splitLineToFitWidthRecursion(words, checkFit);
+  return splitLineToFitWidthRecursion(line, checkFit);
 }
 
 function splitLineToFitWidthRecursion(
-  words: string[],
+  words: MarkdownWord[],
   checkFit: CheckFitFunction,
-  lines: string[] = [],
-  newLine = ''
-): string[] {
+  lines: MarkdownLine[] = [],
+  newLine: MarkdownLine = []
+): MarkdownLine[] {
   // eslint-disable-next-line no-console
   console.error({ words, lines, newLine });
   // Return if there is nothing left to split
@@ -82,17 +97,22 @@ function splitLineToFitWidthRecursion(
     if (newLine.length > 0) {
       lines.push(newLine);
     }
-    return lines.length > 0 ? lines : [''];
+    return lines.length > 0 ? lines : [];
   }
   let joiner = '';
-  if (words[0] === ' ') {
+  if (words[0].content === ' ') {
     joiner = ' ';
     words.shift();
   }
-  const nextWord = words.shift() ?? ' ';
+  const nextWord: MarkdownWord = words.shift() ?? { content: ' ', type: 'normal' };
+
+  // const nextWordWithJoiner: MarkdownWord = { ...nextWord, content: joiner + nextWord.content };
+  const lineWithNextWord: MarkdownLine = [...newLine];
+  if (joiner !== '') {
+    lineWithNextWord.push({ content: joiner, type: 'normal' });
+  }
+  lineWithNextWord.push(nextWord);
 
-  const nextWordWithJoiner = joiner + nextWord;
-  const lineWithNextWord = newLine ? `${newLine}${nextWordWithJoiner}` : nextWordWithJoiner;
   if (checkFit(lineWithNextWord)) {
     // nextWord fits, so we can add it to the new line and continue
     return splitLineToFitWidthRecursion(words, checkFit, lines, lineWithNextWord);
@@ -106,7 +126,7 @@ function splitLineToFitWidthRecursion(
   } else {
     // There was no text in newLine, so we need to split nextWord
     const [line, rest] = splitWordToFitWidth(checkFit, nextWord);
-    lines.push(line);
+    lines.push([line]);
     words.unshift(rest);
   }
   return splitLineToFitWidthRecursion(words, checkFit, lines);
diff --git a/packages/mermaid/src/rendering-util/types.d.ts b/packages/mermaid/src/rendering-util/types.d.ts
new file mode 100644
index 000000000..aec99e636
--- /dev/null
+++ b/packages/mermaid/src/rendering-util/types.d.ts
@@ -0,0 +1,7 @@
+export type MarkdownWordType = 'normal' | 'strong' | 'emphasis';
+export interface MarkdownWord {
+  content: string;
+  type: MarkdownWordType;
+}
+export type MarkdownLine = MarkdownWord[];
+export type CheckFitFunction = (text: MarkdownLine) => boolean;

From 5ac70bbc00c4bead77a369772b6808d72b46b734 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Thu, 6 Jul 2023 21:22:28 +0530
Subject: [PATCH 077/281] Fix flowchart failure

---
 packages/mermaid/src/rendering-util/splitText.spec.ts | 2 ++
 packages/mermaid/src/rendering-util/splitText.ts      | 9 ++++++++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/mermaid/src/rendering-util/splitText.spec.ts b/packages/mermaid/src/rendering-util/splitText.spec.ts
index a09d683d3..95512edfb 100644
--- a/packages/mermaid/src/rendering-util/splitText.spec.ts
+++ b/packages/mermaid/src/rendering-util/splitText.spec.ts
@@ -53,6 +53,8 @@ describe('split lines', () => {
     { str: 'hello 12 world', width: 4, split: ['hell', 'o 12', 'worl', 'd'] },
     { str: 'hello  1 2 world', width: 4, split: ['hell', 'o  1', '2', 'worl', 'd'] },
     { str: 'hello  1 2 world', width: 6, split: ['hello', '  1 2', 'world'] },
+    // width = 0, impossible, so split into individual characters
+    { str: '🏳️‍⚧️🏳️‍🌈👩🏾‍❤️‍👨🏻', width: 0, split: ['🏳️‍⚧️', '🏳️‍🌈', '👩🏾‍❤️‍👨🏻'] },
     { str: '🏳️‍⚧️🏳️‍🌈👩🏾‍❤️‍👨🏻', width: 1, split: ['🏳️‍⚧️', '🏳️‍🌈', '👩🏾‍❤️‍👨🏻'] },
     { str: '🏳️‍⚧️🏳️‍🌈👩🏾‍❤️‍👨🏻', width: 2, split: ['🏳️‍⚧️🏳️‍🌈', '👩🏾‍❤️‍👨🏻'] },
     { str: '🏳️‍⚧️🏳️‍🌈👩🏾‍❤️‍👨🏻', width: 3, split: ['🏳️‍⚧️🏳️‍🌈👩🏾‍❤️‍👨🏻'] },
diff --git a/packages/mermaid/src/rendering-util/splitText.ts b/packages/mermaid/src/rendering-util/splitText.ts
index f32f3aacf..64a6cebbe 100644
--- a/packages/mermaid/src/rendering-util/splitText.ts
+++ b/packages/mermaid/src/rendering-util/splitText.ts
@@ -67,6 +67,11 @@ function splitWordToFitWidthRecursion(
   if (checkFit([{ content: newWord.join(''), type }])) {
     return splitWordToFitWidthRecursion(checkFit, newWord, rest, type);
   }
+  if (usedChars.length === 0 && nextChar) {
+    // If the first character does not fit, split it anyway
+    usedChars.push(nextChar);
+    remainingChars.shift();
+  }
   return [
     { content: usedChars.join(''), type },
     { content: remainingChars.join(''), type },
@@ -127,7 +132,9 @@ function splitLineToFitWidthRecursion(
     // There was no text in newLine, so we need to split nextWord
     const [line, rest] = splitWordToFitWidth(checkFit, nextWord);
     lines.push([line]);
-    words.unshift(rest);
+    if (rest.content) {
+      words.unshift(rest);
+    }
   }
   return splitLineToFitWidthRecursion(words, checkFit, lines);
 }

From d4281d365d09f8b2ae2fd7136cc91002be117e66 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Thu, 6 Jul 2023 21:29:40 +0530
Subject: [PATCH 078/281] Add Yokozuna59 & nirname

---
 cSpell.json                                   |  6 ++++++
 .../src/docs/.vitepress/contributors.ts       |  1 +
 .../src/docs/.vitepress/teamMembers.ts        | 21 +++++++------------
 3 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/cSpell.json b/cSpell.json
index 690c2bd33..abcfa0383 100644
--- a/cSpell.json
+++ b/cSpell.json
@@ -89,6 +89,8 @@
     "mult",
     "neurodiverse",
     "nextra",
+    "nikolay",
+    "nirname",
     "orlandoni",
     "pathe",
     "pbrolin",
@@ -102,9 +104,11 @@
     "ranksep",
     "rect",
     "rects",
+    "reda",
     "redmine",
     "rehype",
     "roledescription",
+    "rozhkov",
     "sandboxed",
     "sankey",
     "setupgraphviewbox",
@@ -121,6 +125,7 @@
     "stylis",
     "subhash-halder",
     "substate",
+    "sulais",
     "sveidqvist",
     "swimm",
     "techn",
@@ -144,6 +149,7 @@
     "vueuse",
     "xlink",
     "yash",
+    "yokozuna",
     "zenuml"
   ],
   "patterns": [
diff --git a/packages/mermaid/src/docs/.vitepress/contributors.ts b/packages/mermaid/src/docs/.vitepress/contributors.ts
index 724b48fcb..93eeee2e2 100644
--- a/packages/mermaid/src/docs/.vitepress/contributors.ts
+++ b/packages/mermaid/src/docs/.vitepress/contributors.ts
@@ -13,6 +13,7 @@ const websiteSVG = {
 
 const createLinks = (tm: CoreTeam): CoreTeam => {
   tm.avatar = `/user-avatars/${tm.github}.png`;
+  tm.title = tm.title ?? 'Developer';
   tm.links = [{ icon: 'github', link: `https://github.com/${tm.github}` }];
   if (tm.mastodon) {
     tm.links.push({ icon: 'mastodon', link: tm.mastodon });
diff --git a/packages/mermaid/src/docs/.vitepress/teamMembers.ts b/packages/mermaid/src/docs/.vitepress/teamMembers.ts
index e8bb07ce8..d95f49ed8 100644
--- a/packages/mermaid/src/docs/.vitepress/teamMembers.ts
+++ b/packages/mermaid/src/docs/.vitepress/teamMembers.ts
@@ -36,17 +36,14 @@ export const plainTeamMembers: CoreTeam[] = [
   {
     github: 'NeilCuzon',
     name: 'Neil Cuzon',
-    title: 'Developer',
   },
   {
     github: 'tylerlong',
     name: 'Tyler Liu',
-    title: 'Developer',
   },
   {
     github: 'sidharthv96',
     name: 'Sidharth Vinod',
-    title: 'Developer',
     twitter: 'sidv42',
     mastodon: 'https://techhub.social/@sidv',
     sponsor: 'https://github.com/sponsors/sidharthv96',
@@ -56,55 +53,53 @@ export const plainTeamMembers: CoreTeam[] = [
   {
     github: 'ashishjain0512',
     name: 'Ashish Jain',
-    title: 'Developer',
   },
   {
     github: 'mmorel-35',
     name: 'Matthieu Morel',
-    title: 'Developer',
     linkedIn: 'matthieumorel35',
   },
   {
     github: 'aloisklink',
     name: 'Alois Klink',
-    title: 'Developer',
     linkedIn: 'aloisklink',
     website: 'https://aloisklink.com',
   },
   {
     github: 'pbrolin47',
     name: 'Per Brolin',
-    title: 'Developer',
   },
   {
     github: 'Yash-Singh1',
     name: 'Yash Singh',
-    title: 'Developer',
   },
   {
     github: 'GDFaber',
     name: 'Marc Faber',
-    title: 'Developer',
     linkedIn: 'marc-faber',
   },
   {
     github: 'MindaugasLaganeckas',
     name: 'Mindaugas Laganeckas',
-    title: 'Developer',
   },
   {
     github: 'jgreywolf',
     name: 'Justin Greywolf',
-    title: 'Developer',
   },
   {
     github: 'IOrlandoni',
     name: 'Nacho Orlandoni',
-    title: 'Developer',
   },
   {
     github: 'huynhicode',
     name: 'Steph Huynh',
-    title: 'Developer',
+  },
+  {
+    github: 'Yokozuna59',
+    name: 'Reda Al Sulais',
+  },
+  {
+    github: 'nirname',
+    name: 'Nikolay Rozhkov',
   },
 ];

From bcffff3b7be95a77717538ac8d009103d2a0dff2 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Thu, 6 Jul 2023 21:36:10 +0530
Subject: [PATCH 079/281] Terminate build in CI if download fails

---
 .../mermaid/src/docs/.vitepress/scripts/fetch-avatars.ts    | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/mermaid/src/docs/.vitepress/scripts/fetch-avatars.ts b/packages/mermaid/src/docs/.vitepress/scripts/fetch-avatars.ts
index 47f371fee..cd78be782 100644
--- a/packages/mermaid/src/docs/.vitepress/scripts/fetch-avatars.ts
+++ b/packages/mermaid/src/docs/.vitepress/scripts/fetch-avatars.ts
@@ -19,6 +19,10 @@ async function download(url: string, fileName: URL) {
     await writeFile(fileName, Buffer.from(await image.arrayBuffer()));
   } catch (error) {
     console.error('failed to load', url, error);
+    // Exit the build process if we are in CI
+    if (process.env.CI) {
+      throw error;
+    }
   }
 }
 
@@ -32,7 +36,7 @@ async function fetchAvatars() {
     download(`https://github.com/${name}.png?size=100`, getAvatarPath(name));
   });
 
-  await Promise.all(avatars);
+  await Promise.allSettled(avatars);
 }
 
 fetchAvatars();

From 7d996c3d336932f1020af0c1d94f9c4a17d6376d Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Thu, 6 Jul 2023 21:48:18 +0530
Subject: [PATCH 080/281] Cleanup

---
 packages/mermaid/src/rendering-util/splitText.ts | 14 +-------------
 1 file changed, 1 insertion(+), 13 deletions(-)

diff --git a/packages/mermaid/src/rendering-util/splitText.ts b/packages/mermaid/src/rendering-util/splitText.ts
index 64a6cebbe..8b31c4ce6 100644
--- a/packages/mermaid/src/rendering-util/splitText.ts
+++ b/packages/mermaid/src/rendering-util/splitText.ts
@@ -39,12 +39,6 @@ export function splitWordToFitWidth(
   word: MarkdownWord
 ): [MarkdownWord, MarkdownWord] {
   const characters = splitTextToChars(word.content);
-  if (characters.length === 0) {
-    return [
-      { content: '', type: word.type },
-      { content: '', type: word.type },
-    ];
-  }
   return splitWordToFitWidthRecursion(checkFit, [], characters, word.type);
 }
 
@@ -54,8 +48,6 @@ function splitWordToFitWidthRecursion(
   remainingChars: string[],
   type: MarkdownWordType
 ): [MarkdownWord, MarkdownWord] {
-  // eslint-disable-next-line no-console
-  console.error({ usedChars, remainingChars });
   if (remainingChars.length === 0) {
     return [
       { content: usedChars.join(''), type },
@@ -94,8 +86,6 @@ function splitLineToFitWidthRecursion(
   lines: MarkdownLine[] = [],
   newLine: MarkdownLine = []
 ): MarkdownLine[] {
-  // eslint-disable-next-line no-console
-  console.error({ words, lines, newLine });
   // Return if there is nothing left to split
   if (words.length === 0) {
     // If there is a new line, add it to the lines
@@ -110,8 +100,6 @@ function splitLineToFitWidthRecursion(
     words.shift();
   }
   const nextWord: MarkdownWord = words.shift() ?? { content: ' ', type: 'normal' };
-
-  // const nextWordWithJoiner: MarkdownWord = { ...nextWord, content: joiner + nextWord.content };
   const lineWithNextWord: MarkdownLine = [...newLine];
   if (joiner !== '') {
     lineWithNextWord.push({ content: joiner, type: 'normal' });
@@ -128,7 +116,7 @@ function splitLineToFitWidthRecursion(
     // There was text in newLine, so add it to lines and push nextWord back into words.
     lines.push(newLine);
     words.unshift(nextWord);
-  } else {
+  } else if (nextWord.content) {
     // There was no text in newLine, so we need to split nextWord
     const [line, rest] = splitWordToFitWidth(checkFit, nextWord);
     lines.push([line]);

From 355586f29772dca57f1e5a0886bca8b669d572dd Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Thu, 6 Jul 2023 22:03:48 +0530
Subject: [PATCH 081/281] Run PR-labeler-config-validator only if config
 changes

---
 .github/workflows/pr-labeler-config-validator.yml | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/.github/workflows/pr-labeler-config-validator.yml b/.github/workflows/pr-labeler-config-validator.yml
index af5c477d6..d928eb0fa 100644
--- a/.github/workflows/pr-labeler-config-validator.yml
+++ b/.github/workflows/pr-labeler-config-validator.yml
@@ -1,11 +1,7 @@
 name: Validate PR Labeler Configuration
 on:
-  push: {}
+  push:
   pull_request:
-    types:
-      - opened
-      - synchronize
-      - ready_for_review
 
 jobs:
   pr-labeler:
@@ -13,7 +9,14 @@ jobs:
     steps:
       - name: Checkout Repository
         uses: actions/checkout@v3
+      - uses: dorny/paths-filter@v2
+        id: filter
+        with:
+          filters: |
+            pr-labeller:
+              - '.github/pr-labeler.yml'
       - name: Validate Configuration
+        if: steps.filter.outputs.pr-labeller == 'true'
         uses: Yash-Singh1/pr-labeler-config-validator@releases/v0.0.3
         with:
           configuration-path: .github/pr-labeler.yml

From 1682fa1e53ee2d82c8d140023d8f04f9eb6496c6 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Thu, 6 Jul 2023 22:05:58 +0530
Subject: [PATCH 082/281] Update PR Labeler config

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

diff --git a/.github/pr-labeler.yml b/.github/pr-labeler.yml
index 077cc568b..67e679839 100644
--- a/.github/pr-labeler.yml
+++ b/.github/pr-labeler.yml
@@ -1,3 +1,3 @@
-'Type: Bug / Error': 'bug/*'
-'Type: Enhancement': 'feature/*'
+'Type: Bug / Error': ['bug/*', fix/*]
+'Type: Enhancement': ['feature/*', 'feat/*']
 'Type: Other': 'other/*'

From 4af2fca339735a9343be7b77185c03acf1b58b1e Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Thu, 6 Jul 2023 19:40:54 -0300
Subject: [PATCH 083/281] Add documentation for feature

---
 docs/syntax/entityRelationshipDiagram.md                      | 2 +-
 packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/syntax/entityRelationshipDiagram.md b/docs/syntax/entityRelationshipDiagram.md
index 9fa5fa517..dd887b0ee 100644
--- a/docs/syntax/entityRelationshipDiagram.md
+++ b/docs/syntax/entityRelationshipDiagram.md
@@ -196,7 +196,7 @@ erDiagram
     }
 ```
 
-The `type` and `name` values must begin with an alphabetic character and may contain digits, hyphens, underscores, parentheses and square brackets. Other than that, there are no restrictions, and there is no implicit set of valid data types.
+The `type` values must begin with an alphabetic character and may contain digits, hyphens, underscores, parentheses and square brackets. The `name` values follow a similar format to `type`, but may start with an asterisk as another option to indicate an attribute is a primary key. Other than that, there are no restrictions, and there is no implicit set of valid data types.
 
 #### Attribute Keys and Comments
 
diff --git a/packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md b/packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md
index b7066ab3d..7e5fa2711 100644
--- a/packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md
+++ b/packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md
@@ -142,7 +142,7 @@ erDiagram
     }
 ```
 
-The `type` and `name` values must begin with an alphabetic character and may contain digits, hyphens, underscores, parentheses and square brackets. Other than that, there are no restrictions, and there is no implicit set of valid data types.
+The `type` values must begin with an alphabetic character and may contain digits, hyphens, underscores, parentheses and square brackets. The `name` values follow a similar format to `type`, but may start with an asterisk as another option to indicate an attribute is a primary key. Other than that, there are no restrictions, and there is no implicit set of valid data types.
 
 #### Attribute Keys and Comments
 

From 2b53e021537597819b87edfc4e06d0d292f7477c Mon Sep 17 00:00:00 2001
From: Alois Klink <alois@aloisklink.com>
Date: Fri, 7 Jul 2023 02:01:03 +0100
Subject: [PATCH 084/281] test: fix 'new default config' test

This test was accidentally removed by a bad merge commit, see
29291c89 (Merge branch 'develop' into pr/aloisklink/4112, 2023-07-06).

This test checks whether the default config defined in the
`config.schema.yaml` file matches the old default config defined in
`oldDefaultConfig.ts`.

Fixes: 29291c8901fe9d8b316f17fe4e84d1ce8ca05002
---
 packages/mermaid/src/config.spec.ts | 41 +++++++++++++++++++++++++++++
 1 file changed, 41 insertions(+)

diff --git a/packages/mermaid/src/config.spec.ts b/packages/mermaid/src/config.spec.ts
index 457cb8244..6a9eb204c 100644
--- a/packages/mermaid/src/config.spec.ts
+++ b/packages/mermaid/src/config.spec.ts
@@ -1,4 +1,6 @@
 import * as configApi from './config.js';
+import isObject from 'lodash-es/isObject.js';
+import type { MermaidConfig } from './config.type.js';
 
 describe('when working with site config', function () {
   beforeEach(() => {
@@ -69,4 +71,43 @@ describe('when working with site config', function () {
     const config_4 = configApi.getConfig();
     expect(config_4.altFontFamily).toBeUndefined();
   });
+
+  it('test new default config', async function () {
+    const { default: oldDefault } = (await import('./oldDefaultConfig.js')) as {
+      default: Required<MermaidConfig>;
+    };
+    // gitGraph used to not have this option (aka it was `undefined`)
+    oldDefault.gitGraph.useMaxWidth = false;
+
+    // class diagrams used to not have these options set (aka they were `undefined`)
+    oldDefault.class.htmlLabels = false;
+
+    const { default: newDefault } = await import('./defaultConfig.js');
+
+    // check subsets of the objects, to improve vitest error messages
+    // we can't just use `expect(newDefault).to.deep.equal(oldDefault);`
+    // because the functions in the config won't be the same
+    expect(new Set(Object.keys(newDefault))).to.deep.equal(new Set(Object.keys(oldDefault)));
+
+    // @ts-ignore: Expect that all the keys in newDefault are valid MermaidConfig keys
+    Object.keys(newDefault).forEach((key: keyof MermaidConfig) => {
+      // recurse through object, since we want to treat functions differently
+      if (!Array.isArray(newDefault[key]) && isObject(newDefault[key])) {
+        expect(new Set(Object.keys(newDefault[key]))).to.deep.equal(
+          new Set(Object.keys(oldDefault[key]))
+        );
+        for (const key2 in newDefault[key]) {
+          if (typeof newDefault[key][key2] === 'function') {
+            expect(newDefault[key][key2].toString()).to.deep.equal(
+              oldDefault[key][key2].toString()
+            );
+          } else {
+            expect(newDefault[key]).to.have.deep.property(key2, oldDefault[key][key2]);
+          }
+        }
+      } else {
+        expect(newDefault[key]).to.deep.equal(oldDefault[key]);
+      }
+    });
+  });
 });

From 8167f8c1dfa5ea656bf0a8be5be7b8b6a0413eb4 Mon Sep 17 00:00:00 2001
From: Alois Klink <alois@aloisklink.com>
Date: Fri, 7 Jul 2023 02:05:43 +0100
Subject: [PATCH 085/281] Revert "test(config): add temp test for
 defaultConfig"

This reverts commit 063cb124cd64a64c068aea8c417628a3e4058307.

This file was originally added to test whether the new implementation
of the default config in
`packages/mermaid/src/schemas/config.schema.yaml` matched the old
existing default config in `packages/mermaid/src/oldDefaultConfig.ts`,
and this test is no longer needed.
---
 packages/mermaid/src/config.spec.ts      |   41 -
 packages/mermaid/src/oldDefaultConfig.ts | 2306 ----------------------
 2 files changed, 2347 deletions(-)
 delete mode 100644 packages/mermaid/src/oldDefaultConfig.ts

diff --git a/packages/mermaid/src/config.spec.ts b/packages/mermaid/src/config.spec.ts
index 6a9eb204c..457cb8244 100644
--- a/packages/mermaid/src/config.spec.ts
+++ b/packages/mermaid/src/config.spec.ts
@@ -1,6 +1,4 @@
 import * as configApi from './config.js';
-import isObject from 'lodash-es/isObject.js';
-import type { MermaidConfig } from './config.type.js';
 
 describe('when working with site config', function () {
   beforeEach(() => {
@@ -71,43 +69,4 @@ describe('when working with site config', function () {
     const config_4 = configApi.getConfig();
     expect(config_4.altFontFamily).toBeUndefined();
   });
-
-  it('test new default config', async function () {
-    const { default: oldDefault } = (await import('./oldDefaultConfig.js')) as {
-      default: Required<MermaidConfig>;
-    };
-    // gitGraph used to not have this option (aka it was `undefined`)
-    oldDefault.gitGraph.useMaxWidth = false;
-
-    // class diagrams used to not have these options set (aka they were `undefined`)
-    oldDefault.class.htmlLabels = false;
-
-    const { default: newDefault } = await import('./defaultConfig.js');
-
-    // check subsets of the objects, to improve vitest error messages
-    // we can't just use `expect(newDefault).to.deep.equal(oldDefault);`
-    // because the functions in the config won't be the same
-    expect(new Set(Object.keys(newDefault))).to.deep.equal(new Set(Object.keys(oldDefault)));
-
-    // @ts-ignore: Expect that all the keys in newDefault are valid MermaidConfig keys
-    Object.keys(newDefault).forEach((key: keyof MermaidConfig) => {
-      // recurse through object, since we want to treat functions differently
-      if (!Array.isArray(newDefault[key]) && isObject(newDefault[key])) {
-        expect(new Set(Object.keys(newDefault[key]))).to.deep.equal(
-          new Set(Object.keys(oldDefault[key]))
-        );
-        for (const key2 in newDefault[key]) {
-          if (typeof newDefault[key][key2] === 'function') {
-            expect(newDefault[key][key2].toString()).to.deep.equal(
-              oldDefault[key][key2].toString()
-            );
-          } else {
-            expect(newDefault[key]).to.have.deep.property(key2, oldDefault[key][key2]);
-          }
-        }
-      } else {
-        expect(newDefault[key]).to.deep.equal(oldDefault[key]);
-      }
-    });
-  });
 });
diff --git a/packages/mermaid/src/oldDefaultConfig.ts b/packages/mermaid/src/oldDefaultConfig.ts
deleted file mode 100644
index fbbd39f2a..000000000
--- a/packages/mermaid/src/oldDefaultConfig.ts
+++ /dev/null
@@ -1,2306 +0,0 @@
-/**
- * Temporary file for testing whether the new mermaid configuration defined in
- * packages/mermaid/src/schemas/config.schema.yaml has the exact same default config.
- */
-
-import theme from './themes/index.js';
-import { type MermaidConfig } from './config.type.js';
-/**
- * **Configuration methods in Mermaid version 8.6.0 have been updated, to learn more[[click
- * here](8.6.0_docs.md)].**
- *
- * ## **What follows are config instructions for older versions**
- *
- * These are the default options which can be overridden with the initialization call like so:
- *
- * **Example 1:**
- *
- * ```js
- * mermaid.initialize({ flowchart:{ htmlLabels: false } });
- * ```
- *
- * **Example 2:**
- *
- * ```html
- * <script>
- * const config = {
- *   startOnLoad:true,
- *   flowchart:{ useMaxWidth:true, htmlLabels:true, curve:'cardinal'},
- *   securityLevel:'loose',
- * };
- * mermaid.initialize(config);
- * </script>
- * ```
- *
- * A summary of all options and their defaults is found [here](#mermaidapi-configuration-defaults).
- * A description of each option follows below.
- */
-const config: Partial<MermaidConfig> = {
-  /**
-   * Theme , the CSS style sheet
-   *
-   * | Parameter | Description     | Type   | Required | Values                                         |
-   * | --------- | --------------- | ------ | -------- | ---------------------------------------------- |
-   * | theme     | Built in Themes | string | Optional | 'default', 'forest', 'dark', 'neutral', 'null' |
-   *
-   * **Notes:** To disable any pre-defined mermaid theme, use "null".
-   *
-   * @example
-   *
-   * ```js
-   * {
-   *   "theme": "forest",
-   *   "themeCSS": ".node rect { fill: red; }"
-   * }
-   * ```
-   */
-  theme: 'default',
-  themeVariables: theme['default'].getThemeVariables(),
-  themeCSS: undefined,
-  /* **maxTextSize** - The maximum allowed size of the users text diagram */
-  maxTextSize: 50000,
-  darkMode: false,
-
-  /**
-   * | Parameter  | Description                                            | Type   | Required | Values                      |
-   * | ---------- | ------------------------------------------------------ | ------ | -------- | --------------------------- |
-   * | fontFamily | specifies the font to be used in the rendered diagrams | string | Required | Any Possible CSS FontFamily |
-   *
-   * **Notes:** Default value: '"trebuchet ms", verdana, arial, sans-serif;'.
-   */
-  fontFamily: '"trebuchet ms", verdana, arial, sans-serif;',
-
-  /**
-   * | Parameter | Description                                           | Type             | Required | Values                                        |
-   * | --------- | ----------------------------------------------------- | ---------------- | -------- | --------------------------------------------- |
-   * | logLevel  | This option decides the amount of logging to be used. | string \| number | Required | 'trace','debug','info','warn','error','fatal' |
-   *
-   * **Notes:**
-   *
-   * - Trace: 0
-   * - Debug: 1
-   * - Info: 2
-   * - Warn: 3
-   * - Error: 4
-   * - Fatal: 5 (default)
-   */
-  logLevel: 5,
-
-  /**
-   * | Parameter     | Description                       | Type   | Required | Values                                     |
-   * | ------------- | --------------------------------- | ------ | -------- | ------------------------------------------ |
-   * | securityLevel | Level of trust for parsed diagram | string | Required | 'sandbox', 'strict', 'loose', 'antiscript' |
-   *
-   * **Notes**:
-   *
-   * - **strict**: (**default**) HTML tags in the text are encoded and click functionality is disabled.
-   * - **antiscript**: HTML tags in text are allowed (only script elements are removed), and click
-   *   functionality is enabled.
-   * - **loose**: HTML tags in text are allowed and click functionality is enabled.
-   * - **sandbox**: With this security level, all rendering takes place in a sandboxed iframe. This
-   *   prevent any JavaScript from running in the context. This may hinder interactive functionality
-   *   of the diagram, like scripts, popups in the sequence diagram, links to other tabs or targets, etc.
-   */
-  securityLevel: 'strict',
-
-  /**
-   * | Parameter   | Description                                  | Type    | Required | Values      |
-   * | ----------- | -------------------------------------------- | ------- | -------- | ----------- |
-   * | startOnLoad | Dictates whether mermaid starts on Page load | boolean | Required | true, false |
-   *
-   * **Notes:** Default value: true
-   */
-  startOnLoad: true,
-
-  /**
-   * | Parameter           | Description                                                                  | Type    | Required | Values      |
-   * | ------------------- | ---------------------------------------------------------------------------- | ------- | -------- | ----------- |
-   * | arrowMarkerAbsolute | Controls whether or arrow markers in html code are absolute paths or anchors | boolean | Required | true, false |
-   *
-   * **Notes**:
-   *
-   * This matters if you are using base tag settings.
-   *
-   * Default value: false
-   */
-  arrowMarkerAbsolute: false,
-
-  /**
-   * This option controls which currentConfig keys are considered _secure_ and can only be changed
-   * via call to mermaidAPI.initialize. Calls to mermaidAPI.reinitialize cannot make changes to the
-   * `secure` keys in the current currentConfig. This prevents malicious graph directives from
-   * overriding a site's default security.
-   *
-   * **Notes**:
-   *
-   * Default value: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
-   */
-  secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
-  /**
-   * This option controls if the generated ids of nodes in the SVG are generated randomly or based
-   * on a seed. If set to false, the IDs are generated based on the current date and thus are not
-   * deterministic. This is the default behavior.
-   *
-   * **Notes**:
-   *
-   * This matters if your files are checked into source control e.g. git and should not change unless
-   * content is changed.
-   *
-   * Default value: false
-   */
-  deterministicIds: false,
-
-  /**
-   * This option is the optional seed for deterministic ids. if set to undefined but
-   * deterministicIds is true, a simple number iterator is used. You can set this attribute to base
-   * the seed on a static string.
-   */
-  deterministicIDSeed: undefined,
-
-  /** The object containing configurations specific for flowcharts */
-  flowchart: {
-    /**
-     * ### titleTopMargin
-     *
-     * | Parameter      | Description                                    | Type    | Required | Values             |
-     * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ |
-     * | titleTopMargin | Margin top for the text over the flowchart     | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 25
-     */
-    titleTopMargin: 25,
-
-    /**
-     * | Parameter      | Description                                     | Type    | Required | Values             |
-     * | -------------- | ----------------------------------------------- | ------- | -------- | ------------------ |
-     * | diagramPadding | Amount of padding around the diagram as a whole | Integer | Required | Any Positive Value |
-     *
-     * **Notes:**
-     *
-     * The amount of padding around the diagram as a whole so that embedded diagrams have margins,
-     * expressed in pixels
-     *
-     * Default value: 8
-     */
-    diagramPadding: 8,
-
-    /**
-     * | Parameter  | Description                                                                                  | Type    | Required | Values      |
-     * | ---------- | -------------------------------------------------------------------------------------------- | ------- | -------- | ----------- |
-     * | htmlLabels | Flag for setting whether or not a html tag should be used for rendering labels on the edges. | boolean | Required | true, false |
-     *
-     * **Notes:** Default value: true.
-     */
-    htmlLabels: true,
-
-    /**
-     * | Parameter   | Description                                         | Type    | Required | Values              |
-     * | ----------- | --------------------------------------------------- | ------- | -------- | ------------------- |
-     * | nodeSpacing | Defines the spacing between nodes on the same level | Integer | Required | Any positive Number |
-     *
-     * **Notes:**
-     *
-     * Pertains to horizontal spacing for TB (top to bottom) or BT (bottom to top) graphs, and the
-     * vertical spacing for LR as well as RL graphs.**
-     *
-     * Default value: 50
-     */
-    nodeSpacing: 50,
-
-    /**
-     * | Parameter   | Description                                           | Type    | Required | Values              |
-     * | ----------- | ----------------------------------------------------- | ------- | -------- | ------------------- |
-     * | rankSpacing | Defines the spacing between nodes on different levels | Integer | Required | Any Positive Number |
-     *
-     * **Notes**:
-     *
-     * Pertains to vertical spacing for TB (top to bottom) or BT (bottom to top), and the horizontal
-     * spacing for LR as well as RL graphs.
-     *
-     * Default value 50
-     */
-    rankSpacing: 50,
-
-    /**
-     * | Parameter | Description                                        | Type   | Required | Values                        |
-     * | --------- | -------------------------------------------------- | ------ | -------- | ----------------------------- |
-     * | curve     | Defines how mermaid renders curves for flowcharts. | string | Required | 'basis', 'linear', 'cardinal' |
-     *
-     * **Notes:**
-     *
-     * Default Value: 'basis'
-     */
-    curve: 'basis',
-    // Only used in new experimental rendering
-    // represents the padding between the labels and the shape
-    padding: 15,
-
-    /**
-     * | Parameter   | Description | Type    | Required | Values      |
-     * | ----------- | ----------- | ------- | -------- | ----------- |
-     * | useMaxWidth | See notes   | boolean | 4        | true, false |
-     *
-     * **Notes:**
-     *
-     * When this flag is set the height and width is set to 100% and is then scaling with the
-     * available space if not the absolute space required is used.
-     *
-     * Default value: true
-     */
-    useMaxWidth: true,
-
-    /**
-     * | Parameter       | Description | Type    | Required | Values                  |
-     * | --------------- | ----------- | ------- | -------- | ----------------------- |
-     * | defaultRenderer | See notes   | boolean | 4        | dagre-d3, dagre-wrapper, elk |
-     *
-     * **Notes:**
-     *
-     * Decides which rendering engine that is to be used for the rendering. Legal values are:
-     * dagre-d3 dagre-wrapper - wrapper for dagre implemented in mermaid, elk for layout using
-     * elkjs
-     *
-     * Default value: 'dagre-wrapper'
-     */
-    defaultRenderer: 'dagre-wrapper',
-    /**
-     * | Parameter       | Description | Type    | Required | Values                  |
-     * | --------------- | ----------- | ------- | -------- | ----------------------- |
-     * | wrappingWidth   | See notes   | number  | 4        | width of nodes where text is wrapped |
-     *
-     * **Notes:**
-     *
-     * When using markdown strings the text ius wrapped automatically, this
-     * value sets the max width of a text before it continues on a new line.
-     * Default value: 'dagre-wrapper'
-     */
-    wrappingWidth: 200,
-  },
-
-  /** The object containing configurations specific for sequence diagrams */
-  sequence: {
-    hideUnusedParticipants: false,
-    /**
-     * | Parameter       | Description                  | Type    | Required | Values             |
-     * | --------------- | ---------------------------- | ------- | -------- | ------------------ |
-     * | activationWidth | Width of the activation rect | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value :10
-     */
-    activationWidth: 10,
-
-    /**
-     * | Parameter      | Description                                          | Type    | Required | Values             |
-     * | -------------- | ---------------------------------------------------- | ------- | -------- | ------------------ |
-     * | diagramMarginX | Margin to the right and left of the sequence diagram | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 50
-     */
-    diagramMarginX: 50,
-
-    /**
-     * | Parameter      | Description                                       | Type    | Required | Values             |
-     * | -------------- | ------------------------------------------------- | ------- | -------- | ------------------ |
-     * | diagramMarginY | Margin to the over and under the sequence diagram | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 10
-     */
-    diagramMarginY: 10,
-
-    /**
-     * | Parameter   | Description           | Type    | Required | Values             |
-     * | ----------- | --------------------- | ------- | -------- | ------------------ |
-     * | actorMargin | Margin between actors | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 50
-     */
-    actorMargin: 50,
-
-    /**
-     * | Parameter | Description          | Type    | Required | Values             |
-     * | --------- | -------------------- | ------- | -------- | ------------------ |
-     * | width     | Width of actor boxes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 150
-     */
-    width: 150,
-
-    /**
-     * | Parameter | Description           | Type    | Required | Values             |
-     * | --------- | --------------------- | ------- | -------- | ------------------ |
-     * | height    | Height of actor boxes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 65
-     */
-    height: 65,
-
-    /**
-     * | Parameter | Description              | Type    | Required | Values             |
-     * | --------- | ------------------------ | ------- | -------- | ------------------ |
-     * | boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 10
-     */
-    boxMargin: 10,
-
-    /**
-     * | Parameter     | Description                                  | Type    | Required | Values             |
-     * | ------------- | -------------------------------------------- | ------- | -------- | ------------------ |
-     * | boxTextMargin | Margin around the text in loop/alt/opt boxes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 5
-     */
-    boxTextMargin: 5,
-
-    /**
-     * | Parameter  | Description         | Type    | Required | Values             |
-     * | ---------- | ------------------- | ------- | -------- | ------------------ |
-     * | noteMargin | margin around notes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 10
-     */
-    noteMargin: 10,
-
-    /**
-     * | Parameter     | Description            | Type    | Required | Values             |
-     * | ------------- | ---------------------- | ------- | -------- | ------------------ |
-     * | messageMargin | Space between messages | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 35
-     */
-    messageMargin: 35,
-
-    /**
-     * | Parameter    | Description                 | Type   | Required | Values                    |
-     * | ------------ | --------------------------- | ------ | -------- | ------------------------- |
-     * | messageAlign | Multiline message alignment | string | Required | 'left', 'center', 'right' |
-     *
-     * **Notes:** Default value: 'center'
-     */
-    messageAlign: 'center',
-
-    /**
-     * | Parameter    | Description                 | Type    | Required | Values      |
-     * | ------------ | --------------------------- | ------- | -------- | ----------- |
-     * | mirrorActors | Mirror actors under diagram | boolean | Required | true, false |
-     *
-     * **Notes:** Default value: true
-     */
-    mirrorActors: true,
-
-    /**
-     * | Parameter  | Description                                                             | Type    | Required | Values      |
-     * | ---------- | ----------------------------------------------------------------------- | ------- | -------- | ----------- |
-     * | forceMenus | forces actor popup menus to always be visible (to support E2E testing). | Boolean | Required | True, False |
-     *
-     * **Notes:**
-     *
-     * Default value: false.
-     */
-    forceMenus: false,
-
-    /**
-     * | Parameter       | Description                                | Type    | Required | Values             |
-     * | --------------- | ------------------------------------------ | ------- | -------- | ------------------ |
-     * | bottomMarginAdj | Prolongs the edge of the diagram downwards | Integer | Required | Any Positive Value |
-     *
-     * **Notes:**
-     *
-     * Depending on css styling this might need adjustment.
-     *
-     * Default value: 1
-     */
-    bottomMarginAdj: 1,
-
-    /**
-     * | Parameter   | Description | Type    | Required | Values      |
-     * | ----------- | ----------- | ------- | -------- | ----------- |
-     * | useMaxWidth | See Notes   | boolean | Required | true, false |
-     *
-     * **Notes:** When this flag is set to true, the height and width is set to 100% and is then
-     * scaling with the available space. If set to false, the absolute space required is used.
-     *
-     * Default value: true
-     */
-    useMaxWidth: true,
-
-    /**
-     * | Parameter   | Description                          | Type    | Required | Values      |
-     * | ----------- | ------------------------------------ | ------- | -------- | ----------- |
-     * | rightAngles | display curve arrows as right angles | boolean | Required | true, false |
-     *
-     * **Notes:**
-     *
-     * This will display arrows that start and begin at the same node as right angles, rather than a
-     * curve
-     *
-     * Default value: false
-     */
-    rightAngles: false,
-
-    /**
-     * | Parameter           | Description                     | Type    | Required | Values      |
-     * | ------------------- | ------------------------------- | ------- | -------- | ----------- |
-     * | showSequenceNumbers | This will show the node numbers | boolean | Required | true, false |
-     *
-     * **Notes:** Default value: false
-     */
-    showSequenceNumbers: false,
-
-    /**
-     * | Parameter     | Description                                        | Type    | Required | Values             |
-     * | ------------- | -------------------------------------------------- | ------- | -------- | ------------------ |
-     * | actorFontSize | This sets the font size of the actor's description | Integer | Require  | Any Positive Value |
-     *
-     * **Notes:** **Default value 14**..
-     */
-    actorFontSize: 14,
-
-    /**
-     * | Parameter       | Description                                          | Type   | Required | Values                      |
-     * | --------------- | ---------------------------------------------------- | ------ | -------- | --------------------------- |
-     * | actorFontFamily | This sets the font family of the actor's description | string | Required | Any Possible CSS FontFamily |
-     *
-     * **Notes:** Default value: "'Open Sans", sans-serif'
-     */
-    actorFontFamily: '"Open Sans", sans-serif',
-
-    /**
-     * This sets the font weight of the actor's description
-     *
-     * **Notes:** Default value: 400.
-     */
-    actorFontWeight: 400,
-
-    /**
-     * | Parameter    | Description                                     | Type    | Required | Values             |
-     * | ------------ | ----------------------------------------------- | ------- | -------- | ------------------ |
-     * | noteFontSize | This sets the font size of actor-attached notes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 14
-     */
-    noteFontSize: 14,
-
-    /**
-     * | Parameter      | Description                                        | Type   | Required | Values                      |
-     * | -------------- | -------------------------------------------------- | ------ | -------- | --------------------------- |
-     * | noteFontFamily | This sets the font family of actor-attached notes. | string | Required | Any Possible CSS FontFamily |
-     *
-     * **Notes:** Default value: ''"trebuchet ms", verdana, arial, sans-serif'
-     */
-    noteFontFamily: '"trebuchet ms", verdana, arial, sans-serif',
-
-    /**
-     * This sets the font weight of the note's description
-     *
-     * **Notes:** Default value: 400
-     */
-    noteFontWeight: 400,
-
-    /**
-     * | Parameter | Description                                          | Type   | Required | Values                    |
-     * | --------- | ---------------------------------------------------- | ------ | -------- | ------------------------- |
-     * | noteAlign | This sets the text alignment of actor-attached notes | string | required | 'left', 'center', 'right' |
-     *
-     * **Notes:** Default value: 'center'
-     */
-    noteAlign: 'center',
-
-    /**
-     * | Parameter       | Description                               | Type    | Required | Values              |
-     * | --------------- | ----------------------------------------- | ------- | -------- | ------------------- |
-     * | messageFontSize | This sets the font size of actor messages | Integer | Required | Any Positive Number |
-     *
-     * **Notes:** Default value: 16
-     */
-    messageFontSize: 16,
-
-    /**
-     * | Parameter         | Description                                 | Type   | Required | Values                      |
-     * | ----------------- | ------------------------------------------- | ------ | -------- | --------------------------- |
-     * | messageFontFamily | This sets the font family of actor messages | string | Required | Any Possible CSS FontFamily |
-     *
-     * **Notes:** Default value: '"trebuchet ms", verdana, arial, sans-serif'
-     */
-    messageFontFamily: '"trebuchet ms", verdana, arial, sans-serif',
-
-    /**
-     * This sets the font weight of the message's description
-     *
-     * **Notes:** Default value: 400.
-     */
-    messageFontWeight: 400,
-
-    /**
-     * This sets the auto-wrap state for the diagram
-     *
-     * **Notes:** Default value: false.
-     */
-    wrap: false,
-
-    /**
-     * This sets the auto-wrap padding for the diagram (sides only)
-     *
-     * **Notes:** Default value: 0.
-     */
-    wrapPadding: 10,
-
-    /**
-     * This sets the width of the loop-box (loop, alt, opt, par)
-     *
-     * **Notes:** Default value: 50.
-     */
-    labelBoxWidth: 50,
-
-    /**
-     * This sets the height of the loop-box (loop, alt, opt, par)
-     *
-     * **Notes:** Default value: 20.
-     */
-    labelBoxHeight: 20,
-
-    messageFont: function () {
-      return {
-        fontFamily: this.messageFontFamily,
-        fontSize: this.messageFontSize,
-        fontWeight: this.messageFontWeight,
-      };
-    },
-    noteFont: function () {
-      return {
-        fontFamily: this.noteFontFamily,
-        fontSize: this.noteFontSize,
-        fontWeight: this.noteFontWeight,
-      };
-    },
-    actorFont: function () {
-      return {
-        fontFamily: this.actorFontFamily,
-        fontSize: this.actorFontSize,
-        fontWeight: this.actorFontWeight,
-      };
-    },
-  },
-
-  /** The object containing configurations specific for gantt diagrams */
-  gantt: {
-    /**
-     * ### titleTopMargin
-     *
-     * | Parameter      | Description                                    | Type    | Required | Values             |
-     * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ |
-     * | titleTopMargin | Margin top for the text over the gantt diagram | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 25
-     */
-    titleTopMargin: 25,
-
-    /**
-     * | Parameter | Description                         | Type    | Required | Values             |
-     * | --------- | ----------------------------------- | ------- | -------- | ------------------ |
-     * | barHeight | The height of the bars in the graph | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 20
-     */
-    barHeight: 20,
-
-    /**
-     * | Parameter | Description                                                      | Type    | Required | Values             |
-     * | --------- | ---------------------------------------------------------------- | ------- | -------- | ------------------ |
-     * | barGap    | The margin between the different activities in the gantt diagram | Integer | Optional | Any Positive Value |
-     *
-     * **Notes:** Default value: 4
-     */
-    barGap: 4,
-
-    /**
-     * | Parameter  | Description                                                                | Type    | Required | Values             |
-     * | ---------- | -------------------------------------------------------------------------- | ------- | -------- | ------------------ |
-     * | topPadding | Margin between title and gantt diagram and between axis and gantt diagram. | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 50
-     */
-    topPadding: 50,
-
-    /**
-     * | Parameter    | Description                                                             | Type    | Required | Values             |
-     * | ------------ | ----------------------------------------------------------------------- | ------- | -------- | ------------------ |
-     * | rightPadding | The space allocated for the section name to the right of the activities | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 75
-     */
-    rightPadding: 75,
-
-    /**
-     * | Parameter   | Description                                                            | Type    | Required | Values             |
-     * | ----------- | ---------------------------------------------------------------------- | ------- | -------- | ------------------ |
-     * | leftPadding | The space allocated for the section name to the left of the activities | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 75
-     */
-    leftPadding: 75,
-
-    /**
-     * | Parameter            | Description                                  | Type    | Required | Values             |
-     * | -------------------- | -------------------------------------------- | ------- | -------- | ------------------ |
-     * | gridLineStartPadding | Vertical starting position of the grid lines | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 35
-     */
-    gridLineStartPadding: 35,
-
-    /**
-     * | Parameter | Description | Type    | Required | Values             |
-     * | --------- | ----------- | ------- | -------- | ------------------ |
-     * | fontSize  | Font size   | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 11
-     */
-    fontSize: 11,
-
-    /**
-     * | Parameter       | Description            | Type    | Required | Values             |
-     * | --------------- | ---------------------- | ------- | -------- | ------------------ |
-     * | sectionFontSize | Font size for sections | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 11
-     */
-    sectionFontSize: 11,
-
-    /**
-     * | Parameter           | Description                              | Type    | Required | Values             |
-     * | ------------------- | ---------------------------------------- | ------- | -------- | ------------------ |
-     * | numberSectionStyles | The number of alternating section styles | Integer | 4        | Any Positive Value |
-     *
-     * **Notes:** Default value: 4
-     */
-    numberSectionStyles: 4,
-
-    /**
-     * | Parameter   | Description               | Type   | Required | Values    |
-     * | ----------- | ------------------------- | ------ | -------- | --------- |
-     * | displayMode | Controls the display mode | string | 4        | 'compact' |
-     *
-     * **Notes**:
-     *
-     * - **compact**: Enables displaying multiple tasks on the same row.
-     */
-    displayMode: '',
-
-    /**
-     * | Parameter  | Description                  | Type | Required | Values           |
-     * | ---------- | ---------------------------- | ---- | -------- | ---------------- |
-     * | axisFormat | Date/time format of the axis | 3    | Required | Date in yy-mm-dd |
-     *
-     * **Notes:**
-     *
-     * This might need adjustment to match your locale and preferences
-     *
-     * Default value: '%Y-%m-%d'.
-     */
-    axisFormat: '%Y-%m-%d',
-
-    /**
-     * | Parameter    | Description | Type   | Required | Values  |
-     * | ------------ | ------------| ------ | -------- | ------- |
-     * | tickInterval | axis ticks  | string | Optional | string  |
-     *
-     * **Notes:**
-     *
-     * Pattern is /^([1-9][0-9]*)(minute|hour|day|week|month)$/
-     *
-     * Default value: undefined
-     */
-    tickInterval: undefined,
-    /**
-     * | Parameter   | Description | Type    | Required | Values      |
-     * | ----------- | ----------- | ------- | -------- | ----------- |
-     * | useMaxWidth | See notes   | boolean | 4        | true, false |
-     *
-     * **Notes:**
-     *
-     * When this flag is set the height and width is set to 100% and is then scaling with the
-     * available space if not the absolute space required is used.
-     *
-     * Default value: true
-     */
-    useMaxWidth: true,
-
-    /**
-     * | Parameter | Description | Type    | Required | Values      |
-     * | --------- | ----------- | ------- | -------- | ----------- |
-     * | topAxis   | See notes   | Boolean | 4        | True, False |
-     *
-     * **Notes:** when this flag is set date labels will be added to the top of the chart
-     *
-     * **Default value false**.
-     */
-    topAxis: false,
-
-    useWidth: undefined,
-  },
-
-  /** The object containing configurations specific for journey diagrams */
-  journey: {
-    /**
-     * | Parameter      | Description                                          | Type    | Required | Values             |
-     * | -------------- | ---------------------------------------------------- | ------- | -------- | ------------------ |
-     * | diagramMarginX | Margin to the right and left of the sequence diagram | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 50
-     */
-    diagramMarginX: 50,
-
-    /**
-     * | Parameter      | Description                                        | Type    | Required | Values             |
-     * | -------------- | -------------------------------------------------- | ------- | -------- | ------------------ |
-     * | diagramMarginY | Margin to the over and under the sequence diagram. | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 10
-     */
-    diagramMarginY: 10,
-
-    /**
-     * | Parameter   | Description           | Type    | Required | Values             |
-     * | ----------- | --------------------- | ------- | -------- | ------------------ |
-     * | actorMargin | Margin between actors | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 50
-     */
-    leftMargin: 150,
-
-    /**
-     * | Parameter | Description          | Type    | Required | Values             |
-     * | --------- | -------------------- | ------- | -------- | ------------------ |
-     * | width     | Width of actor boxes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 150
-     */
-    width: 150,
-
-    /**
-     * | Parameter | Description           | Type    | Required | Values             |
-     * | --------- | --------------------- | ------- | -------- | ------------------ |
-     * | height    | Height of actor boxes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 65
-     */
-    height: 50,
-
-    /**
-     * | Parameter | Description              | Type    | Required | Values             |
-     * | --------- | ------------------------ | ------- | -------- | ------------------ |
-     * | boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 10
-     */
-    boxMargin: 10,
-
-    /**
-     * | Parameter     | Description                                  | Type    | Required | Values             |
-     * | ------------- | -------------------------------------------- | ------- | -------- | ------------------ |
-     * | boxTextMargin | Margin around the text in loop/alt/opt boxes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 5
-     */
-    boxTextMargin: 5,
-
-    /**
-     * | Parameter  | Description         | Type    | Required | Values             |
-     * | ---------- | ------------------- | ------- | -------- | ------------------ |
-     * | noteMargin | Margin around notes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 10
-     */
-    noteMargin: 10,
-
-    /**
-     * | Parameter     | Description             | Type    | Required | Values             |
-     * | ------------- | ----------------------- | ------- | -------- | ------------------ |
-     * | messageMargin | Space between messages. | Integer | Required | Any Positive Value |
-     *
-     * **Notes:**
-     *
-     * Space between messages.
-     *
-     * Default value: 35
-     */
-    messageMargin: 35,
-
-    /**
-     * | Parameter    | Description                 | Type | Required | Values                    |
-     * | ------------ | --------------------------- | ---- | -------- | ------------------------- |
-     * | messageAlign | Multiline message alignment | 3    | 4        | 'left', 'center', 'right' |
-     *
-     * **Notes:** Default value: 'center'
-     */
-    messageAlign: 'center',
-
-    /**
-     * | Parameter       | Description                                | Type    | Required | Values             |
-     * | --------------- | ------------------------------------------ | ------- | -------- | ------------------ |
-     * | bottomMarginAdj | Prolongs the edge of the diagram downwards | Integer | 4        | Any Positive Value |
-     *
-     * **Notes:**
-     *
-     * Depending on css styling this might need adjustment.
-     *
-     * Default value: 1
-     */
-    bottomMarginAdj: 1,
-
-    /**
-     * | Parameter   | Description | Type    | Required | Values      |
-     * | ----------- | ----------- | ------- | -------- | ----------- |
-     * | useMaxWidth | See notes   | boolean | 4        | true, false |
-     *
-     * **Notes:**
-     *
-     * When this flag is set the height and width is set to 100% and is then scaling with the
-     * available space if not the absolute space required is used.
-     *
-     * Default value: true
-     */
-    useMaxWidth: true,
-
-    /**
-     * | Parameter   | Description                       | Type | Required | Values      |
-     * | ----------- | --------------------------------- | ---- | -------- | ----------- |
-     * | rightAngles | Curved Arrows become Right Angles | 3    | 4        | true, false |
-     *
-     * **Notes:**
-     *
-     * This will display arrows that start and begin at the same node as right angles, rather than a
-     * curves
-     *
-     * Default value: false
-     */
-    rightAngles: false,
-    taskFontSize: 14,
-    taskFontFamily: '"Open Sans", sans-serif',
-    taskMargin: 50,
-    // width of activation box
-    activationWidth: 10,
-
-    // text placement as: tspan | fo | old only text as before
-    textPlacement: 'fo',
-    actorColours: ['#8FBC8F', '#7CFC00', '#00FFFF', '#20B2AA', '#B0E0E6', '#FFFFE0'],
-
-    sectionFills: ['#191970', '#8B008B', '#4B0082', '#2F4F4F', '#800000', '#8B4513', '#00008B'],
-    sectionColours: ['#fff'],
-  },
-  /** The object containing configurations specific for timeline diagrams */
-  timeline: {
-    /**
-     * | Parameter      | Description                                          | Type    | Required | Values             |
-     * | -------------- | ---------------------------------------------------- | ------- | -------- | ------------------ |
-     * | diagramMarginX | Margin to the right and left of the sequence diagram | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 50
-     */
-    diagramMarginX: 50,
-
-    /**
-     * | Parameter      | Description                                        | Type    | Required | Values             |
-     * | -------------- | -------------------------------------------------- | ------- | -------- | ------------------ |
-     * | diagramMarginY | Margin to the over and under the sequence diagram. | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 10
-     */
-    diagramMarginY: 10,
-
-    /**
-     * | Parameter   | Description           | Type    | Required | Values             |
-     * | ----------- | --------------------- | ------- | -------- | ------------------ |
-     * | actorMargin | Margin between actors | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 50
-     */
-    leftMargin: 150,
-
-    /**
-     * | Parameter | Description          | Type    | Required | Values             |
-     * | --------- | -------------------- | ------- | -------- | ------------------ |
-     * | width     | Width of actor boxes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 150
-     */
-    width: 150,
-
-    /**
-     * | Parameter | Description           | Type    | Required | Values             |
-     * | --------- | --------------------- | ------- | -------- | ------------------ |
-     * | height    | Height of actor boxes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 65
-     */
-    height: 50,
-
-    /**
-     * | Parameter | Description              | Type    | Required | Values             |
-     * | --------- | ------------------------ | ------- | -------- | ------------------ |
-     * | boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 10
-     */
-    boxMargin: 10,
-
-    /**
-     * | Parameter     | Description                                  | Type    | Required | Values             |
-     * | ------------- | -------------------------------------------- | ------- | -------- | ------------------ |
-     * | boxTextMargin | Margin around the text in loop/alt/opt boxes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 5
-     */
-    boxTextMargin: 5,
-
-    /**
-     * | Parameter  | Description         | Type    | Required | Values             |
-     * | ---------- | ------------------- | ------- | -------- | ------------------ |
-     * | noteMargin | Margin around notes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 10
-     */
-    noteMargin: 10,
-
-    /**
-     * | Parameter     | Description             | Type    | Required | Values             |
-     * | ------------- | ----------------------- | ------- | -------- | ------------------ |
-     * | messageMargin | Space between messages. | Integer | Required | Any Positive Value |
-     *
-     * **Notes:**
-     *
-     * Space between messages.
-     *
-     * Default value: 35
-     */
-    messageMargin: 35,
-
-    /**
-     * | Parameter    | Description                 | Type | Required | Values                    |
-     * | ------------ | --------------------------- | ---- | -------- | ------------------------- |
-     * | messageAlign | Multiline message alignment | 3    | 4        | 'left', 'center', 'right' |
-     *
-     * **Notes:** Default value: 'center'
-     */
-    messageAlign: 'center',
-
-    /**
-     * | Parameter       | Description                                | Type    | Required | Values             |
-     * | --------------- | ------------------------------------------ | ------- | -------- | ------------------ |
-     * | bottomMarginAdj | Prolongs the edge of the diagram downwards | Integer | 4        | Any Positive Value |
-     *
-     * **Notes:**
-     *
-     * Depending on css styling this might need adjustment.
-     *
-     * Default value: 1
-     */
-    bottomMarginAdj: 1,
-
-    /**
-     * | Parameter   | Description | Type    | Required | Values      |
-     * | ----------- | ----------- | ------- | -------- | ----------- |
-     * | useMaxWidth | See notes   | boolean | 4        | true, false |
-     *
-     * **Notes:**
-     *
-     * When this flag is set the height and width is set to 100% and is then scaling with the
-     * available space if not the absolute space required is used.
-     *
-     * Default value: true
-     */
-    useMaxWidth: true,
-
-    /**
-     * | Parameter   | Description                       | Type | Required | Values      |
-     * | ----------- | --------------------------------- | ---- | -------- | ----------- |
-     * | rightAngles | Curved Arrows become Right Angles | 3    | 4        | true, false |
-     *
-     * **Notes:**
-     *
-     * This will display arrows that start and begin at the same node as right angles, rather than a
-     * curves
-     *
-     * Default value: false
-     */
-    rightAngles: false,
-    taskFontSize: 14,
-    taskFontFamily: '"Open Sans", sans-serif',
-    taskMargin: 50,
-    // width of activation box
-    activationWidth: 10,
-
-    // text placement as: tspan | fo | old only text as before
-    textPlacement: 'fo',
-    actorColours: ['#8FBC8F', '#7CFC00', '#00FFFF', '#20B2AA', '#B0E0E6', '#FFFFE0'],
-
-    sectionFills: ['#191970', '#8B008B', '#4B0082', '#2F4F4F', '#800000', '#8B4513', '#00008B'],
-    sectionColours: ['#fff'],
-    disableMulticolor: false,
-  },
-  class: {
-    /**
-     * ### titleTopMargin
-     *
-     * | Parameter      | Description                                    | Type    | Required | Values             |
-     * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ |
-     * | titleTopMargin | Margin top for the text over the class diagram | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 25
-     */
-    titleTopMargin: 25,
-    arrowMarkerAbsolute: false,
-    dividerMargin: 10,
-    padding: 5,
-    textHeight: 10,
-
-    /**
-     * | Parameter   | Description | Type    | Required | Values      |
-     * | ----------- | ----------- | ------- | -------- | ----------- |
-     * | useMaxWidth | See notes   | boolean | 4        | true, false |
-     *
-     * **Notes:**
-     *
-     * When this flag is set the height and width is set to 100% and is then scaling with the
-     * available space if not the absolute space required is used.
-     *
-     * Default value: true
-     */
-    useMaxWidth: true,
-    /**
-     * | Parameter       | Description | Type    | Required | Values                  |
-     * | --------------- | ----------- | ------- | -------- | ----------------------- |
-     * | defaultRenderer | See notes   | boolean | 4        | dagre-d3, dagre-wrapper |
-     *
-     * **Notes**:
-     *
-     * Decides which rendering engine that is to be used for the rendering. Legal values are:
-     * dagre-d3 dagre-wrapper - wrapper for dagre implemented in mermaid
-     *
-     * Default value: 'dagre-d3'
-     */
-    defaultRenderer: 'dagre-wrapper',
-  },
-  state: {
-    /**
-     * ### titleTopMargin
-     *
-     * | Parameter      | Description                                    | Type    | Required | Values             |
-     * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ |
-     * | titleTopMargin | Margin top for the text over the state diagram | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 25
-     */
-    titleTopMargin: 25,
-    dividerMargin: 10,
-    sizeUnit: 5,
-    padding: 8,
-    textHeight: 10,
-    titleShift: -15,
-    noteMargin: 10,
-    forkWidth: 70,
-    forkHeight: 7,
-    // Used
-    miniPadding: 2,
-    // Font size factor, this is used to guess the width of the edges labels before rendering by dagre
-    // layout. This might need updating if/when switching font
-    fontSizeFactor: 5.02,
-    fontSize: 24,
-    labelHeight: 16,
-    edgeLengthFactor: '20',
-    compositTitleSize: 35,
-    radius: 5,
-    /**
-     * | Parameter   | Description | Type    | Required | Values      |
-     * | ----------- | ----------- | ------- | -------- | ----------- |
-     * | useMaxWidth | See notes   | boolean | 4        | true, false |
-     *
-     * **Notes:**
-     *
-     * When this flag is set the height and width is set to 100% and is then scaling with the
-     * available space if not the absolute space required is used.
-     *
-     * Default value: true
-     */
-    useMaxWidth: true,
-    /**
-     * | Parameter       | Description | Type    | Required | Values                  |
-     * | --------------- | ----------- | ------- | -------- | ----------------------- |
-     * | defaultRenderer | See notes   | boolean | 4        | dagre-d3, dagre-wrapper |
-     *
-     * **Notes:**
-     *
-     * Decides which rendering engine that is to be used for the rendering. Legal values are:
-     * dagre-d3 dagre-wrapper - wrapper for dagre implemented in mermaid
-     *
-     * Default value: 'dagre-d3'
-     */
-    defaultRenderer: 'dagre-wrapper',
-  },
-
-  /** The object containing configurations specific for entity relationship diagrams */
-  er: {
-    /**
-     * ### titleTopMargin
-     *
-     * | Parameter      | Description                                    | Type    | Required | Values             |
-     * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ |
-     * | titleTopMargin | Margin top for the text over the diagram       | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 25
-     */
-    titleTopMargin: 25,
-
-    /**
-     * | Parameter      | Description                                     | Type    | Required | Values             |
-     * | -------------- | ----------------------------------------------- | ------- | -------- | ------------------ |
-     * | diagramPadding | Amount of padding around the diagram as a whole | Integer | Required | Any Positive Value |
-     *
-     * **Notes:**
-     *
-     * The amount of padding around the diagram as a whole so that embedded diagrams have margins,
-     * expressed in pixels
-     *
-     * Default value: 20
-     */
-    diagramPadding: 20,
-
-    /**
-     * | Parameter       | Description                              | Type   | Required | Values                 |
-     * | --------------- | ---------------------------------------- | ------ | -------- | ---------------------- |
-     * | layoutDirection | Directional bias for layout of entities. | string | Required | "TB", "BT", "LR", "RL" |
-     *
-     * **Notes:**
-     *
-     * 'TB' for Top-Bottom, 'BT'for Bottom-Top, 'LR' for Left-Right, or 'RL' for Right to Left.
-     *
-     * T = top, B = bottom, L = left, and R = right.
-     *
-     * Default value: 'TB'
-     */
-    layoutDirection: 'TB',
-
-    /**
-     * | Parameter      | Description                        | Type    | Required | Values             |
-     * | -------------- | ---------------------------------- | ------- | -------- | ------------------ |
-     * | minEntityWidth | The minimum width of an entity box | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Expressed in pixels. Default value: 100
-     */
-    minEntityWidth: 100,
-
-    /**
-     * | Parameter       | Description                         | Type    | Required | Values             |
-     * | --------------- | ----------------------------------- | ------- | -------- | ------------------ |
-     * | minEntityHeight | The minimum height of an entity box | Integer | 4        | Any Positive Value |
-     *
-     * **Notes:** Expressed in pixels Default value: 75
-     */
-    minEntityHeight: 75,
-
-    /**
-     * | Parameter     | Description                                                  | Type    | Required | Values             |
-     * | ------------- | ------------------------------------------------------------ | ------- | -------- | ------------------ |
-     * | entityPadding | Minimum internal padding between text in box and box borders | Integer | 4        | Any Positive Value |
-     *
-     * **Notes:**
-     *
-     * The minimum internal padding between text in an entity box and the enclosing box borders,
-     * expressed in pixels.
-     *
-     * Default value: 15
-     */
-    entityPadding: 15,
-
-    /**
-     * | Parameter | Description                         | Type   | Required | Values               |
-     * | --------- | ----------------------------------- | ------ | -------- | -------------------- |
-     * | stroke    | Stroke color of box edges and lines | string | 4        | Any recognized color |
-     *
-     * **Notes:** Default value: 'gray'
-     */
-    stroke: 'gray',
-
-    /**
-     * | Parameter | Description                | Type   | Required | Values               |
-     * | --------- | -------------------------- | ------ | -------- | -------------------- |
-     * | fill      | Fill color of entity boxes | string | 4        | Any recognized color |
-     *
-     * **Notes:** Default value: 'honeydew'
-     */
-    fill: 'honeydew',
-
-    /**
-     * | Parameter | Description         | Type    | Required | Values             |
-     * | --------- | ------------------- | ------- | -------- | ------------------ |
-     * | fontSize  | Font Size in pixels | Integer |          | Any Positive Value |
-     *
-     * **Notes:**
-     *
-     * Font size (expressed as an integer representing a number of pixels) Default value: 12
-     */
-    fontSize: 12,
-
-    /**
-     * | Parameter   | Description | Type    | Required | Values      |
-     * | ----------- | ----------- | ------- | -------- | ----------- |
-     * | useMaxWidth | See Notes   | boolean | Required | true, false |
-     *
-     * **Notes:**
-     *
-     * When this flag is set to true, the diagram width is locked to 100% and scaled based on
-     * available space. If set to false, the diagram reserves its absolute width.
-     *
-     * Default value: true
-     */
-    useMaxWidth: true,
-  },
-
-  /** The object containing configurations specific for pie diagrams */
-  pie: {
-    useWidth: undefined,
-
-    /**
-     * | Parameter   | Description | Type    | Required | Values      |
-     * | ----------- | ----------- | ------- | -------- | ----------- |
-     * | useMaxWidth | See Notes   | boolean | Required | true, false |
-     *
-     * **Notes:**
-     *
-     * When this flag is set to true, the diagram width is locked to 100% and scaled based on
-     * available space. If set to false, the diagram reserves its absolute width.
-     *
-     * Default value: true
-     */
-    useMaxWidth: true,
-
-    /**
-     * | Parameter    | Description                                                                      | Type    | Required | Values              |
-     * | ------------ | -------------------------------------------------------------------------------- | ------- | -------- | ------------------- |
-     * | textPosition | Axial position of slice's label from zero at the center to 1 at the outside edge | Number  | Optional | Decimal from 0 to 1 |
-     *
-     * **Notes:** Default value: 0.75
-     */
-    textPosition: 0.75,
-  },
-
-  quadrantChart: {
-    /**
-     * | Parameter       | Description                        | Type    | Required | Values              |
-     * | --------------- | ---------------------------------- | ------- | -------- | ------------------- |
-     * | chartWidth      | Width of the chart                 | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 500
-     */
-    chartWidth: 500,
-    /**
-     * | Parameter       | Description                        | Type    | Required | Values              |
-     * | --------------- | ---------------------------------- | ------- | -------- | ------------------- |
-     * | chartHeight     | Height of the chart                | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 500
-     */
-    chartHeight: 500,
-    /**
-     * | Parameter          | Description                        | Type    | Required | Values              |
-     * | ------------------ | ---------------------------------- | ------- | -------- | ------------------- |
-     * | titlePadding       | Chart title top and bottom padding | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 10
-     */
-    titlePadding: 10,
-    /**
-     * | Parameter          | Description                        | Type    | Required | Values              |
-     * | ------------------ | ---------------------------------- | ------- | -------- | ------------------- |
-     * | titleFontSize      | Chart title font size              | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 20
-     */
-    titleFontSize: 20,
-    /**
-     * | Parameter       | Description                        | Type    | Required | Values              |
-     * | --------------- | ---------------------------------- | ------- | -------- | ------------------- |
-     * | quadrantPadding | Padding around the quadrant square | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 5
-     */
-    quadrantPadding: 5,
-    /**
-     * | Parameter              | Description                                                                | Type    | Required | Values              |
-     * | ---------------------- | -------------------------------------------------------------------------- | ------- | -------- | ------------------- |
-     * | quadrantTextTopPadding | quadrant title padding from top if the quadrant is rendered on top         | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 5
-     */
-    quadrantTextTopPadding: 5,
-    /**
-     * | Parameter             | Description                        | Type    | Required | Values              |
-     * | ------------------    | ---------------------------------- | ------- | -------- | ------------------- |
-     * | quadrantLabelFontSize | quadrant title font size           | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 16
-     */
-    quadrantLabelFontSize: 16,
-    /**
-     * | Parameter                         | Description                                                   | Type    | Required | Values              |
-     * | --------------------------------- | ------------------------------------------------------------- | ------- | -------- | ------------------- |
-     * | quadrantInternalBorderStrokeWidth | stroke width of edges of the box that are inside the quadrant | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 1
-     */
-    quadrantInternalBorderStrokeWidth: 1,
-    /**
-     * | Parameter                         | Description                                                    | Type    | Required | Values              |
-     * | --------------------------------- | -------------------------------------------------------------- | ------- | -------- | ------------------- |
-     * | quadrantExternalBorderStrokeWidth | stroke width of edges of the box that are outside the quadrant | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 2
-     */
-    quadrantExternalBorderStrokeWidth: 2,
-    /**
-     * | Parameter         | Description                        | Type    | Required | Values              |
-     * | ---------------   | ---------------------------------- | ------- | -------- | ------------------- |
-     * | xAxisLabelPadding | Padding around x-axis labels       | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 5
-     */
-    xAxisLabelPadding: 5,
-    /**
-     * | Parameter          | Description                        | Type    | Required | Values              |
-     * | ------------------ | ---------------------------------- | ------- | -------- | ------------------- |
-     * | xAxisLabelFontSize | x-axis label font size             | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 16
-     */
-    xAxisLabelFontSize: 16,
-    /**
-     * | Parameter     | Description                     | Type    | Required | Values              |
-     * | ------------- | ------------------------------- | ------- | -------- | ------------------- |
-     * | xAxisPosition | position of x-axis labels       | string  | Optional | 'top' or 'bottom'   |
-     *
-     * **Notes:**
-     * Default value: top
-     */
-    xAxisPosition: 'top',
-    /**
-     * | Parameter         | Description                        | Type    | Required | Values              |
-     * | ---------------   | ---------------------------------- | ------- | -------- | ------------------- |
-     * | yAxisLabelPadding | Padding around y-axis labels       | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 5
-     */
-    yAxisLabelPadding: 5,
-    /**
-     * | Parameter          | Description                        | Type    | Required | Values              |
-     * | ------------------ | ---------------------------------- | ------- | -------- | ------------------- |
-     * | yAxisLabelFontSize | y-axis label font size             | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 16
-     */
-    yAxisLabelFontSize: 16,
-    /**
-     * | Parameter     | Description                     | Type    | Required | Values              |
-     * | ------------- | ------------------------------- | ------- | -------- | ------------------- |
-     * | yAxisPosition | position of y-axis labels       | string  | Optional | 'left' or 'right'   |
-     *
-     * **Notes:**
-     * Default value: left
-     */
-    yAxisPosition: 'left',
-    /**
-     * | Parameter              | Description                            | Type    | Required | Values              |
-     * | ---------------------- | -------------------------------------- | ------- | -------- | ------------------- |
-     * | pointTextPadding       | padding between point and point label  | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 5
-     */
-    pointTextPadding: 5,
-    /**
-     * | Parameter              | Description            | Type    | Required | Values              |
-     * | ---------------------- | ---------------------- | ------- | -------- | ------------------- |
-     * | pointTextPadding       | point title font size  | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 12
-     */
-    pointLabelFontSize: 12,
-    /**
-     * | Parameter     | Description                     | Type    | Required | Values              |
-     * | ------------- | ------------------------------- | ------- | -------- | ------------------- |
-     * | pointRadius   | radius of the point to be drawn | number  | Optional | Any positive number |
-     *
-     * **Notes:**
-     * Default value: 5
-     */
-    pointRadius: 5,
-    /**
-     * | Parameter   | Description | Type    | Required | Values      |
-     * | ----------- | ----------- | ------- | -------- | ----------- |
-     * | useMaxWidth | See Notes   | boolean | Required | true, false |
-     *
-     * **Notes:**
-     *
-     * When this flag is set to true, the diagram width is locked to 100% and scaled based on
-     * available space. If set to false, the diagram reserves its absolute width.
-     *
-     * Default value: true
-     */
-    useMaxWidth: true,
-  },
-
-  /** The object containing configurations specific for req diagrams */
-  requirement: {
-    useWidth: undefined,
-
-    /**
-     * | Parameter   | Description | Type    | Required | Values      |
-     * | ----------- | ----------- | ------- | -------- | ----------- |
-     * | useMaxWidth | See Notes   | boolean | Required | true, false |
-     *
-     * **Notes:**
-     *
-     * When this flag is set to true, the diagram width is locked to 100% and scaled based on
-     * available space. If set to false, the diagram reserves its absolute width.
-     *
-     * Default value: true
-     */
-    useMaxWidth: true,
-
-    rect_fill: '#f9f9f9',
-    text_color: '#333',
-    rect_border_size: '0.5px',
-    rect_border_color: '#bbb',
-    rect_min_width: 200,
-    rect_min_height: 200,
-    fontSize: 14,
-    rect_padding: 10,
-    line_height: 20,
-  },
-  gitGraph: {
-    /**
-     * ### titleTopMargin
-     *
-     * | Parameter      | Description                                    | Type    | Required | Values             |
-     * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ |
-     * | titleTopMargin | Margin top for the text over the Git diagram   | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 25
-     */
-    titleTopMargin: 25,
-    diagramPadding: 8,
-    nodeLabel: {
-      width: 75,
-      height: 100,
-      x: -25,
-      y: 0,
-    },
-    mainBranchName: 'main',
-    mainBranchOrder: 0,
-    showCommitLabel: true,
-    showBranches: true,
-    rotateCommitLabel: true,
-  },
-
-  /** The object containing configurations specific for c4 diagrams */
-  c4: {
-    useWidth: undefined,
-
-    /**
-     * | Parameter      | Description                                    | Type    | Required | Values             |
-     * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ |
-     * | diagramMarginX | Margin to the right and left of the c4 diagram | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 50
-     */
-    diagramMarginX: 50,
-
-    /**
-     * | Parameter      | Description                                 | Type    | Required | Values             |
-     * | -------------- | ------------------------------------------- | ------- | -------- | ------------------ |
-     * | diagramMarginY | Margin to the over and under the c4 diagram | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 10
-     */
-    diagramMarginY: 10,
-
-    /**
-     * | Parameter     | Description           | Type    | Required | Values             |
-     * | ------------- | --------------------- | ------- | -------- | ------------------ |
-     * | c4ShapeMargin | Margin between shapes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 50
-     */
-    c4ShapeMargin: 50,
-
-    /**
-     * | Parameter      | Description            | Type    | Required | Values             |
-     * | -------------- | ---------------------- | ------- | -------- | ------------------ |
-     * | c4ShapePadding | Padding between shapes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 20
-     */
-    c4ShapePadding: 20,
-
-    /**
-     * | Parameter | Description           | Type    | Required | Values             |
-     * | --------- | --------------------- | ------- | -------- | ------------------ |
-     * | width     | Width of person boxes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 216
-     */
-    width: 216,
-
-    /**
-     * | Parameter | Description            | Type    | Required | Values             |
-     * | --------- | ---------------------- | ------- | -------- | ------------------ |
-     * | height    | Height of person boxes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 60
-     */
-    height: 60,
-
-    /**
-     * | Parameter | Description         | Type    | Required | Values             |
-     * | --------- | ------------------- | ------- | -------- | ------------------ |
-     * | boxMargin | Margin around boxes | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** Default value: 10
-     */
-    boxMargin: 10,
-
-    /**
-     * | Parameter   | Description | Type    | Required | Values      |
-     * | ----------- | ----------- | ------- | -------- | ----------- |
-     * | useMaxWidth | See Notes   | boolean | Required | true, false |
-     *
-     * **Notes:** When this flag is set to true, the height and width is set to 100% and is then
-     * scaling with the available space. If set to false, the absolute space required is used.
-     *
-     * Default value: true
-     */
-    useMaxWidth: true,
-
-    /**
-     * | Parameter    | Description | Type    | Required | Values             |
-     * | ------------ | ----------- | ------- | -------- | ------------------ |
-     * | c4ShapeInRow | See Notes   | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** How many shapes to place in each row.
-     *
-     * Default value: 4
-     */
-    c4ShapeInRow: 4,
-
-    nextLinePaddingX: 0,
-
-    /**
-     * | Parameter       | Description | Type    | Required | Values             |
-     * | --------------- | ----------- | ------- | -------- | ------------------ |
-     * | c4BoundaryInRow | See Notes   | Integer | Required | Any Positive Value |
-     *
-     * **Notes:** How many boundaries to place in each row.
-     *
-     * Default value: 2
-     */
-    c4BoundaryInRow: 2,
-
-    /**
-     * This sets the font size of Person shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    personFontSize: 14,
-    /**
-     * This sets the font family of Person shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    personFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of Person shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    personFontWeight: 'normal',
-
-    /**
-     * This sets the font size of External Person shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    external_personFontSize: 14,
-    /**
-     * This sets the font family of External Person shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    external_personFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of External Person shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    external_personFontWeight: 'normal',
-
-    /**
-     * This sets the font size of System shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    systemFontSize: 14,
-    /**
-     * This sets the font family of System shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    systemFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of System shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    systemFontWeight: 'normal',
-
-    /**
-     * This sets the font size of External System shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    external_systemFontSize: 14,
-    /**
-     * This sets the font family of External System shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    external_systemFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of External System shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    external_systemFontWeight: 'normal',
-
-    /**
-     * This sets the font size of System DB shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    system_dbFontSize: 14,
-    /**
-     * This sets the font family of System DB shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    system_dbFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of System DB shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    system_dbFontWeight: 'normal',
-
-    /**
-     * This sets the font size of External System DB shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    external_system_dbFontSize: 14,
-    /**
-     * This sets the font family of External System DB shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    external_system_dbFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of External System DB shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    external_system_dbFontWeight: 'normal',
-
-    /**
-     * This sets the font size of System Queue shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    system_queueFontSize: 14,
-    /**
-     * This sets the font family of System Queue shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    system_queueFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of System Queue shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    system_queueFontWeight: 'normal',
-
-    /**
-     * This sets the font size of External System Queue shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    external_system_queueFontSize: 14,
-    /**
-     * This sets the font family of External System Queue shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    external_system_queueFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of External System Queue shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    external_system_queueFontWeight: 'normal',
-
-    /**
-     * This sets the font size of Boundary shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    boundaryFontSize: 14,
-    /**
-     * This sets the font family of Boundary shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    boundaryFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of Boundary shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    boundaryFontWeight: 'normal',
-
-    /**
-     * This sets the font size of Message shape for the diagram
-     *
-     * **Notes:** Default value: 12.
-     */
-    messageFontSize: 12,
-    /**
-     * This sets the font family of Message shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    messageFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of Message shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    messageFontWeight: 'normal',
-
-    /**
-     * This sets the font size of Container shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    containerFontSize: 14,
-    /**
-     * This sets the font family of Container shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    containerFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of Container shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    containerFontWeight: 'normal',
-
-    /**
-     * This sets the font size of External Container shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    external_containerFontSize: 14,
-    /**
-     * This sets the font family of External Container shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    external_containerFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of External Container shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    external_containerFontWeight: 'normal',
-
-    /**
-     * This sets the font size of Container DB shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    container_dbFontSize: 14,
-    /**
-     * This sets the font family of Container DB shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    container_dbFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of Container DB shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    container_dbFontWeight: 'normal',
-
-    /**
-     * This sets the font size of External Container DB shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    external_container_dbFontSize: 14,
-    /**
-     * This sets the font family of External Container DB shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    external_container_dbFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of External Container DB shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    external_container_dbFontWeight: 'normal',
-
-    /**
-     * This sets the font size of Container Queue shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    container_queueFontSize: 14,
-    /**
-     * This sets the font family of Container Queue shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    container_queueFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of Container Queue shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    container_queueFontWeight: 'normal',
-
-    /**
-     * This sets the font size of External Container Queue shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    external_container_queueFontSize: 14,
-    /**
-     * This sets the font family of External Container Queue shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    external_container_queueFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of External Container Queue shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    external_container_queueFontWeight: 'normal',
-
-    /**
-     * This sets the font size of Component shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    componentFontSize: 14,
-    /**
-     * This sets the font family of Component shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    componentFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of Component shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    componentFontWeight: 'normal',
-
-    /**
-     * This sets the font size of External Component shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    external_componentFontSize: 14,
-    /**
-     * This sets the font family of External Component shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    external_componentFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of External Component shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    external_componentFontWeight: 'normal',
-
-    /**
-     * This sets the font size of Component DB shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    component_dbFontSize: 14,
-    /**
-     * This sets the font family of Component DB shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    component_dbFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of Component DB shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    component_dbFontWeight: 'normal',
-
-    /**
-     * This sets the font size of External Component DB shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    external_component_dbFontSize: 14,
-    /**
-     * This sets the font family of External Component DB shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    external_component_dbFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of External Component DB shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    external_component_dbFontWeight: 'normal',
-
-    /**
-     * This sets the font size of Component Queue shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    component_queueFontSize: 14,
-    /**
-     * This sets the font family of Component Queue shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    component_queueFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of Component Queue shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    component_queueFontWeight: 'normal',
-
-    /**
-     * This sets the font size of External Component Queue shape for the diagram
-     *
-     * **Notes:** Default value: 14.
-     */
-    external_component_queueFontSize: 14,
-    /**
-     * This sets the font family of External Component Queue shape for the diagram
-     *
-     * **Notes:** Default value: "Open Sans", sans-serif.
-     */
-    external_component_queueFontFamily: '"Open Sans", sans-serif',
-    /**
-     * This sets the font weight of External Component Queue shape for the diagram
-     *
-     * **Notes:** Default value: normal.
-     */
-    external_component_queueFontWeight: 'normal',
-
-    /**
-     * This sets the auto-wrap state for the diagram
-     *
-     * **Notes:** Default value: true.
-     */
-    wrap: true,
-
-    /**
-     * This sets the auto-wrap padding for the diagram (sides only)
-     *
-     * **Notes:** Default value: 0.
-     */
-    wrapPadding: 10,
-
-    personFont: function () {
-      return {
-        fontFamily: this.personFontFamily,
-        fontSize: this.personFontSize,
-        fontWeight: this.personFontWeight,
-      };
-    },
-
-    external_personFont: function () {
-      return {
-        fontFamily: this.external_personFontFamily,
-        fontSize: this.external_personFontSize,
-        fontWeight: this.external_personFontWeight,
-      };
-    },
-
-    systemFont: function () {
-      return {
-        fontFamily: this.systemFontFamily,
-        fontSize: this.systemFontSize,
-        fontWeight: this.systemFontWeight,
-      };
-    },
-
-    external_systemFont: function () {
-      return {
-        fontFamily: this.external_systemFontFamily,
-        fontSize: this.external_systemFontSize,
-        fontWeight: this.external_systemFontWeight,
-      };
-    },
-
-    system_dbFont: function () {
-      return {
-        fontFamily: this.system_dbFontFamily,
-        fontSize: this.system_dbFontSize,
-        fontWeight: this.system_dbFontWeight,
-      };
-    },
-
-    external_system_dbFont: function () {
-      return {
-        fontFamily: this.external_system_dbFontFamily,
-        fontSize: this.external_system_dbFontSize,
-        fontWeight: this.external_system_dbFontWeight,
-      };
-    },
-
-    system_queueFont: function () {
-      return {
-        fontFamily: this.system_queueFontFamily,
-        fontSize: this.system_queueFontSize,
-        fontWeight: this.system_queueFontWeight,
-      };
-    },
-
-    external_system_queueFont: function () {
-      return {
-        fontFamily: this.external_system_queueFontFamily,
-        fontSize: this.external_system_queueFontSize,
-        fontWeight: this.external_system_queueFontWeight,
-      };
-    },
-
-    containerFont: function () {
-      return {
-        fontFamily: this.containerFontFamily,
-        fontSize: this.containerFontSize,
-        fontWeight: this.containerFontWeight,
-      };
-    },
-
-    external_containerFont: function () {
-      return {
-        fontFamily: this.external_containerFontFamily,
-        fontSize: this.external_containerFontSize,
-        fontWeight: this.external_containerFontWeight,
-      };
-    },
-
-    container_dbFont: function () {
-      return {
-        fontFamily: this.container_dbFontFamily,
-        fontSize: this.container_dbFontSize,
-        fontWeight: this.container_dbFontWeight,
-      };
-    },
-
-    external_container_dbFont: function () {
-      return {
-        fontFamily: this.external_container_dbFontFamily,
-        fontSize: this.external_container_dbFontSize,
-        fontWeight: this.external_container_dbFontWeight,
-      };
-    },
-
-    container_queueFont: function () {
-      return {
-        fontFamily: this.container_queueFontFamily,
-        fontSize: this.container_queueFontSize,
-        fontWeight: this.container_queueFontWeight,
-      };
-    },
-
-    external_container_queueFont: function () {
-      return {
-        fontFamily: this.external_container_queueFontFamily,
-        fontSize: this.external_container_queueFontSize,
-        fontWeight: this.external_container_queueFontWeight,
-      };
-    },
-
-    componentFont: function () {
-      return {
-        fontFamily: this.componentFontFamily,
-        fontSize: this.componentFontSize,
-        fontWeight: this.componentFontWeight,
-      };
-    },
-
-    external_componentFont: function () {
-      return {
-        fontFamily: this.external_componentFontFamily,
-        fontSize: this.external_componentFontSize,
-        fontWeight: this.external_componentFontWeight,
-      };
-    },
-
-    component_dbFont: function () {
-      return {
-        fontFamily: this.component_dbFontFamily,
-        fontSize: this.component_dbFontSize,
-        fontWeight: this.component_dbFontWeight,
-      };
-    },
-
-    external_component_dbFont: function () {
-      return {
-        fontFamily: this.external_component_dbFontFamily,
-        fontSize: this.external_component_dbFontSize,
-        fontWeight: this.external_component_dbFontWeight,
-      };
-    },
-
-    component_queueFont: function () {
-      return {
-        fontFamily: this.component_queueFontFamily,
-        fontSize: this.component_queueFontSize,
-        fontWeight: this.component_queueFontWeight,
-      };
-    },
-
-    external_component_queueFont: function () {
-      return {
-        fontFamily: this.external_component_queueFontFamily,
-        fontSize: this.external_component_queueFontSize,
-        fontWeight: this.external_component_queueFontWeight,
-      };
-    },
-
-    boundaryFont: function () {
-      return {
-        fontFamily: this.boundaryFontFamily,
-        fontSize: this.boundaryFontSize,
-        fontWeight: this.boundaryFontWeight,
-      };
-    },
-
-    messageFont: function () {
-      return {
-        fontFamily: this.messageFontFamily,
-        fontSize: this.messageFontSize,
-        fontWeight: this.messageFontWeight,
-      };
-    },
-
-    // ' Colors
-    // ' ##################################
-    person_bg_color: '#08427B',
-    person_border_color: '#073B6F',
-    external_person_bg_color: '#686868',
-    external_person_border_color: '#8A8A8A',
-    system_bg_color: '#1168BD',
-    system_border_color: '#3C7FC0',
-    system_db_bg_color: '#1168BD',
-    system_db_border_color: '#3C7FC0',
-    system_queue_bg_color: '#1168BD',
-    system_queue_border_color: '#3C7FC0',
-    external_system_bg_color: '#999999',
-    external_system_border_color: '#8A8A8A',
-    external_system_db_bg_color: '#999999',
-    external_system_db_border_color: '#8A8A8A',
-    external_system_queue_bg_color: '#999999',
-    external_system_queue_border_color: '#8A8A8A',
-    container_bg_color: '#438DD5',
-    container_border_color: '#3C7FC0',
-    container_db_bg_color: '#438DD5',
-    container_db_border_color: '#3C7FC0',
-    container_queue_bg_color: '#438DD5',
-    container_queue_border_color: '#3C7FC0',
-    external_container_bg_color: '#B3B3B3',
-    external_container_border_color: '#A6A6A6',
-    external_container_db_bg_color: '#B3B3B3',
-    external_container_db_border_color: '#A6A6A6',
-    external_container_queue_bg_color: '#B3B3B3',
-    external_container_queue_border_color: '#A6A6A6',
-    component_bg_color: '#85BBF0',
-    component_border_color: '#78A8D8',
-    component_db_bg_color: '#85BBF0',
-    component_db_border_color: '#78A8D8',
-    component_queue_bg_color: '#85BBF0',
-    component_queue_border_color: '#78A8D8',
-    external_component_bg_color: '#CCCCCC',
-    external_component_border_color: '#BFBFBF',
-    external_component_db_bg_color: '#CCCCCC',
-    external_component_db_border_color: '#BFBFBF',
-    external_component_queue_bg_color: '#CCCCCC',
-    external_component_queue_border_color: '#BFBFBF',
-  },
-  mindmap: {
-    useMaxWidth: true,
-    padding: 10,
-    maxNodeWidth: 200,
-  },
-  sankey: {
-    width: 600,
-    height: 400,
-    linkColor: 'gradient',
-    nodeAlignment: 'justify',
-    useMaxWidth: false,
-  },
-  fontSize: 16,
-};
-
-if (config.class) {
-  config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
-}
-if (config.gitGraph) {
-  config.gitGraph.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
-}
-
-const keyify = (obj: any, prefix = ''): string[] =>
-  Object.keys(obj).reduce((res: string[], el): string[] => {
-    if (Array.isArray(obj[el])) {
-      return res;
-    } else if (typeof obj[el] === 'object' && obj[el] !== null) {
-      return [...res, prefix + el, ...keyify(obj[el], '')];
-    }
-    return [...res, prefix + el];
-  }, []);
-
-export const configKeys: string[] = keyify(config, '');
-export default config;

From 42da53f58a4b933035325c8762af80b5297fb976 Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Thu, 6 Jul 2023 22:15:18 -0300
Subject: [PATCH 086/281] Add imgSnapshotTest

---
 .../integration/rendering/erDiagram.spec.js   | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/cypress/integration/rendering/erDiagram.spec.js b/cypress/integration/rendering/erDiagram.spec.js
index 0c6eaa838..91c93b6a8 100644
--- a/cypress/integration/rendering/erDiagram.spec.js
+++ b/cypress/integration/rendering/erDiagram.spec.js
@@ -200,6 +200,27 @@ describe('Entity Relationship Diagram', () => {
     );
   });
 
+  it('should render entities with attributes that begin with asterisk', () => {
+    imgSnapshotTest(
+      `
+    erDiagram
+        BOOKS {
+          int         *id
+          string      name
+          varchar(99) summary
+        }
+        BOOKS }o..o{ STORES : sold
+        STORES {
+          int         *id
+          string      name
+          varchar(50) address
+        }
+        `,
+      { loglevel: 1 }
+    );
+    cy.get('svg');
+  });
+
   it('should render entities with keys', () => {
     renderGraph(
       `

From fad11bce9551d6efa5d65696f4e1127245e0bcf8 Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Thu, 6 Jul 2023 22:17:33 -0300
Subject: [PATCH 087/281] Correct one unit test and add another

---
 .../src/diagrams/er/parser/erDiagram.spec.js       | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js b/packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js
index 4ab09b2f8..2bf2f5b8c 100644
--- a/packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js
+++ b/packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js
@@ -154,11 +154,21 @@ describe('when parsing ER diagram it...', function () {
       expect(entities[entity].attributes[2].attributeName).toBe('author-ref[name](1)');
     });
 
-    it('should allow asterisk at the start of title', function () {
+    it('should allow asterisk at the start of attribute name', function () {
       const entity = 'BOOK';
       const attribute = 'string *title';
 
-      erDiagram.parser.parse(`erDiagram\n${entity}{${attribute}}`);
+      erDiagram.parser.parse(`erDiagram\n${entity}{\n${attribute}}`);
+      const entities = erDb.getEntities();
+      expect(Object.keys(entities).length).toBe(1);
+      expect(entities[entity].attributes.length).toBe(1);
+    });
+
+    it('should allow asterisks at the start of attribute declared with type and name', () => {
+      const entity = 'BOOK';
+      const attribute = 'id *the_Primary_Key';
+
+      erDiagram.parser.parse(`erDiagram\n${entity} {\n${attribute}}`);
       const entities = erDb.getEntities();
       expect(Object.keys(entities).length).toBe(1);
       expect(entities[entity].attributes.length).toBe(1);

From d58c41dbc082c36ab38d914e4d4e5702adf7c785 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 7 Jul 2023 10:02:04 +0530
Subject: [PATCH 088/281] Add tests without Intl.Segmenter

---
 .../mermaid/src/rendering-util/createText.ts  |   5 -
 .../src/rendering-util/splitText.spec.ts      | 154 ++++++++++++------
 .../mermaid/src/rendering-util/splitText.ts   |   2 +-
 3 files changed, 103 insertions(+), 58 deletions(-)

diff --git a/packages/mermaid/src/rendering-util/createText.ts b/packages/mermaid/src/rendering-util/createText.ts
index 4afe2f7f2..5f086e986 100644
--- a/packages/mermaid/src/rendering-util/createText.ts
+++ b/packages/mermaid/src/rendering-util/createText.ts
@@ -14,11 +14,7 @@ function applyStyle(dom, styleFn) {
 
 function addHtmlSpan(element, node, width, classes, addBackground = false) {
   const fo = element.append('foreignObject');
-  // const newEl = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
-  // const newEl = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
   const div = fo.append('xhtml:div');
-  // const div = body.append('div');
-  // const div = fo.append('div');
 
   const label = node.label;
   const labelClass = node.isNode ? 'nodeLabel' : 'edgeLabel';
@@ -130,7 +126,6 @@ function updateTextContentAndStyles(tspan: any, wrappedLine: MarkdownWord[]) {
       .attr('font-style', word.type === 'emphasis' ? 'italic' : 'normal')
       .attr('class', 'text-inner-tspan')
       .attr('font-weight', word.type === 'strong' ? 'bold' : 'normal');
-    // const special = ['"', "'", '.', ',', ':', ';', '!', '?', '(', ')', '[', ']', '{', '}'];
     if (index === 0) {
       innerTspan.text(word.content);
     } else {
diff --git a/packages/mermaid/src/rendering-util/splitText.spec.ts b/packages/mermaid/src/rendering-util/splitText.spec.ts
index 95512edfb..00db27ea2 100644
--- a/packages/mermaid/src/rendering-util/splitText.spec.ts
+++ b/packages/mermaid/src/rendering-util/splitText.spec.ts
@@ -1,46 +1,85 @@
 import { splitTextToChars, splitLineToFitWidth, splitLineToWords } from './splitText.js';
-import { describe, it, expect } from 'vitest';
+import { describe, it, expect, vi } from 'vitest';
 import type { CheckFitFunction, MarkdownLine, MarkdownWordType } from './types.js';
 
-describe('splitText', () => {
-  it.each([
-    { str: '', split: [] },
-    { str: '🏳️‍⚧️🏳️‍🌈👩🏾‍❤️‍👨🏻', split: ['🏳️‍⚧️', '🏳️‍🌈', '👩🏾‍❤️‍👨🏻'] },
-    { str: 'ok', split: ['o', 'k'] },
-    { str: 'abc', split: ['a', 'b', 'c'] },
-  ])('should split $str into graphemes', ({ str, split }: { str: string; split: string[] }) => {
-    expect(splitTextToChars(str)).toEqual(split);
+describe('when Intl.Segmenter is available', () => {
+  describe('splitText', () => {
+    it.each([
+      { str: '', split: [] },
+      { str: '🏳️‍⚧️🏳️‍🌈👩🏾‍❤️‍👨🏻', split: ['🏳️‍⚧️', '🏳️‍🌈', '👩🏾‍❤️‍👨🏻'] },
+      { str: 'ok', split: ['o', 'k'] },
+      { str: 'abc', split: ['a', 'b', 'c'] },
+    ])('should split $str into graphemes', ({ str, split }: { str: string; split: string[] }) => {
+      expect(splitTextToChars(str)).toEqual(split);
+    });
+  });
+
+  describe('split lines', () => {
+    it('should create valid checkFit function', () => {
+      const checkFit5 = createCheckFn(5);
+      expect(checkFit5([{ content: 'hello', type: 'normal' }])).toBe(true);
+      expect(
+        checkFit5([
+          { content: 'hello', type: 'normal' },
+          { content: 'world', type: 'normal' },
+        ])
+      ).toBe(false);
+      const checkFit1 = createCheckFn(1);
+      expect(checkFit1([{ content: 'A', type: 'normal' }])).toBe(true);
+      expect(checkFit1([{ content: '🏳️‍⚧️', type: 'normal' }])).toBe(true);
+      expect(checkFit1([{ content: '🏳️‍⚧️🏳️‍⚧️', type: 'normal' }])).toBe(false);
+    });
+
+    it.each([
+      // empty string
+      { str: 'hello world', width: 7, split: ['hello', 'world'] },
+      // width > full line
+      { str: 'hello world', width: 20, split: ['hello world'] },
+      // width < individual word
+      { str: 'hello world', width: 3, split: ['hel', 'lo', 'wor', 'ld'] },
+      { str: 'hello 12 world', width: 4, split: ['hell', 'o 12', 'worl', 'd'] },
+      { str: 'hello  1 2 world', width: 4, split: ['hell', 'o  1', '2', 'worl', 'd'] },
+      { str: 'hello  1 2 world', width: 6, split: ['hello', '  1 2', 'world'] },
+      // width = 0, impossible, so split into individual characters
+      { str: '🏳️‍⚧️🏳️‍🌈👩🏾‍❤️‍👨🏻', width: 0, split: ['🏳️‍⚧️', '🏳️‍🌈', '👩🏾‍❤️‍👨🏻'] },
+      { str: '🏳️‍⚧️🏳️‍🌈👩🏾‍❤️‍👨🏻', width: 1, split: ['🏳️‍⚧️', '🏳️‍🌈', '👩🏾‍❤️‍👨🏻'] },
+      { str: '🏳️‍⚧️🏳️‍🌈👩🏾‍❤️‍👨🏻', width: 2, split: ['🏳️‍⚧️🏳️‍🌈', '👩🏾‍❤️‍👨🏻'] },
+      { str: '🏳️‍⚧️🏳️‍🌈👩🏾‍❤️‍👨🏻', width: 3, split: ['🏳️‍⚧️🏳️‍🌈👩🏾‍❤️‍👨🏻'] },
+      { str: '中文中', width: 1, split: ['中', '文', '中'] },
+      { str: '中文中', width: 2, split: ['中文', '中'] },
+      { str: '中文中', width: 3, split: ['中文中'] },
+      { str: 'Flag 🏳️‍⚧️ this 🏳️‍🌈', width: 6, split: ['Flag 🏳️‍⚧️', 'this 🏳️‍🌈'] },
+    ])(
+      'should split $str into lines of $width characters',
+      ({ str, split, width }: { str: string; width: number; split: string[] }) => {
+        const checkFn = createCheckFn(width);
+        const line: MarkdownLine = getLineFromString(str);
+        expect(splitLineToFitWidth(line, checkFn)).toEqual(
+          split.map((str) => getLineFromString(str))
+        );
+      }
+    );
   });
 });
 
-describe('split lines', () => {
-  /**
-   * Creates a checkFunction for a given width
-   * @param width - width of characters to fit in a line
-   * @returns checkFunction
-   */
-  const createCheckFn = (width: number): CheckFitFunction => {
-    return (text: MarkdownLine) => {
-      // Join all words into a single string
-      const joinedContent = text.map((w) => w.content).join('');
-      const characters = splitTextToChars(joinedContent);
-      return characters.length <= width;
-    };
-  };
+describe('when Intl.segmenter is not available', () => {
+  beforeAll(() => {
+    vi.stubGlobal('Intl', { Segmenter: undefined });
+  });
+  afterAll(() => {
+    vi.unstubAllGlobals();
+  });
 
-  it('should create valid checkFit function', () => {
-    const checkFit5 = createCheckFn(5);
-    expect(checkFit5([{ content: 'hello', type: 'normal' }])).toBe(true);
-    expect(
-      checkFit5([
-        { content: 'hello', type: 'normal' },
-        { content: 'world', type: 'normal' },
-      ])
-    ).toBe(false);
-    const checkFit1 = createCheckFn(1);
-    expect(checkFit1([{ content: 'A', type: 'normal' }])).toBe(true);
-    expect(checkFit1([{ content: '🏳️‍⚧️', type: 'normal' }])).toBe(true);
-    expect(checkFit1([{ content: '🏳️‍⚧️🏳️‍⚧️', type: 'normal' }])).toBe(false);
+  it.each([
+    { str: '', split: [] },
+    {
+      str: '🏳️‍⚧️🏳️‍🌈👩🏾‍❤️‍👨🏻',
+      split: [...'🏳️‍⚧️🏳️‍🌈👩🏾‍❤️‍👨🏻'],
+    },
+    { str: 'ok', split: ['o', 'k'] },
+    { str: 'abc', split: ['a', 'b', 'c'] },
+  ])('should split $str into characters', ({ str, split }: { str: string; split: string[] }) => {
+    expect(splitTextToChars(str)).toEqual(split);
   });
 
   it.each([
@@ -52,37 +91,34 @@ describe('split lines', () => {
     { str: 'hello world', width: 3, split: ['hel', 'lo', 'wor', 'ld'] },
     { str: 'hello 12 world', width: 4, split: ['hell', 'o 12', 'worl', 'd'] },
     { str: 'hello  1 2 world', width: 4, split: ['hell', 'o  1', '2', 'worl', 'd'] },
-    { str: 'hello  1 2 world', width: 6, split: ['hello', '  1 2', 'world'] },
+    { str: 'hello  1 2 world', width: 6, split: ['hello', ' 1 2', 'world'] },
     // width = 0, impossible, so split into individual characters
-    { str: '🏳️‍⚧️🏳️‍🌈👩🏾‍❤️‍👨🏻', width: 0, split: ['🏳️‍⚧️', '🏳️‍🌈', '👩🏾‍❤️‍👨🏻'] },
-    { str: '🏳️‍⚧️🏳️‍🌈👩🏾‍❤️‍👨🏻', width: 1, split: ['🏳️‍⚧️', '🏳️‍🌈', '👩🏾‍❤️‍👨🏻'] },
-    { str: '🏳️‍⚧️🏳️‍🌈👩🏾‍❤️‍👨🏻', width: 2, split: ['🏳️‍⚧️🏳️‍🌈', '👩🏾‍❤️‍👨🏻'] },
-    { str: '🏳️‍⚧️🏳️‍🌈👩🏾‍❤️‍👨🏻', width: 3, split: ['🏳️‍⚧️🏳️‍🌈👩🏾‍❤️‍👨🏻'] },
+    { str: 'abc', width: 0, split: ['a', 'b', 'c'] },
+    { str: '🏳️‍⚧️🏳️‍🌈👩🏾‍❤️‍👨🏻', width: 1, split: [...'🏳️‍⚧️🏳️‍🌈👩🏾‍❤️‍👨🏻'] },
     { str: '中文中', width: 1, split: ['中', '文', '中'] },
     { str: '中文中', width: 2, split: ['中文', '中'] },
     { str: '中文中', width: 3, split: ['中文中'] },
-    { str: 'Flag 🏳️‍⚧️ this 🏳️‍🌈', width: 6, split: ['Flag 🏳️‍⚧️', 'this 🏳️‍🌈'] },
   ])(
     'should split $str into lines of $width characters',
     ({ str, split, width }: { str: string; width: number; split: string[] }) => {
       const checkFn = createCheckFn(width);
       const line: MarkdownLine = getLineFromString(str);
       expect(splitLineToFitWidth(line, checkFn)).toEqual(
-        split.map((str) => splitLineToWords(str).map((content) => ({ content, type: 'normal' })))
+        split.map((str) => getLineFromString(str))
       );
     }
   );
+});
 
-  it('should handle strings with newlines', () => {
-    const checkFn: CheckFitFunction = createCheckFn(6);
-    const str = `Flag
+it('should handle strings with newlines', () => {
+  const checkFn: CheckFitFunction = createCheckFn(6);
+  const str = `Flag
   🏳️‍⚧️ this 🏳️‍🌈`;
-    expect(() =>
-      splitLineToFitWidth(getLineFromString(str), checkFn)
-    ).toThrowErrorMatchingInlineSnapshot(
-      '"splitLineToFitWidth does not support newlines in the line"'
-    );
-  });
+  expect(() =>
+    splitLineToFitWidth(getLineFromString(str), checkFn)
+  ).toThrowErrorMatchingInlineSnapshot(
+    '"splitLineToFitWidth does not support newlines in the line"'
+  );
 });
 
 const getLineFromString = (str: string, type: MarkdownWordType = 'normal'): MarkdownLine => {
@@ -91,3 +127,17 @@ const getLineFromString = (str: string, type: MarkdownWordType = 'normal'): Mark
     type,
   }));
 };
+
+/**
+ * Creates a checkFunction for a given width
+ * @param width - width of characters to fit in a line
+ * @returns checkFunction
+ */
+const createCheckFn = (width: number): CheckFitFunction => {
+  return (text: MarkdownLine) => {
+    // Join all words into a single string
+    const joinedContent = text.map((w) => w.content).join('');
+    const characters = splitTextToChars(joinedContent);
+    return characters.length <= width;
+  };
+};
diff --git a/packages/mermaid/src/rendering-util/splitText.ts b/packages/mermaid/src/rendering-util/splitText.ts
index 8b31c4ce6..103e8ca67 100644
--- a/packages/mermaid/src/rendering-util/splitText.ts
+++ b/packages/mermaid/src/rendering-util/splitText.ts
@@ -22,7 +22,7 @@ export function splitLineToWords(text: string): string[] {
   // Split by ' ' removes the ' 's from the result.
   const words = text.split(' ');
   // Add the ' 's back to the result.
-  const wordsWithSpaces = words.flatMap((s) => [s, ' ']);
+  const wordsWithSpaces = words.flatMap((s) => [s, ' ']).filter((s) => s);
   // Remove last space.
   wordsWithSpaces.pop();
   return wordsWithSpaces;

From 28406fc9c4ff0a8426d4f08d0395630b39955aee Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 7 Jul 2023 10:05:05 +0530
Subject: [PATCH 089/281] Add comments

---
 .../mermaid/src/rendering-util/createText.ts     | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/packages/mermaid/src/rendering-util/createText.ts b/packages/mermaid/src/rendering-util/createText.ts
index 5f086e986..2705a37ac 100644
--- a/packages/mermaid/src/rendering-util/createText.ts
+++ b/packages/mermaid/src/rendering-util/createText.ts
@@ -76,6 +76,15 @@ function computeWidthOfText(parentNode: any, lineHeight: number, line: MarkdownL
   return textLength;
 }
 
+/**
+ * Creates a formatted text element by breaking lines and applying styles based on
+ * the given structuredText.
+ *
+ * @param width - The maximum allowed width of the text.
+ * @param g - The parent group element to append the formatted text.
+ * @param structuredText - The structured text data to format.
+ * @param addBackground - Whether to add a background to the text.
+ */
 function createFormattedText(
   width: number,
   g: any,
@@ -117,6 +126,13 @@ function createFormattedText(
   }
 }
 
+/**
+ * Updates the text content and styles of the given tspan element based on the
+ * provided wrappedLine data.
+ *
+ * @param tspan - The tspan element to update.
+ * @param wrappedLine - The line data to apply to the tspan element.
+ */
 function updateTextContentAndStyles(tspan: any, wrappedLine: MarkdownWord[]) {
   tspan.text('');
 

From 9263f75e5bdaf32091a9d2149895dcd95b428f0f Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 7 Jul 2023 10:27:56 +0530
Subject: [PATCH 090/281] Update .github/pr-labeler.yml

Co-authored-by: Alois Klink <alois@aloisklink.com>
---
 .github/pr-labeler.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/pr-labeler.yml b/.github/pr-labeler.yml
index 67e679839..9952068ec 100644
--- a/.github/pr-labeler.yml
+++ b/.github/pr-labeler.yml
@@ -1,3 +1,3 @@
 'Type: Bug / Error': ['bug/*', fix/*]
 'Type: Enhancement': ['feature/*', 'feat/*']
-'Type: Other': 'other/*'
+'Type: Other': ['other/*', 'chore/*', 'test/*', 'refactor/*']

From 4648532814ee6895d3946c9d11b5246d053a32fc Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 7 Jul 2023 10:29:58 +0530
Subject: [PATCH 091/281] Update
 .github/workflows/pr-labeler-config-validator.yml

Co-authored-by: Alois Klink <alois@aloisklink.com>
---
 .github/workflows/pr-labeler-config-validator.yml | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/.github/workflows/pr-labeler-config-validator.yml b/.github/workflows/pr-labeler-config-validator.yml
index d928eb0fa..2fb9421b8 100644
--- a/.github/workflows/pr-labeler-config-validator.yml
+++ b/.github/workflows/pr-labeler-config-validator.yml
@@ -1,7 +1,15 @@
 name: Validate PR Labeler Configuration
 on:
   push:
+    paths:
+      - .github/workflows/pr-labeler-config-validator.yml
+      - .github/workflows/pr-labeler.yml
+      - .github/pr-labeler.yml
   pull_request:
+    paths:
+      - .github/workflows/pr-labeler-config-validator.yml
+      - .github/workflows/pr-labeler.yml
+      - .github/pr-labeler.yml
 
 jobs:
   pr-labeler:

From 052e9db16a0aeac4e3362185035d8285b2129123 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 7 Jul 2023 10:30:59 +0530
Subject: [PATCH 092/281] Remove filter action

---
 .github/workflows/pr-labeler-config-validator.yml | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/.github/workflows/pr-labeler-config-validator.yml b/.github/workflows/pr-labeler-config-validator.yml
index 2fb9421b8..ff5d8d0a1 100644
--- a/.github/workflows/pr-labeler-config-validator.yml
+++ b/.github/workflows/pr-labeler-config-validator.yml
@@ -17,14 +17,7 @@ jobs:
     steps:
       - name: Checkout Repository
         uses: actions/checkout@v3
-      - uses: dorny/paths-filter@v2
-        id: filter
-        with:
-          filters: |
-            pr-labeller:
-              - '.github/pr-labeler.yml'
       - name: Validate Configuration
-        if: steps.filter.outputs.pr-labeller == 'true'
         uses: Yash-Singh1/pr-labeler-config-validator@releases/v0.0.3
         with:
           configuration-path: .github/pr-labeler.yml

From 0f4af09398c59be6e23df389144be8800d332651 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 7 Jul 2023 10:32:13 +0530
Subject: [PATCH 093/281] Add `Area: Documentation` to labeler

---
 .github/pr-labeler.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/pr-labeler.yml b/.github/pr-labeler.yml
index 9952068ec..0bbd8db66 100644
--- a/.github/pr-labeler.yml
+++ b/.github/pr-labeler.yml
@@ -1,3 +1,4 @@
 'Type: Bug / Error': ['bug/*', fix/*]
 'Type: Enhancement': ['feature/*', 'feat/*']
 'Type: Other': ['other/*', 'chore/*', 'test/*', 'refactor/*']
+'Area: Documentation': ['docs/*']

From 88856a721f17b4d16337ecb88253d5d7297e22ce Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 7 Jul 2023 11:28:04 +0530
Subject: [PATCH 094/281] Support MERMAID_RELEASE_VERSION in docs

---
 docs/community/development.md                 |  3 ++
 packages/mermaid/package.json                 | 11 +++---
 .../scripts/update-release-version.mts        | 34 +++++++++++++++++++
 packages/mermaid/src/docs.cli.mts             |  3 ++
 packages/mermaid/src/docs.mts                 | 24 ++++++-------
 .../mermaid/src/docs/community/development.md |  3 ++
 6 files changed, 59 insertions(+), 19 deletions(-)
 create mode 100644 packages/mermaid/scripts/update-release-version.mts
 create mode 100644 packages/mermaid/src/docs.cli.mts

diff --git a/docs/community/development.md b/docs/community/development.md
index 90f728e15..0634759f5 100644
--- a/docs/community/development.md
+++ b/docs/community/development.md
@@ -223,6 +223,9 @@ If the users have no way to know that things have changed, then you haven't real
 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!
+If you are adding a new feature, add `(v<MERMAID_RELEASE_VERSION>+)` in the title or description. It will be replaced automatically with the current version number when the release happens.
+
+eg: `# Feature Name (v<MERMAID_RELEASE_VERSION>+)`
 
 We know it can sometimes be hard to code _and_ write user documentation.
 
diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index afbbed2e6..fd5a459a0 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -25,14 +25,15 @@
   "scripts": {
     "clean": "rimraf dist",
     "docs:code": "typedoc src/defaultConfig.ts src/config.ts src/mermaidAPI.ts && prettier --write ./src/docs/config/setup",
-    "docs:build": "rimraf ../../docs && pnpm docs:spellcheck && pnpm docs:code && ts-node-esm src/docs.mts",
-    "docs:verify": "pnpm docs:spellcheck && pnpm docs:code && ts-node-esm src/docs.mts --verify",
-    "docs:pre:vitepress": "pnpm --filter ./src/docs prefetch && rimraf src/vitepress && pnpm docs:code && ts-node-esm src/docs.mts --vitepress && pnpm --filter ./src/vitepress install --no-frozen-lockfile --ignore-scripts",
+    "docs:build": "rimraf ../../docs && pnpm docs:spellcheck && pnpm docs:code && ts-node-esm src/docs.cli.mts",
+    "docs:verify": "pnpm docs:spellcheck && pnpm docs:code && ts-node-esm src/docs.cli.mts --verify",
+    "docs:pre:vitepress": "pnpm --filter ./src/docs prefetch && rimraf src/vitepress && pnpm docs:code && ts-node-esm src/docs.cli.mts --vitepress && pnpm --filter ./src/vitepress install --no-frozen-lockfile --ignore-scripts",
     "docs:build:vitepress": "pnpm docs:pre:vitepress && (cd src/vitepress && pnpm run build) && cpy --flat src/docs/landing/ ./src/vitepress/.vitepress/dist/landing",
-    "docs:dev": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./src/vitepress dev\" \"ts-node-esm src/docs.mts --watch --vitepress\"",
-    "docs:dev:docker": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./src/vitepress dev:docker\" \"ts-node-esm src/docs.mts --watch --vitepress\"",
+    "docs:dev": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./src/vitepress dev\" \"ts-node-esm src/docs.cli.mts --watch --vitepress\"",
+    "docs:dev:docker": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./src/vitepress dev:docker\" \"ts-node-esm src/docs.cli.mts --watch --vitepress\"",
     "docs:serve": "pnpm docs:build:vitepress && vitepress serve src/vitepress",
     "docs:spellcheck": "cspell --config ../../cSpell.json \"src/docs/**/*.md\"",
+    "docs:release-version": "ts-node-esm scripts/update-release-version.mts",
     "types:build-config": "ts-node-esm --transpileOnly scripts/create-types-from-json-schema.mts",
     "types:verify-config": "ts-node-esm scripts/create-types-from-json-schema.mts --verify",
     "release": "pnpm build",
diff --git a/packages/mermaid/scripts/update-release-version.mts b/packages/mermaid/scripts/update-release-version.mts
new file mode 100644
index 000000000..edd2017b9
--- /dev/null
+++ b/packages/mermaid/scripts/update-release-version.mts
@@ -0,0 +1,34 @@
+/* eslint-disable no-console */
+
+/**
+ * @file Update the MERMAID_RELEASE_VERSION placeholder in the documentation source files with the current version of mermaid.
+ * So contributors adding new features will only have to add the placeholder and not worry about updating the version number.
+ *
+ */
+import { posix } from 'path';
+import {
+  getGlobs,
+  getFilesFromGlobs,
+  SOURCE_DOCS_DIR,
+  readSyncedUTF8file,
+  MERMAID_RELEASE_VERSION,
+} from '../src/docs.mjs';
+import { writeFile } from 'fs/promises';
+
+const main = async () => {
+  const sourceDirGlob = posix.join('.', SOURCE_DOCS_DIR, '**');
+  const mdFileGlobs = getGlobs([posix.join(sourceDirGlob, '*.md')]);
+  mdFileGlobs.push('!**/community/development.md');
+  const mdFiles = await getFilesFromGlobs(mdFileGlobs);
+  mdFiles.sort();
+  for (const mdFile of mdFiles) {
+    const content = readSyncedUTF8file(mdFile);
+    const updatedContent = content.replace(/<MERMAID_RELEASE_VERSION>/g, MERMAID_RELEASE_VERSION);
+    if (content !== updatedContent) {
+      await writeFile(mdFile, updatedContent);
+      console.log(`Updated MERMAID_RELEASE_VERSION in ${mdFile}`);
+    }
+  }
+};
+
+void main();
diff --git a/packages/mermaid/src/docs.cli.mts b/packages/mermaid/src/docs.cli.mts
new file mode 100644
index 000000000..067eec1c5
--- /dev/null
+++ b/packages/mermaid/src/docs.cli.mts
@@ -0,0 +1,3 @@
+import { processDocs } from './docs.mjs';
+
+void processDocs();
diff --git a/packages/mermaid/src/docs.mts b/packages/mermaid/src/docs.mts
index 356cd3cd1..e11c6104d 100644
--- a/packages/mermaid/src/docs.mts
+++ b/packages/mermaid/src/docs.mts
@@ -27,8 +27,6 @@
  *   get their absolute paths. Ensures that the location of those 2 directories is not dependent on
  *   where this file resides.
  *
- * @todo Write a test file for this. (Will need to be able to deal .mts file. Jest has trouble with
- *   it.)
  */
 import { readFileSync, writeFileSync, mkdirSync, existsSync, rmSync, rmdirSync } from 'fs';
 import { exec } from 'child_process';
@@ -46,9 +44,9 @@ import mm from 'micromatch';
 import flatmap from 'unist-util-flatmap';
 import { visit } from 'unist-util-visit';
 
-const MERMAID_MAJOR_VERSION = (
-  JSON.parse(readFileSync('../mermaid/package.json', 'utf8')).version as string
-).split('.')[0];
+export const MERMAID_RELEASE_VERSION = JSON.parse(readFileSync('../mermaid/package.json', 'utf8'))
+  .version as string;
+const MERMAID_MAJOR_VERSION = MERMAID_RELEASE_VERSION.split('.')[0];
 const CDN_URL = 'https://cdn.jsdelivr.net/npm'; // 'https://unpkg.com';
 
 const MERMAID_KEYWORD = 'mermaid';
@@ -71,7 +69,7 @@ const vitepress: boolean = process.argv.includes('--vitepress');
 const noHeader: boolean = process.argv.includes('--noHeader') || vitepress;
 
 // These paths are from the root of the mono-repo, not from the mermaid subdirectory
-const SOURCE_DOCS_DIR = 'src/docs';
+export const SOURCE_DOCS_DIR = 'src/docs';
 const FINAL_DOCS_DIR = vitepress ? 'src/vitepress' : '../../docs';
 
 const LOGMSG_TRANSFORMED = 'transformed';
@@ -158,7 +156,7 @@ const copyTransformedContents = (filename: string, doCopy = false, transformedCo
   logWasOrShouldBeTransformed(fileInFinalDocDir, doCopy);
 };
 
-const readSyncedUTF8file = (filename: string): string => {
+export const readSyncedUTF8file = (filename: string): string => {
   return readFileSync(filename, 'utf8');
 };
 
@@ -336,7 +334,7 @@ import { default as jsonSchemaReadmeBuilder } from '@adobe/jsonschema2md/lib/rea
 /**
  * Transforms the given JSON Schema into Markdown documentation
  */
-async function transormJsonSchema(file: string) {
+async function transformJsonSchema(file: string) {
   const yamlContents = readSyncedUTF8file(file);
   const jsonSchema = load(yamlContents, {
     filename: file,
@@ -480,7 +478,7 @@ const transformHtml = (filename: string) => {
   copyTransformedContents(filename, !verifyOnly, formattedHTML);
 };
 
-const getGlobs = (globs: string[]): string[] => {
+export const getGlobs = (globs: string[]): string[] => {
   globs.push('!**/dist/**', '!**/redirect.spec.ts', '!**/landing/**', '!**/node_modules/**');
   if (!vitepress) {
     globs.push(
@@ -494,12 +492,12 @@ const getGlobs = (globs: string[]): string[] => {
   return globs;
 };
 
-const getFilesFromGlobs = async (globs: string[]): Promise<string[]> => {
+export const getFilesFromGlobs = async (globs: string[]): Promise<string[]> => {
   return await globby(globs, { dot: true });
 };
 
 /** Main method (entry point) */
-const main = async () => {
+export const processDocs = async () => {
   if (verifyOnly) {
     console.log('Verifying that all files are in sync with the source files');
   }
@@ -509,7 +507,7 @@ const main = async () => {
 
   if (vitepress) {
     console.log(`${action} 1 .schema.yaml file`);
-    await transormJsonSchema('src/schemas/config.schema.yaml');
+    await transformJsonSchema('src/schemas/config.schema.yaml');
   } else {
     // skip because this creates so many Markdown files that it lags git
     console.log('Skipping 1 .schema.yaml file');
@@ -577,5 +575,3 @@ const main = async () => {
       });
   }
 };
-
-void main();
diff --git a/packages/mermaid/src/docs/community/development.md b/packages/mermaid/src/docs/community/development.md
index a5aa39539..93146f0c3 100644
--- a/packages/mermaid/src/docs/community/development.md
+++ b/packages/mermaid/src/docs/community/development.md
@@ -212,6 +212,9 @@ If the users have no way to know that things have changed, then you haven't real
 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!
+If you are adding a new feature, add `(v<MERMAID_RELEASE_VERSION>+)` in the title or description. It will be replaced automatically with the current version number when the release happens.
+
+eg: `# Feature Name (v<MERMAID_RELEASE_VERSION>+)`
 
 We know it can sometimes be hard to code _and_ write user documentation.
 

From 79d38cef4b2dde04899ca8e74cdec20f2a03f03b Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 7 Jul 2023 11:32:00 +0530
Subject: [PATCH 095/281] Run `docs:release-version` in CI

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

diff --git a/.github/workflows/publish-docs.yml b/.github/workflows/publish-docs.yml
index f63e58750..d66d61a26 100644
--- a/.github/workflows/publish-docs.yml
+++ b/.github/workflows/publish-docs.yml
@@ -36,6 +36,19 @@ jobs:
       - name: Install Packages
         run: pnpm install --frozen-lockfile
 
+      - name: Update release verion
+        run: |
+          pnpm --filter mermaid run docs:release-version
+          pnpm --filter mermaid run docs:build
+
+      - name: Commit changes
+        uses: EndBug/add-and-commit@v9
+        with:
+          add: '["docs", "packages/mermaid/src/docs"]'
+          author_name: ${{ github.actor }}
+          author_email: ${{ github.actor }}@users.noreply.github.com
+          message: 'chore: Update MERMAID_RELEASE_VERSION in docs'
+
       - name: Setup Pages
         uses: actions/configure-pages@v3
 

From 962ff73fc3d6a1813f364359ed3b7aeec176c631 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 7 Jul 2023 15:56:30 +0530
Subject: [PATCH 096/281] Batch by commit

---
 .github/workflows/e2e.yml | 1 +
 cypress/helpers/util.ts   | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index 6777a1e4f..3e6966677 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -45,6 +45,7 @@ jobs:
         env:
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
           VITEST_COVERAGE: true
+          CYPRESS_COMMIT: ${{ github.sha }}
       - name: Upload Coverage to Codecov
         uses: codecov/codecov-action@v3
         # Run step only pushes to develop and pull_requests
diff --git a/cypress/helpers/util.ts b/cypress/helpers/util.ts
index e2c330f61..2e9254e6a 100644
--- a/cypress/helpers/util.ts
+++ b/cypress/helpers/util.ts
@@ -16,7 +16,7 @@ const utf8ToB64 = (str: string): string => {
   return window.btoa(decodeURIComponent(encodeURIComponent(str)));
 };
 
-const batchId: string = 'mermaid-batch' + new Date().getTime();
+const batchId: string = 'mermaid-batch-' + Cypress.env('CYPRESS_COMMIT') || Date.now().toString();
 
 export const mermaidUrl = (
   graphStr: string,

From 07df9eeb609f9c4f608942a047641c812f442f81 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 7 Jul 2023 15:57:05 +0530
Subject: [PATCH 097/281] Rename docs.cli.mts

---
 .vscode/launch.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.vscode/launch.json b/.vscode/launch.json
index 83b80fa40..01ed07046 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -17,7 +17,7 @@
       "name": "Docs generation",
       "type": "node",
       "request": "launch",
-      "args": ["src/docs.mts"],
+      "args": ["src/docs.cli.mts"],
       "runtimeArgs": ["--loader", "ts-node/esm"],
       "cwd": "${workspaceRoot}/packages/mermaid",
       "skipFiles": ["<node_internals>/**", "**/node_modules/**"],

From 0cdf801884aacc4cd6bc91ab3d69d5c1bde6b67f Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 7 Jul 2023 17:21:18 +0530
Subject: [PATCH 098/281] Fix import file extension

---
 cypress/integration/other/configuration.spec.js           | 2 +-
 cypress/integration/other/external-diagrams.spec.js       | 2 +-
 cypress/integration/other/ghsa.spec.js                    | 2 +-
 cypress/integration/other/xss.spec.js                     | 2 +-
 cypress/integration/rendering/appli.spec.js               | 2 +-
 cypress/integration/rendering/c4.spec.js                  | 2 +-
 cypress/integration/rendering/classDiagram-v2.spec.js     | 2 +-
 cypress/integration/rendering/classDiagram.spec.js        | 2 +-
 cypress/integration/rendering/conf-and-directives.spec.js | 2 +-
 cypress/integration/rendering/current.spec.js             | 2 +-
 cypress/integration/rendering/debug.spec.js               | 2 +-
 cypress/integration/rendering/erDiagram.spec.js           | 2 +-
 cypress/integration/rendering/flowchart-elk.spec.js       | 2 +-
 cypress/integration/rendering/flowchart-v2.spec.js        | 2 +-
 cypress/integration/rendering/flowchart.spec.js           | 2 +-
 cypress/integration/rendering/gantt.spec.js               | 2 +-
 cypress/integration/rendering/gitGraph.spec.js            | 2 +-
 cypress/integration/rendering/info.spec.ts                | 2 +-
 cypress/integration/rendering/journey.spec.js             | 2 +-
 cypress/integration/rendering/mindmap.spec.ts             | 2 +-
 cypress/integration/rendering/pie.spec.js                 | 2 +-
 cypress/integration/rendering/quadrantChart.spec.js       | 2 +-
 cypress/integration/rendering/requirement.spec.js         | 2 +-
 cypress/integration/rendering/sankey.spec.ts              | 2 +-
 cypress/integration/rendering/sequencediagram.spec.js     | 2 +-
 cypress/integration/rendering/stateDiagram-v2.spec.js     | 2 +-
 cypress/integration/rendering/stateDiagram.spec.js        | 2 +-
 cypress/integration/rendering/theme.spec.js               | 2 +-
 cypress/integration/rendering/timeline.spec.ts            | 2 +-
 cypress/integration/rendering/zenuml.spec.js              | 2 +-
 30 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/cypress/integration/other/configuration.spec.js b/cypress/integration/other/configuration.spec.js
index 6df7edd84..7cbc5d105 100644
--- a/cypress/integration/other/configuration.spec.js
+++ b/cypress/integration/other/configuration.spec.js
@@ -1,4 +1,4 @@
-import { renderGraph } from '../../helpers/util.js';
+import { renderGraph } from '../../helpers/util.ts';
 describe('Configuration', () => {
   describe('arrowMarkerAbsolute', () => {
     it('should handle default value false of arrowMarkerAbsolute', () => {
diff --git a/cypress/integration/other/external-diagrams.spec.js b/cypress/integration/other/external-diagrams.spec.js
index 4ade11e81..704222f2f 100644
--- a/cypress/integration/other/external-diagrams.spec.js
+++ b/cypress/integration/other/external-diagrams.spec.js
@@ -1,4 +1,4 @@
-import { urlSnapshotTest } from '../../helpers/util.js';
+import { urlSnapshotTest } from '../../helpers/util.ts';
 
 describe('mermaid', () => {
   describe('registerDiagram', () => {
diff --git a/cypress/integration/other/ghsa.spec.js b/cypress/integration/other/ghsa.spec.js
index 912f35728..48eb57a91 100644
--- a/cypress/integration/other/ghsa.spec.js
+++ b/cypress/integration/other/ghsa.spec.js
@@ -1,4 +1,4 @@
-import { urlSnapshotTest, openURLAndVerifyRendering } from '../../helpers/util.js';
+import { urlSnapshotTest, openURLAndVerifyRendering } from '../../helpers/util.ts';
 
 describe('CSS injections', () => {
   it('should not allow CSS injections outside of the diagram', () => {
diff --git a/cypress/integration/other/xss.spec.js b/cypress/integration/other/xss.spec.js
index 76b2c47f2..fa4ca4fc8 100644
--- a/cypress/integration/other/xss.spec.js
+++ b/cypress/integration/other/xss.spec.js
@@ -1,4 +1,4 @@
-import { mermaidUrl } from '../../helpers/util.js';
+import { mermaidUrl } from '../../helpers/util.ts';
 describe('XSS', () => {
   it('should handle xss in tags', () => {
     const str =
diff --git a/cypress/integration/rendering/appli.spec.js b/cypress/integration/rendering/appli.spec.js
index 462fe869c..5def96815 100644
--- a/cypress/integration/rendering/appli.spec.js
+++ b/cypress/integration/rendering/appli.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest } from '../../helpers/util.js';
+import { imgSnapshotTest } from '../../helpers/util.ts';
 
 describe('Git Graph diagram', () => {
   it('1: should render a simple gitgraph with commit on main branch', () => {
diff --git a/cypress/integration/rendering/c4.spec.js b/cypress/integration/rendering/c4.spec.js
index 0cf128ff6..59af6504b 100644
--- a/cypress/integration/rendering/c4.spec.js
+++ b/cypress/integration/rendering/c4.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
 
 describe('C4 diagram', () => {
   it('should render a simple C4Context diagram', () => {
diff --git a/cypress/integration/rendering/classDiagram-v2.spec.js b/cypress/integration/rendering/classDiagram-v2.spec.js
index 2e7a1cbd7..be6aa643b 100644
--- a/cypress/integration/rendering/classDiagram-v2.spec.js
+++ b/cypress/integration/rendering/classDiagram-v2.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest } from '../../helpers/util.js';
+import { imgSnapshotTest } from '../../helpers/util.ts';
 describe('Class diagram V2', () => {
   it('0: should render a simple class diagram', () => {
     imgSnapshotTest(
diff --git a/cypress/integration/rendering/classDiagram.spec.js b/cypress/integration/rendering/classDiagram.spec.js
index 427b4cf0b..aa0483ca3 100644
--- a/cypress/integration/rendering/classDiagram.spec.js
+++ b/cypress/integration/rendering/classDiagram.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
 
 describe('Class diagram', () => {
   it('1: should render a simple class diagram', () => {
diff --git a/cypress/integration/rendering/conf-and-directives.spec.js b/cypress/integration/rendering/conf-and-directives.spec.js
index 3fc0f7f02..bc17f6236 100644
--- a/cypress/integration/rendering/conf-and-directives.spec.js
+++ b/cypress/integration/rendering/conf-and-directives.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest } from '../../helpers/util.js';
+import { imgSnapshotTest } from '../../helpers/util.ts';
 
 describe('Configuration and directives - nodes should be light blue', () => {
   it('No config - use default', () => {
diff --git a/cypress/integration/rendering/current.spec.js b/cypress/integration/rendering/current.spec.js
index e0b36d53a..d7bc08105 100644
--- a/cypress/integration/rendering/current.spec.js
+++ b/cypress/integration/rendering/current.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest } from '../../helpers/util.js';
+import { imgSnapshotTest } from '../../helpers/util.ts';
 
 describe('Current diagram', () => {
   it('should render a state with states in it', () => {
diff --git a/cypress/integration/rendering/debug.spec.js b/cypress/integration/rendering/debug.spec.js
index afde4af3e..56ad0f15f 100644
--- a/cypress/integration/rendering/debug.spec.js
+++ b/cypress/integration/rendering/debug.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest } from '../../helpers/util.js';
+import { imgSnapshotTest } from '../../helpers/util.ts';
 
 describe('Flowchart', () => {
   it('34: testing the label width in percy', () => {
diff --git a/cypress/integration/rendering/erDiagram.spec.js b/cypress/integration/rendering/erDiagram.spec.js
index 0c6eaa838..b14c83e6a 100644
--- a/cypress/integration/rendering/erDiagram.spec.js
+++ b/cypress/integration/rendering/erDiagram.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
 
 describe('Entity Relationship Diagram', () => {
   it('should render a simple ER diagram', () => {
diff --git a/cypress/integration/rendering/flowchart-elk.spec.js b/cypress/integration/rendering/flowchart-elk.spec.js
index 10e95af5c..221806b07 100644
--- a/cypress/integration/rendering/flowchart-elk.spec.js
+++ b/cypress/integration/rendering/flowchart-elk.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
 
 describe.skip('Flowchart ELK', () => {
   it('1-elk: should render a simple flowchart', () => {
diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js
index 091482f35..4cf563e02 100644
--- a/cypress/integration/rendering/flowchart-v2.spec.js
+++ b/cypress/integration/rendering/flowchart-v2.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
 
 describe('Flowchart v2', () => {
   it('1: should render a simple flowchart', () => {
diff --git a/cypress/integration/rendering/flowchart.spec.js b/cypress/integration/rendering/flowchart.spec.js
index d25043d28..4f6d6478e 100644
--- a/cypress/integration/rendering/flowchart.spec.js
+++ b/cypress/integration/rendering/flowchart.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
 
 describe('Graph', () => {
   it('1: should render a simple flowchart no htmlLabels', () => {
diff --git a/cypress/integration/rendering/gantt.spec.js b/cypress/integration/rendering/gantt.spec.js
index cb65f73b0..6cc7b6391 100644
--- a/cypress/integration/rendering/gantt.spec.js
+++ b/cypress/integration/rendering/gantt.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
 
 describe('Gantt diagram', () => {
   beforeEach(() => {
diff --git a/cypress/integration/rendering/gitGraph.spec.js b/cypress/integration/rendering/gitGraph.spec.js
index 43f91a983..8cf710413 100644
--- a/cypress/integration/rendering/gitGraph.spec.js
+++ b/cypress/integration/rendering/gitGraph.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest } from '../../helpers/util.js';
+import { imgSnapshotTest } from '../../helpers/util.ts';
 
 describe('Git Graph diagram', () => {
   it('1: should render a simple gitgraph with commit on main branch', () => {
diff --git a/cypress/integration/rendering/info.spec.ts b/cypress/integration/rendering/info.spec.ts
index 3db74c980..97b384eb5 100644
--- a/cypress/integration/rendering/info.spec.ts
+++ b/cypress/integration/rendering/info.spec.ts
@@ -1,4 +1,4 @@
-import { imgSnapshotTest } from '../../helpers/util.js';
+import { imgSnapshotTest } from '../../helpers/util.ts';
 
 describe('info diagram', () => {
   it('should handle an info definition', () => {
diff --git a/cypress/integration/rendering/journey.spec.js b/cypress/integration/rendering/journey.spec.js
index 6f9d9bb60..d8bef6d1b 100644
--- a/cypress/integration/rendering/journey.spec.js
+++ b/cypress/integration/rendering/journey.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
 
 describe('User journey diagram', () => {
   it('Simple test', () => {
diff --git a/cypress/integration/rendering/mindmap.spec.ts b/cypress/integration/rendering/mindmap.spec.ts
index 90d5d9edd..a77459f58 100644
--- a/cypress/integration/rendering/mindmap.spec.ts
+++ b/cypress/integration/rendering/mindmap.spec.ts
@@ -1,4 +1,4 @@
-import { imgSnapshotTest } from '../../helpers/util.js';
+import { imgSnapshotTest } from '../../helpers/util.ts';
 
 /**
  * Check whether the SVG Element has a Mindmap root
diff --git a/cypress/integration/rendering/pie.spec.js b/cypress/integration/rendering/pie.spec.js
index 8a89a0cde..01b248486 100644
--- a/cypress/integration/rendering/pie.spec.js
+++ b/cypress/integration/rendering/pie.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
 
 describe('Pie Chart', () => {
   it('should render a simple pie diagram', () => {
diff --git a/cypress/integration/rendering/quadrantChart.spec.js b/cypress/integration/rendering/quadrantChart.spec.js
index 4bcf58b60..50520eb1a 100644
--- a/cypress/integration/rendering/quadrantChart.spec.js
+++ b/cypress/integration/rendering/quadrantChart.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
 
 describe('Quadrant Chart', () => {
   it('should render if only chart type is provided', () => {
diff --git a/cypress/integration/rendering/requirement.spec.js b/cypress/integration/rendering/requirement.spec.js
index 0bf9014bf..f33ae7a0c 100644
--- a/cypress/integration/rendering/requirement.spec.js
+++ b/cypress/integration/rendering/requirement.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
 
 describe('Requirement diagram', () => {
   it('sample', () => {
diff --git a/cypress/integration/rendering/sankey.spec.ts b/cypress/integration/rendering/sankey.spec.ts
index e334b898b..ad0d75f18 100644
--- a/cypress/integration/rendering/sankey.spec.ts
+++ b/cypress/integration/rendering/sankey.spec.ts
@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
 
 describe('Sankey Diagram', () => {
   it('should render a simple example', () => {
diff --git a/cypress/integration/rendering/sequencediagram.spec.js b/cypress/integration/rendering/sequencediagram.spec.js
index 7d36c1ff1..765913824 100644
--- a/cypress/integration/rendering/sequencediagram.spec.js
+++ b/cypress/integration/rendering/sequencediagram.spec.js
@@ -1,6 +1,6 @@
 /// <reference types="Cypress" />
 
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
 
 context('Sequence diagram', () => {
   it('should render a sequence diagram with boxes', () => {
diff --git a/cypress/integration/rendering/stateDiagram-v2.spec.js b/cypress/integration/rendering/stateDiagram-v2.spec.js
index 700791621..9a1a27abe 100644
--- a/cypress/integration/rendering/stateDiagram-v2.spec.js
+++ b/cypress/integration/rendering/stateDiagram-v2.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
 
 describe('State diagram', () => {
   it('v2 should render a simple info', () => {
diff --git a/cypress/integration/rendering/stateDiagram.spec.js b/cypress/integration/rendering/stateDiagram.spec.js
index 28c24d398..01e7a2b44 100644
--- a/cypress/integration/rendering/stateDiagram.spec.js
+++ b/cypress/integration/rendering/stateDiagram.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
 
 describe('State diagram', () => {
   it('should render a simple state diagrams', () => {
diff --git a/cypress/integration/rendering/theme.spec.js b/cypress/integration/rendering/theme.spec.js
index ef3bd9a4b..c84ad0c4b 100644
--- a/cypress/integration/rendering/theme.spec.js
+++ b/cypress/integration/rendering/theme.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest } from '../../helpers/util.js';
+import { imgSnapshotTest } from '../../helpers/util.ts';
 
 describe('themeCSS balancing, it', () => {
   it('should not allow unbalanced CSS definitions', () => {
diff --git a/cypress/integration/rendering/timeline.spec.ts b/cypress/integration/rendering/timeline.spec.ts
index 6fae82fb4..68da01d50 100644
--- a/cypress/integration/rendering/timeline.spec.ts
+++ b/cypress/integration/rendering/timeline.spec.ts
@@ -1,4 +1,4 @@
-import { imgSnapshotTest } from '../../helpers/util.js';
+import { imgSnapshotTest } from '../../helpers/util.ts';
 
 describe('Timeline diagram', () => {
   it('1: should render a simple timeline with no specific sections', () => {
diff --git a/cypress/integration/rendering/zenuml.spec.js b/cypress/integration/rendering/zenuml.spec.js
index f317fbe82..53d8ae346 100644
--- a/cypress/integration/rendering/zenuml.spec.js
+++ b/cypress/integration/rendering/zenuml.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest } from '../../helpers/util.js';
+import { imgSnapshotTest } from '../../helpers/util.ts';
 
 describe('Zen UML', () => {
   it('Basic Zen UML diagram', () => {

From cd118ad5cbb402aff7703fa7b78301fd6f586848 Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Fri, 7 Jul 2023 19:59:52 -0300
Subject: [PATCH 099/281] Update erDiagram to make entity names in singular
 form

---
 cypress/integration/rendering/erDiagram.spec.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/cypress/integration/rendering/erDiagram.spec.js b/cypress/integration/rendering/erDiagram.spec.js
index 91c93b6a8..c125d6f74 100644
--- a/cypress/integration/rendering/erDiagram.spec.js
+++ b/cypress/integration/rendering/erDiagram.spec.js
@@ -204,13 +204,13 @@ describe('Entity Relationship Diagram', () => {
     imgSnapshotTest(
       `
     erDiagram
-        BOOKS {
+        BOOK {
           int         *id
           string      name
           varchar(99) summary
         }
-        BOOKS }o..o{ STORES : sold
-        STORES {
+        BOOK }o..o{ STORE : soldBy
+        STORE {
           int         *id
           string      name
           varchar(50) address

From 23f27d151aff859b8b6891ab906a84dd6816ccae Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Fri, 7 Jul 2023 22:44:34 -0300
Subject: [PATCH 100/281] Remove redundancy in unit tests

---
 .../src/diagrams/class/classDiagram.spec.ts   | 107 ++++++------------
 1 file changed, 33 insertions(+), 74 deletions(-)

diff --git a/packages/mermaid/src/diagrams/class/classDiagram.spec.ts b/packages/mermaid/src/diagrams/class/classDiagram.spec.ts
index f6a2855c0..7f3622db2 100644
--- a/packages/mermaid/src/diagrams/class/classDiagram.spec.ts
+++ b/packages/mermaid/src/diagrams/class/classDiagram.spec.ts
@@ -265,84 +265,43 @@ class C13["With Città foreign language"]
       parser.parse(str);
     });
 
-    it('should handle note with "cssClass" in it', function () {
-      const str = 'classDiagram\n' + 'note "cssClass"\n';
+    const keywords = [
+      'cssClass',
+      'callback',
+      'link',
+      'click',
+      'note',
+      'note for',
+      '<<',
+      '>>',
+      'href ',
+      'call ',
+      '~',
+      '``',
+      '_self',
+      '_blank',
+      '_parent',
+      '_top',
+    ];
+
+    test.each(keywords)('should handle a note with keyword in it', function (note: string) {
+      const str = `classDiagram
+                     note "This is a keyword: ${note}. It truly is."
+                  `;
       parser.parse(str);
+      expect(classDb.getNotes()[0].text).toEqual(`This is a keyword: ${note}. It truly is.`);
     });
 
-    it('should handle note with "callback" in it', function () {
-      const str = 'classDiagram\n' + 'note "callback"\n';
-      parser.parse(str);
-    });
-
-    it('should handle note with "link" in it', function () {
-      const str = 'classDiagram\n' + 'note "link"\n';
-      parser.parse(str);
-    });
-
-    it('should handle note with "click" in it', function () {
-      const str = 'classDiagram\n' + 'note "click"\n';
-      parser.parse(str);
-    });
-
-    it('should handle note with "note" in it', function () {
-      const str = 'classDiagram\n' + 'note "note"\n';
-      parser.parse(str);
-    });
-
-    it('should handle note with "note for" in it', function () {
-      const str = 'classDiagram\n' + 'note "note for"\n';
-      parser.parse(str);
-    });
-
-    it('should handle note with "<<" in it', function () {
-      const str = 'classDiagram\n' + 'note "<<"\n';
-      parser.parse(str);
-    });
-
-    it('should handle note with ">>" in it', function () {
-      const str = 'classDiagram\n' + 'note ">>"\n';
-      parser.parse(str);
-    });
-
-    it('should handle note with "href " in it', function () {
-      const str = 'classDiagram\n' + 'note "href "\n';
-      parser.parse(str);
-    });
-
-    it('should handle note with "call " in it', function () {
-      const str = 'classDiagram\n' + 'note "call "\n';
-      parser.parse(str);
-    });
-
-    it('should handle note with "~" in it', function () {
-      const str = 'classDiagram\n' + 'note "~"\n';
-      parser.parse(str);
-    });
-
-    it('should handle note with "``" in it', function () {
-      const str = 'classDiagram\n' + 'note "``"\n';
-      parser.parse(str);
-    });
-
-    it('should handle note with "_self" in it', function () {
-      const str = 'classDiagram\n' + 'note "_self"\n';
-      parser.parse(str);
-    });
-
-    it('should handle note with "_blank" in it', function () {
-      const str = 'classDiagram\n' + 'note "_blank"\n';
-      parser.parse(str);
-    });
-
-    it('should handle note with "_parent" in it', function () {
-      const str = 'classDiagram\n' + 'note "_parent"\n';
-      parser.parse(str);
-    });
-
-    it('should handle note with "_top" in it', function () {
-      const str = 'classDiagram\n' + 'note "_top"\n';
+    test.each(keywords)('should handle a note for with a keyword in it', function (note: string) {
+      const str = `classDiagram
+                   class Something {
+                     int id
+                     string name
+                   }
+                   note for Something "This is a keyword: ${note}. It truly is."
+                   `;
       parser.parse(str);
+      expect(classDb.getNotes()[0].text).toEqual(`This is a keyword: ${note}. It truly is.`);
     });
   });
 

From eca2efa46da3a3276c73c3e80a7d2f5e9e532475 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Sat, 8 Jul 2023 19:01:45 +0530
Subject: [PATCH 101/281] Update
 packages/mermaid/src/rendering-util/splitText.spec.ts

Co-authored-by: Alois Klink <alois@aloisklink.com>
---
 packages/mermaid/src/rendering-util/splitText.spec.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/mermaid/src/rendering-util/splitText.spec.ts b/packages/mermaid/src/rendering-util/splitText.spec.ts
index 00db27ea2..017fe9c6a 100644
--- a/packages/mermaid/src/rendering-util/splitText.spec.ts
+++ b/packages/mermaid/src/rendering-util/splitText.spec.ts
@@ -62,7 +62,11 @@ describe('when Intl.Segmenter is available', () => {
   });
 });
 
-describe('when Intl.segmenter is not available', () => {
+/**
+ * Intl.Segmenter is not supported in Firefox yet,
+ * see https://bugzilla.mozilla.org/show_bug.cgi?id=1423593 
+ */
+describe('when Intl.Segmenter is not available', () => {
   beforeAll(() => {
     vi.stubGlobal('Intl', { Segmenter: undefined });
   });

From 1e781c0c90e992a8c5b5881879c6a3cdd446ee23 Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Sat, 8 Jul 2023 13:23:46 -0300
Subject: [PATCH 102/281] Refactor unit tests

---
 .../src/diagrams/class/classDiagram.spec.ts   | 64 ++++++++++++++++---
 1 file changed, 56 insertions(+), 8 deletions(-)

diff --git a/packages/mermaid/src/diagrams/class/classDiagram.spec.ts b/packages/mermaid/src/diagrams/class/classDiagram.spec.ts
index 7f3622db2..434647806 100644
--- a/packages/mermaid/src/diagrams/class/classDiagram.spec.ts
+++ b/packages/mermaid/src/diagrams/class/classDiagram.spec.ts
@@ -266,6 +266,14 @@ class C13["With Città foreign language"]
     });
 
     const keywords = [
+      'direction',
+      'classDiagram',
+      'classDiagram-v2',
+      'namespace',
+      '}',
+      '()',
+      'class',
+      '\n',
       'cssClass',
       'callback',
       'link',
@@ -274,34 +282,74 @@ class C13["With Città foreign language"]
       'note for',
       '<<',
       '>>',
-      'href ',
       'call ',
       '~',
-      '``',
+      '~Generic~',
       '_self',
       '_blank',
       '_parent',
       '_top',
+      '<|',
+      '|>',
+      '>',
+      '<',
+      '*',
+      'o',
+      '\\',
+      '--',
+      '..',
+      '-->',
+      '--|>',
+      ': label',
+      ':::',
+      '.',
+      '+',
+      'alphaNum',
+      '[',
+      ']',
+      '!',
+      '0123',
     ];
 
-    test.each(keywords)('should handle a note with keyword in it', function (note: string) {
+    it.each(keywords)('should handle a note with %s in it', function (keyword: string) {
       const str = `classDiagram
-                     note "This is a keyword: ${note}. It truly is."
+                     note "This is a keyword: ${keyword}. It truly is."
                   `;
+      const str2 = `classDiagram
+                      note "${keyword}"`;
       parser.parse(str);
-      expect(classDb.getNotes()[0].text).toEqual(`This is a keyword: ${note}. It truly is.`);
+      parser.parse(str2);
+      expect(classDb.getNotes()[0].text).toEqual(`This is a keyword: ${keyword}. It truly is.`);
+      expect(classDb.getNotes()[1].text).toEqual(`${keyword}`);
     });
 
-    test.each(keywords)('should handle a note for with a keyword in it', function (note: string) {
+    it.each(keywords)('should handle a "note for" with a %s in it', function (keyword: string) {
       const str = `classDiagram
                    class Something {
                      int id
                      string name
                    }
-                   note for Something "This is a keyword: ${note}. It truly is."
+                   note for Something "This is a keyword: ${keyword}. It truly is."
                    `;
+
+      const str2 = `classDiagram
+                    class Something {
+                      int id
+                      string name
+                    }
+                    note for Something "${keyword}"
+                    `;
+
       parser.parse(str);
-      expect(classDb.getNotes()[0].text).toEqual(`This is a keyword: ${note}. It truly is.`);
+      parser.parse(str2);
+      expect(classDb.getNotes()[0].text).toEqual(`This is a keyword: ${keyword}. It truly is.`);
+      expect(classDb.getNotes()[1].text).toEqual(`${keyword}`);
+    });
+
+    it.each(keywords)('should elicit error for %s after NOTE token', function (keyword: string) {
+      const str = `classDiagram
+                   note ${keyword}`;
+      expect(() => parser.parse(str)).toThrowError(/expecting | unrecognized/i);
     });
   });
 

From d05d24908073b73626f45d812a8e457f90d5cfd0 Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Sat, 8 Jul 2023 13:28:45 -0300
Subject: [PATCH 103/281] Undo state changes

---
 .../diagrams/class/parser/classDiagram.jison  | 44 +++++++++----------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/packages/mermaid/src/diagrams/class/parser/classDiagram.jison b/packages/mermaid/src/diagrams/class/parser/classDiagram.jison
index d4ca667cf..93bae2d51 100644
--- a/packages/mermaid/src/diagrams/class/parser/classDiagram.jison
+++ b/packages/mermaid/src/diagrams/class/parser/classDiagram.jison
@@ -72,14 +72,14 @@ accDescr\s*"{"\s*                                { this.begin("acc_descr_multili
 <class-body>[\n]                /* nothing */
 <class-body>[^{}\n]*            { return "MEMBER";}
 
-<INITIAL>"cssClass"             return 'CSSCLASS';
-<INITIAL>"callback"             return 'CALLBACK';
-<INITIAL>"link"                 return 'LINK';
-<INITIAL>"click"                return 'CLICK';
-<INITIAL>"note for"             return 'NOTE_FOR';
-<INITIAL>"note"                 return 'NOTE';
-<INITIAL>"<<"                   return 'ANNOTATION_START';
-<INITIAL>">>"                   return 'ANNOTATION_END';
+<*>"cssClass"             return 'CSSCLASS';
+<*>"callback"             return 'CALLBACK';
+<*>"link"                 return 'LINK';
+<*>"click"                return 'CLICK';
+<*>"note for"             return 'NOTE_FOR';
+<*>"note"                 return 'NOTE';
+<*>"<<"                   return 'ANNOTATION_START';
+<*>">>"                   return 'ANNOTATION_END';
 
 /*
 ---interactivity command---
@@ -87,7 +87,7 @@ accDescr\s*"{"\s*                                { this.begin("acc_descr_multili
 line was introduced with 'click'.
 'href "<link>"' attaches the specified link to the node that was specified by 'click'.
 */
-<INITIAL>"href"[\s]+["]         this.begin("href");
+<*>"href"[\s]+["]         this.begin("href");
 <href>["]                       this.popState();
 <href>[^"]*                     return 'HREF';
 
@@ -99,7 +99,7 @@ the line was introduced with 'click'.
 arguments to the node that was specified by 'click'.
 Function arguments are optional: 'call <callback_name>()' simply executes 'callback_name' without any arguments.
 */
-<INITIAL>"call"[\s]+            this.begin("callback_name");
+<*>"call"[\s]+            this.begin("callback_name");
 <callback_name>\([\s]*\)        this.popState();
 <callback_name>\(               this.popState(); this.begin("callback_args");
 <callback_name>[^(]*            return 'CALLBACK_NAME';
@@ -116,20 +116,20 @@ Function arguments are optional: 'call <callback_name>()' simply executes 'callb
 
 <bqstring>[`]                   this.popState();
 <bqstring>[^`]+                 return "BQUOTE_STR";
-<INITIAL,class>[`]              this.begin("bqstring");
+<*>[`]              this.begin("bqstring");
 
-<INITIAL>"_self"                return 'LINK_TARGET';
-<INITIAL>"_blank"               return 'LINK_TARGET';
-<INITIAL>"_parent"              return 'LINK_TARGET';
-<INITIAL>"_top"                 return 'LINK_TARGET';
+<*>"_self"                return 'LINK_TARGET';
+<*>"_blank"               return 'LINK_TARGET';
+<*>"_parent"              return 'LINK_TARGET';
+<*>"_top"                 return 'LINK_TARGET';
 
-<INITIAL>\s*\<\|                return 'EXTENSION';
-<INITIAL>\s*\|\>                return 'EXTENSION';
-<INITIAL>\s*\>                  return 'DEPENDENCY';
-<INITIAL>\s*\<                  return 'DEPENDENCY';
-<INITIAL>\s*\*                  return 'COMPOSITION';
-<INITIAL>\s*o                   return 'AGGREGATION';
-<INITIAL>\s*\(\)                return 'LOLLIPOP';
+<*>\s*\<\|                return 'EXTENSION';
+<*>\s*\|\>                return 'EXTENSION';
+<*>\s*\>                  return 'DEPENDENCY';
+<*>\s*\<                  return 'DEPENDENCY';
+<*>\s*\*                  return 'COMPOSITION';
+<*>\s*o                   return 'AGGREGATION';
+<*>\s*\(\)                return 'LOLLIPOP';
 <*>\-\-                         return 'LINE';
 <*>\.\.                         return 'DOTTED_LINE';
 <*>":"{1}[^:\n;]+               return 'LABEL';

From 58b2b0993a9e0c93b25bc6203ebedb547f49a62c Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Sat, 8 Jul 2023 13:29:48 -0300
Subject: [PATCH 104/281] Give STR token higher precedence

---
 .../mermaid/src/diagrams/class/parser/classDiagram.jison  | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/mermaid/src/diagrams/class/parser/classDiagram.jison b/packages/mermaid/src/diagrams/class/parser/classDiagram.jison
index 93bae2d51..263e890e7 100644
--- a/packages/mermaid/src/diagrams/class/parser/classDiagram.jison
+++ b/packages/mermaid/src/diagrams/class/parser/classDiagram.jison
@@ -50,6 +50,10 @@ accDescr\s*"{"\s*                                { this.begin("acc_descr_multili
 "classDiagram"                  return 'CLASS_DIAGRAM';
 "[*]"                           return 'EDGE_STATE';
 
+<string>["]                     this.popState();
+<string>[^"]*                   return "STR";
+<*>["]                          this.begin("string");
+
 <INITIAL,namespace>"namespace"  { this.begin('namespace'); return 'NAMESPACE'; }
 <namespace>\s*(\r?\n)+          { this.popState(); return 'NEWLINE'; }
 <namespace>\s+                  /* skip whitespace */
@@ -110,10 +114,6 @@ Function arguments are optional: 'call <callback_name>()' simply executes 'callb
 <generic>[^~]*                  return "GENERICTYPE";
 <INITIAL,class>"~"              this.begin("generic");
 
-<string>["]                     this.popState();
-<string>[^"]*                   return "STR";
-<*>["]                          this.begin("string");
-
 <bqstring>[`]                   this.popState();
 <bqstring>[^`]+                 return "BQUOTE_STR";
 <*>[`]              this.begin("bqstring");

From 6a40f4b9559381e1b7621cb071a02ca77c182c6f Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Sat, 8 Jul 2023 13:34:51 -0300
Subject: [PATCH 105/281] Decouple HREF token from STR and correct grammar

---
 .../src/diagrams/class/parser/classDiagram.jison    | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/packages/mermaid/src/diagrams/class/parser/classDiagram.jison b/packages/mermaid/src/diagrams/class/parser/classDiagram.jison
index 263e890e7..170e2cd4f 100644
--- a/packages/mermaid/src/diagrams/class/parser/classDiagram.jison
+++ b/packages/mermaid/src/diagrams/class/parser/classDiagram.jison
@@ -91,10 +91,7 @@ accDescr\s*"{"\s*                                { this.begin("acc_descr_multili
 line was introduced with 'click'.
 'href "<link>"' attaches the specified link to the node that was specified by 'click'.
 */
-<*>"href"[\s]+["]         this.begin("href");
-<href>["]                       this.popState();
-<href>[^"]*                     return 'HREF';
-
+<*>"href"         return 'HREF';
 /*
 ---interactivity command---
 'call' adds a callback to the specified node. 'call' can only be specified when
@@ -391,10 +388,10 @@ clickStatement
     | CLICK className CALLBACK_NAME STR                 {$$ = $1;yy.setClickEvent($2, $3);yy.setTooltip($2, $4);}
     | CLICK className CALLBACK_NAME CALLBACK_ARGS       {$$ = $1;yy.setClickEvent($2, $3, $4);}
     | CLICK className CALLBACK_NAME CALLBACK_ARGS STR   {$$ = $1;yy.setClickEvent($2, $3, $4);yy.setTooltip($2, $5);}
-    | CLICK className HREF                              {$$ = $1;yy.setLink($2, $3);}
-    | CLICK className HREF LINK_TARGET                  {$$ = $1;yy.setLink($2, $3, $4);}
-    | CLICK className HREF STR                          {$$ = $1;yy.setLink($2, $3);yy.setTooltip($2, $4);}
-    | CLICK className HREF STR LINK_TARGET              {$$ = $1;yy.setLink($2, $3, $5);yy.setTooltip($2, $4);}
+    | CLICK className HREF STR                          {$$ = $1;yy.setLink($2, $4);}
+    | CLICK className HREF STR LINK_TARGET              {$$ = $1;yy.setLink($2, $4, $5);}
+    | CLICK className HREF STR STR                      {$$ = $1;yy.setLink($2, $4);yy.setTooltip($2, $5);}
+    | CLICK className HREF STR STR LINK_TARGET          {$$ = $1;yy.setLink($2, $4, $6);yy.setTooltip($2, $5);}
     ;
 
 cssClassStatement

From fbb6eb849eb11700b7a3356027c2825dd507fd2c Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Sat, 8 Jul 2023 14:07:46 -0300
Subject: [PATCH 106/281] Give call higher precedence than STR

---
 .../diagrams/class/parser/classDiagram.jison  | 31 ++++++++++---------
 1 file changed, 16 insertions(+), 15 deletions(-)

diff --git a/packages/mermaid/src/diagrams/class/parser/classDiagram.jison b/packages/mermaid/src/diagrams/class/parser/classDiagram.jison
index 170e2cd4f..28725c7ac 100644
--- a/packages/mermaid/src/diagrams/class/parser/classDiagram.jison
+++ b/packages/mermaid/src/diagrams/class/parser/classDiagram.jison
@@ -50,6 +50,21 @@ accDescr\s*"{"\s*                                { this.begin("acc_descr_multili
 "classDiagram"                  return 'CLASS_DIAGRAM';
 "[*]"                           return 'EDGE_STATE';
 
+/*
+---interactivity command---
+'call' adds a callback to the specified node. 'call' can only be specified when
+the line was introduced with 'click'.
+'call <callback_name>(<callback_args>)' attaches the function 'callback_name' with the specified
+arguments to the node that was specified by 'click'.
+Function arguments are optional: 'call <callback_name>()' simply executes 'callback_name' without any arguments.
+*/
+<INITIAL>"call"[\s]+            this.begin("callback_name");
+<callback_name>\([\s]*\)        this.popState();
+<callback_name>\(               this.popState(); this.begin("callback_args");
+<callback_name>[^(]*            return 'CALLBACK_NAME';
+<callback_args>\)               this.popState();
+<callback_args>[^)]*            return 'CALLBACK_ARGS';
+
 <string>["]                     this.popState();
 <string>[^"]*                   return "STR";
 <*>["]                          this.begin("string");
@@ -92,24 +107,10 @@ line was introduced with 'click'.
 'href "<link>"' attaches the specified link to the node that was specified by 'click'.
 */
 <*>"href"         return 'HREF';
-/*
----interactivity command---
-'call' adds a callback to the specified node. 'call' can only be specified when
-the line was introduced with 'click'.
-'call <callback_name>(<callback_args>)' attaches the function 'callback_name' with the specified
-arguments to the node that was specified by 'click'.
-Function arguments are optional: 'call <callback_name>()' simply executes 'callback_name' without any arguments.
-*/
-<*>"call"[\s]+            this.begin("callback_name");
-<callback_name>\([\s]*\)        this.popState();
-<callback_name>\(               this.popState(); this.begin("callback_args");
-<callback_name>[^(]*            return 'CALLBACK_NAME';
-<callback_args>\)               this.popState();
-<callback_args>[^)]*            return 'CALLBACK_ARGS';
 
 <generic>[~]                    this.popState();
 <generic>[^~]*                  return "GENERICTYPE";
-<INITIAL,class>"~"              this.begin("generic");
+<*>"~"              this.begin("generic");
 
 <bqstring>[`]                   this.popState();
 <bqstring>[^`]+                 return "BQUOTE_STR";

From 4bec3188dee79b50e4bbf5821c93765c4705fac0 Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Sat, 8 Jul 2023 14:12:45 -0300
Subject: [PATCH 107/281] Reformat code

---
 .../diagrams/class/parser/classDiagram.jison  | 80 +++++++++----------
 1 file changed, 40 insertions(+), 40 deletions(-)

diff --git a/packages/mermaid/src/diagrams/class/parser/classDiagram.jison b/packages/mermaid/src/diagrams/class/parser/classDiagram.jison
index 28725c7ac..c563b5e68 100644
--- a/packages/mermaid/src/diagrams/class/parser/classDiagram.jison
+++ b/packages/mermaid/src/diagrams/class/parser/classDiagram.jison
@@ -24,24 +24,24 @@
 %x namespace
 %x namespace-body
 %%
-\%\%\{                                                          { this.begin('open_directive'); return 'open_directive'; }
-.*direction\s+TB[^\n]*                                          return 'direction_tb';
-.*direction\s+BT[^\n]*                                          return 'direction_bt';
-.*direction\s+RL[^\n]*                                          return 'direction_rl';
-.*direction\s+LR[^\n]*                                          return 'direction_lr';
-<open_directive>((?:(?!\}\%\%)[^:.])*)                          { this.begin('type_directive'); return 'type_directive'; }
-<type_directive>":"                                             { this.popState(); this.begin('arg_directive'); return ':'; }
-<type_directive,arg_directive>\}\%\%                            { this.popState(); this.popState(); return 'close_directive'; }
-<arg_directive>((?:(?!\}\%\%).|\n)*)                            return 'arg_directive';
-\%\%(?!\{)*[^\n]*(\r?\n?)+                                      /* skip comments */
-\%\%[^\n]*(\r?\n)*                                              /* skip comments */
-accTitle\s*":"\s*                                               { this.begin("acc_title");return 'acc_title'; }
-<acc_title>(?!\n|;|#)*[^\n]*                                    { this.popState(); return "acc_title_value"; }
-accDescr\s*":"\s*                                               { this.begin("acc_descr");return 'acc_descr'; }
-<acc_descr>(?!\n|;|#)*[^\n]*                                    { this.popState(); return "acc_descr_value"; }
-accDescr\s*"{"\s*                                { this.begin("acc_descr_multiline");}
-<acc_descr_multiline>[\}]                       { this.popState(); }
-<acc_descr_multiline>[^\}]*                     return "acc_descr_multiline_value";
+\%\%\{                                       { this.begin('open_directive'); return 'open_directive'; }
+.*direction\s+TB[^\n]*                       return 'direction_tb';
+.*direction\s+BT[^\n]*                       return 'direction_bt';
+.*direction\s+RL[^\n]*                       return 'direction_rl';
+.*direction\s+LR[^\n]*                       return 'direction_lr';
+<open_directive>((?:(?!\}\%\%)[^:.])*)       { this.begin('type_directive'); return 'type_directive'; }
+<type_directive>":"                          { this.popState(); this.begin('arg_directive'); return ':'; }
+<type_directive,arg_directive>\}\%\%         { this.popState(); this.popState(); return 'close_directive'; }
+<arg_directive>((?:(?!\}\%\%).|\n)*)         return 'arg_directive';
+\%\%(?!\{)*[^\n]*(\r?\n?)+                   /* skip comments */
+\%\%[^\n]*(\r?\n)*                           /* skip comments */
+accTitle\s*":"\s*                            { this.begin("acc_title");return 'acc_title'; }
+<acc_title>(?!\n|;|#)*[^\n]*                 { this.popState(); return "acc_title_value"; }
+accDescr\s*":"\s*                            { this.begin("acc_descr");return 'acc_descr'; }
+<acc_descr>(?!\n|;|#)*[^\n]*                 { this.popState(); return "acc_descr_value"; }
+accDescr\s*"{"\s*                            { this.begin("acc_descr_multiline");}
+<acc_descr_multiline>[\}]                    { this.popState(); }
+<acc_descr_multiline>[^\}]*                  return "acc_descr_multiline_value";
 
 \s*(\r?\n)+                     return 'NEWLINE';
 \s+                             /* skip whitespace */
@@ -91,14 +91,14 @@ Function arguments are optional: 'call <callback_name>()' simply executes 'callb
 <class-body>[\n]                /* nothing */
 <class-body>[^{}\n]*            { return "MEMBER";}
 
-<*>"cssClass"             return 'CSSCLASS';
-<*>"callback"             return 'CALLBACK';
-<*>"link"                 return 'LINK';
-<*>"click"                return 'CLICK';
-<*>"note for"             return 'NOTE_FOR';
-<*>"note"                 return 'NOTE';
-<*>"<<"                   return 'ANNOTATION_START';
-<*>">>"                   return 'ANNOTATION_END';
+<*>"cssClass"                   return 'CSSCLASS';
+<*>"callback"                   return 'CALLBACK';
+<*>"link"                       return 'LINK';
+<*>"click"                      return 'CLICK';
+<*>"note for"                   return 'NOTE_FOR';
+<*>"note"                       return 'NOTE';
+<*>"<<"                         return 'ANNOTATION_START';
+<*>">>"                         return 'ANNOTATION_END';
 
 /*
 ---interactivity command---
@@ -106,28 +106,28 @@ Function arguments are optional: 'call <callback_name>()' simply executes 'callb
 line was introduced with 'click'.
 'href "<link>"' attaches the specified link to the node that was specified by 'click'.
 */
-<*>"href"         return 'HREF';
+<*>"href"                       return 'HREF';
 
 <generic>[~]                    this.popState();
 <generic>[^~]*                  return "GENERICTYPE";
-<*>"~"              this.begin("generic");
+<*>"~"                          this.begin("generic");
 
 <bqstring>[`]                   this.popState();
 <bqstring>[^`]+                 return "BQUOTE_STR";
-<*>[`]              this.begin("bqstring");
+<*>[`]                          this.begin("bqstring");
 
-<*>"_self"                return 'LINK_TARGET';
-<*>"_blank"               return 'LINK_TARGET';
-<*>"_parent"              return 'LINK_TARGET';
-<*>"_top"                 return 'LINK_TARGET';
+<*>"_self"                      return 'LINK_TARGET';
+<*>"_blank"                     return 'LINK_TARGET';
+<*>"_parent"                    return 'LINK_TARGET';
+<*>"_top"                       return 'LINK_TARGET';
 
-<*>\s*\<\|                return 'EXTENSION';
-<*>\s*\|\>                return 'EXTENSION';
-<*>\s*\>                  return 'DEPENDENCY';
-<*>\s*\<                  return 'DEPENDENCY';
-<*>\s*\*                  return 'COMPOSITION';
-<*>\s*o                   return 'AGGREGATION';
-<*>\s*\(\)                return 'LOLLIPOP';
+<*>\s*\<\|                      return 'EXTENSION';
+<*>\s*\|\>                      return 'EXTENSION';
+<*>\s*\>                        return 'DEPENDENCY';
+<*>\s*\<                        return 'DEPENDENCY';
+<*>\s*\*                        return 'COMPOSITION';
+<*>\s*o                         return 'AGGREGATION';
+<*>\s*\(\)                      return 'LOLLIPOP';
 <*>\-\-                         return 'LINE';
 <*>\.\.                         return 'DOTTED_LINE';
 <*>":"{1}[^:\n;]+               return 'LABEL';

From f82407a2f02d87f3ae350c6578636498e6d5d470 Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Sat, 8 Jul 2023 14:33:57 -0300
Subject: [PATCH 108/281] Make unit test regex unit test more accurate

---
 packages/mermaid/src/diagrams/class/classDiagram.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mermaid/src/diagrams/class/classDiagram.spec.ts b/packages/mermaid/src/diagrams/class/classDiagram.spec.ts
index 434647806..5666ac358 100644
--- a/packages/mermaid/src/diagrams/class/classDiagram.spec.ts
+++ b/packages/mermaid/src/diagrams/class/classDiagram.spec.ts
@@ -349,7 +349,7 @@ class C13["With Città foreign language"]
     it.each(keywords)('should elicit error for %s after NOTE token', function (keyword: string) {
       const str = `classDiagram
                    note ${keyword}`;
-      expect(() => parser.parse(str)).toThrowError(/expecting | unrecognized/i);
+      expect(() => parser.parse(str)).toThrowError(/(Expecting\s'STR'|Unrecognized\stext)/);
     });
   });
 

From 00bb2a1f68111bd7241c2a4648541d8c3b53f675 Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Sat, 8 Jul 2023 14:45:06 -0300
Subject: [PATCH 109/281] Revert back to single quotes for generic grammar

---
 packages/mermaid/src/diagrams/class/parser/classDiagram.jison | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/src/diagrams/class/parser/classDiagram.jison b/packages/mermaid/src/diagrams/class/parser/classDiagram.jison
index c563b5e68..8fdfced75 100644
--- a/packages/mermaid/src/diagrams/class/parser/classDiagram.jison
+++ b/packages/mermaid/src/diagrams/class/parser/classDiagram.jison
@@ -283,8 +283,8 @@ className
     : alphaNumToken { $$=$1; }
     | classLiteralName { $$=$1; }
     | alphaNumToken className { $$=$1+$2; }
-    | alphaNumToken GENERICTYPE { $$=$1+"~"+$2+"~"; }
-    | classLiteralName GENERICTYPE { $$=$1+"~"+$2+"~"; }
+    | alphaNumToken GENERICTYPE { $$=$1+'~'+$2+'~'; }
+    | classLiteralName GENERICTYPE { $$=$1+'~'+$2+'~'; }
     ;
 
 statement

From c59fee8de274229b848edec36e77d26b153d8d54 Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Sat, 8 Jul 2023 17:20:56 -0300
Subject: [PATCH 110/281] Split tests to have one parse statement in each test

---
 .../src/diagrams/class/classDiagram.spec.ts   | 35 +++++++++++++------
 1 file changed, 24 insertions(+), 11 deletions(-)

diff --git a/packages/mermaid/src/diagrams/class/classDiagram.spec.ts b/packages/mermaid/src/diagrams/class/classDiagram.spec.ts
index 5666ac358..c1c328bc7 100644
--- a/packages/mermaid/src/diagrams/class/classDiagram.spec.ts
+++ b/packages/mermaid/src/diagrams/class/classDiagram.spec.ts
@@ -270,7 +270,7 @@ class C13["With Città foreign language"]
       'classDiagram',
       'classDiagram-v2',
       'namespace',
-      '}',
+      '{}',
       '()',
       'class',
       '\n',
@@ -315,14 +315,21 @@ class C13["With Città foreign language"]
       const str = `classDiagram
                      note "This is a keyword: ${keyword}. It truly is."
                   `;
-      const str2 = `classDiagram
-                      note "${keyword}"`;
       parser.parse(str);
-      parser.parse(str2);
       expect(classDb.getNotes()[0].text).toEqual(`This is a keyword: ${keyword}. It truly is.`);
-      expect(classDb.getNotes()[1].text).toEqual(`${keyword}`);
     });
 
+    it.each(keywords)(
+      'should handle note with %s at beginning of string',
+      function (keyword: string) {
+        const str = `classDiagram
+                      note "${keyword}"`;
+
+        parser.parse(str);
+        expect(classDb.getNotes()[0].text).toEqual(`${keyword}`);
+      }
+    );
+
     it.each(keywords)('should handle a "note for" with a %s in it', function (keyword: string) {
       const str = `classDiagram
                    class Something {
@@ -332,7 +339,14 @@ class C13["With Città foreign language"]
                    note for Something "This is a keyword: ${keyword}. It truly is."
                    `;
 
-      const str2 = `classDiagram
+      parser.parse(str);
+      expect(classDb.getNotes()[0].text).toEqual(`This is a keyword: ${keyword}. It truly is.`);
+    });
+
+    it.each(keywords)(
+      'should handle a "note for" with a %s at beginning of string',
+      function (keyword: string) {
+        const str = `classDiagram
                     class Something {
                       int id
                       string name
@@ -340,11 +354,10 @@ class C13["With Città foreign language"]
                     note for Something "${keyword}"
                     `;
 
-      parser.parse(str);
-      parser.parse(str2);
-      expect(classDb.getNotes()[0].text).toEqual(`This is a keyword: ${keyword}. It truly is.`);
-      expect(classDb.getNotes()[1].text).toEqual(`${keyword}`);
-    });
+        parser.parse(str);
+        expect(classDb.getNotes()[0].text).toEqual(`${keyword}`);
+      }
+    );
 
     it.each(keywords)('should elicit error for %s after NOTE token', function (keyword: string) {
       const str = `classDiagram

From e127b146e91db13121c2a8c94ca9575f6cbc2538 Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Sat, 8 Jul 2023 17:46:28 -0300
Subject: [PATCH 111/281] Add more test cases

---
 .../mermaid/src/diagrams/class/classDiagram.spec.ts   | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/src/diagrams/class/classDiagram.spec.ts b/packages/mermaid/src/diagrams/class/classDiagram.spec.ts
index c1c328bc7..7816345c8 100644
--- a/packages/mermaid/src/diagrams/class/classDiagram.spec.ts
+++ b/packages/mermaid/src/diagrams/class/classDiagram.spec.ts
@@ -271,7 +271,14 @@ class C13["With Città foreign language"]
       'classDiagram-v2',
       'namespace',
       '{}',
+      '{',
+      '}',
       '()',
+      '(',
+      ')',
+      '[]',
+      '[',
+      ']',
       'class',
       '\n',
       'cssClass',
@@ -305,10 +312,10 @@ class C13["With Città foreign language"]
       '.',
       '+',
       'alphaNum',
-      '[',
-      ']',
       '!',
       '0123',
+      'function()',
+      'function(arg1, arg2)',
     ];
 
     it.each(keywords)('should handle a note with %s in it', function (keyword: string) {

From 47f46c8a464e35a38c33bebca9b06b77723c51b5 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Mon, 10 Jul 2023 01:17:36 +0000
Subject: [PATCH 112/281] chore(deps): update all minor dependencies

---
 docker-compose.yml |   2 +-
 package.json       |   8 +-
 pnpm-lock.yaml     | 240 +++++++++++++++++++--------------------------
 3 files changed, 108 insertions(+), 142 deletions(-)

diff --git a/docker-compose.yml b/docker-compose.yml
index c881d0473..f7195b362 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -17,7 +17,7 @@ services:
       - 9000:9000
       - 3333:3333
   cypress:
-    image: cypress/included:12.16.0
+    image: cypress/included:12.17.0
     stdin_open: true
     tty: true
     working_dir: /mermaid
diff --git a/package.json b/package.json
index e21e02d14..1b4cb6233 100644
--- a/package.json
+++ b/package.json
@@ -78,9 +78,9 @@
     "@types/rollup-plugin-visualizer": "^4.2.1",
     "@typescript-eslint/eslint-plugin": "^5.59.0",
     "@typescript-eslint/parser": "^5.59.0",
-    "@vitest/coverage-v8": "^0.32.2",
-    "@vitest/spy": "^0.32.2",
-    "@vitest/ui": "^0.32.2",
+    "@vitest/coverage-v8": "^0.33.0",
+    "@vitest/spy": "^0.33.0",
+    "@vitest/ui": "^0.33.0",
     "ajv": "^8.12.0",
     "concurrently": "^8.0.1",
     "cors": "^2.8.5",
@@ -120,7 +120,7 @@
     "typescript": "^5.1.3",
     "vite": "^4.3.9",
     "vite-plugin-istanbul": "^4.1.0",
-    "vitest": "^0.32.2"
+    "vitest": "^0.33.0"
   },
   "volta": {
     "node": "18.16.1"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 303985a31..e09d023f7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -63,14 +63,14 @@ importers:
         specifier: ^5.59.0
         version: 5.59.0(eslint@8.39.0)(typescript@5.1.3)
       '@vitest/coverage-v8':
-        specifier: ^0.32.2
-        version: 0.32.2(vitest@0.32.2)
+        specifier: ^0.33.0
+        version: 0.33.0(vitest@0.33.0)
       '@vitest/spy':
-        specifier: ^0.32.2
-        version: 0.32.2
+        specifier: ^0.33.0
+        version: 0.33.0
       '@vitest/ui':
-        specifier: ^0.32.2
-        version: 0.32.2(vitest@0.32.2)
+        specifier: ^0.33.0
+        version: 0.33.0(vitest@0.33.0)
       ajv:
         specifier: ^8.12.0
         version: 8.12.0
@@ -189,8 +189,8 @@ importers:
         specifier: ^4.1.0
         version: 4.1.0(vite@4.3.9)
       vitest:
-        specifier: ^0.32.2
-        version: 0.32.2(@vitest/ui@0.32.2)(jsdom@22.0.0)
+        specifier: ^0.33.0
+        version: 0.33.0(@vitest/ui@0.33.0)(jsdom@22.0.0)
 
   packages/mermaid:
     dependencies:
@@ -3860,6 +3860,10 @@ packages:
   /@jridgewell/sourcemap-codec@1.4.14:
     resolution: {integrity: sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==}
 
+  /@jridgewell/sourcemap-codec@1.4.15:
+    resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
+    dev: true
+
   /@jridgewell/trace-mapping@0.3.17:
     resolution: {integrity: sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==}
     dependencies:
@@ -5187,8 +5191,8 @@ packages:
       vue: 3.3.4
     dev: true
 
-  /@vitest/coverage-v8@0.32.2(vitest@0.32.2):
-    resolution: {integrity: sha512-/+V3nB3fyeuuSeKxCfi6XmWjDIxpky7AWSkGVfaMjAk7di8igBwRsThLjultwIZdTDH1RAxpjmCXEfSqsMFZOA==}
+  /@vitest/coverage-v8@0.33.0(vitest@0.33.0):
+    resolution: {integrity: sha512-Rj5IzoLF7FLj6yR7TmqsfRDSeaFki6NAJ/cQexqhbWkHEV2htlVGrmuOde3xzvFsCbLCagf4omhcIaVmfU8Okg==}
     peerDependencies:
       vitest: '>=0.32.0 <1'
     dependencies:
@@ -5198,68 +5202,67 @@ packages:
       istanbul-lib-report: 3.0.0
       istanbul-lib-source-maps: 4.0.1
       istanbul-reports: 3.1.5
-      magic-string: 0.30.0
+      magic-string: 0.30.1
       picocolors: 1.0.0
-      std-env: 3.3.2
+      std-env: 3.3.3
       test-exclude: 6.0.0
       v8-to-istanbul: 9.1.0
-      vitest: 0.32.2(@vitest/ui@0.32.2)(jsdom@22.0.0)
+      vitest: 0.33.0(@vitest/ui@0.33.0)(jsdom@22.0.0)
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@vitest/expect@0.32.2:
-    resolution: {integrity: sha512-6q5yzweLnyEv5Zz1fqK5u5E83LU+gOMVBDuxBl2d2Jfx1BAp5M+rZgc5mlyqdnxquyoiOXpXmFNkcGcfFnFH3Q==}
+  /@vitest/expect@0.33.0:
+    resolution: {integrity: sha512-sVNf+Gla3mhTCxNJx+wJLDPp/WcstOe0Ksqz4Vec51MmgMth/ia0MGFEkIZmVGeTL5HtjYR4Wl/ZxBxBXZJTzQ==}
     dependencies:
-      '@vitest/spy': 0.32.2
-      '@vitest/utils': 0.32.2
+      '@vitest/spy': 0.33.0
+      '@vitest/utils': 0.33.0
       chai: 4.3.7
     dev: true
 
-  /@vitest/runner@0.32.2:
-    resolution: {integrity: sha512-06vEL0C1pomOEktGoLjzZw+1Fb+7RBRhmw/06WkDrd1akkT9i12su0ku+R/0QM69dfkIL/rAIDTG+CSuQVDcKw==}
+  /@vitest/runner@0.33.0:
+    resolution: {integrity: sha512-UPfACnmCB6HKRHTlcgCoBh6ppl6fDn+J/xR8dTufWiKt/74Y9bHci5CKB8tESSV82zKYtkBJo9whU3mNvfaisg==}
     dependencies:
-      '@vitest/utils': 0.32.2
-      concordance: 5.0.4
+      '@vitest/utils': 0.33.0
       p-limit: 4.0.0
       pathe: 1.1.1
     dev: true
 
-  /@vitest/snapshot@0.32.2:
-    resolution: {integrity: sha512-JwhpeH/PPc7GJX38vEfCy9LtRzf9F4er7i4OsAJyV7sjPwjj+AIR8cUgpMTWK4S3TiamzopcTyLsZDMuldoi5A==}
+  /@vitest/snapshot@0.33.0:
+    resolution: {integrity: sha512-tJjrl//qAHbyHajpFvr8Wsk8DIOODEebTu7pgBrP07iOepR5jYkLFiqLq2Ltxv+r0uptUb4izv1J8XBOwKkVYA==}
     dependencies:
-      magic-string: 0.30.0
+      magic-string: 0.30.1
       pathe: 1.1.1
-      pretty-format: 27.5.1
+      pretty-format: 29.5.0
     dev: true
 
-  /@vitest/spy@0.32.2:
-    resolution: {integrity: sha512-Q/ZNILJ4ca/VzQbRM8ur3Si5Sardsh1HofatG9wsJY1RfEaw0XKP8IVax2lI1qnrk9YPuG9LA2LkZ0EI/3d4ug==}
+  /@vitest/spy@0.33.0:
+    resolution: {integrity: sha512-Kv+yZ4hnH1WdiAkPUQTpRxW8kGtH8VRTnus7ZTGovFYM1ZezJpvGtb9nPIjPnptHbsyIAxYZsEpVPYgtpjGnrg==}
     dependencies:
-      tinyspy: 2.1.0
+      tinyspy: 2.1.1
     dev: true
 
-  /@vitest/ui@0.32.2(vitest@0.32.2):
-    resolution: {integrity: sha512-N5JKftnB8qzKFtpQC5OcUGxYTLo6wiB/95Lgyk6MF52t74Y7BJOWbf6EFYhXqt9J0MSbhOR2kapq+WKKUGDW0g==}
+  /@vitest/ui@0.33.0(vitest@0.33.0):
+    resolution: {integrity: sha512-7gbAjLqt30R4bodkJAutdpy4ncv+u5IKTHYTow1c2q+FOxZUC9cKOSqMUxjwaaTwLN+EnDnmXYPtg3CoahaUzQ==}
     peerDependencies:
       vitest: '>=0.30.1 <1'
     dependencies:
-      '@vitest/utils': 0.32.2
-      fast-glob: 3.2.12
-      fflate: 0.7.4
+      '@vitest/utils': 0.33.0
+      fast-glob: 3.3.0
+      fflate: 0.8.0
       flatted: 3.2.7
-      pathe: 1.1.0
+      pathe: 1.1.1
       picocolors: 1.0.0
       sirv: 2.0.3
-      vitest: 0.32.2(@vitest/ui@0.32.2)(jsdom@22.0.0)
+      vitest: 0.33.0(@vitest/ui@0.33.0)(jsdom@22.0.0)
     dev: true
 
-  /@vitest/utils@0.32.2:
-    resolution: {integrity: sha512-lnJ0T5i03j0IJaeW73hxe2AuVnZ/y1BhhCOuIcl9LIzXnbpXJT9Lrt6brwKHXLOiA7MZ6N5hSJjt0xE1dGNCzQ==}
+  /@vitest/utils@0.33.0:
+    resolution: {integrity: sha512-pF1w22ic965sv+EN6uoePkAOTkAPWM03Ri/jXNyMIKBb/XHLDPfhLvf/Fa9g0YECevAIz56oVYXhodLvLQ/awA==}
     dependencies:
       diff-sequences: 29.4.3
       loupe: 2.3.6
-      pretty-format: 27.5.1
+      pretty-format: 29.5.0
     dev: true
 
   /@vue/compat@3.3.4(vue@3.3.4):
@@ -5848,6 +5851,12 @@ packages:
     hasBin: true
     dev: true
 
+  /acorn@8.10.0:
+    resolution: {integrity: sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+    dev: true
+
   /acorn@8.8.0:
     resolution: {integrity: sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==}
     engines: {node: '>=0.4.0'}
@@ -6362,10 +6371,6 @@ packages:
     resolution: {integrity: sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==}
     dev: true
 
-  /blueimp-md5@2.19.0:
-    resolution: {integrity: sha512-DRQrD6gJyy8FbiE4s+bDoXS9hiW3Vbx5uCdwvcCf3zLHL+Iv7LtGHLpr+GZV8rHG8tK766FGYBwRbu8pELTt+w==}
-    dev: true
-
   /bmpimagejs@1.0.4:
     resolution: {integrity: sha512-21oKU7kbRt2OgOOj7rdiNr/yznDNUQ585plxR00rsmECcZr+6O1oCwB8OIoSHk/bDhbG8mFXIdeQuCPHgZ6QBw==}
     dev: true
@@ -7001,20 +7006,6 @@ packages:
   /concat-map@0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
 
-  /concordance@5.0.4:
-    resolution: {integrity: sha512-OAcsnTEYu1ARJqWVGwf4zh4JDfHZEaSNlNccFmt8YjB2l/n19/PF2viLINHc57vO4FKIAFl2FWASIGZZWZ2Kxw==}
-    engines: {node: '>=10.18.0 <11 || >=12.14.0 <13 || >=14'}
-    dependencies:
-      date-time: 3.1.0
-      esutils: 2.0.3
-      fast-diff: 1.2.0
-      js-string-escape: 1.0.1
-      lodash: 4.17.21
-      md5-hex: 3.0.1
-      semver: 7.5.3
-      well-known-symbols: 2.0.0
-    dev: true
-
   /concurrently@8.0.1:
     resolution: {integrity: sha512-Sh8bGQMEL0TAmAm2meAXMjcASHZa7V0xXQVDBLknCPa9TPtkY9yYs+0cnGGgfdkW0SV1Mlg+hVGfXcoI8d3MJA==}
     engines: {node: ^14.13.0 || >=16.0.0}
@@ -7828,13 +7819,6 @@ packages:
     engines: {node: '>=0.11'}
     dev: true
 
-  /date-time@3.1.0:
-    resolution: {integrity: sha512-uqCUKXE5q1PNBXjPqvwhwJf9SwMoAHBgWJ6DcrnS5o+W2JOiIILl0JEdVD8SGujrNS02GGxgwAg2PN2zONgtjg==}
-    engines: {node: '>=6'}
-    dependencies:
-      time-zone: 1.0.0
-    dev: true
-
   /dayjs@1.10.7:
     resolution: {integrity: sha512-P6twpd70BcPK34K26uJ1KT3wlhpuOAPoMwJzpsIWUxHZ7wpmbdZL/hQqBDfz7hGurYSa5PhzdhDHtt319hL3ig==}
     dev: true
@@ -8952,10 +8936,6 @@ packages:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
     dev: true
 
-  /fast-diff@1.2.0:
-    resolution: {integrity: sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==}
-    dev: true
-
   /fast-equals@4.0.3:
     resolution: {integrity: sha512-G3BSX9cfKttjr+2o1O22tYMLq0DPluZnYtq1rXumE1SpL/F/SLIfHx08WYQoWSIpeMYf8sRbJ8++71+v6Pnxfg==}
     dev: true
@@ -8970,6 +8950,17 @@ packages:
       merge2: 1.4.1
       micromatch: 4.0.5
 
+  /fast-glob@3.3.0:
+    resolution: {integrity: sha512-ChDuvbOypPuNjO8yIDf36x7BlZX1smcUMTTcyoIjycexOxd6DFsKsg21qVBzEmr3G7fUKIRy2/psii+CIUt7FA==}
+    engines: {node: '>=8.6.0'}
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      '@nodelib/fs.walk': 1.2.8
+      glob-parent: 5.1.2
+      merge2: 1.4.1
+      micromatch: 4.0.5
+    dev: true
+
   /fast-json-stable-stringify@2.1.0:
     resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
     dev: true
@@ -9078,8 +9069,8 @@ packages:
       web-streams-polyfill: 3.2.1
     dev: true
 
-  /fflate@0.7.4:
-    resolution: {integrity: sha512-5u2V/CDW15QM1XbbgS+0DfPxVB+jUKhWEKuuFuHncbk3tEEqzmoXL+2KyOFuKGqOnmdIy0/davWF1CkuwtibCw==}
+  /fflate@0.8.0:
+    resolution: {integrity: sha512-FAdS4qMuFjsJj6XHbBaZeXOgaypXp8iw/Tpyuq/w3XA41jjLHT8NPA+n7czH/DDhdncq0nAyDZmPeWXh2qmdIg==}
     dev: true
 
   /figures@3.2.0:
@@ -11009,11 +11000,6 @@ packages:
     resolution: {integrity: sha512-Y2/yD55y5jteOAmY50JbUZYwk3CP3wnLPEZnlR1w9oKhITrBEtAxwuWKebFf8hMrPMgbYwFoWK/lH2sBkErELw==}
     dev: true
 
-  /js-string-escape@1.0.1:
-    resolution: {integrity: sha512-Smw4xcfIQ5LVjAOuJCvN/zIodzA/BBSsluuoSykP+lUvScIi4U6RJLfwHet5cxFnCswUjISV8oAXaqaJDY3chg==}
-    engines: {node: '>= 0.8'}
-    dev: true
-
   /js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
     dev: true
@@ -11555,6 +11541,13 @@ packages:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.4.14
 
+  /magic-string@0.30.1:
+    resolution: {integrity: sha512-mbVKXPmS0z0G4XqFDCTllmDQ6coZzn94aMlb0o/A4HEHJCKcanlDZwYJgwnkmgD3jyWhUgj9VsPrfd972yPffA==}
+    engines: {node: '>=12'}
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.4.15
+    dev: true
+
   /make-dir@3.1.0:
     resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==}
     engines: {node: '>=8'}
@@ -11616,13 +11609,6 @@ packages:
       '@arr/every': 1.0.1
     dev: true
 
-  /md5-hex@3.0.1:
-    resolution: {integrity: sha512-BUiRtTtV39LIJwinWBjqVsU9xhdnz7/i889V859IBFpuqGAj6LuOvHv5XLbgZ2R7ptJoJaEcxkv88/h25T7Ciw==}
-    engines: {node: '>=8'}
-    dependencies:
-      blueimp-md5: 2.19.0
-    dev: true
-
   /mdast-builder@1.1.1:
     resolution: {integrity: sha512-a3KBk/LmYD6wKsWi8WJrGU/rXR4yuF4Men0JO0z6dSZCm5FrXXWTRDjqK0vGSqa+1M6p9edeuypZAZAzSehTUw==}
     dependencies:
@@ -12201,13 +12187,13 @@ packages:
     hasBin: true
     dev: true
 
-  /mlly@1.2.0:
-    resolution: {integrity: sha512-+c7A3CV0KGdKcylsI6khWyts/CYrGTrRVo4R/I7u/cUsy0Conxa6LUhiEzVKIw14lc2L5aiO4+SeVe4TeGRKww==}
+  /mlly@1.4.0:
+    resolution: {integrity: sha512-ua8PAThnTwpprIaU47EPeZ/bPUVp2QYBbWMphUQpVdBI3Lgqzm5KZQ45Agm3YJedHXaIHl6pBGabaLSUPPSptg==}
     dependencies:
-      acorn: 8.8.2
+      acorn: 8.10.0
       pathe: 1.1.1
-      pkg-types: 1.0.2
-      ufo: 1.1.1
+      pkg-types: 1.0.3
+      ufo: 1.1.2
     dev: true
 
   /mri@1.2.0:
@@ -12930,11 +12916,11 @@ packages:
       find-up: 4.1.0
     dev: true
 
-  /pkg-types@1.0.2:
-    resolution: {integrity: sha512-hM58GKXOcj8WTqUXnsQyJYXdeAPbythQgEF3nTcEo+nkD49chjQ9IKm/QJy9xf6JakXptz86h7ecP2024rrLaQ==}
+  /pkg-types@1.0.3:
+    resolution: {integrity: sha512-nN7pYi0AQqJnoLPC9eHFQ8AcyaixBUOwvqc5TDnIKCMEE6I0y8P7OKA7fPexsXGCGxQDl/cmrLAp26LhcwxZ4A==}
     dependencies:
       jsonc-parser: 3.2.0
-      mlly: 1.2.0
+      mlly: 1.4.0
       pathe: 1.1.1
     dev: true
 
@@ -13100,15 +13086,6 @@ packages:
     engines: {node: ^14.13.1 || >=16.0.0}
     dev: true
 
-  /pretty-format@27.5.1:
-    resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==}
-    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
-    dependencies:
-      ansi-regex: 5.0.1
-      ansi-styles: 5.2.0
-      react-is: 17.0.2
-    dev: true
-
   /pretty-format@29.5.0:
     resolution: {integrity: sha512-V2mGkI31qdttvTFX7Mt4efOqHXqJWMu4/r66Xh3Z3BwZaPfPJgp6/gbwoujRpPUtfEF6AUUWx3Jim3GCw5g/Qw==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -13252,10 +13229,6 @@ packages:
       unpipe: 1.0.0
     dev: true
 
-  /react-is@17.0.2:
-    resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
-    dev: true
-
   /react-is@18.2.0:
     resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==}
     dev: true
@@ -14291,8 +14264,8 @@ packages:
     engines: {node: '>= 0.8'}
     dev: true
 
-  /std-env@3.3.2:
-    resolution: {integrity: sha512-uUZI65yrV2Qva5gqE0+A7uVAvO40iPo6jGhs7s8keRfHCmtg+uB2X6EiLGCI9IgL1J17xGhvoOqSz79lzICPTA==}
+  /std-env@3.3.3:
+    resolution: {integrity: sha512-Rz6yejtVyWnVjC1RFvNmYL10kgjC49EOghxWn0RFqlCHGFpQx+Xe7yW3I4ceK1SGrWIGMjD5Kbue8W/udkbMJg==}
     dev: true
 
   /stream-combiner@0.0.4:
@@ -14455,7 +14428,7 @@ packages:
   /strip-literal@1.0.1:
     resolution: {integrity: sha512-QZTsipNpa2Ppr6v1AmJHESqJ3Uz247MUS0OjrnnZjFAvEoWqxuyFuXn2xLgMtRnijJShAa1HL0gtJyUs7u7n3Q==}
     dependencies:
-      acorn: 8.8.2
+      acorn: 8.10.0
     dev: true
 
   /stylis@4.1.3:
@@ -14690,11 +14663,6 @@ packages:
     resolution: {integrity: sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==}
     dev: true
 
-  /time-zone@1.0.0:
-    resolution: {integrity: sha512-TIsDdtKo6+XrPtiTm1ssmMngN1sAhyKnTO2kunQWqNPWIVvCm15Wmw4SWInwTVgJ5u/Tr04+8Ei9TNcw4x4ONA==}
-    engines: {node: '>=4'}
-    dev: true
-
   /timers-ext@0.1.7:
     resolution: {integrity: sha512-b85NUNzTSdodShTIbky6ZF02e8STtVVfD+fu4aXXShEELpozH+bCpJLYMPZbsABN2wDH7fJpqIoXxJpzbf0NqQ==}
     dependencies:
@@ -14718,13 +14686,13 @@ packages:
     resolution: {integrity: sha512-kRwSG8Zx4tjF9ZiyH4bhaebu+EDz1BOx9hOigYHlUW4xxI/wKIUQUqo018UlU4ar6ATPBsaMrdbKZ+tmPdohFA==}
     dev: true
 
-  /tinypool@0.5.0:
-    resolution: {integrity: sha512-paHQtnrlS1QZYKF/GnLoOM/DN9fqaGOFbCbxzAhwniySnzl9Ebk8w73/dd34DAhe/obUbPAOldTyYXQZxnPBPQ==}
+  /tinypool@0.6.0:
+    resolution: {integrity: sha512-FdswUUo5SxRizcBc6b1GSuLpLjisa8N8qMyYoP3rl+bym+QauhtJP5bvZY1ytt8krKGmMLYIRl36HBZfeAoqhQ==}
     engines: {node: '>=14.0.0'}
     dev: true
 
-  /tinyspy@2.1.0:
-    resolution: {integrity: sha512-7eORpyqImoOvkQJCSkL0d0mB4NHHIFAy4b1u8PHdDa7SjGS2njzl6/lyGoZLm+eyYEtlUmFGE0rFj66SWxZgQQ==}
+  /tinyspy@2.1.1:
+    resolution: {integrity: sha512-XPJL2uSzcOyBMky6OFrusqWlzfFrXtE0hPuMgW8A2HmaqrPo4ZQHRN/V0QXN3FSjKxpsbRrFc5LI7KOwBsT1/w==}
     engines: {node: '>=14.0.0'}
     dev: true
 
@@ -15051,6 +15019,10 @@ packages:
     resolution: {integrity: sha512-MvlCc4GHrmZdAllBc0iUDowff36Q9Ndw/UzqmEKyrfSzokTd9ZCy1i+IIk5hrYKkjoYVQyNbrw7/F8XJ2rEwTg==}
     dev: true
 
+  /ufo@1.1.2:
+    resolution: {integrity: sha512-TrY6DsjTQQgyS3E3dBaOXf0TpPD8u9FVrVYmKVegJuFw51n/YB9XPt+U6ydzFG5ZIN7+DIjPbNmXoBj9esYhgQ==}
+    dev: true
+
   /uglify-js@3.17.3:
     resolution: {integrity: sha512-JmMFDME3iufZnBpyKL+uS78LRiC+mK55zWfM5f/pWBJfpOttXAqYfdDGRukYhJuyRinvPVAtUhvy7rlDybNtFg==}
     engines: {node: '>=0.8.0'}
@@ -15383,14 +15355,14 @@ packages:
       vfile-message: 3.1.2
     dev: true
 
-  /vite-node@0.32.2(@types/node@18.16.0):
-    resolution: {integrity: sha512-dTQ1DCLwl2aEseov7cfQ+kDMNJpM1ebpyMMMwWzBvLbis8Nla/6c9WQcqpPssTwS6Rp/+U6KwlIj8Eapw4bLdA==}
+  /vite-node@0.33.0(@types/node@18.16.0):
+    resolution: {integrity: sha512-19FpHYbwWWxDr73ruNahC+vtEdza52kA90Qb3La98yZ0xULqV8A5JLNPUff0f5zID4984tW7l3DH2przTJUZSw==}
     engines: {node: '>=v14.18.0'}
     hasBin: true
     dependencies:
       cac: 6.7.14
       debug: 4.3.4(supports-color@8.1.1)
-      mlly: 1.2.0
+      mlly: 1.4.0
       pathe: 1.1.1
       picocolors: 1.0.0
       vite: 4.3.9(@types/node@18.16.0)
@@ -15661,8 +15633,8 @@ packages:
       - universal-cookie
     dev: true
 
-  /vitest@0.32.2(@vitest/ui@0.32.2)(jsdom@22.0.0):
-    resolution: {integrity: sha512-hU8GNNuQfwuQmqTLfiKcqEhZY72Zxb7nnN07koCUNmntNxbKQnVbeIS6sqUgR3eXSlbOpit8+/gr1KpqoMgWCQ==}
+  /vitest@0.33.0(@vitest/ui@0.33.0)(jsdom@22.0.0):
+    resolution: {integrity: sha512-1CxaugJ50xskkQ0e969R/hW47za4YXDUfWJDxip1hwbnhUjYolpfUn2AMOulqG/Dtd9WYAtkHmM/m3yKVrEejQ==}
     engines: {node: '>=v14.18.0'}
     hasBin: true
     peerDependencies:
@@ -15695,29 +15667,28 @@ packages:
       '@types/chai': 4.3.5
       '@types/chai-subset': 1.3.3
       '@types/node': 18.16.0
-      '@vitest/expect': 0.32.2
-      '@vitest/runner': 0.32.2
-      '@vitest/snapshot': 0.32.2
-      '@vitest/spy': 0.32.2
-      '@vitest/ui': 0.32.2(vitest@0.32.2)
-      '@vitest/utils': 0.32.2
-      acorn: 8.8.2
+      '@vitest/expect': 0.33.0
+      '@vitest/runner': 0.33.0
+      '@vitest/snapshot': 0.33.0
+      '@vitest/spy': 0.33.0
+      '@vitest/ui': 0.33.0(vitest@0.33.0)
+      '@vitest/utils': 0.33.0
+      acorn: 8.10.0
       acorn-walk: 8.2.0
       cac: 6.7.14
       chai: 4.3.7
-      concordance: 5.0.4
       debug: 4.3.4(supports-color@8.1.1)
       jsdom: 22.0.0
       local-pkg: 0.4.3
-      magic-string: 0.30.0
-      pathe: 1.1.0
+      magic-string: 0.30.1
+      pathe: 1.1.1
       picocolors: 1.0.0
-      std-env: 3.3.2
+      std-env: 3.3.3
       strip-literal: 1.0.1
       tinybench: 2.5.0
-      tinypool: 0.5.0
+      tinypool: 0.6.0
       vite: 4.3.9(@types/node@18.16.0)
-      vite-node: 0.32.2(@types/node@18.16.0)
+      vite-node: 0.33.0(@types/node@18.16.0)
       why-is-node-running: 2.2.2
     transitivePeerDependencies:
       - less
@@ -16092,11 +16063,6 @@ packages:
     engines: {node: '>=0.8.0'}
     dev: true
 
-  /well-known-symbols@2.0.0:
-    resolution: {integrity: sha512-ZMjC3ho+KXo0BfJb7JgtQ5IBuvnShdlACNkKkdsqBmYw3bPAaJfPeYUo6tLUaT5tG/Gkh7xkpBhKRQ9e7pyg9Q==}
-    engines: {node: '>=6'}
-    dev: true
-
   /whatwg-encoding@2.0.0:
     resolution: {integrity: sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==}
     engines: {node: '>=12'}

From 3664ff4463abb54a119de9350848ced52a70487e Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Tue, 11 Jul 2023 18:12:27 +0300
Subject: [PATCH 113/281] Removed unused code in state diagrams

---
 .../mermaid/src/diagrams/state/stateRenderer.js    | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/packages/mermaid/src/diagrams/state/stateRenderer.js b/packages/mermaid/src/diagrams/state/stateRenderer.js
index 689d7a0e5..1b3e0f27e 100644
--- a/packages/mermaid/src/diagrams/state/stateRenderer.js
+++ b/packages/mermaid/src/diagrams/state/stateRenderer.js
@@ -63,20 +63,6 @@ export const draw = function (text, id, _version, diagObj) {
   const diagram = root.select(`[id='${id}']`);
   insertMarkers(diagram);
 
-  // Layout graph, Create a new directed graph
-  const graph = new graphlib.Graph({
-    multigraph: true,
-    compound: true,
-    // acyclicer: 'greedy',
-    rankdir: 'RL',
-    // ranksep: '20'
-  });
-
-  // Default to assigning a new object as a label for each new edge.
-  graph.setDefaultEdgeLabel(function () {
-    return {};
-  });
-
   const rootDoc = diagObj.db.getRootDoc();
   renderDoc(rootDoc, diagram, undefined, false, root, doc, diagObj);
 

From d46ef4cc91810371aaf9f3e4bb2ce7765a85e670 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Tue, 11 Jul 2023 17:19:31 +0000
Subject: [PATCH 114/281] chore(deps): update all patch dependencies

---
 docker-compose.yml            | 2 +-
 package.json                  | 2 +-
 packages/mermaid/package.json | 2 +-
 pnpm-lock.yaml                | 8 ++++----
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/docker-compose.yml b/docker-compose.yml
index f7195b362..1037b5102 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -17,7 +17,7 @@ services:
       - 9000:9000
       - 3333:3333
   cypress:
-    image: cypress/included:12.17.0
+    image: cypress/included:12.17.1
     stdin_open: true
     tty: true
     working_dir: /mermaid
diff --git a/package.json b/package.json
index 1b4cb6233..b23c8bd98 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "version": "10.2.4",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "type": "module",
-  "packageManager": "pnpm@8.6.5",
+  "packageManager": "pnpm@8.6.7",
   "keywords": [
     "diagram",
     "markdown",
diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index afbbed2e6..481eef888 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -65,7 +65,7 @@
     "d3-sankey": "^0.12.3",
     "dagre-d3-es": "7.0.10",
     "dayjs": "^1.11.7",
-    "dompurify": "3.0.4",
+    "dompurify": "3.0.5",
     "elkjs": "^0.8.2",
     "khroma": "^2.0.0",
     "lodash-es": "^4.17.21",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e09d023f7..6d604e524 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -225,8 +225,8 @@ importers:
         specifier: ^1.11.7
         version: 1.11.7
       dompurify:
-        specifier: 3.0.4
-        version: 3.0.4
+        specifier: 3.0.5
+        version: 3.0.5
       elkjs:
         specifier: ^0.8.2
         version: 0.8.2
@@ -8082,8 +8082,8 @@ packages:
       domelementtype: 2.3.0
     dev: true
 
-  /dompurify@3.0.4:
-    resolution: {integrity: sha512-ae0mA+Qiqp6C29pqZX3fQgK+F91+F7wobM/v8DRzDqJdZJELXiFUx4PP4pK/mzUS0xkiSEx3Ncd9gr69jg3YsQ==}
+  /dompurify@3.0.5:
+    resolution: {integrity: sha512-F9e6wPGtY+8KNMRAVfxeCOHU0/NPWMSENNq4pQctuXRqqdEPW7q3CrLbR5Nse044WwacyjHGOMlvNsBe1y6z9A==}
     dev: false
 
   /domutils@3.0.1:

From d2ab132a182279e8d8a9e5df1aad96f7f1a0c3c2 Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Tue, 11 Jul 2023 19:39:39 -0300
Subject: [PATCH 115/281] Change class member height to use own BBox

---
 packages/mermaid/src/dagre-wrapper/nodes.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/src/dagre-wrapper/nodes.js b/packages/mermaid/src/dagre-wrapper/nodes.js
index 410703f6c..b30084e90 100644
--- a/packages/mermaid/src/dagre-wrapper/nodes.js
+++ b/packages/mermaid/src/dagre-wrapper/nodes.js
@@ -917,7 +917,9 @@ const class_box = (parent, node) => {
         ((-1 * maxHeight) / 2 + verticalPos + lineHeight / 2) +
         ')'
     );
-    verticalPos += classTitleBBox.height + rowPadding;
+    //get the height of the bounding box of each member if exists
+    const memberBBox = lbl ? lbl.getBBox() : null;
+    verticalPos += (memberBBox.height ?? 0) + rowPadding;
   });
 
   verticalPos += lineHeight;
@@ -935,7 +937,8 @@ const class_box = (parent, node) => {
       'transform',
       'translate( ' + -maxWidth / 2 + ', ' + ((-1 * maxHeight) / 2 + verticalPos) + ')'
     );
-    verticalPos += classTitleBBox.height + rowPadding;
+    const methodBBox = lbl ? lbl.getBBox() : null;
+    verticalPos += (methodBBox.height ?? 0) + rowPadding;
   });
 
   rect

From 12c657f514f494c9538457d3d3c22b640e8481bf Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Tue, 11 Jul 2023 19:40:26 -0300
Subject: [PATCH 116/281] Add imgSnapshotTests

---
 .../rendering/classDiagram.spec.js            | 63 +++++++++++++++++++
 1 file changed, 63 insertions(+)

diff --git a/cypress/integration/rendering/classDiagram.spec.js b/cypress/integration/rendering/classDiagram.spec.js
index 427b4cf0b..cc4a7bfa9 100644
--- a/cypress/integration/rendering/classDiagram.spec.js
+++ b/cypress/integration/rendering/classDiagram.spec.js
@@ -423,4 +423,67 @@ describe('Class diagram', () => {
     );
     cy.get('svg');
   });
+
+  it('20: should render class diagram with newlines in title', () => {
+    imgSnapshotTest(`
+      classDiagram
+        Animal <|-- \`Du\nck\`
+        Animal : +int age
+        Animal : +String gender
+        Animal: +isMammal()
+        Animal: +mate()
+        class \`Du\nck\` {
+          +String beakColor
+          +String featherColor
+          +swim()
+          +quack()
+        }
+      `);
+    cy.get('svg');
+  });
+
+  it('21: should render class diagram with many newlines in title', () => {
+    imgSnapshotTest(`
+    classDiagram
+      class \`This\nTitle\nHas\nMany\nNewlines\` {
+        +String Also
+        -Stirng Many
+        #int Members
+        +And()
+        -Many()
+        #Methods()
+      }
+    `);
+  });
+
+  it('22: should render with newlines in title and an annotation', () => {
+    imgSnapshotTest(`
+    classDiagram
+      class \`This\nTitle\nHas\nMany\nNewlines\` {
+        +String Also
+        -Stirng Many
+        #int Members
+        +And()
+        -Many()
+        #Methods()
+      }
+      &lt;&lt;Interface&gt;&gt; \`This\nTitle\nHas\nMany\nNewlines\`  
+    `);
+  });
+
+  it('23: should handle newline title in namespace', () => {
+    imgSnapshotTest(`
+    classDiagram
+      namespace testingNamespace {
+      class \`This\nTitle\nHas\nMany\nNewlines\` {
+        +String Also
+        -Stirng Many
+        #int Members
+        +And()
+        -Many()
+        #Methods()
+      }
+    }
+    `);
+  });
 });

From aeba7a1d0eddd0d61cd54a3b8d50b66d61131db5 Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <104177348+ibrahimWassouf@users.noreply.github.com>
Date: Thu, 13 Jul 2023 15:57:28 -0300
Subject: [PATCH 117/281] Update packages/mermaid/src/dagre-wrapper/nodes.js

Co-authored-by: Sidharth Vinod <sidharthv96@gmail.com>
---
 packages/mermaid/src/dagre-wrapper/nodes.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/src/dagre-wrapper/nodes.js b/packages/mermaid/src/dagre-wrapper/nodes.js
index b30084e90..1e1fbd41e 100644
--- a/packages/mermaid/src/dagre-wrapper/nodes.js
+++ b/packages/mermaid/src/dagre-wrapper/nodes.js
@@ -918,8 +918,8 @@ const class_box = (parent, node) => {
         ')'
     );
     //get the height of the bounding box of each member if exists
-    const memberBBox = lbl ? lbl.getBBox() : null;
-    verticalPos += (memberBBox.height ?? 0) + rowPadding;
+    const memberBBox = lbl?.getBBox();
+    verticalPos += (memberBBox?.height ?? 0) + rowPadding;
   });
 
   verticalPos += lineHeight;

From e9f032ccebb2de301284e047b1c940c2e376da38 Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <104177348+ibrahimWassouf@users.noreply.github.com>
Date: Thu, 13 Jul 2023 15:57:58 -0300
Subject: [PATCH 118/281] Update packages/mermaid/src/dagre-wrapper/nodes.js

Co-authored-by: Sidharth Vinod <sidharthv96@gmail.com>
---
 packages/mermaid/src/dagre-wrapper/nodes.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/src/dagre-wrapper/nodes.js b/packages/mermaid/src/dagre-wrapper/nodes.js
index 1e1fbd41e..6c6733358 100644
--- a/packages/mermaid/src/dagre-wrapper/nodes.js
+++ b/packages/mermaid/src/dagre-wrapper/nodes.js
@@ -937,8 +937,8 @@ const class_box = (parent, node) => {
       'transform',
       'translate( ' + -maxWidth / 2 + ', ' + ((-1 * maxHeight) / 2 + verticalPos) + ')'
     );
-    const methodBBox = lbl ? lbl.getBBox() : null;
-    verticalPos += (methodBBox.height ?? 0) + rowPadding;
+    const memberBBox = lbl?.getBBox();
+    verticalPos += (memberBBox?.height ?? 0) + rowPadding;
   });
 
   rect

From 80add648e6d82eb99508b7ffa2acbf52200905c9 Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Thu, 13 Jul 2023 16:43:52 -0300
Subject: [PATCH 119/281] Refactor integration tests

---
 .../rendering/classDiagram.spec.js            | 48 +++++++++----------
 1 file changed, 24 insertions(+), 24 deletions(-)

diff --git a/cypress/integration/rendering/classDiagram.spec.js b/cypress/integration/rendering/classDiagram.spec.js
index cc4a7bfa9..3d91426e6 100644
--- a/cypress/integration/rendering/classDiagram.spec.js
+++ b/cypress/integration/rendering/classDiagram.spec.js
@@ -1,7 +1,7 @@
 import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
 
 describe('Class diagram', () => {
-  it('1: should render a simple class diagram', () => {
+  it('should render a simple class diagram', () => {
     imgSnapshotTest(
       `
     classDiagram
@@ -35,7 +35,7 @@ describe('Class diagram', () => {
     cy.get('svg');
   });
 
-  it('2: should render a simple class diagrams with cardinality', () => {
+  it('should render a simple class diagrams with cardinality', () => {
     imgSnapshotTest(
       `
     classDiagram
@@ -64,7 +64,7 @@ describe('Class diagram', () => {
     cy.get('svg');
   });
 
-  it('3: should render a simple class diagram with different visibilities', () => {
+  it('should render a simple class diagram with different visibilities', () => {
     imgSnapshotTest(
       `
     classDiagram
@@ -82,7 +82,7 @@ describe('Class diagram', () => {
     cy.get('svg');
   });
 
-  it('4: should render a simple class diagram with comments', () => {
+  it('should render a simple class diagram with comments', () => {
     imgSnapshotTest(
       `
     classDiagram
@@ -112,7 +112,7 @@ describe('Class diagram', () => {
     cy.get('svg');
   });
 
-  it('5: should render a simple class diagram with abstract method', () => {
+  it('should render a simple class diagram with abstract method', () => {
     imgSnapshotTest(
       `
     classDiagram
@@ -124,7 +124,7 @@ describe('Class diagram', () => {
     cy.get('svg');
   });
 
-  it('6: should render a simple class diagram with static method', () => {
+  it('should render a simple class diagram with static method', () => {
     imgSnapshotTest(
       `
     classDiagram
@@ -136,7 +136,7 @@ describe('Class diagram', () => {
     cy.get('svg');
   });
 
-  it('7: should render a simple class diagram with Generic class', () => {
+  it('should render a simple class diagram with Generic class', () => {
     imgSnapshotTest(
       `
     classDiagram
@@ -156,7 +156,7 @@ describe('Class diagram', () => {
     cy.get('svg');
   });
 
-  it('8: should render a simple class diagram with Generic class and relations', () => {
+  it('should render a simple class diagram with Generic class and relations', () => {
     imgSnapshotTest(
       `
     classDiagram
@@ -177,7 +177,7 @@ describe('Class diagram', () => {
     cy.get('svg');
   });
 
-  it('9: should render a simple class diagram with clickable link', () => {
+  it('should render a simple class diagram with clickable link', () => {
     imgSnapshotTest(
       `
     classDiagram
@@ -199,7 +199,7 @@ describe('Class diagram', () => {
     cy.get('svg');
   });
 
-  it('10: should render a simple class diagram with clickable callback', () => {
+  it('should render a simple class diagram with clickable callback', () => {
     imgSnapshotTest(
       `
     classDiagram
@@ -221,7 +221,7 @@ describe('Class diagram', () => {
     cy.get('svg');
   });
 
-  it('11: should render a simple class diagram with return type on method', () => {
+  it('should render a simple class diagram with return type on method', () => {
     imgSnapshotTest(
       `
     classDiagram
@@ -236,7 +236,7 @@ describe('Class diagram', () => {
     cy.get('svg');
   });
 
-  it('12: should render a simple class diagram with generic types', () => {
+  it('should render a simple class diagram with generic types', () => {
     imgSnapshotTest(
       `
     classDiagram
@@ -252,7 +252,7 @@ describe('Class diagram', () => {
     cy.get('svg');
   });
 
-  it('13: should render a simple class diagram with css classes applied', () => {
+  it('should render a simple class diagram with css classes applied', () => {
     imgSnapshotTest(
       `
     classDiagram
@@ -270,7 +270,7 @@ describe('Class diagram', () => {
     cy.get('svg');
   });
 
-  it('14: should render a simple class diagram with css classes applied directly', () => {
+  it('should render a simple class diagram with css classes applied directly', () => {
     imgSnapshotTest(
       `
     classDiagram
@@ -286,7 +286,7 @@ describe('Class diagram', () => {
     cy.get('svg');
   });
 
-  it('15: should render a simple class diagram with css classes applied to multiple classes', () => {
+  it('should render a simple class diagram with css classes applied to multiple classes', () => {
     imgSnapshotTest(
       `
     classDiagram
@@ -301,7 +301,7 @@ describe('Class diagram', () => {
     cy.get('svg');
   });
 
-  it('16: should render multiple class diagrams', () => {
+  it('should render multiple class diagrams', () => {
     imgSnapshotTest(
       [
         `
@@ -354,7 +354,7 @@ describe('Class diagram', () => {
     cy.get('svg');
   });
 
-  // it('17: should render a class diagram when useMaxWidth is true (default)', () => {
+  // it('should render a class diagram when useMaxWidth is true (default)', () => {
   //   renderGraph(
   //     `
   //   classDiagram
@@ -382,7 +382,7 @@ describe('Class diagram', () => {
   //     });
   // });
 
-  // it('18: should render a class diagram when useMaxWidth is false', () => {
+  // it('should render a class diagram when useMaxWidth is false', () => {
   //   renderGraph(
   //     `
   //   classDiagram
@@ -408,7 +408,7 @@ describe('Class diagram', () => {
   //     });
   // });
 
-  it('19: should render a simple class diagram with notes', () => {
+  it('should render a simple class diagram with notes', () => {
     imgSnapshotTest(
       `
     classDiagram
@@ -424,7 +424,7 @@ describe('Class diagram', () => {
     cy.get('svg');
   });
 
-  it('20: should render class diagram with newlines in title', () => {
+  it('should render class diagram with newlines in title', () => {
     imgSnapshotTest(`
       classDiagram
         Animal <|-- \`Du\nck\`
@@ -442,7 +442,7 @@ describe('Class diagram', () => {
     cy.get('svg');
   });
 
-  it('21: should render class diagram with many newlines in title', () => {
+  it('should render class diagram with many newlines in title', () => {
     imgSnapshotTest(`
     classDiagram
       class \`This\nTitle\nHas\nMany\nNewlines\` {
@@ -456,7 +456,7 @@ describe('Class diagram', () => {
     `);
   });
 
-  it('22: should render with newlines in title and an annotation', () => {
+  it('should render with newlines in title and an annotation', () => {
     imgSnapshotTest(`
     classDiagram
       class \`This\nTitle\nHas\nMany\nNewlines\` {
@@ -467,11 +467,11 @@ describe('Class diagram', () => {
         -Many()
         #Methods()
       }
-      &lt;&lt;Interface&gt;&gt; \`This\nTitle\nHas\nMany\nNewlines\`  
+      &lt;&lt;Interface&gt;&gt; \`This\nTitle\nHas\nMany\nNewlines\`
     `);
   });
 
-  it('23: should handle newline title in namespace', () => {
+  it('should handle newline title in namespace', () => {
     imgSnapshotTest(`
     classDiagram
       namespace testingNamespace {

From bb220b8b87bfd1043080b415696307972220e918 Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Thu, 13 Jul 2023 16:53:29 -0300
Subject: [PATCH 120/281] Add test for string label

---
 .../integration/rendering/classDiagram.spec.js    | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/cypress/integration/rendering/classDiagram.spec.js b/cypress/integration/rendering/classDiagram.spec.js
index 3d91426e6..21fe8c726 100644
--- a/cypress/integration/rendering/classDiagram.spec.js
+++ b/cypress/integration/rendering/classDiagram.spec.js
@@ -486,4 +486,19 @@ describe('Class diagram', () => {
     }
     `);
   });
+
+  it('should handle newline in string label', () => {
+    imgSnapshotTest(`
+      classDiagram
+        class A["This has\na newline!"] {
+          +String boop
+          -Int beep
+          #double bop
+        }
+
+        class B["This title also has\na newline"]
+        B : +with(more)
+        B : -methods()
+      `);
+  });
 });

From 7cb009cd38954f28b68a459e2eddd67596fff7e8 Mon Sep 17 00:00:00 2001
From: Alois Klink <alois@aloisklink.com>
Date: Thu, 13 Jul 2023 23:54:49 +0100
Subject: [PATCH 121/281] build(docs): run remark plugins on MermaidConfig

We use the `unified.stringify()` function on our remark plugins to
stringify the Markdown AST for our MermaidConfig documentation.
However, [`.stringify()`][1] only runs the stringify phase in unified,
not the "run" phase. If we want to run our plugins on the Markdown AST,
we need to also use the [`.run()`][2] function.

[1]: https://github.com/unifiedjs/unified#processorstringifytree-file
[2]: https://github.com/unifiedjs/unified#processorruntree-file-done
---
 packages/mermaid/src/docs.mts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/mermaid/src/docs.mts b/packages/mermaid/src/docs.mts
index 356cd3cd1..b3f356f34 100644
--- a/packages/mermaid/src/docs.mts
+++ b/packages/mermaid/src/docs.mts
@@ -420,7 +420,7 @@ async function transormJsonSchema(file: string) {
       }
     });
 
-    const transformed = remark()
+    const transformer = remark()
       .use(remarkGfm)
       .use(remarkFrontmatter, ['yaml']) // support YAML front-matter in Markdown
       .use(transformMarkdownAst, {
@@ -428,8 +428,9 @@ async function transormJsonSchema(file: string) {
         originalFilename: file,
         addAutogeneratedWarning: !noHeader,
         removeYAML: !noHeader,
-      })
-      .stringify(markdownAst as Root);
+      });
+
+    const transformed = transformer.stringify(await transformer.run(markdownAst as Root));
 
     const formatted = prettier.format(transformed, {
       parser: 'markdown',

From 5631a218d14cc00a35ea3fa005995a03492a261d Mon Sep 17 00:00:00 2001
From: Lei Nelissen <lei@codified.nl>
Date: Wed, 12 Jul 2023 13:58:22 +0000
Subject: [PATCH 122/281] fix: make gantt chart interval weeks start on monday
 instead of sunday

---
 packages/mermaid/src/diagrams/gantt/ganttRenderer.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
index 215a4df29..6e34276ed 100644
--- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
+++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
@@ -13,7 +13,7 @@ import {
   timeMinute,
   timeHour,
   timeDay,
-  timeWeek,
+  timeMonday,
   timeMonth,
 } from 'd3';
 import common from '../common/common.js';
@@ -572,7 +572,7 @@ export const draw = function (text, id, version, diagObj) {
           bottomXAxis.ticks(timeDay.every(every));
           break;
         case 'week':
-          bottomXAxis.ticks(timeWeek.every(every));
+          bottomXAxis.ticks(timeMonday.every(every));
           break;
         case 'month':
           bottomXAxis.ticks(timeMonth.every(every));
@@ -611,7 +611,7 @@ export const draw = function (text, id, version, diagObj) {
             topXAxis.ticks(timeDay.every(every));
             break;
           case 'week':
-            topXAxis.ticks(timeWeek.every(every));
+            topXAxis.ticks(timeMonday.every(every));
             break;
           case 'month':
             topXAxis.ticks(timeMonth.every(every));

From 03ce2810b53920d7de2b6fa6eae3e5bc1e7ac580 Mon Sep 17 00:00:00 2001
From: Lei Nelissen <lei@codified.nl>
Date: Wed, 12 Jul 2023 17:23:21 +0200
Subject: [PATCH 123/281] feat: allow specifying on which weekday a
 tickInterval should start

---
 docs/syntax/gantt.md                          |  6 ++++
 packages/mermaid/src/defaultConfig.ts         |  1 +
 .../mermaid/src/diagrams/gantt/ganttDb.js     | 12 +++++++
 .../src/diagrams/gantt/ganttRenderer.js       | 33 ++++++++++++++++++-
 .../src/diagrams/gantt/parser/gantt.jison     |  2 ++
 .../src/diagrams/gantt/parser/gantt.spec.js   |  5 +++
 6 files changed, 58 insertions(+), 1 deletion(-)

diff --git a/docs/syntax/gantt.md b/docs/syntax/gantt.md
index 8e64a268a..ef40aef0f 100644
--- a/docs/syntax/gantt.md
+++ b/docs/syntax/gantt.md
@@ -257,6 +257,12 @@ The pattern is:
 
 More info in: <https://github.com/d3/d3-time#interval_every>
 
+Week-based `tickInterval`s start the week on sunday by default. If you wish to specify another weekday on which the `tickInterval` should start, use the `weekday` option:
+
+```markdown
+weekday monday
+```
+
 ## Output in compact mode
 
 The compact mode allows you to display multiple tasks in the same row. Compact mode can be enabled for a gantt chart by setting the display mode of the graph via preceeding YAML settings.
diff --git a/packages/mermaid/src/defaultConfig.ts b/packages/mermaid/src/defaultConfig.ts
index 62b361cff..28454e353 100644
--- a/packages/mermaid/src/defaultConfig.ts
+++ b/packages/mermaid/src/defaultConfig.ts
@@ -50,6 +50,7 @@ const config: Partial<MermaidConfig> = {
     ...defaultConfigJson.gantt,
     tickInterval: undefined,
     useWidth: undefined, // can probably be removed since `configKeys` already includes this
+    weekday: 'sunday', // the sane default is a monday, but it's set to sunday for legacy reasons
   },
   c4: {
     ...defaultConfigJson.c4,
diff --git a/packages/mermaid/src/diagrams/gantt/ganttDb.js b/packages/mermaid/src/diagrams/gantt/ganttDb.js
index 396402702..339cb65ec 100644
--- a/packages/mermaid/src/diagrams/gantt/ganttDb.js
+++ b/packages/mermaid/src/diagrams/gantt/ganttDb.js
@@ -37,6 +37,7 @@ const tags = ['active', 'done', 'crit', 'milestone'];
 let funs = [];
 let inclusiveEndDates = false;
 let topAxis = false;
+let weekday = undefined;
 
 // The serial order of the task in the script
 let lastOrder = 0;
@@ -66,6 +67,7 @@ export const clear = function () {
   lastOrder = 0;
   links = {};
   commonClear();
+  weekday = undefined;
 };
 
 export const setAxisFormat = function (txt) {
@@ -179,6 +181,14 @@ export const isInvalidDate = function (date, dateFormat, excludes, includes) {
   return excludes.includes(date.format(dateFormat.trim()));
 };
 
+export const setWeekday = function (txt) {
+  weekday = txt;
+};
+
+export const getWeekday = function () {
+  return weekday;
+};
+
 /**
  * TODO: fully document what this function does and what types it accepts
  *
@@ -759,6 +769,8 @@ export default {
   bindFunctions,
   parseDuration,
   isInvalidDate,
+  setWeekday,
+  getWeekday,
 };
 
 /**
diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
index 6e34276ed..05ff7f8a9 100644
--- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
+++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
@@ -14,6 +14,12 @@ import {
   timeHour,
   timeDay,
   timeMonday,
+  timeTuesday,
+  timeWednesday,
+  timeThursday,
+  timeFriday,
+  timeSaturday,
+  timeSunday,
   timeMonth,
 } from 'd3';
 import common from '../common/common.js';
@@ -561,6 +567,8 @@ export const draw = function (text, id, version, diagObj) {
     if (resultTickInterval !== null) {
       const every = resultTickInterval[1];
       const interval = resultTickInterval[2];
+      const weekday = diagObj.db.getWeekday() || conf.weekday;
+
       switch (interval) {
         case 'minute':
           bottomXAxis.ticks(timeMinute.every(every));
@@ -572,7 +580,30 @@ export const draw = function (text, id, version, diagObj) {
           bottomXAxis.ticks(timeDay.every(every));
           break;
         case 'week':
-          bottomXAxis.ticks(timeMonday.every(every));
+          switch (weekday) {
+            case 'monday':
+              bottomXAxis.ticks(timeMonday.every(every));
+              break;
+            case 'tuesday':
+              bottomXAxis.ticks(timeTuesday.every(every));
+              break;
+            case 'wednesday':
+              bottomXAxis.ticks(timeWednesday.every(every));
+              break;
+            case 'thursday':
+              bottomXAxis.ticks(timeThursday.every(every));
+              break;
+            case 'friday':
+              bottomXAxis.ticks(timeFriday.every(every));
+              break;
+            case 'saturday':
+              bottomXAxis.ticks(timeSaturday.every(every));
+              break;
+            case 'sunday':
+            default:
+              bottomXAxis.ticks(timeSunday.every(every));
+              break;
+          }
           break;
         case 'month':
           bottomXAxis.ticks(timeMonth.every(every));
diff --git a/packages/mermaid/src/diagrams/gantt/parser/gantt.jison b/packages/mermaid/src/diagrams/gantt/parser/gantt.jison
index 0eb45ec41..d83baeea9 100644
--- a/packages/mermaid/src/diagrams/gantt/parser/gantt.jison
+++ b/packages/mermaid/src/diagrams/gantt/parser/gantt.jison
@@ -86,6 +86,7 @@ that id.
 "includes"\s[^#\n;]+        return 'includes';
 "excludes"\s[^#\n;]+        return 'excludes';
 "todayMarker"\s[^\n;]+      return 'todayMarker';
+"weekday"\s[^#\n;]+         return 'weekday';
 \d\d\d\d"-"\d\d"-"\d\d      return 'date';
 "title"\s[^#\n;]+           return 'title';
 "accDescription"\s[^#\n;]+  return 'accDescription'
@@ -130,6 +131,7 @@ statement
   | excludes {yy.setExcludes($1.substr(9));$$=$1.substr(9);}
   | includes {yy.setIncludes($1.substr(9));$$=$1.substr(9);}
   | todayMarker {yy.setTodayMarker($1.substr(12));$$=$1.substr(12);}
+  | weekday { yy.setWeekday($1.substr(8));$$=$1.substr(8);}
   | title {yy.setDiagramTitle($1.substr(6));$$=$1.substr(6);}
   | acc_title acc_title_value { $$=$2.trim();yy.setAccTitle($$); }
   | acc_descr acc_descr_value { $$=$2.trim();yy.setAccDescription($$); }
diff --git a/packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js b/packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js
index 020bab0ed..575833399 100644
--- a/packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js
+++ b/packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js
@@ -180,4 +180,9 @@ row2`;
     expect(ganttDb.getAccTitle()).toBe(expectedTitle);
     expect(ganttDb.getAccDescription()).toBe(expectedAccDescription);
   });
+
+  it('should allow for customising the weekday for tick intervals', function () {
+    parser.parse('gantt\nweekday wednesday');
+    expect(ganttDb.getWeekday()).toBe('wednesday');
+  });
 });

From e360e90f884ff71e371c892c19c41ab499380e32 Mon Sep 17 00:00:00 2001
From: Lei Nelissen <lei@codified.nl>
Date: Wed, 12 Jul 2023 17:30:44 +0200
Subject: [PATCH 124/281] chore: move documentation to source file

---
 docs/config/setup/modules/defaultConfig.md | 2 +-
 packages/mermaid/src/docs/syntax/gantt.md  | 6 ++++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/docs/config/setup/modules/defaultConfig.md b/docs/config/setup/modules/defaultConfig.md
index a55ec1808..d03ed36da 100644
--- a/docs/config/setup/modules/defaultConfig.md
+++ b/docs/config/setup/modules/defaultConfig.md
@@ -14,7 +14,7 @@
 
 #### Defined in
 
-[defaultConfig.ts:266](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L266)
+[defaultConfig.ts:267](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L267)
 
 ---
 
diff --git a/packages/mermaid/src/docs/syntax/gantt.md b/packages/mermaid/src/docs/syntax/gantt.md
index 710b39e52..5859c7403 100644
--- a/packages/mermaid/src/docs/syntax/gantt.md
+++ b/packages/mermaid/src/docs/syntax/gantt.md
@@ -189,6 +189,12 @@ The pattern is:
 
 More info in: [https://github.com/d3/d3-time#interval_every](https://github.com/d3/d3-time#interval_every)
 
+Week-based `tickInterval`s start the week on sunday by default. If you wish to specify another weekday on which the `tickInterval` should start, use the `weekday` option:
+
+```markdown
+weekday monday
+```
+
 ## Output in compact mode
 
 The compact mode allows you to display multiple tasks in the same row. Compact mode can be enabled for a gantt chart by setting the display mode of the graph via preceeding YAML settings.

From 0d7427ed20529019bb623c5207c171d70779175b Mon Sep 17 00:00:00 2001
From: Lei Nelissen <lei@codified.nl>
Date: Wed, 12 Jul 2023 22:31:34 +0200
Subject: [PATCH 125/281] chore: add cypress test

---
 cypress/integration/rendering/gantt.spec.js | 22 +++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/cypress/integration/rendering/gantt.spec.js b/cypress/integration/rendering/gantt.spec.js
index cb65f73b0..0005e3e76 100644
--- a/cypress/integration/rendering/gantt.spec.js
+++ b/cypress/integration/rendering/gantt.spec.js
@@ -414,6 +414,28 @@ describe('Gantt diagram', () => {
     );
   });
 
+  it('should render a gantt diagram with tick is 1 week, with the day starting on monday', () => {
+    imgSnapshotTest(
+      `
+      gantt
+        title A Gantt Diagram
+        dateFormat   YYYY-MM-DD
+        axisFormat   %m-%d
+        tickInterval 1week
+        weekday      monday
+        excludes     weekends
+
+        section Section
+        A task           : a1, 2022-10-01, 30d
+        Another task     : after a1, 20d
+        section Another
+        Task in sec      : 2022-10-20, 12d
+        another task     : 24d
+      `,
+      {}
+    );
+  });
+
   it('should render a gantt diagram with tick is 1 month', () => {
     imgSnapshotTest(
       `

From df10ab501a84c99b6d34f944f62d864689168dd1 Mon Sep 17 00:00:00 2001
From: Lei Nelissen <lei@codified.nl>
Date: Wed, 12 Jul 2023 22:31:51 +0200
Subject: [PATCH 126/281] chore: add tests for all days

---
 .../src/diagrams/gantt/parser/gantt.spec.js   | 26 ++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js b/packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js
index 575833399..6c1f2e2ca 100644
--- a/packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js
+++ b/packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js
@@ -181,8 +181,32 @@ row2`;
     expect(ganttDb.getAccDescription()).toBe(expectedAccDescription);
   });
 
-  it('should allow for customising the weekday for tick intervals', function () {
+  it('should allow for setting the starting weekday to monday for tick intervals', function () {
+    parser.parse('gantt\nweekday monday');
+    expect(ganttDb.getWeekday()).toBe('monday');
+  });
+  it('should allow for setting the starting weekday to tuesday for tick intervals', function () {
+    parser.parse('gantt\nweekday tuesday');
+    expect(ganttDb.getWeekday()).toBe('tuesday');
+  });
+  it('should allow for setting the starting weekday to wednesday for tick intervals', function () {
     parser.parse('gantt\nweekday wednesday');
     expect(ganttDb.getWeekday()).toBe('wednesday');
   });
+  it('should allow for setting the starting weekday to thursday for tick intervals', function () {
+    parser.parse('gantt\nweekday thursday');
+    expect(ganttDb.getWeekday()).toBe('thursday');
+  });
+  it('should allow for setting the starting weekday to friday for tick intervals', function () {
+    parser.parse('gantt\nweekday friday');
+    expect(ganttDb.getWeekday()).toBe('friday');
+  });
+  it('should allow for setting the starting weekday to saturday for tick intervals', function () {
+    parser.parse('gantt\nweekday saturday');
+    expect(ganttDb.getWeekday()).toBe('saturday');
+  });
+  it('should allow for setting the starting weekday to sunday for tick intervals', function () {
+    parser.parse('gantt\nweekday sunday');
+    expect(ganttDb.getWeekday()).toBe('sunday');
+  });
 });

From cd92c46f3180a1db1533d2d4aeab35ff0b3e7adb Mon Sep 17 00:00:00 2001
From: Lei Nelissen <lei@codified.nl>
Date: Wed, 12 Jul 2023 22:34:22 +0200
Subject: [PATCH 127/281] chore: format example more correctly

---
 packages/mermaid/src/docs/syntax/gantt.md | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/src/docs/syntax/gantt.md b/packages/mermaid/src/docs/syntax/gantt.md
index 5859c7403..05ccf7bff 100644
--- a/packages/mermaid/src/docs/syntax/gantt.md
+++ b/packages/mermaid/src/docs/syntax/gantt.md
@@ -191,8 +191,10 @@ More info in: [https://github.com/d3/d3-time#interval_every](https://github.com/
 
 Week-based `tickInterval`s start the week on sunday by default. If you wish to specify another weekday on which the `tickInterval` should start, use the `weekday` option:
 
-```markdown
-weekday monday
+```mermaid-example
+gantt
+  tickInterval 1week
+  weekday monday
 ```
 
 ## Output in compact mode

From 5f7212c7696b1058e1aa0e60b804b85220431ac4 Mon Sep 17 00:00:00 2001
From: Lei Nelissen <lei@codified.nl>
Date: Wed, 12 Jul 2023 22:38:00 +0200
Subject: [PATCH 128/281] chore: move default value to config.schema.yaml

---
 packages/mermaid/src/defaultConfig.ts           |  1 -
 packages/mermaid/src/schemas/config.schema.yaml | 15 +++++++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/packages/mermaid/src/defaultConfig.ts b/packages/mermaid/src/defaultConfig.ts
index 28454e353..62b361cff 100644
--- a/packages/mermaid/src/defaultConfig.ts
+++ b/packages/mermaid/src/defaultConfig.ts
@@ -50,7 +50,6 @@ const config: Partial<MermaidConfig> = {
     ...defaultConfigJson.gantt,
     tickInterval: undefined,
     useWidth: undefined, // can probably be removed since `configKeys` already includes this
-    weekday: 'sunday', // the sane default is a monday, but it's set to sunday for legacy reasons
   },
   c4: {
     ...defaultConfigJson.c4,
diff --git a/packages/mermaid/src/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml
index 306aab2cc..8bebd68cf 100644
--- a/packages/mermaid/src/schemas/config.schema.yaml
+++ b/packages/mermaid/src/schemas/config.schema.yaml
@@ -1455,6 +1455,7 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file)
       - axisFormat
       - useMaxWidth
       - topAxis
+      - weekday
     properties:
       titleTopMargin:
         $ref: '#/$defs/GitGraphDiagramConfig/properties/titleTopMargin'
@@ -1544,6 +1545,20 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file)
         default: ''
         # Allow any string for typescript backwards compatibility (fix in Mermaid v10)
         tsType: 'string | "compact"'
+      weekday:
+        description: |
+          On which day a week-based interval should start
+        type: string
+        enum:
+          - monday
+          - tuesday
+          - wednesday
+          - thursday
+          - friday
+          - saturday
+          - sunday
+        # the sane default is a monday, but it's set to sunday for legacy reasons
+        default: sunday
 
   SequenceDiagramConfig:
     title: Sequence Diagram Config

From 37adc23ae2bc674cdac6c40ccb83e4df0afd6a3b Mon Sep 17 00:00:00 2001
From: Lei Nelissen <lei@codified.nl>
Date: Wed, 12 Jul 2023 22:38:48 +0200
Subject: [PATCH 129/281] chore: also default to sundat in ganttDb

---
 packages/mermaid/src/diagrams/gantt/ganttDb.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mermaid/src/diagrams/gantt/ganttDb.js b/packages/mermaid/src/diagrams/gantt/ganttDb.js
index 339cb65ec..d79a57fc2 100644
--- a/packages/mermaid/src/diagrams/gantt/ganttDb.js
+++ b/packages/mermaid/src/diagrams/gantt/ganttDb.js
@@ -37,7 +37,7 @@ const tags = ['active', 'done', 'crit', 'milestone'];
 let funs = [];
 let inclusiveEndDates = false;
 let topAxis = false;
-let weekday = undefined;
+let weekday = 'sunday';
 
 // The serial order of the task in the script
 let lastOrder = 0;

From ebf639377bd6296429ae39a267d3490e08b7ffdf Mon Sep 17 00:00:00 2001
From: Lei Nelissen <lei@codified.nl>
Date: Wed, 12 Jul 2023 22:54:28 +0200
Subject: [PATCH 130/281] chore: generate typescript config type

---
 packages/mermaid/src/config.type.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts
index 352181c86..df87e9c40 100644
--- a/packages/mermaid/src/config.type.ts
+++ b/packages/mermaid/src/config.type.ts
@@ -1063,6 +1063,11 @@ export interface GanttDiagramConfig extends BaseDiagramConfig {
    *
    */
   displayMode?: string | "compact";
+  /**
+   * On which day a week-based interval should start
+   *
+   */
+  weekday?: "monday" | "tuesday" | "wednesday" | "thursday" | "friday" | "saturday" | "sunday";
 }
 /**
  * The object containing configurations specific for sequence diagrams

From cfe31fe89ff0da74c70d932d457c8ee0f7784f25 Mon Sep 17 00:00:00 2001
From: Lei Nelissen <lei@codified.nl>
Date: Wed, 12 Jul 2023 22:59:06 +0200
Subject: [PATCH 131/281] chore: generate new docs

---
 docs/config/setup/modules/defaultConfig.md |  2 +-
 docs/syntax/gantt.md                       | 12 ++++++++++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/docs/config/setup/modules/defaultConfig.md b/docs/config/setup/modules/defaultConfig.md
index d03ed36da..a55ec1808 100644
--- a/docs/config/setup/modules/defaultConfig.md
+++ b/docs/config/setup/modules/defaultConfig.md
@@ -14,7 +14,7 @@
 
 #### Defined in
 
-[defaultConfig.ts:267](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L267)
+[defaultConfig.ts:266](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L266)
 
 ---
 
diff --git a/docs/syntax/gantt.md b/docs/syntax/gantt.md
index ef40aef0f..5cf584050 100644
--- a/docs/syntax/gantt.md
+++ b/docs/syntax/gantt.md
@@ -259,8 +259,16 @@ More info in: <https://github.com/d3/d3-time#interval_every>
 
 Week-based `tickInterval`s start the week on sunday by default. If you wish to specify another weekday on which the `tickInterval` should start, use the `weekday` option:
 
-```markdown
-weekday monday
+```mermaid-example
+gantt
+  tickInterval 1week
+  weekday monday
+```
+
+```mermaid
+gantt
+  tickInterval 1week
+  weekday monday
 ```
 
 ## Output in compact mode

From 4e8eeda30e351b1976c88383466b28d26de82015 Mon Sep 17 00:00:00 2001
From: Lei Nelissen <lei@codified.nl>
Date: Thu, 13 Jul 2023 17:18:13 +0200
Subject: [PATCH 132/281] chore: also apply weekday to topXAxis

---
 .../src/diagrams/gantt/ganttRenderer.js       | 27 ++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
index 05ff7f8a9..def988ed2 100644
--- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
+++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
@@ -631,6 +631,8 @@ export const draw = function (text, id, version, diagObj) {
       if (resultTickInterval !== null) {
         const every = resultTickInterval[1];
         const interval = resultTickInterval[2];
+        const weekday = diagObj.db.getWeekday() || conf.weekday;
+
         switch (interval) {
           case 'minute':
             topXAxis.ticks(timeMinute.every(every));
@@ -642,7 +644,30 @@ export const draw = function (text, id, version, diagObj) {
             topXAxis.ticks(timeDay.every(every));
             break;
           case 'week':
-            topXAxis.ticks(timeMonday.every(every));
+            switch (weekday) {
+              case 'monday':
+                topXAxis.ticks(timeMonday.every(every));
+                break;
+              case 'tuesday':
+                topXAxis.ticks(timeTuesday.every(every));
+                break;
+              case 'wednesday':
+                topXAxis.ticks(timeWednesday.every(every));
+                break;
+              case 'thursday':
+                topXAxis.ticks(timeThursday.every(every));
+                break;
+              case 'friday':
+                topXAxis.ticks(timeFriday.every(every));
+                break;
+              case 'saturday':
+                topXAxis.ticks(timeSaturday.every(every));
+                break;
+              case 'sunday':
+              default:
+                topXAxis.ticks(timeSunday.every(every));
+                break;
+            }
             break;
           case 'month':
             topXAxis.ticks(timeMonth.every(every));

From d9c15b1e7ae42564edfeea824963ed68f4a3fb54 Mon Sep 17 00:00:00 2001
From: Lei Nelissen <lei@codified.nl>
Date: Thu, 13 Jul 2023 17:26:49 +0200
Subject: [PATCH 133/281] chore: move spec test to it.each

---
 .../src/diagrams/gantt/parser/gantt.spec.js   | 35 ++++---------------
 1 file changed, 7 insertions(+), 28 deletions(-)

diff --git a/packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js b/packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js
index 6c1f2e2ca..e7ce1ffa4 100644
--- a/packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js
+++ b/packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js
@@ -181,32 +181,11 @@ row2`;
     expect(ganttDb.getAccDescription()).toBe(expectedAccDescription);
   });
 
-  it('should allow for setting the starting weekday to monday for tick intervals', function () {
-    parser.parse('gantt\nweekday monday');
-    expect(ganttDb.getWeekday()).toBe('monday');
-  });
-  it('should allow for setting the starting weekday to tuesday for tick intervals', function () {
-    parser.parse('gantt\nweekday tuesday');
-    expect(ganttDb.getWeekday()).toBe('tuesday');
-  });
-  it('should allow for setting the starting weekday to wednesday for tick intervals', function () {
-    parser.parse('gantt\nweekday wednesday');
-    expect(ganttDb.getWeekday()).toBe('wednesday');
-  });
-  it('should allow for setting the starting weekday to thursday for tick intervals', function () {
-    parser.parse('gantt\nweekday thursday');
-    expect(ganttDb.getWeekday()).toBe('thursday');
-  });
-  it('should allow for setting the starting weekday to friday for tick intervals', function () {
-    parser.parse('gantt\nweekday friday');
-    expect(ganttDb.getWeekday()).toBe('friday');
-  });
-  it('should allow for setting the starting weekday to saturday for tick intervals', function () {
-    parser.parse('gantt\nweekday saturday');
-    expect(ganttDb.getWeekday()).toBe('saturday');
-  });
-  it('should allow for setting the starting weekday to sunday for tick intervals', function () {
-    parser.parse('gantt\nweekday sunday');
-    expect(ganttDb.getWeekday()).toBe('sunday');
-  });
+  it.each(['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'])(
+    'should allow for setting the starting weekday to %s for tick interval',
+    (day) => {
+      parser.parse(`gantt\nweekday ${day}`);
+      expect(ganttDb.getWeekday()).toBe(day);
+    }
+  );
 });

From 11f2e31ff12cf29fc023e585e41b98684dcce60a Mon Sep 17 00:00:00 2001
From: Lei Nelissen <lei@codified.nl>
Date: Fri, 14 Jul 2023 10:04:22 +0200
Subject: [PATCH 134/281] fix: also set weekday value to sunday in clear

---
 packages/mermaid/src/diagrams/gantt/ganttDb.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mermaid/src/diagrams/gantt/ganttDb.js b/packages/mermaid/src/diagrams/gantt/ganttDb.js
index d79a57fc2..da838f839 100644
--- a/packages/mermaid/src/diagrams/gantt/ganttDb.js
+++ b/packages/mermaid/src/diagrams/gantt/ganttDb.js
@@ -67,7 +67,7 @@ export const clear = function () {
   lastOrder = 0;
   links = {};
   commonClear();
-  weekday = undefined;
+  weekday = 'sunday';
 };
 
 export const setAxisFormat = function (txt) {

From d0afc3bffeb2ac94191a7146a1e3bb1eb5d09509 Mon Sep 17 00:00:00 2001
From: Lei Nelissen <lei@codified.nl>
Date: Fri, 14 Jul 2023 14:09:29 +0200
Subject: [PATCH 135/281] feat: validate individual values of weekdays

---
 .../src/diagrams/gantt/parser/gantt.jison     | 56 ++++++++++++-------
 1 file changed, 36 insertions(+), 20 deletions(-)

diff --git a/packages/mermaid/src/diagrams/gantt/parser/gantt.jison b/packages/mermaid/src/diagrams/gantt/parser/gantt.jison
index d83baeea9..068a6fb92 100644
--- a/packages/mermaid/src/diagrams/gantt/parser/gantt.jison
+++ b/packages/mermaid/src/diagrams/gantt/parser/gantt.jison
@@ -77,25 +77,31 @@ that id.
 <click>[\s\n]           this.popState();
 <click>[^\s\n]*         return 'click';
 
-"gantt"                     return 'gantt';
-"dateFormat"\s[^#\n;]+      return 'dateFormat';
-"inclusiveEndDates"         return 'inclusiveEndDates';
-"topAxis"                   return 'topAxis';
-"axisFormat"\s[^#\n;]+      return 'axisFormat';
-"tickInterval"\s[^#\n;]+    return 'tickInterval';
-"includes"\s[^#\n;]+        return 'includes';
-"excludes"\s[^#\n;]+        return 'excludes';
-"todayMarker"\s[^\n;]+      return 'todayMarker';
-"weekday"\s[^#\n;]+         return 'weekday';
-\d\d\d\d"-"\d\d"-"\d\d      return 'date';
-"title"\s[^#\n;]+           return 'title';
-"accDescription"\s[^#\n;]+  return 'accDescription'
-"section"\s[^#:\n;]+        return 'section';
-[^#:\n;]+                   return 'taskTxt';
-":"[^#\n;]+                 return 'taskData';
-":"                         return ':';
-<<EOF>>                     return 'EOF';
-.                           return 'INVALID';
+"gantt"                         return 'gantt';
+"dateFormat"\s[^#\n;]+          return 'dateFormat';
+"inclusiveEndDates"             return 'inclusiveEndDates';
+"topAxis"                       return 'topAxis';
+"axisFormat"\s[^#\n;]+          return 'axisFormat';
+"tickInterval"\s[^#\n;]+        return 'tickInterval';
+"includes"\s[^#\n;]+            return 'includes';
+"excludes"\s[^#\n;]+            return 'excludes';
+"todayMarker"\s[^\n;]+          return 'todayMarker';
+.*weekday\s+monday[^\n]*        return 'weekday_monday'
+.*weekday\s+tuesday[^\n]*       return 'weekday_tuesday'
+.*weekday\s+wednesday[^\n]*     return 'weekday_wednesday'
+.*weekday\s+thursday[^\n]*      return 'weekday_thursday'
+.*weekday\s+friday[^\n]*        return 'weekday_friday'
+.*weekday\s+saturday[^\n]*      return 'weekday_saturday'
+.*weekday\s+sunday[^\n]*        return 'weekday_sunday'
+\d\d\d\d"-"\d\d"-"\d\d          return 'date';
+"title"\s[^#\n;]+               return 'title';
+"accDescription"\s[^#\n;]+      return 'accDescription'
+"section"\s[^#:\n;]+            return 'section';
+[^#:\n;]+                       return 'taskTxt';
+":"[^#\n;]+                     return 'taskData';
+":"                             return ':';
+<<EOF>>                         return 'EOF';
+.                               return 'INVALID';
 
 /lex
 
@@ -122,6 +128,16 @@ line
 	| EOF { $$=[];}
 	;
 
+weekday
+  : weekday_monday { yy.setWeekday("monday");}
+  | weekday_tuesday { yy.setWeekday("tuesday");}
+  | weekday_wednesday { yy.setWeekday("wednesday");}
+  | weekday_thursday { yy.setWeekday("thursday");}
+  | weekday_friday { yy.setWeekday("friday");}
+  | weekday_saturday { yy.setWeekday("saturday");}
+  | weekday_sunday { yy.setWeekday("sunday");}
+  ;
+
 statement
   : dateFormat {yy.setDateFormat($1.substr(11));$$=$1.substr(11);}
   | inclusiveEndDates {yy.enableInclusiveEndDates();$$=$1.substr(18);}
@@ -131,7 +147,7 @@ statement
   | excludes {yy.setExcludes($1.substr(9));$$=$1.substr(9);}
   | includes {yy.setIncludes($1.substr(9));$$=$1.substr(9);}
   | todayMarker {yy.setTodayMarker($1.substr(12));$$=$1.substr(12);}
-  | weekday { yy.setWeekday($1.substr(8));$$=$1.substr(8);}
+  | weekday
   | title {yy.setDiagramTitle($1.substr(6));$$=$1.substr(6);}
   | acc_title acc_title_value { $$=$2.trim();yy.setAccTitle($$); }
   | acc_descr acc_descr_value { $$=$2.trim();yy.setAccDescription($$); }

From 103321bf72ef48b0c81cc06cb25e36a159c01280 Mon Sep 17 00:00:00 2001
From: Lei Nelissen <lei@codified.nl>
Date: Sat, 15 Jul 2023 00:17:09 +0200
Subject: [PATCH 136/281] chore: return after scanning weekday in jison

---
 .../mermaid/src/diagrams/gantt/parser/gantt.jison  | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/mermaid/src/diagrams/gantt/parser/gantt.jison b/packages/mermaid/src/diagrams/gantt/parser/gantt.jison
index 068a6fb92..1d213834e 100644
--- a/packages/mermaid/src/diagrams/gantt/parser/gantt.jison
+++ b/packages/mermaid/src/diagrams/gantt/parser/gantt.jison
@@ -86,13 +86,13 @@ that id.
 "includes"\s[^#\n;]+            return 'includes';
 "excludes"\s[^#\n;]+            return 'excludes';
 "todayMarker"\s[^\n;]+          return 'todayMarker';
-.*weekday\s+monday[^\n]*        return 'weekday_monday'
-.*weekday\s+tuesday[^\n]*       return 'weekday_tuesday'
-.*weekday\s+wednesday[^\n]*     return 'weekday_wednesday'
-.*weekday\s+thursday[^\n]*      return 'weekday_thursday'
-.*weekday\s+friday[^\n]*        return 'weekday_friday'
-.*weekday\s+saturday[^\n]*      return 'weekday_saturday'
-.*weekday\s+sunday[^\n]*        return 'weekday_sunday'
+.*weekday\s+monday[^\n]+        return 'weekday_monday'
+.*weekday\s+tuesday[^\n]+       return 'weekday_tuesday'
+.*weekday\s+wednesday[^\n]+     return 'weekday_wednesday'
+.*weekday\s+thursday[^\n]+      return 'weekday_thursday'
+.*weekday\s+friday[^\n]+        return 'weekday_friday'
+.*weekday\s+saturday[^\n]+      return 'weekday_saturday'
+.*weekday\s+sunday[^\n]+        return 'weekday_sunday'
 \d\d\d\d"-"\d\d"-"\d\d          return 'date';
 "title"\s[^#\n;]+               return 'title';
 "accDescription"\s[^#\n;]+      return 'accDescription'

From 90c68f50695d2ccf278ef076debadbb5df8e961d Mon Sep 17 00:00:00 2001
From: Lei Nelissen <lei@codified.nl>
Date: Sat, 15 Jul 2023 00:17:09 +0200
Subject: [PATCH 137/281] chore: add tsType for weekday config

---
 packages/mermaid/src/schemas/config.schema.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mermaid/src/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml
index 8bebd68cf..71e7de477 100644
--- a/packages/mermaid/src/schemas/config.schema.yaml
+++ b/packages/mermaid/src/schemas/config.schema.yaml
@@ -1549,6 +1549,7 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file)
         description: |
           On which day a week-based interval should start
         type: string
+        tsType: 'string | "monday" | "tuesday" | "wednesday" | "thursday" | "friday" | "saturday" | "sunday"'
         enum:
           - monday
           - tuesday
@@ -1557,7 +1558,6 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file)
           - friday
           - saturday
           - sunday
-        # the sane default is a monday, but it's set to sunday for legacy reasons
         default: sunday
 
   SequenceDiagramConfig:

From 803cd826ed7606f45ff084b7f13921623ad67a4e Mon Sep 17 00:00:00 2001
From: Lei Nelissen <lei@codified.nl>
Date: Sat, 15 Jul 2023 00:17:10 +0200
Subject: [PATCH 138/281] chore: replace switch-case with map

---
 .../src/diagrams/gantt/ganttRenderer.js       | 64 +++++--------------
 1 file changed, 16 insertions(+), 48 deletions(-)

diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
index def988ed2..522f59e2c 100644
--- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
+++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
@@ -30,6 +30,20 @@ export const setConf = function () {
   log.debug('Something is calling, setConf, remove the call');
 };
 
+/**
+ * This will map any day of the week that can be set in the `weekday` option to
+ * the corresponding d3-time function that is used to calculate the ticks.
+ */
+const mapWeekdayToTimeFunction = {
+  monday: timeMonday,
+  tuesday: timeTuesday,
+  wednesday: timeWednesday,
+  thursday: timeThursday,
+  friday: timeFriday,
+  saturday: timeSaturday,
+  sunday: timeSunday,
+};
+
 /**
  * For this issue:
  * https://github.com/mermaid-js/mermaid/issues/1618
@@ -580,30 +594,7 @@ export const draw = function (text, id, version, diagObj) {
           bottomXAxis.ticks(timeDay.every(every));
           break;
         case 'week':
-          switch (weekday) {
-            case 'monday':
-              bottomXAxis.ticks(timeMonday.every(every));
-              break;
-            case 'tuesday':
-              bottomXAxis.ticks(timeTuesday.every(every));
-              break;
-            case 'wednesday':
-              bottomXAxis.ticks(timeWednesday.every(every));
-              break;
-            case 'thursday':
-              bottomXAxis.ticks(timeThursday.every(every));
-              break;
-            case 'friday':
-              bottomXAxis.ticks(timeFriday.every(every));
-              break;
-            case 'saturday':
-              bottomXAxis.ticks(timeSaturday.every(every));
-              break;
-            case 'sunday':
-            default:
-              bottomXAxis.ticks(timeSunday.every(every));
-              break;
-          }
+          bottomXAxis.ticks(mapWeekdayToTimeFunction[weekday].every(every));
           break;
         case 'month':
           bottomXAxis.ticks(timeMonth.every(every));
@@ -644,30 +635,7 @@ export const draw = function (text, id, version, diagObj) {
             topXAxis.ticks(timeDay.every(every));
             break;
           case 'week':
-            switch (weekday) {
-              case 'monday':
-                topXAxis.ticks(timeMonday.every(every));
-                break;
-              case 'tuesday':
-                topXAxis.ticks(timeTuesday.every(every));
-                break;
-              case 'wednesday':
-                topXAxis.ticks(timeWednesday.every(every));
-                break;
-              case 'thursday':
-                topXAxis.ticks(timeThursday.every(every));
-                break;
-              case 'friday':
-                topXAxis.ticks(timeFriday.every(every));
-                break;
-              case 'saturday':
-                topXAxis.ticks(timeSaturday.every(every));
-                break;
-              case 'sunday':
-              default:
-                topXAxis.ticks(timeSunday.every(every));
-                break;
-            }
+            topXAxis.ticks(mapWeekdayToTimeFunction[weekday].every(every));
             break;
           case 'month':
             topXAxis.ticks(timeMonth.every(every));

From eff9f7e5db28578ed534a1f7322a70d14f2589be Mon Sep 17 00:00:00 2001
From: Lei Nelissen <lei@codified.nl>
Date: Sat, 15 Jul 2023 00:24:02 +0200
Subject: [PATCH 139/281] chore: re-generate config

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

diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts
index df87e9c40..1163016aa 100644
--- a/packages/mermaid/src/config.type.ts
+++ b/packages/mermaid/src/config.type.ts
@@ -1067,7 +1067,7 @@ export interface GanttDiagramConfig extends BaseDiagramConfig {
    * On which day a week-based interval should start
    *
    */
-  weekday?: "monday" | "tuesday" | "wednesday" | "thursday" | "friday" | "saturday" | "sunday";
+  weekday?: string | "monday" | "tuesday" | "wednesday" | "thursday" | "friday" | "saturday" | "sunday";
 }
 /**
  * The object containing configurations specific for sequence diagrams

From 383bbefa9e34aa5da6f648ea158cce3c5ae11238 Mon Sep 17 00:00:00 2001
From: Sibin Thomas <sibin.thomas@iiitb.ac.in>
Date: Sat, 15 Jul 2023 18:27:42 +0530
Subject: [PATCH 140/281] Added code for Vertical branches for GitGraph and
 Added TB option in the parser file.

---
 .../src/diagrams/git/gitGraphRenderer.js      | 171 ++++++++++++++----
 .../src/diagrams/git/parser/gitGraph.jison    |   1 +
 2 files changed, 133 insertions(+), 39 deletions(-)

diff --git a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
index 8d88c601d..01b787ca3 100644
--- a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
+++ b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
@@ -19,12 +19,14 @@ let branchPos = {};
 let commitPos = {};
 let lanes = [];
 let maxPos = 0;
+let dir = 'LR';
 const clear = () => {
   branchPos = {};
   commitPos = {};
   allCommitsDict = {};
   maxPos = 0;
   lanes = [];
+  dir = 'LR';
 };
 
 /**
@@ -77,6 +79,10 @@ const drawCommits = (svg, commits, modifyGraph) => {
   const gLabels = svg.append('g').attr('class', 'commit-labels');
   let pos = 0;
 
+  if (dir === 'TB') {
+    pos = 30;
+  }
+
   const keys = Object.keys(commits);
   const sortedKeys = keys.sort((a, b) => {
     return commits[a].seq - commits[b].seq;
@@ -84,8 +90,9 @@ const drawCommits = (svg, commits, modifyGraph) => {
   sortedKeys.forEach((key) => {
     const commit = commits[key];
 
-    const y = branchPos[commit.branch].pos;
-    const x = pos + 10;
+    const y = dir === 'TB' ? pos + 10 : branchPos[commit.branch].pos;
+    const x = dir === 'TB' ? branchPos[commit.branch].pos : pos + 10;
+
     // Don't draw the commits now but calculate the positioning which is used by the branch lines etc.
     if (modifyGraph) {
       let typeClass;
@@ -208,7 +215,11 @@ const drawCommits = (svg, commits, modifyGraph) => {
         }
       }
     }
-    commitPos[commit.id] = { x: pos + 10, y: y };
+    if (dir === 'TB') {
+      commitPos[commit.id] = { x: x, y: pos + 10 };
+    } else {
+      commitPos[commit.id] = { x: pos + 10, y: y };
+    }
 
     // The first iteration over the commits are for positioning purposes, this
     // is required for drawing the lines. The circles and labels is drawn after the labels
@@ -240,8 +251,19 @@ const drawCommits = (svg, commits, modifyGraph) => {
           .attr('y', y + 13.5)
           .attr('width', bbox.width + 2 * py)
           .attr('height', bbox.height + 2 * py);
-        text.attr('x', pos + 10 - bbox.width / 2);
-        if (gitGraphConfig.rotateCommitLabel) {
+
+        if (dir === 'TB') {
+          labelBkg
+            .attr('x', x - (bbox.width + 4 * px))
+            .attr('y', y - 5);
+          text.attr('x', x - (bbox.width + 4 * px));
+          text.attr('y', y + bbox.height - 5);
+        }
+
+        if (dir !== 'TB') {
+          text.attr('x', pos + 10 - bbox.width / 2);
+        }
+        if (gitGraphConfig.rotateCommitLabel && dir !== 'TB') {
           let r_x = -7.5 - ((bbox.width + 10) / 25) * 9.5;
           let r_y = 10 + (bbox.width / 25) * 8.5;
           wrapper.attr(
@@ -365,46 +387,94 @@ const drawArrow = (svg, commit1, commit2, allCommits) => {
     colorClassNum = branchPos[commit2.branch].index;
 
     const lineY = p1.y < p2.y ? findLane(p1.y, p2.y) : findLane(p2.y, p1.y);
+    const lineX = p1.x < p2.x ? findLane(p1.x, p2.x) : findLane(p2.x, p1.x);
 
-    if (p1.y < p2.y) {
-      lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${lineY - radius} ${arc} ${p1.x + offset} ${lineY} L ${
-        p2.x - radius
-      } ${lineY} ${arc2} ${p2.x} ${lineY + offset} L ${p2.x} ${p2.y}`;
+    if (dir === 'TB') {
+      if (p1.x < p2.x) {
+        lineDef = `M ${p1.x} ${p1.y} L ${lineX - radius} ${p1.y} ${arc2} ${lineX} ${p1.y + offset} L ${
+          lineX
+        } ${p2.y - radius} ${arc} ${lineX + offset} ${p2.y} L ${p2.x} ${p2.y}`;
+      } else {
+        lineDef = `M ${p1.x} ${p1.y} L ${lineX + radius} ${p1.y} ${arc} ${
+          lineX
+        } ${p1.y + offset} L ${lineX} ${p2.y - radius} ${arc2} ${lineX - offset} ${p2.y} L ${p2.x} ${p2.y}`;
+      }
     } else {
-      lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${lineY + radius} ${arc2} ${
-        p1.x + offset
-      } ${lineY} L ${p2.x - radius} ${lineY} ${arc} ${p2.x} ${lineY - offset} L ${p2.x} ${p2.y}`;
+      if (p1.y < p2.y) {
+        lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${lineY - radius} ${arc} ${p1.x + offset} ${lineY} L ${
+          p2.x - radius
+        } ${lineY} ${arc2} ${p2.x} ${lineY + offset} L ${p2.x} ${p2.y}`;
+      } else {
+        lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${lineY + radius} ${arc2} ${
+          p1.x + offset
+        } ${lineY} L ${p2.x - radius} ${lineY} ${arc} ${p2.x} ${lineY - offset} L ${p2.x} ${p2.y}`;
+      }
     }
   } else {
-    if (p1.y < p2.y) {
-      arc = 'A 20 20, 0, 0, 0,';
-      radius = 20;
-      offset = 20;
+    if (dir === 'TB')
+    {
+      if (p1.x < p2.x) {
+        arc = 'A 20 20, 0, 0, 0,';
+        arc2 = 'A 20 20, 0, 0, 1,';
+        radius = 20;
+        offset = 20;
 
-      // Figure out the color of the arrow,arrows going down take the color from the destination branch
-      colorClassNum = branchPos[commit2.branch].index;
+        // Figure out the color of the arrow,arrows going down take the color from the destination branch
+        colorClassNum = branchPos[commit2.branch].index;
 
-      lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc} ${p1.x + offset} ${p2.y} L ${
-        p2.x
-      } ${p2.y}`;
-    }
-    if (p1.y > p2.y) {
-      arc = 'A 20 20, 0, 0, 0,';
-      radius = 20;
-      offset = 20;
+        lineDef = `M ${p1.x} ${p1.y} L ${p2.x - radius} ${p1.y} ${arc2} ${p2.x} ${p1.y + offset} L ${
+          p2.x
+        } ${p2.y}`;
+      }
+      if (p1.x > p2.x) {
+        arc = 'A 20 20, 0, 0, 0,';
+        radius = 20;
+        offset = 20;
 
-      // Arrows going up take the color from the source branch
-      colorClassNum = branchPos[commit1.branch].index;
-      lineDef = `M ${p1.x} ${p1.y} L ${p2.x - radius} ${p1.y} ${arc} ${p2.x} ${p1.y - offset} L ${
-        p2.x
-      } ${p2.y}`;
-    }
+        // Arrows going up take the color from the source branch
+        colorClassNum = branchPos[commit1.branch].index;
+        lineDef = `M ${p1.x} ${p1.y} L ${p2.x - radius} ${p1.y} ${arc} ${p2.x} ${p1.y - offset} L ${
+          p2.x
+        } ${p2.y}`;
+      }
 
-    if (p1.y === p2.y) {
-      colorClassNum = branchPos[commit1.branch].index;
-      lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc} ${p1.x + offset} ${p2.y} L ${
-        p2.x
-      } ${p2.y}`;
+      if (p1.x === p2.x) {
+        colorClassNum = branchPos[commit1.branch].index;
+        lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc} ${p1.x + offset} ${p2.y} L ${
+          p2.x
+        } ${p2.y}`;
+      }
+    } else {
+      if (p1.y < p2.y) {
+        arc = 'A 20 20, 0, 0, 0,';
+        radius = 20;
+        offset = 20;
+
+        // Figure out the color of the arrow,arrows going down take the color from the destination branch
+        colorClassNum = branchPos[commit2.branch].index;
+
+        lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc} ${p1.x + offset} ${p2.y} L ${
+          p2.x
+        } ${p2.y}`;
+      }
+      if (p1.y > p2.y) {
+        arc = 'A 20 20, 0, 0, 0,';
+        radius = 20;
+        offset = 20;
+
+        // Arrows going up take the color from the source branch
+        colorClassNum = branchPos[commit1.branch].index;
+        lineDef = `M ${p1.x} ${p1.y} L ${p2.x - radius} ${p1.y} ${arc} ${p2.x} ${p1.y - offset} L ${
+          p2.x
+        } ${p2.y}`;
+      }
+
+      if (p1.y === p2.y) {
+        colorClassNum = branchPos[commit1.branch].index;
+        lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc} ${p1.x + offset} ${p2.y} L ${
+          p2.x
+        } ${p2.y}`;
+      }
     }
   }
   svg
@@ -445,6 +515,13 @@ const drawBranches = (svg, branches) => {
     line.attr('y2', pos);
     line.attr('class', 'branch branch' + adjustIndexForTheme);
 
+    if (dir === 'TB') {
+      line.attr('y1', 30);
+      line.attr('x1', pos);
+      line.attr('y2', maxPos);
+      line.attr('x2', pos);
+    }
+
     lanes.push(pos);
 
     let name = branch.name;
@@ -467,7 +544,6 @@ const drawBranches = (svg, branches) => {
       .attr('y', -bbox.height / 2 + 8)
       .attr('width', bbox.width + 18)
       .attr('height', bbox.height + 4);
-
     label.attr(
       'transform',
       'translate(' +
@@ -476,7 +552,23 @@ const drawBranches = (svg, branches) => {
         (pos - bbox.height / 2 - 1) +
         ')'
     );
-    bkg.attr('transform', 'translate(' + -19 + ', ' + (pos - bbox.height / 2) + ')');
+    if (dir === 'TB') {
+      bkg
+        .attr('x', pos - bbox.width/2 - 10)
+        .attr('y', 0);
+      label
+        .attr(
+          'transform',
+          'translate(' +
+            (pos - bbox.width/2 - 5) +
+            ', ' +
+            (0) +
+            ')'
+        );
+    }
+    if (dir !== 'TB') {
+      bkg.attr('transform', 'translate(' + -19 + ', ' + (pos - bbox.height / 2) + ')');
+    }
   });
 };
 
@@ -495,6 +587,7 @@ export const draw = function (txt, id, ver, diagObj) {
 
   allCommitsDict = diagObj.db.getCommits();
   const branches = diagObj.db.getBranchesAsObjArray();
+  dir = diagObj.db.getDirection();
 
   // Position branches vertically
   let pos = 0;
diff --git a/packages/mermaid/src/diagrams/git/parser/gitGraph.jison b/packages/mermaid/src/diagrams/git/parser/gitGraph.jison
index 1c87f3bf3..c0aa3d2d9 100644
--- a/packages/mermaid/src/diagrams/git/parser/gitGraph.jison
+++ b/packages/mermaid/src/diagrams/git/parser/gitGraph.jison
@@ -52,6 +52,7 @@ cherry\-pick(?=\s|$)                    return 'CHERRY_PICK';
 checkout(?=\s|$)                        return 'CHECKOUT';
 "LR"                                    return 'DIR';
 "BT"                                    return 'DIR';
+"TB"                                    return 'DIR';
 ":"                                     return ':';
 "^"                                     return 'CARET'
 "options"\r?\n                          this.begin("options"); //

From 85515bcf8d47717ba32884c8ec7981ae4ecc710b Mon Sep 17 00:00:00 2001
From: Lei Nelissen <lei@codified.nl>
Date: Sat, 15 Jul 2023 15:28:48 +0200
Subject: [PATCH 141/281] chore: leave the newLine out of the jison spec

---
 .../mermaid/src/diagrams/gantt/parser/gantt.jison  | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/mermaid/src/diagrams/gantt/parser/gantt.jison b/packages/mermaid/src/diagrams/gantt/parser/gantt.jison
index 1d213834e..f7fd40c1b 100644
--- a/packages/mermaid/src/diagrams/gantt/parser/gantt.jison
+++ b/packages/mermaid/src/diagrams/gantt/parser/gantt.jison
@@ -86,13 +86,13 @@ that id.
 "includes"\s[^#\n;]+            return 'includes';
 "excludes"\s[^#\n;]+            return 'excludes';
 "todayMarker"\s[^\n;]+          return 'todayMarker';
-.*weekday\s+monday[^\n]+        return 'weekday_monday'
-.*weekday\s+tuesday[^\n]+       return 'weekday_tuesday'
-.*weekday\s+wednesday[^\n]+     return 'weekday_wednesday'
-.*weekday\s+thursday[^\n]+      return 'weekday_thursday'
-.*weekday\s+friday[^\n]+        return 'weekday_friday'
-.*weekday\s+saturday[^\n]+      return 'weekday_saturday'
-.*weekday\s+sunday[^\n]+        return 'weekday_sunday'
+weekday\s+monday                return 'weekday_monday'
+weekday\s+tuesday               return 'weekday_tuesday'
+weekday\s+wednesday             return 'weekday_wednesday'
+weekday\s+thursday              return 'weekday_thursday'
+weekday\s+friday                return 'weekday_friday'
+weekday\s+saturday              return 'weekday_saturday'
+weekday\s+sunday                return 'weekday_sunday'
 \d\d\d\d"-"\d\d"-"\d\d          return 'date';
 "title"\s[^#\n;]+               return 'title';
 "accDescription"\s[^#\n;]+      return 'accDescription'

From 7e39c13836dce0d2401ca5f07364d0e7074e99e2 Mon Sep 17 00:00:00 2001
From: Lei Nelissen <lei@codified.nl>
Date: Sat, 15 Jul 2023 15:38:21 +0200
Subject: [PATCH 142/281] chore: narrow down tstype

---
 packages/mermaid/src/config.type.ts             | 2 +-
 packages/mermaid/src/schemas/config.schema.yaml | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts
index 1163016aa..df87e9c40 100644
--- a/packages/mermaid/src/config.type.ts
+++ b/packages/mermaid/src/config.type.ts
@@ -1067,7 +1067,7 @@ export interface GanttDiagramConfig extends BaseDiagramConfig {
    * On which day a week-based interval should start
    *
    */
-  weekday?: string | "monday" | "tuesday" | "wednesday" | "thursday" | "friday" | "saturday" | "sunday";
+  weekday?: "monday" | "tuesday" | "wednesday" | "thursday" | "friday" | "saturday" | "sunday";
 }
 /**
  * The object containing configurations specific for sequence diagrams
diff --git a/packages/mermaid/src/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml
index 71e7de477..6e5f48d95 100644
--- a/packages/mermaid/src/schemas/config.schema.yaml
+++ b/packages/mermaid/src/schemas/config.schema.yaml
@@ -1549,7 +1549,7 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file)
         description: |
           On which day a week-based interval should start
         type: string
-        tsType: 'string | "monday" | "tuesday" | "wednesday" | "thursday" | "friday" | "saturday" | "sunday"'
+        tsType: '"monday" | "tuesday" | "wednesday" | "thursday" | "friday" | "saturday" | "sunday"'
         enum:
           - monday
           - tuesday

From 57ee181fad6cd3f6be162297e18ad25e37766162 Mon Sep 17 00:00:00 2001
From: Alois Klink <alois@aloisklink.com>
Date: Thu, 13 Jul 2023 23:59:56 +0100
Subject: [PATCH 143/281] build(docs): add `editLink: ` to MD frontmatter

Add a YAML front-matter entry called `editLink` to Markdown files in
Vitepress, e.g.

```markdown
---
editLink: "https://github.com/mermaid-js/mermaid/edit/develop/packages/mermaid/src/schemas/config.schema.yaml"
---

Here is my markdown file!
```

Although Vitepress doesn't officially support adding a URL as a
`editLink:` YAML front-matter, we can add a custom `editLink` function
to our Vitepress config that does allow it.
---
 packages/mermaid/src/docs.mts     | 26 +++++++++++++++++++++++++-
 packages/mermaid/src/docs.spec.ts | 21 +++++++++++++++++++++
 2 files changed, 46 insertions(+), 1 deletion(-)

diff --git a/packages/mermaid/src/docs.mts b/packages/mermaid/src/docs.mts
index b3f356f34..227449a0a 100644
--- a/packages/mermaid/src/docs.mts
+++ b/packages/mermaid/src/docs.mts
@@ -34,7 +34,7 @@ import { readFileSync, writeFileSync, mkdirSync, existsSync, rmSync, rmdirSync }
 import { exec } from 'child_process';
 import { globby } from 'globby';
 import { JSDOM } from 'jsdom';
-import type { Code, ListItem, Root, Text } from 'mdast';
+import type { Code, ListItem, Root, Text, YAML } from 'mdast';
 import { posix, dirname, relative, join } from 'path';
 import prettier from 'prettier';
 import { remark } from 'remark';
@@ -209,6 +209,8 @@ interface TransformMarkdownAstOptions {
   originalFilename: string;
   /** If `true`, add a warning that the file is autogenerated */
   addAutogeneratedWarning?: boolean;
+  /** If `true`, adds an `editLink: "https://..."` YAML frontmatter field */
+  addEditLink?: boolean;
   /**
    * If `true`, remove the YAML metadata from the Markdown input.
    * Generally, YAML metadata is only used for Vitepress.
@@ -231,6 +233,7 @@ interface TransformMarkdownAstOptions {
 export function transformMarkdownAst({
   originalFilename,
   addAutogeneratedWarning,
+  addEditLink,
   removeYAML,
 }: TransformMarkdownAstOptions) {
   return (tree: Root, _file?: any): Root => {
@@ -270,6 +273,25 @@ export function transformMarkdownAst({
       }
     }
 
+    if (addEditLink) {
+      // add originalFilename as custom editLink in YAML frontmatter
+      let yamlFrontMatter: YAML;
+      if (astWithTransformedBlocks.children[0].type === 'yaml') {
+        yamlFrontMatter = astWithTransformedBlocks.children[0];
+      } else {
+        yamlFrontMatter = {
+          type: 'yaml',
+          value: '',
+        };
+        astWithTransformedBlocks.children.unshift(yamlFrontMatter);
+      }
+      const filePathFromRoot = posix.join('packages/mermaid', originalFilename);
+      // TODO, should we replace this with proper YAML parsing?
+      yamlFrontMatter.value += `\neditLink: ${JSON.stringify(
+        `https://github.com/mermaid-js/mermaid/edit/develop/${filePathFromRoot}`
+      )}`;
+    }
+
     if (removeYAML) {
       const firstNode = astWithTransformedBlocks.children[0];
       if (firstNode.type == 'yaml') {
@@ -306,6 +328,7 @@ const transformMarkdown = (file: string) => {
       // mermaid project specific plugin
       originalFilename: file,
       addAutogeneratedWarning: !noHeader,
+      addEditLink: noHeader,
       removeYAML: !noHeader,
     })
     .processSync(doc)
@@ -427,6 +450,7 @@ async function transormJsonSchema(file: string) {
         // mermaid project specific plugin
         originalFilename: file,
         addAutogeneratedWarning: !noHeader,
+        addEditLink: noHeader,
         removeYAML: !noHeader,
       });
 
diff --git a/packages/mermaid/src/docs.spec.ts b/packages/mermaid/src/docs.spec.ts
index 50feaee6a..bea833fd9 100644
--- a/packages/mermaid/src/docs.spec.ts
+++ b/packages/mermaid/src/docs.spec.ts
@@ -105,6 +105,27 @@ This Markdown should be kept.
     });
   });
 
+  it('should add an editLink in the YAML frontmatter if `addEditLink: true`', async () => {
+    const contents = `---
+title: Flowcharts Syntax
+---
+
+This Markdown should be kept.
+`;
+    const withYaml = (
+      await remarkBuilder()
+        .use(transformMarkdownAst, { originalFilename, addEditLink: true })
+        .process(contents)
+    ).toString();
+    expect(withYaml).toEqual(`---
+title: Flowcharts Syntax
+editLink: "https://github.com/mermaid-js/mermaid/edit/develop/packages/mermaid/example-input-filename.md"
+---
+
+This Markdown should be kept.
+`);
+  });
+
   describe('transformToBlockQuote', () => {
     // TODO Is there a way to test this with --vitepress given as a process argument?
 

From af9b3f77cb38e7a51236f0b0cf600e0516e866f4 Mon Sep 17 00:00:00 2001
From: Alois Klink <alois@aloisklink.com>
Date: Sat, 15 Jul 2023 23:09:02 +0100
Subject: [PATCH 144/281] build(docs): allow using custom `editLink`

In Vitepress, allow using a custom `editLink`, if specified in the YAML
frontmatter.
---
 packages/mermaid/src/docs/.vitepress/config.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/mermaid/src/docs/.vitepress/config.ts b/packages/mermaid/src/docs/.vitepress/config.ts
index 330b088d9..2644fa088 100644
--- a/packages/mermaid/src/docs/.vitepress/config.ts
+++ b/packages/mermaid/src/docs/.vitepress/config.ts
@@ -35,7 +35,12 @@ export default defineConfig({
   themeConfig: {
     nav: nav(),
     editLink: {
-      pattern: 'https://github.com/mermaid-js/mermaid/edit/develop/packages/mermaid/src/docs/:path',
+      pattern: ({ filePath, frontmatter }) => {
+        if (typeof frontmatter.editLink === 'string') {
+          return frontmatter.editLink;
+        }
+        return `https://github.com/mermaid-js/mermaid/edit/develop/packages/mermaid/src/docs/${filePath}`;
+      },
       text: 'Edit this page on GitHub',
     },
     sidebar: {

From a0a25ed7561c7420324be8a9e187f0b2c4b3d711 Mon Sep 17 00:00:00 2001
From: Alois Klink <alois@aloisklink.com>
Date: Sun, 16 Jul 2023 00:20:48 +0100
Subject: [PATCH 145/281] chore: remove unused `devDependency` on coveralls

This `devDependency` hasn't been used for a long time.
---
 package.json                  |   1 -
 packages/mermaid/package.json |   1 -
 pnpm-lock.yaml                | 102 ----------------------------------
 3 files changed, 104 deletions(-)

diff --git a/package.json b/package.json
index b23c8bd98..9cbdcdb1e 100644
--- a/package.json
+++ b/package.json
@@ -84,7 +84,6 @@
     "ajv": "^8.12.0",
     "concurrently": "^8.0.1",
     "cors": "^2.8.5",
-    "coveralls": "^3.1.1",
     "cypress": "^12.10.0",
     "cypress-image-snapshot": "^4.0.1",
     "esbuild": "^0.18.0",
diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index 481eef888..d04083baa 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -94,7 +94,6 @@
     "ajv": "^8.11.2",
     "chokidar": "^3.5.3",
     "concurrently": "^8.0.1",
-    "coveralls": "^3.1.1",
     "cpy-cli": "^4.2.0",
     "cspell": "^6.31.1",
     "csstree-validator": "^3.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6d604e524..f258400a6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -80,9 +80,6 @@ importers:
       cors:
         specifier: ^2.8.5
         version: 2.8.5
-      coveralls:
-        specifier: ^3.1.1
-        version: 3.1.1
       cypress:
         specifier: ^12.10.0
         version: 12.10.0
@@ -306,9 +303,6 @@ importers:
       concurrently:
         specifier: ^8.0.1
         version: 8.0.1
-      coveralls:
-        specifier: ^3.1.1
-        version: 3.1.1
       cpy-cli:
         specifier: ^4.2.0
         version: 4.2.0
@@ -7163,18 +7157,6 @@ packages:
       path-type: 4.0.0
     dev: true
 
-  /coveralls@3.1.1:
-    resolution: {integrity: sha512-+dxnG2NHncSD1NrqbSM3dn/lE57O6Qf/koe9+I7c+wzkqRmEvcp0kgJdxKInzYzkICKkFMZsX3Vct3++tsF9ww==}
-    engines: {node: '>=6'}
-    hasBin: true
-    dependencies:
-      js-yaml: 3.14.1
-      lcov-parse: 1.0.0
-      log-driver: 1.2.7
-      minimist: 1.2.6
-      request: 2.88.2
-    dev: true
-
   /cp-file@9.1.0:
     resolution: {integrity: sha512-3scnzFj/94eb7y4wyXRWwvzLFaQp87yyfTnChIjlfYrVqp5lVO3E2hIJMeQIltUT0K2ZAB3An1qXcBmwGyvuwA==}
     engines: {node: '>=10'}
@@ -9658,20 +9640,6 @@ packages:
       uglify-js: 3.17.3
     dev: true
 
-  /har-schema@2.0.0:
-    resolution: {integrity: sha512-Oqluz6zhGX8cyRaTQlFMPw80bSJVG2x/cFb8ZPhUILGgHka9SsokCCOQgpveePerqidZOrT14ipqfJb7ILcW5Q==}
-    engines: {node: '>=4'}
-    dev: true
-
-  /har-validator@5.1.5:
-    resolution: {integrity: sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==}
-    engines: {node: '>=6'}
-    deprecated: this library is no longer supported
-    dependencies:
-      ajv: 6.12.6
-      har-schema: 2.0.0
-    dev: true
-
   /hard-rejection@2.1.0:
     resolution: {integrity: sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==}
     engines: {node: '>=6'}
@@ -9869,15 +9837,6 @@ packages:
       - debug
     dev: true
 
-  /http-signature@1.2.0:
-    resolution: {integrity: sha512-CAbnr6Rz4CYQkLYUtSNXxQPUH2gK8f3iWexVlsnMeD+GjlsQ0Xsy1cOX+mN3dtxYomRy21CiOzU8Uhw6OwncEQ==}
-    engines: {node: '>=0.8', npm: '>=1.3.7'}
-    dependencies:
-      assert-plus: 1.0.0
-      jsprim: 1.4.2
-      sshpk: 1.17.0
-    dev: true
-
   /http-signature@1.3.6:
     resolution: {integrity: sha512-3adrsD6zqo4GsTqtO7FyrejHNv+NgiIfAfv68+jVlFmSr9OGy7zrxONceFRLKvnnZA5jbxQBX1u9PpB6Wi32Gw==}
     engines: {node: '>=0.10'}
@@ -11175,16 +11134,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /jsprim@1.4.2:
-    resolution: {integrity: sha512-P2bSOMAc/ciLz6DzgjVlGJP9+BrJWu5UDGK70C2iweC5QBIeFf0ZXRvGjEj2uYgrY2MkAAhsSWHDWlFtEroZWw==}
-    engines: {node: '>=0.6.0'}
-    dependencies:
-      assert-plus: 1.0.0
-      extsprintf: 1.3.0
-      json-schema: 0.4.0
-      verror: 1.10.0
-    dev: true
-
   /jsprim@2.0.2:
     resolution: {integrity: sha512-gqXddjPqQ6G40VdnI6T6yObEC+pDNvyP95wdQhkWkg7crHH3km5qP1FsOXEkzEQwnz6gz5qGTn1c2Y52wP3OyQ==}
     engines: {'0': node >=0.6.0}
@@ -11246,11 +11195,6 @@ packages:
     engines: {node: '> 0.8'}
     dev: true
 
-  /lcov-parse@1.0.0:
-    resolution: {integrity: sha512-aprLII/vPzuQvYZnDRU78Fns9I2Ag3gi4Ipga/hxnVMCZC8DnR2nI7XBqrPoywGfxqIx/DgarGvDJZAD3YBTgQ==}
-    hasBin: true
-    dev: true
-
   /leven@3.1.0:
     resolution: {integrity: sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==}
     engines: {node: '>=6'}
@@ -11455,11 +11399,6 @@ packages:
   /lodash@4.17.21:
     resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
 
-  /log-driver@1.2.7:
-    resolution: {integrity: sha512-U7KCmLdqsGHBLeWqYlFA0V0Sl6P08EE1ZrmA9cxjUE0WVqT9qnyVDPz1kzpFEP0jdJuFnasWIfSd7fsaNXkpbg==}
-    engines: {node: '>=0.8.6'}
-    dev: true
-
   /log-symbols@4.1.0:
     resolution: {integrity: sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==}
     engines: {node: '>=10'}
@@ -12153,10 +12092,6 @@ packages:
       kind-of: 6.0.3
     dev: true
 
-  /minimist@1.2.6:
-    resolution: {integrity: sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==}
-    dev: true
-
   /minimist@1.2.8:
     resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
     dev: true
@@ -12437,10 +12372,6 @@ packages:
       - supports-color
     dev: true
 
-  /oauth-sign@0.9.0:
-    resolution: {integrity: sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==}
-    dev: true
-
   /object-assign@4.1.1:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
@@ -13470,33 +13401,6 @@ packages:
       throttleit: 1.0.0
     dev: true
 
-  /request@2.88.2:
-    resolution: {integrity: sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==}
-    engines: {node: '>= 6'}
-    deprecated: request has been deprecated, see https://github.com/request/request/issues/3142
-    dependencies:
-      aws-sign2: 0.7.0
-      aws4: 1.11.0
-      caseless: 0.12.0
-      combined-stream: 1.0.8
-      extend: 3.0.2
-      forever-agent: 0.6.1
-      form-data: 2.3.3
-      har-validator: 5.1.5
-      http-signature: 1.2.0
-      is-typedarray: 1.0.0
-      isstream: 0.1.2
-      json-stringify-safe: 5.0.1
-      mime-types: 2.1.35
-      oauth-sign: 0.9.0
-      performance-now: 2.1.0
-      qs: 6.5.3
-      safe-buffer: 5.2.1
-      tough-cookie: 2.5.0
-      tunnel-agent: 0.6.0
-      uuid: 3.4.0
-    dev: true
-
   /require-directory@2.1.1:
     resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
     engines: {node: '>=0.10.0'}
@@ -15280,12 +15184,6 @@ packages:
     engines: {node: '>= 0.4.0'}
     dev: true
 
-  /uuid@3.4.0:
-    resolution: {integrity: sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==}
-    deprecated: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
-    hasBin: true
-    dev: true
-
   /uuid@8.3.2:
     resolution: {integrity: sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==}
     hasBin: true

From 855f6ef9bf6e870a7b834ddbc3721abfba82d9c1 Mon Sep 17 00:00:00 2001
From: Guilherme Gonzaga <guilhermgonzaga@gmail.com>
Date: Sun, 16 Jul 2023 23:16:37 +0000
Subject: [PATCH 146/281] docs: Fix checkbox syntax

---
 docs/syntax/c4c.md                      | 143 +++++++++---------------
 packages/mermaid/src/docs/syntax/c4c.md | 108 +++++++++---------
 2 files changed, 108 insertions(+), 143 deletions(-)

diff --git a/docs/syntax/c4c.md b/docs/syntax/c4c.md
index dd5fa21b0..34b3b392a 100644
--- a/docs/syntax/c4c.md
+++ b/docs/syntax/c4c.md
@@ -123,10 +123,10 @@ The layout does not use a fully automated layout algorithm. The position of shap
 The number of shapes per row and the number of boundaries can be adjusted using UpdateLayoutConfig.
 
 - Layout
-- - Lay_U, Lay_Up
-- - Lay_D, Lay_Down
-- - Lay_L, Lay_Left
-- - Lay_R, Lay_Right
+  - Lay_U, Lay_Up
+  - Lay_D, Lay_Down
+  - Lay_L, Lay_Left
+  - Lay_R, Lay_Right
 
 The following unfinished features are not supported in the short term.
 
@@ -140,111 +140,70 @@ The following unfinished features are not supported in the short term.
 
 - [x] System Context
 
-- - [x] Person(alias, label, ?descr, ?sprite, ?tags, $link)
-
-- - [x] Person_Ext
-
-- - [x] System(alias, label, ?descr, ?sprite, ?tags, $link)
-
-- - [x] SystemDb
-
-- - [x] SystemQueue
-
-- - [x] System_Ext
-
-- - [x] SystemDb_Ext
-
-- - [x] SystemQueue_Ext
-
-- - [x] Boundary(alias, label, ?type, ?tags, $link)
-
-- - [x] Enterprise_Boundary(alias, label, ?tags, $link)
-
-- - [x] System_Boundary
+  - [x] Person(alias, label, ?descr, ?sprite, ?tags, $link)
+  - [x] Person_Ext
+  - [x] System(alias, label, ?descr, ?sprite, ?tags, $link)
+  - [x] SystemDb
+  - [x] SystemQueue
+  - [x] System_Ext
+  - [x] SystemDb_Ext
+  - [x] SystemQueue_Ext
+  - [x] Boundary(alias, label, ?type, ?tags, $link)
+  - [x] Enterprise_Boundary(alias, label, ?tags, $link)
+  - [x] System_Boundary
 
 - [x] Container diagram
 
-- - [x] Container(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
-
-- - [x] ContainerDb
-
-- - [x] ContainerQueue
-
-- - [x] Container_Ext
-
-- - [x] ContainerDb_Ext
-
-- - [x] ContainerQueue_Ext
-
-- - [x] Container_Boundary(alias, label, ?tags, $link)
+  - [x] Container(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
+  - [x] ContainerDb
+  - [x] ContainerQueue
+  - [x] Container_Ext
+  - [x] ContainerDb_Ext
+  - [x] ContainerQueue_Ext
+  - [x] Container_Boundary(alias, label, ?tags, $link)
 
 - [x] Component diagram
 
-- - [x] Component(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
-
-- - [x] ComponentDb
-
-- - [x] ComponentQueue
-
-- - [x] Component_Ext
-
-- - [x] ComponentDb_Ext
-
-- - [x] ComponentQueue_Ext
+  - [x] Component(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
+  - [x] ComponentDb
+  - [x] ComponentQueue
+  - [x] Component_Ext
+  - [x] ComponentDb_Ext
+  - [x] ComponentQueue_Ext
 
 - [x] Dynamic diagram
 
-- - [x] RelIndex(index, from, to, label, ?tags, $link)
+  - [x] RelIndex(index, from, to, label, ?tags, $link)
 
 - [x] Deployment diagram
 
-- - [x] Deployment_Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link)
-
-- - [x] Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link): short name of Deployment_Node()
-
-- - [x] Node_L(alias, label, ?type, ?descr, ?sprite, ?tags, $link): left aligned Node()
-
-- - [x] Node_R(alias, label, ?type, ?descr, ?sprite, ?tags, $link): right aligned Node()
+  - [x] Deployment_Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link)
+  - [x] Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link): short name of Deployment_Node()
+  - [x] Node_L(alias, label, ?type, ?descr, ?sprite, ?tags, $link): left aligned Node()
+  - [x] Node_R(alias, label, ?type, ?descr, ?sprite, ?tags, $link): right aligned Node()
 
 - [x] Relationship Types
 
-- - [x] Rel(from, to, label, ?techn, ?descr, ?sprite, ?tags, $link)
-
-- - [x] BiRel (bidirectional relationship)
-
-- - [x] Rel_U, Rel_Up
-
-- - [x] Rel_D, Rel_Down
-
-- - [x] Rel_L, Rel_Left
-
-- - [x] Rel_R, Rel_Right
-
-- - [x] Rel_Back
-
-- - [x] RelIndex \* Compatible with C4-Plantuml syntax, but ignores the index parameter. The sequence number is determined by the order in which the rel statements are written.
+  - [x] Rel(from, to, label, ?techn, ?descr, ?sprite, ?tags, $link)
+  - [x] BiRel (bidirectional relationship)
+  - [x] Rel_U, Rel_Up
+  - [x] Rel_D, Rel_Down
+  - [x] Rel_L, Rel_Left
+  - [x] Rel_R, Rel_Right
+  - [x] Rel_Back
+  - [x] RelIndex \* Compatible with C4-Plantuml syntax, but ignores the index parameter. The sequence number is determined by the order in which the rel statements are written.
 
 - [ ] Custom tags/stereotypes support and skin param updates
-
-- - [ ] AddElementTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): Introduces a new element tag. The styles of the tagged elements are updated and the tag is displayed in the calculated legend.
-
-- - [ ] AddRelTag(tagStereo, ?textColor, ?lineColor, ?lineStyle, ?sprite, ?techn, ?legendText, ?legendSprite): Introduces a new Relationship tag. The styles of the tagged relationships are updated and the tag is displayed in the calculated legend.
-
-- - [x] UpdateElementStyle(elementName, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): This call updates the default style of the elements (component, ...) and creates no additional legend entry.
-
-- - [x] UpdateRelStyle(from, to, ?textColor, ?lineColor, ?offsetX, ?offsetY): This call updates the default relationship colors and creates no additional legend entry. Two new parameters, offsetX and offsetY, are added to set the offset of the original position of the text.
-
-- - [ ] RoundedBoxShape(): This call returns the name of the rounded box shape and can be used as ?shape argument.
-
-- - [ ] EightSidedShape(): This call returns the name of the eight sided shape and can be used as ?shape argument.
-
-- - [ ] DashedLine(): This call returns the name of the dashed line and can be used as ?lineStyle argument.
-
-- - [ ] DottedLine(): This call returns the name of the dotted line and can be used as ?lineStyle argument.
-
-- - [ ] BoldLine(): This call returns the name of the bold line and can be used as ?lineStyle argument.
-
-- - [x] UpdateLayoutConfig(?c4ShapeInRow, ?c4BoundaryInRow): New. This call updates the default c4ShapeInRow(4) and c4BoundaryInRow(2).
+  - [ ] AddElementTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): Introduces a new element tag. The styles of the tagged elements are updated and the tag is displayed in the calculated legend.
+  - [ ] AddRelTag(tagStereo, ?textColor, ?lineColor, ?lineStyle, ?sprite, ?techn, ?legendText, ?legendSprite): Introduces a new Relationship tag. The styles of the tagged relationships are updated and the tag is displayed in the calculated legend.
+  - [x] UpdateElementStyle(elementName, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): This call updates the default style of the elements (component, ...) and creates no additional legend entry.
+  - [x] UpdateRelStyle(from, to, ?textColor, ?lineColor, ?offsetX, ?offsetY): This call updates the default relationship colors and creates no additional legend entry. Two new parameters, offsetX and offsetY, are added to set the offset of the original position of the text.
+  - [ ] RoundedBoxShape(): This call returns the name of the rounded box shape and can be used as ?shape argument.
+  - [ ] EightSidedShape(): This call returns the name of the eight sided shape and can be used as ?shape argument.
+  - [ ] DashedLine(): This call returns the name of the dashed line and can be used as ?lineStyle argument.
+  - [ ] DottedLine(): This call returns the name of the dotted line and can be used as ?lineStyle argument.
+  - [ ] BoldLine(): This call returns the name of the bold line and can be used as ?lineStyle argument.
+  - [x] UpdateLayoutConfig(?c4ShapeInRow, ?c4BoundaryInRow): New. This call updates the default c4ShapeInRow(4) and c4BoundaryInRow(2).
 
 There are two ways to assign parameters with question marks. One uses the non-named parameter assignment method in the order of the parameters, and the other uses the named parameter assignment method, where the name must start with a $ symbol.
 
diff --git a/packages/mermaid/src/docs/syntax/c4c.md b/packages/mermaid/src/docs/syntax/c4c.md
index 78528f7b9..0b7b6e87d 100644
--- a/packages/mermaid/src/docs/syntax/c4c.md
+++ b/packages/mermaid/src/docs/syntax/c4c.md
@@ -70,10 +70,10 @@ The layout does not use a fully automated layout algorithm. The position of shap
 The number of shapes per row and the number of boundaries can be adjusted using UpdateLayoutConfig.
 
 - Layout
-- - Lay_U, Lay_Up
-- - Lay_D, Lay_Down
-- - Lay_L, Lay_Left
-- - Lay_R, Lay_Right
+  - Lay_U, Lay_Up
+  - Lay_D, Lay_Down
+  - Lay_L, Lay_Left
+  - Lay_R, Lay_Right
 
 The following unfinished features are not supported in the short term.
 
@@ -83,65 +83,71 @@ The following unfinished features are not supported in the short term.
 - [ ] Legend
 
 - [x] System Context
-- - [x] Person(alias, label, ?descr, ?sprite, ?tags, $link)
-- - [x] Person_Ext
-- - [x] System(alias, label, ?descr, ?sprite, ?tags, $link)
-- - [x] SystemDb
-- - [x] SystemQueue
-- - [x] System_Ext
-- - [x] SystemDb_Ext
-- - [x] SystemQueue_Ext
-- - [x] Boundary(alias, label, ?type, ?tags, $link)
-- - [x] Enterprise_Boundary(alias, label, ?tags, $link)
-- - [x] System_Boundary
+
+  - [x] Person(alias, label, ?descr, ?sprite, ?tags, $link)
+  - [x] Person_Ext
+  - [x] System(alias, label, ?descr, ?sprite, ?tags, $link)
+  - [x] SystemDb
+  - [x] SystemQueue
+  - [x] System_Ext
+  - [x] SystemDb_Ext
+  - [x] SystemQueue_Ext
+  - [x] Boundary(alias, label, ?type, ?tags, $link)
+  - [x] Enterprise_Boundary(alias, label, ?tags, $link)
+  - [x] System_Boundary
 
 - [x] Container diagram
-- - [x] Container(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
-- - [x] ContainerDb
-- - [x] ContainerQueue
-- - [x] Container_Ext
-- - [x] ContainerDb_Ext
-- - [x] ContainerQueue_Ext
-- - [x] Container_Boundary(alias, label, ?tags, $link)
+
+  - [x] Container(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
+  - [x] ContainerDb
+  - [x] ContainerQueue
+  - [x] Container_Ext
+  - [x] ContainerDb_Ext
+  - [x] ContainerQueue_Ext
+  - [x] Container_Boundary(alias, label, ?tags, $link)
 
 - [x] Component diagram
-- - [x] Component(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
-- - [x] ComponentDb
-- - [x] ComponentQueue
-- - [x] Component_Ext
-- - [x] ComponentDb_Ext
-- - [x] ComponentQueue_Ext
+
+  - [x] Component(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
+  - [x] ComponentDb
+  - [x] ComponentQueue
+  - [x] Component_Ext
+  - [x] ComponentDb_Ext
+  - [x] ComponentQueue_Ext
 
 - [x] Dynamic diagram
-- - [x] RelIndex(index, from, to, label, ?tags, $link)
+
+  - [x] RelIndex(index, from, to, label, ?tags, $link)
 
 - [x] Deployment diagram
-- - [x] Deployment_Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link)
-- - [x] Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link): short name of Deployment_Node()
-- - [x] Node_L(alias, label, ?type, ?descr, ?sprite, ?tags, $link): left aligned Node()
-- - [x] Node_R(alias, label, ?type, ?descr, ?sprite, ?tags, $link): right aligned Node()
+
+  - [x] Deployment_Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link)
+  - [x] Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link): short name of Deployment_Node()
+  - [x] Node_L(alias, label, ?type, ?descr, ?sprite, ?tags, $link): left aligned Node()
+  - [x] Node_R(alias, label, ?type, ?descr, ?sprite, ?tags, $link): right aligned Node()
 
 - [x] Relationship Types
-- - [x] Rel(from, to, label, ?techn, ?descr, ?sprite, ?tags, $link)
-- - [x] BiRel (bidirectional relationship)
-- - [x] Rel_U, Rel_Up
-- - [x] Rel_D, Rel_Down
-- - [x] Rel_L, Rel_Left
-- - [x] Rel_R, Rel_Right
-- - [x] Rel_Back
-- - [x] RelIndex \* Compatible with C4-Plantuml syntax, but ignores the index parameter. The sequence number is determined by the order in which the rel statements are written.
+
+  - [x] Rel(from, to, label, ?techn, ?descr, ?sprite, ?tags, $link)
+  - [x] BiRel (bidirectional relationship)
+  - [x] Rel_U, Rel_Up
+  - [x] Rel_D, Rel_Down
+  - [x] Rel_L, Rel_Left
+  - [x] Rel_R, Rel_Right
+  - [x] Rel_Back
+  - [x] RelIndex \* Compatible with C4-Plantuml syntax, but ignores the index parameter. The sequence number is determined by the order in which the rel statements are written.
 
 - [ ] Custom tags/stereotypes support and skin param updates
-- - [ ] AddElementTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): Introduces a new element tag. The styles of the tagged elements are updated and the tag is displayed in the calculated legend.
-- - [ ] AddRelTag(tagStereo, ?textColor, ?lineColor, ?lineStyle, ?sprite, ?techn, ?legendText, ?legendSprite): Introduces a new Relationship tag. The styles of the tagged relationships are updated and the tag is displayed in the calculated legend.
-- - [x] UpdateElementStyle(elementName, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): This call updates the default style of the elements (component, ...) and creates no additional legend entry.
-- - [x] UpdateRelStyle(from, to, ?textColor, ?lineColor, ?offsetX, ?offsetY): This call updates the default relationship colors and creates no additional legend entry. Two new parameters, offsetX and offsetY, are added to set the offset of the original position of the text.
-- - [ ] RoundedBoxShape(): This call returns the name of the rounded box shape and can be used as ?shape argument.
-- - [ ] EightSidedShape(): This call returns the name of the eight sided shape and can be used as ?shape argument.
-- - [ ] DashedLine(): This call returns the name of the dashed line and can be used as ?lineStyle argument.
-- - [ ] DottedLine(): This call returns the name of the dotted line and can be used as ?lineStyle argument.
-- - [ ] BoldLine(): This call returns the name of the bold line and can be used as ?lineStyle argument.
-- - [x] UpdateLayoutConfig(?c4ShapeInRow, ?c4BoundaryInRow): New. This call updates the default c4ShapeInRow(4) and c4BoundaryInRow(2).
+  - [ ] AddElementTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): Introduces a new element tag. The styles of the tagged elements are updated and the tag is displayed in the calculated legend.
+  - [ ] AddRelTag(tagStereo, ?textColor, ?lineColor, ?lineStyle, ?sprite, ?techn, ?legendText, ?legendSprite): Introduces a new Relationship tag. The styles of the tagged relationships are updated and the tag is displayed in the calculated legend.
+  - [x] UpdateElementStyle(elementName, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): This call updates the default style of the elements (component, ...) and creates no additional legend entry.
+  - [x] UpdateRelStyle(from, to, ?textColor, ?lineColor, ?offsetX, ?offsetY): This call updates the default relationship colors and creates no additional legend entry. Two new parameters, offsetX and offsetY, are added to set the offset of the original position of the text.
+  - [ ] RoundedBoxShape(): This call returns the name of the rounded box shape and can be used as ?shape argument.
+  - [ ] EightSidedShape(): This call returns the name of the eight sided shape and can be used as ?shape argument.
+  - [ ] DashedLine(): This call returns the name of the dashed line and can be used as ?lineStyle argument.
+  - [ ] DottedLine(): This call returns the name of the dotted line and can be used as ?lineStyle argument.
+  - [ ] BoldLine(): This call returns the name of the bold line and can be used as ?lineStyle argument.
+  - [x] UpdateLayoutConfig(?c4ShapeInRow, ?c4BoundaryInRow): New. This call updates the default c4ShapeInRow(4) and c4BoundaryInRow(2).
 
 There are two ways to assign parameters with question marks. One uses the non-named parameter assignment method in the order of the parameters, and the other uses the named parameter assignment method, where the name must start with a $ symbol.
 

From b5bcc3b9925d914e2987987a0b9981d64f0b4b6d Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Mon, 17 Jul 2023 15:11:14 +0530
Subject: [PATCH 147/281] Revert "Refactor integration tests"

This reverts commit 80add648e6d82eb99508b7ffa2acbf52200905c9.
---
 .../rendering/classDiagram.spec.js            | 48 +++++++++----------
 1 file changed, 24 insertions(+), 24 deletions(-)

diff --git a/cypress/integration/rendering/classDiagram.spec.js b/cypress/integration/rendering/classDiagram.spec.js
index 21fe8c726..21117e8a1 100644
--- a/cypress/integration/rendering/classDiagram.spec.js
+++ b/cypress/integration/rendering/classDiagram.spec.js
@@ -1,7 +1,7 @@
 import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
 
 describe('Class diagram', () => {
-  it('should render a simple class diagram', () => {
+  it('1: should render a simple class diagram', () => {
     imgSnapshotTest(
       `
     classDiagram
@@ -35,7 +35,7 @@ describe('Class diagram', () => {
     cy.get('svg');
   });
 
-  it('should render a simple class diagrams with cardinality', () => {
+  it('2: should render a simple class diagrams with cardinality', () => {
     imgSnapshotTest(
       `
     classDiagram
@@ -64,7 +64,7 @@ describe('Class diagram', () => {
     cy.get('svg');
   });
 
-  it('should render a simple class diagram with different visibilities', () => {
+  it('3: should render a simple class diagram with different visibilities', () => {
     imgSnapshotTest(
       `
     classDiagram
@@ -82,7 +82,7 @@ describe('Class diagram', () => {
     cy.get('svg');
   });
 
-  it('should render a simple class diagram with comments', () => {
+  it('4: should render a simple class diagram with comments', () => {
     imgSnapshotTest(
       `
     classDiagram
@@ -112,7 +112,7 @@ describe('Class diagram', () => {
     cy.get('svg');
   });
 
-  it('should render a simple class diagram with abstract method', () => {
+  it('5: should render a simple class diagram with abstract method', () => {
     imgSnapshotTest(
       `
     classDiagram
@@ -124,7 +124,7 @@ describe('Class diagram', () => {
     cy.get('svg');
   });
 
-  it('should render a simple class diagram with static method', () => {
+  it('6: should render a simple class diagram with static method', () => {
     imgSnapshotTest(
       `
     classDiagram
@@ -136,7 +136,7 @@ describe('Class diagram', () => {
     cy.get('svg');
   });
 
-  it('should render a simple class diagram with Generic class', () => {
+  it('7: should render a simple class diagram with Generic class', () => {
     imgSnapshotTest(
       `
     classDiagram
@@ -156,7 +156,7 @@ describe('Class diagram', () => {
     cy.get('svg');
   });
 
-  it('should render a simple class diagram with Generic class and relations', () => {
+  it('8: should render a simple class diagram with Generic class and relations', () => {
     imgSnapshotTest(
       `
     classDiagram
@@ -177,7 +177,7 @@ describe('Class diagram', () => {
     cy.get('svg');
   });
 
-  it('should render a simple class diagram with clickable link', () => {
+  it('9: should render a simple class diagram with clickable link', () => {
     imgSnapshotTest(
       `
     classDiagram
@@ -199,7 +199,7 @@ describe('Class diagram', () => {
     cy.get('svg');
   });
 
-  it('should render a simple class diagram with clickable callback', () => {
+  it('10: should render a simple class diagram with clickable callback', () => {
     imgSnapshotTest(
       `
     classDiagram
@@ -221,7 +221,7 @@ describe('Class diagram', () => {
     cy.get('svg');
   });
 
-  it('should render a simple class diagram with return type on method', () => {
+  it('11: should render a simple class diagram with return type on method', () => {
     imgSnapshotTest(
       `
     classDiagram
@@ -236,7 +236,7 @@ describe('Class diagram', () => {
     cy.get('svg');
   });
 
-  it('should render a simple class diagram with generic types', () => {
+  it('12: should render a simple class diagram with generic types', () => {
     imgSnapshotTest(
       `
     classDiagram
@@ -252,7 +252,7 @@ describe('Class diagram', () => {
     cy.get('svg');
   });
 
-  it('should render a simple class diagram with css classes applied', () => {
+  it('13: should render a simple class diagram with css classes applied', () => {
     imgSnapshotTest(
       `
     classDiagram
@@ -270,7 +270,7 @@ describe('Class diagram', () => {
     cy.get('svg');
   });
 
-  it('should render a simple class diagram with css classes applied directly', () => {
+  it('14: should render a simple class diagram with css classes applied directly', () => {
     imgSnapshotTest(
       `
     classDiagram
@@ -286,7 +286,7 @@ describe('Class diagram', () => {
     cy.get('svg');
   });
 
-  it('should render a simple class diagram with css classes applied to multiple classes', () => {
+  it('15: should render a simple class diagram with css classes applied to multiple classes', () => {
     imgSnapshotTest(
       `
     classDiagram
@@ -301,7 +301,7 @@ describe('Class diagram', () => {
     cy.get('svg');
   });
 
-  it('should render multiple class diagrams', () => {
+  it('16: should render multiple class diagrams', () => {
     imgSnapshotTest(
       [
         `
@@ -354,7 +354,7 @@ describe('Class diagram', () => {
     cy.get('svg');
   });
 
-  // it('should render a class diagram when useMaxWidth is true (default)', () => {
+  // it('17: should render a class diagram when useMaxWidth is true (default)', () => {
   //   renderGraph(
   //     `
   //   classDiagram
@@ -382,7 +382,7 @@ describe('Class diagram', () => {
   //     });
   // });
 
-  // it('should render a class diagram when useMaxWidth is false', () => {
+  // it('18: should render a class diagram when useMaxWidth is false', () => {
   //   renderGraph(
   //     `
   //   classDiagram
@@ -408,7 +408,7 @@ describe('Class diagram', () => {
   //     });
   // });
 
-  it('should render a simple class diagram with notes', () => {
+  it('19: should render a simple class diagram with notes', () => {
     imgSnapshotTest(
       `
     classDiagram
@@ -424,7 +424,7 @@ describe('Class diagram', () => {
     cy.get('svg');
   });
 
-  it('should render class diagram with newlines in title', () => {
+  it('20: should render class diagram with newlines in title', () => {
     imgSnapshotTest(`
       classDiagram
         Animal <|-- \`Du\nck\`
@@ -442,7 +442,7 @@ describe('Class diagram', () => {
     cy.get('svg');
   });
 
-  it('should render class diagram with many newlines in title', () => {
+  it('21: should render class diagram with many newlines in title', () => {
     imgSnapshotTest(`
     classDiagram
       class \`This\nTitle\nHas\nMany\nNewlines\` {
@@ -456,7 +456,7 @@ describe('Class diagram', () => {
     `);
   });
 
-  it('should render with newlines in title and an annotation', () => {
+  it('22: should render with newlines in title and an annotation', () => {
     imgSnapshotTest(`
     classDiagram
       class \`This\nTitle\nHas\nMany\nNewlines\` {
@@ -467,11 +467,11 @@ describe('Class diagram', () => {
         -Many()
         #Methods()
       }
-      &lt;&lt;Interface&gt;&gt; \`This\nTitle\nHas\nMany\nNewlines\`
+      &lt;&lt;Interface&gt;&gt; \`This\nTitle\nHas\nMany\nNewlines\`  
     `);
   });
 
-  it('should handle newline title in namespace', () => {
+  it('23: should handle newline title in namespace', () => {
     imgSnapshotTest(`
     classDiagram
       namespace testingNamespace {

From d3006f6298be294ad58f6a36a2b875f897b0e434 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Mon, 17 Jul 2023 15:16:05 +0530
Subject: [PATCH 148/281] chore: Remove numbers from tests

---
 cypress/integration/rendering/classDiagram.spec.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/cypress/integration/rendering/classDiagram.spec.js b/cypress/integration/rendering/classDiagram.spec.js
index 21117e8a1..dd79303b8 100644
--- a/cypress/integration/rendering/classDiagram.spec.js
+++ b/cypress/integration/rendering/classDiagram.spec.js
@@ -424,7 +424,7 @@ describe('Class diagram', () => {
     cy.get('svg');
   });
 
-  it('20: should render class diagram with newlines in title', () => {
+  it('should render class diagram with newlines in title', () => {
     imgSnapshotTest(`
       classDiagram
         Animal <|-- \`Du\nck\`
@@ -442,7 +442,7 @@ describe('Class diagram', () => {
     cy.get('svg');
   });
 
-  it('21: should render class diagram with many newlines in title', () => {
+  it('should render class diagram with many newlines in title', () => {
     imgSnapshotTest(`
     classDiagram
       class \`This\nTitle\nHas\nMany\nNewlines\` {
@@ -456,7 +456,7 @@ describe('Class diagram', () => {
     `);
   });
 
-  it('22: should render with newlines in title and an annotation', () => {
+  it('should render with newlines in title and an annotation', () => {
     imgSnapshotTest(`
     classDiagram
       class \`This\nTitle\nHas\nMany\nNewlines\` {
@@ -471,7 +471,7 @@ describe('Class diagram', () => {
     `);
   });
 
-  it('23: should handle newline title in namespace', () => {
+  it('should handle newline title in namespace', () => {
     imgSnapshotTest(`
     classDiagram
       namespace testingNamespace {

From 662eb431ab867a3246458f412a2f349941addaa0 Mon Sep 17 00:00:00 2001
From: Yokozuna59 <u.yokozuna@gmail.com>
Date: Mon, 17 Jul 2023 15:53:26 +0300
Subject: [PATCH 149/281] allow ts extension imports in cypress ts files

---
 cypress/tsconfig.json | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/cypress/tsconfig.json b/cypress/tsconfig.json
index e3351cebe..baa9a7217 100644
--- a/cypress/tsconfig.json
+++ b/cypress/tsconfig.json
@@ -2,7 +2,9 @@
   "compilerOptions": {
     "target": "es2020",
     "lib": ["es2020", "dom"],
-    "types": ["cypress", "node"]
+    "types": ["cypress", "node"],
+    "allowImportingTsExtensions": true,
+    "noEmit": true
   },
   "include": ["**/*.ts"]
 }

From d9314a869a40f382f06ee2e767fe6c6501a055c4 Mon Sep 17 00:00:00 2001
From: Yokozuna59 <u.yokozuna@gmail.com>
Date: Mon, 17 Jul 2023 15:58:58 +0300
Subject: [PATCH 150/281] change deprecated `btoa` into `Buffer.from`

---
 cypress/helpers/util.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/cypress/helpers/util.ts b/cypress/helpers/util.ts
index 2e9254e6a..b042c3ed4 100644
--- a/cypress/helpers/util.ts
+++ b/cypress/helpers/util.ts
@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Buffer } from 'buffer';
 import type { MermaidConfig } from '../../packages/mermaid/src/config.type.js';
 
 type CypressConfig = {
@@ -13,7 +15,7 @@ interface CodeObject {
 }
 
 const utf8ToB64 = (str: string): string => {
-  return window.btoa(decodeURIComponent(encodeURIComponent(str)));
+  return Buffer.from(decodeURIComponent(encodeURIComponent(str))).toString('base64');
 };
 
 const batchId: string = 'mermaid-batch-' + Cypress.env('CYPRESS_COMMIT') || Date.now().toString();

From fff3acd0648902f939a50cdb77871c213c264b76 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Tue, 18 Jul 2023 21:55:44 +0530
Subject: [PATCH 151/281] Verify release-version on push to release or master

---
 .github/workflows/build-docs.yml              |  8 ++++++
 .github/workflows/publish-docs.yml            | 13 ---------
 packages/mermaid/package.json                 |  1 +
 .../scripts/update-release-version.mts        | 27 ++++++++++++++++---
 4 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/.github/workflows/build-docs.yml b/.github/workflows/build-docs.yml
index b25ff89cc..152b177ae 100644
--- a/.github/workflows/build-docs.yml
+++ b/.github/workflows/build-docs.yml
@@ -1,6 +1,10 @@
 name: Build Vitepress docs
 
 on:
+  push:
+    branches:
+      - master
+      - release/*
   pull_request:
   merge_group:
 
@@ -25,5 +29,9 @@ jobs:
       - name: Install Packages
         run: pnpm install --frozen-lockfile
 
+      - name: Verify release verion
+        if: ${{ github.event_name == 'push' && (github.ref == 'refs/heads/master' || startsWith(github.ref, 'refs/heads/release')) }}
+        run: pnpm --filter mermaid run docs:verify-version
+
       - name: Run Build
         run: pnpm --filter mermaid run docs:build:vitepress
diff --git a/.github/workflows/publish-docs.yml b/.github/workflows/publish-docs.yml
index d66d61a26..f63e58750 100644
--- a/.github/workflows/publish-docs.yml
+++ b/.github/workflows/publish-docs.yml
@@ -36,19 +36,6 @@ jobs:
       - name: Install Packages
         run: pnpm install --frozen-lockfile
 
-      - name: Update release verion
-        run: |
-          pnpm --filter mermaid run docs:release-version
-          pnpm --filter mermaid run docs:build
-
-      - name: Commit changes
-        uses: EndBug/add-and-commit@v9
-        with:
-          add: '["docs", "packages/mermaid/src/docs"]'
-          author_name: ${{ github.actor }}
-          author_email: ${{ github.actor }}@users.noreply.github.com
-          message: 'chore: Update MERMAID_RELEASE_VERSION in docs'
-
       - name: Setup Pages
         uses: actions/configure-pages@v3
 
diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index fd5a459a0..cf0979d48 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -34,6 +34,7 @@
     "docs:serve": "pnpm docs:build:vitepress && vitepress serve src/vitepress",
     "docs:spellcheck": "cspell --config ../../cSpell.json \"src/docs/**/*.md\"",
     "docs:release-version": "ts-node-esm scripts/update-release-version.mts",
+    "docs:verify-version": "ts-node-esm scripts/update-release-version.mts --verify",
     "types:build-config": "ts-node-esm --transpileOnly scripts/create-types-from-json-schema.mts",
     "types:verify-config": "ts-node-esm scripts/create-types-from-json-schema.mts --verify",
     "release": "pnpm build",
diff --git a/packages/mermaid/scripts/update-release-version.mts b/packages/mermaid/scripts/update-release-version.mts
index edd2017b9..82fa6442a 100644
--- a/packages/mermaid/scripts/update-release-version.mts
+++ b/packages/mermaid/scripts/update-release-version.mts
@@ -15,20 +15,39 @@ import {
 } from '../src/docs.mjs';
 import { writeFile } from 'fs/promises';
 
+const verifyOnly: boolean = process.argv.includes('--verify');
+const versionPlaceholder = '<MERMAID_RELEASE_VERSION>';
+
 const main = async () => {
   const sourceDirGlob = posix.join('.', SOURCE_DOCS_DIR, '**');
   const mdFileGlobs = getGlobs([posix.join(sourceDirGlob, '*.md')]);
   mdFileGlobs.push('!**/community/development.md');
   const mdFiles = await getFilesFromGlobs(mdFileGlobs);
   mdFiles.sort();
+  const mdFilesWithPlaceholder: string[] = [];
   for (const mdFile of mdFiles) {
     const content = readSyncedUTF8file(mdFile);
-    const updatedContent = content.replace(/<MERMAID_RELEASE_VERSION>/g, MERMAID_RELEASE_VERSION);
-    if (content !== updatedContent) {
-      await writeFile(mdFile, updatedContent);
-      console.log(`Updated MERMAID_RELEASE_VERSION in ${mdFile}`);
+    if (content.includes(versionPlaceholder)) {
+      mdFilesWithPlaceholder.push(mdFile);
     }
   }
+
+  if (mdFilesWithPlaceholder.length === 0) {
+    return;
+  }
+
+  if (verifyOnly) {
+    console.log(
+      `${mdFilesWithPlaceholder.length} file(s) were found with the placeholder ${versionPlaceholder}. Run \`pnpm --filter mermaid docs:release-version\` to update them.`
+    );
+    process.exit(1);
+  }
+
+  for (const mdFile of mdFilesWithPlaceholder) {
+    const content = readSyncedUTF8file(mdFile);
+    const newContent = content.replace(versionPlaceholder, MERMAID_RELEASE_VERSION);
+    await writeFile(mdFile, newContent);
+  }
 };
 
 void main();

From 483385b2f680fff318f4c9e7c16d7b799917fffc Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Tue, 18 Jul 2023 21:59:00 +0530
Subject: [PATCH 152/281] Update PR template

---
 .github/pull_request_template.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
index 3574c3599..82ca5fd5c 100644
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -13,6 +13,6 @@ Describe the way your implementation works or what design decisions you made if
 Make sure you
 
 - [ ] :book: have read the [contribution guidelines](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md)
-- [ ] :computer: have added unit/e2e tests (if appropriate)
-- [ ] :notebook: have added documentation (if appropriate)
+- [ ] :computer: have added necessary unit/e2e tests.
+- [ ] :notebook: have added documentation. Make sure `MERMAID_RELEASE_VERSION` is used for all new features.
 - [ ] :bookmark: targeted `develop` branch

From 3fcb0715925860680eef34e874232567ffebaa45 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Tue, 18 Jul 2023 22:06:43 +0530
Subject: [PATCH 153/281] Move docs.cli to scripts

---
 .vscode/launch.json                                 |  2 +-
 packages/mermaid/package.json                       | 10 +++++-----
 packages/mermaid/{src => scripts}/docs.cli.mts      |  0
 packages/mermaid/{src => scripts}/docs.mts          |  0
 packages/mermaid/{src => scripts}/docs.spec.ts      |  0
 packages/mermaid/scripts/update-release-version.mts |  2 +-
 6 files changed, 7 insertions(+), 7 deletions(-)
 rename packages/mermaid/{src => scripts}/docs.cli.mts (100%)
 rename packages/mermaid/{src => scripts}/docs.mts (100%)
 rename packages/mermaid/{src => scripts}/docs.spec.ts (100%)

diff --git a/.vscode/launch.json b/.vscode/launch.json
index 01ed07046..dc5ec94a1 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -17,7 +17,7 @@
       "name": "Docs generation",
       "type": "node",
       "request": "launch",
-      "args": ["src/docs.cli.mts"],
+      "args": ["scripts/docs.cli.mts"],
       "runtimeArgs": ["--loader", "ts-node/esm"],
       "cwd": "${workspaceRoot}/packages/mermaid",
       "skipFiles": ["<node_internals>/**", "**/node_modules/**"],
diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index cf0979d48..c2e0d9834 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -25,12 +25,12 @@
   "scripts": {
     "clean": "rimraf dist",
     "docs:code": "typedoc src/defaultConfig.ts src/config.ts src/mermaidAPI.ts && prettier --write ./src/docs/config/setup",
-    "docs:build": "rimraf ../../docs && pnpm docs:spellcheck && pnpm docs:code && ts-node-esm src/docs.cli.mts",
-    "docs:verify": "pnpm docs:spellcheck && pnpm docs:code && ts-node-esm src/docs.cli.mts --verify",
-    "docs:pre:vitepress": "pnpm --filter ./src/docs prefetch && rimraf src/vitepress && pnpm docs:code && ts-node-esm src/docs.cli.mts --vitepress && pnpm --filter ./src/vitepress install --no-frozen-lockfile --ignore-scripts",
+    "docs:build": "rimraf ../../docs && pnpm docs:spellcheck && pnpm docs:code && ts-node-esm scripts/docs.cli.mts",
+    "docs:verify": "pnpm docs:spellcheck && pnpm docs:code && ts-node-esm scripts/docs.cli.mts --verify",
+    "docs:pre:vitepress": "pnpm --filter ./src/docs prefetch && rimraf src/vitepress && pnpm docs:code && ts-node-esm scripts/docs.cli.mts --vitepress && pnpm --filter ./src/vitepress install --no-frozen-lockfile --ignore-scripts",
     "docs:build:vitepress": "pnpm docs:pre:vitepress && (cd src/vitepress && pnpm run build) && cpy --flat src/docs/landing/ ./src/vitepress/.vitepress/dist/landing",
-    "docs:dev": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./src/vitepress dev\" \"ts-node-esm src/docs.cli.mts --watch --vitepress\"",
-    "docs:dev:docker": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./src/vitepress dev:docker\" \"ts-node-esm src/docs.cli.mts --watch --vitepress\"",
+    "docs:dev": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./src/vitepress dev\" \"ts-node-esm scripts/docs.cli.mts --watch --vitepress\"",
+    "docs:dev:docker": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./src/vitepress dev:docker\" \"ts-node-esm scripts/docs.cli.mts --watch --vitepress\"",
     "docs:serve": "pnpm docs:build:vitepress && vitepress serve src/vitepress",
     "docs:spellcheck": "cspell --config ../../cSpell.json \"src/docs/**/*.md\"",
     "docs:release-version": "ts-node-esm scripts/update-release-version.mts",
diff --git a/packages/mermaid/src/docs.cli.mts b/packages/mermaid/scripts/docs.cli.mts
similarity index 100%
rename from packages/mermaid/src/docs.cli.mts
rename to packages/mermaid/scripts/docs.cli.mts
diff --git a/packages/mermaid/src/docs.mts b/packages/mermaid/scripts/docs.mts
similarity index 100%
rename from packages/mermaid/src/docs.mts
rename to packages/mermaid/scripts/docs.mts
diff --git a/packages/mermaid/src/docs.spec.ts b/packages/mermaid/scripts/docs.spec.ts
similarity index 100%
rename from packages/mermaid/src/docs.spec.ts
rename to packages/mermaid/scripts/docs.spec.ts
diff --git a/packages/mermaid/scripts/update-release-version.mts b/packages/mermaid/scripts/update-release-version.mts
index 82fa6442a..7f292f21b 100644
--- a/packages/mermaid/scripts/update-release-version.mts
+++ b/packages/mermaid/scripts/update-release-version.mts
@@ -12,7 +12,7 @@ import {
   SOURCE_DOCS_DIR,
   readSyncedUTF8file,
   MERMAID_RELEASE_VERSION,
-} from '../src/docs.mjs';
+} from './docs.mjs';
 import { writeFile } from 'fs/promises';
 
 const verifyOnly: boolean = process.argv.includes('--verify');

From 863d1bfd4d383a535a8f1504de4f54ce4610bbbb Mon Sep 17 00:00:00 2001
From: Sibin Thomas <sibinjordaan@gmail.com>
Date: Wed, 19 Jul 2023 20:21:15 +0530
Subject: [PATCH 154/281] removed BT and added TB

---
 packages/mermaid/src/diagrams/git/parser/gitGraph.jison | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/mermaid/src/diagrams/git/parser/gitGraph.jison b/packages/mermaid/src/diagrams/git/parser/gitGraph.jison
index c0aa3d2d9..9ff5623f8 100644
--- a/packages/mermaid/src/diagrams/git/parser/gitGraph.jison
+++ b/packages/mermaid/src/diagrams/git/parser/gitGraph.jison
@@ -51,7 +51,6 @@ cherry\-pick(?=\s|$)                    return 'CHERRY_PICK';
 // "reset"                                 return 'RESET';
 checkout(?=\s|$)                        return 'CHECKOUT';
 "LR"                                    return 'DIR';
-"BT"                                    return 'DIR';
 "TB"                                    return 'DIR';
 ":"                                     return ':';
 "^"                                     return 'CARET'

From d81e4fabd57e4ab2193ef12f70f25898a92189f8 Mon Sep 17 00:00:00 2001
From: Sibin Thomas <sibinjordaan@gmail.com>
Date: Wed, 19 Jul 2023 20:22:29 +0530
Subject: [PATCH 155/281] positioned tags, tilted commit labels and fixed some
 bugs

---
 .../src/diagrams/git/gitGraphRenderer.js      | 81 +++++++++++++++----
 1 file changed, 65 insertions(+), 16 deletions(-)

diff --git a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
index 01b787ca3..c50f11cef 100644
--- a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
+++ b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
@@ -254,22 +254,35 @@ const drawCommits = (svg, commits, modifyGraph) => {
 
         if (dir === 'TB') {
           labelBkg
+            .attr('x', x - (bbox.width + 4 * px + 5))
+            .attr('y', y - 12);
+          text
             .attr('x', x - (bbox.width + 4 * px))
-            .attr('y', y - 5);
-          text.attr('x', x - (bbox.width + 4 * px));
-          text.attr('y', y + bbox.height - 5);
+            .attr('y', y + bbox.height - 12);
         }
 
         if (dir !== 'TB') {
           text.attr('x', pos + 10 - bbox.width / 2);
         }
-        if (gitGraphConfig.rotateCommitLabel && dir !== 'TB') {
-          let r_x = -7.5 - ((bbox.width + 10) / 25) * 9.5;
-          let r_y = 10 + (bbox.width / 25) * 8.5;
-          wrapper.attr(
-            'transform',
-            'translate(' + r_x + ', ' + r_y + ') rotate(' + -45 + ', ' + pos + ', ' + y + ')'
-          );
+        if (gitGraphConfig.rotateCommitLabel) {
+          if (dir === 'TB')
+          {
+            text.attr(
+              'transform',
+              'rotate(' + -45 + ', ' + x + ', ' + y + ')'
+            );
+            labelBkg.attr(
+              'transform',
+              'rotate(' + -45 + ', ' + x + ', ' + y + ')'
+            );
+          } else {
+            let r_x = -7.5 - ((bbox.width + 10) / 25) * 9.5;
+            let r_y = 10 + (bbox.width / 25) * 8.5;
+            wrapper.attr(
+              'transform',
+              'translate(' + r_x + ', ' + r_y + ') rotate(' + -45 + ', ' + pos + ', ' + y + ')'
+            );
+          }
         }
       }
       if (commit.tag) {
@@ -302,6 +315,31 @@ const drawCommits = (svg, commits, modifyGraph) => {
           .attr('cy', ly)
           .attr('r', 1.5)
           .attr('class', 'tag-hole');
+
+        if (dir === 'TB')
+        {
+          rect
+            .attr('class', 'tag-label-bkg')
+            .attr(
+            'points',
+            `
+            ${x},${pos + py}
+            ${x},${pos - py}
+            ${x + 10},${pos - h2 - py}
+            ${x + 10 + tagBbox.width + px},${pos - h2 - py}
+            ${x + 10 + tagBbox.width + px},${pos + h2 + py}
+            ${x + 10},${pos + h2 + py}`
+            )
+            .attr('transform', 'translate(12,12) rotate(45, '+ x + ',' + pos +')');
+          hole
+            .attr('cx', x + px/2)
+            .attr('cy', pos)
+            .attr('transform', 'translate(12,12) rotate(45, '+ x + ',' + pos +')');
+          tag
+            .attr('x', x+5)
+            .attr('y', pos+3)
+            .attr('transform', 'translate(14,14) rotate(45, '+ x + ',' + pos +')');
+        }
       }
     }
     pos += 50;
@@ -428,19 +466,20 @@ const drawArrow = (svg, commit1, commit2, allCommits) => {
       }
       if (p1.x > p2.x) {
         arc = 'A 20 20, 0, 0, 0,';
+        arc2 = 'A 20 20, 0, 0, 1,';
         radius = 20;
         offset = 20;
 
         // Arrows going up take the color from the source branch
         colorClassNum = branchPos[commit1.branch].index;
-        lineDef = `M ${p1.x} ${p1.y} L ${p2.x - radius} ${p1.y} ${arc} ${p2.x} ${p1.y - offset} L ${
+        lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y-radius} ${arc2} ${p1.x-offset} ${p2.y} L ${
           p2.x
         } ${p2.y}`;
       }
 
       if (p1.x === p2.x) {
         colorClassNum = branchPos[commit1.branch].index;
-        lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc} ${p1.x + offset} ${p2.y} L ${
+        lineDef = `M ${p1.x} ${p1.y} L ${p1.x + radius} ${p1.y} ${arc} ${p1.x + offset} ${p2.y + radius} L ${
           p2.x
         } ${p2.y}`;
       }
@@ -588,15 +627,25 @@ export const draw = function (txt, id, ver, diagObj) {
   allCommitsDict = diagObj.db.getCommits();
   const branches = diagObj.db.getBranchesAsObjArray();
   dir = diagObj.db.getDirection();
-
-  // Position branches vertically
+  const diagram = select(`[id="${id}"]`);
+  // Position branches
   let pos = 0;
   branches.forEach((branch, index) => {
+    const labelElement = drawText(branch.name);
+    const g = diagram.append('g');
+    const branchLabel = g.insert('g').attr('class', 'branchLabel');
+    const label = branchLabel.insert('g').attr('class', 'label branch-label');
+    label.node().appendChild(labelElement);
+    let bbox = labelElement.getBBox();
+
     branchPos[branch.name] = { pos, index };
-    pos += 50 + (gitGraphConfig.rotateCommitLabel ? 40 : 0);
+    pos += 50 + (gitGraphConfig.rotateCommitLabel ? 40 : 0) + ((dir === 'TB') ? bbox.width/2 : 0);
+    label.remove();
+    branchLabel.remove();
+    g.remove();
   });
 
-  const diagram = select(`[id="${id}"]`);
+  
 
   drawCommits(diagram, allCommitsDict, false);
   if (gitGraphConfig.showBranches) {

From 52a4f8f077852dee9415ed5d9566f2581d50eccb Mon Sep 17 00:00:00 2001
From: Sibin Thomas <sibinjordaan@gmail.com>
Date: Wed, 19 Jul 2023 20:22:59 +0530
Subject: [PATCH 156/281] added tests for vertical branches

---
 .../integration/rendering/gitGraph.spec.js    | 332 ++++++++++++++++++
 1 file changed, 332 insertions(+)

diff --git a/cypress/integration/rendering/gitGraph.spec.js b/cypress/integration/rendering/gitGraph.spec.js
index 43f91a983..58e827135 100644
--- a/cypress/integration/rendering/gitGraph.spec.js
+++ b/cypress/integration/rendering/gitGraph.spec.js
@@ -329,6 +329,338 @@ title: simple gitGraph
 ---
 gitGraph
   commit id: "1-abcdefg"
+`,
+      {}
+    );
+  });
+  it('15: should render a simple gitgraph with commit on main branch | Vertical Branch', () => {
+    imgSnapshotTest(
+      `gitGraph TB:
+       commit id: "1"
+       commit id: "2"
+       commit id: "3"
+      `,
+      {}
+    );
+  });
+  it('16: should render a simple gitgraph with commit on main branch with Id | Vertical Branch', () => {
+    imgSnapshotTest(
+      `gitGraph TB:
+       commit id: "One"
+       commit id: "Two"
+       commit id: "Three"
+      `,
+      {}
+    );
+  });
+  it('17: should render a simple gitgraph with different commitTypes on main branch | Vertical Branch', () => {
+    imgSnapshotTest(
+      `gitGraph TB:
+       commit id: "Normal Commit"
+       commit id: "Reverse Commit" type: REVERSE
+       commit id: "Hightlight Commit" type: HIGHLIGHT
+      `,
+      {}
+    );
+  });
+  it('18: should render a simple gitgraph with tags commitTypes on main branch | Vertical Branch', () => {
+    imgSnapshotTest(
+      `gitGraph TB:
+       commit id: "Normal Commit with tag" tag: "v1.0.0"
+       commit id: "Reverse Commit with tag" type: REVERSE tag: "RC_1"
+       commit id: "Hightlight Commit" type: HIGHLIGHT  tag: "8.8.4"
+      `,
+      {}
+    );
+  });
+  it('19: should render a simple gitgraph with two branches | Vertical Branch', () => {
+    imgSnapshotTest(
+      `gitGraph TB:
+       commit id: "1"
+       commit id: "2"
+       branch develop
+       checkout develop
+       commit id: "3"
+       commit id: "4"
+       checkout main
+       commit id: "5"
+       commit id: "6"
+      `,
+      {}
+    );
+  });
+  it('20: should render a simple gitgraph with two branches and merge commit | Vertical Branch', () => {
+    imgSnapshotTest(
+      `gitGraph TB:
+       commit id: "1"
+       commit id: "2"
+       branch develop
+       checkout develop
+       commit id: "3"
+       commit id: "4"
+       checkout main
+       merge develop
+       commit id: "5"
+       commit id: "6"
+      `,
+      {}
+    );
+  });
+  it('21: should render a simple gitgraph with three branches and tagged merge commit | Vertical Branch', () => {
+    imgSnapshotTest(
+      `gitGraph TB:
+       commit id: "1"
+       commit id: "2"
+       branch nice_feature
+       checkout nice_feature
+       commit id: "3"
+       checkout main
+       commit id: "4"
+       checkout nice_feature
+       branch very_nice_feature
+       checkout very_nice_feature
+       commit id: "5"
+       checkout main
+       commit id: "6"
+       checkout nice_feature
+       commit id: "7"
+       checkout main
+       merge nice_feature id: "12345" tag: "my merge commit"
+       checkout very_nice_feature
+       commit id: "8"
+       checkout main
+       commit id: "9"
+      `,
+      {}
+    );
+  });
+  it('22: should render a simple gitgraph with more than 8 branchs &  overriding variables | Vertical Branch', () => {
+    imgSnapshotTest(
+      `%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
+        'gitBranchLabel0': '#ffffff',
+        'gitBranchLabel1': '#ffffff',
+        'gitBranchLabel2': '#ffffff',
+        'gitBranchLabel3': '#ffffff',
+        'gitBranchLabel4': '#ffffff',
+        'gitBranchLabel5': '#ffffff',
+        'gitBranchLabel6': '#ffffff',
+        'gitBranchLabel7': '#ffffff',
+  } } }%%
+  gitGraph TB:
+    checkout main
+    branch branch1
+    branch branch2
+    branch branch3
+    branch branch4
+    branch branch5
+    branch branch6
+    branch branch7
+    branch branch8
+    branch branch9
+    checkout branch1
+    commit id: "1"
+      `,
+      {}
+    );
+  });
+  it('23: should render a simple gitgraph with rotated labels | Vertical Branch', () => {
+    imgSnapshotTest(
+      `%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'gitGraph': {
+        'rotateCommitLabel': true
+  } } }%%
+        gitGraph TB:
+        commit id: "75f7219e83b321cd3fdde7dcf83bc7c1000a6828"
+        commit id: "0db4784daf82736dec4569e0dc92980d328c1f2e"
+        commit id: "7067e9973f9eaa6cd4a4b723c506d1eab598e83e"
+        commit id: "66972321ad6c199013b5b31f03b3a86fa3f9817d"
+      `,
+      {}
+    );
+  });
+  it('24: should render a simple gitgraph with horizontal labels | Vertical Branch', () => {
+    imgSnapshotTest(
+      `%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'gitGraph': {
+        'rotateCommitLabel': false
+  } } }%%
+        gitGraph TB:
+        commit id: "Alpha"
+        commit id: "Beta"
+        commit id: "Gamma"
+        commit id: "Delta"
+      `,
+      {}
+    );
+  });
+  it('25: should render a simple gitgraph with cherry pick commit | Vertical Branch', () => {
+    imgSnapshotTest(
+      `
+    gitGraph TB:
+       commit id: "ZERO"
+       branch develop
+       commit id:"A"
+       checkout main
+       commit id:"ONE"
+       checkout develop
+       commit id:"B"
+       checkout main
+       commit id:"TWO"
+       cherry-pick id:"A"
+       commit id:"THREE"
+       checkout develop
+       commit id:"C"
+      `,
+      {}
+    );
+  });
+  it('26: should render a gitgraph with cherry pick commit with custom tag | Vertical Branch', () => {
+    imgSnapshotTest(
+      `
+    gitGraph TB:
+       commit id: "ZERO"
+       branch develop
+       commit id:"A"
+       checkout main
+       commit id:"ONE"
+       checkout develop
+       commit id:"B"
+       checkout main
+       commit id:"TWO"
+       cherry-pick id:"A" tag: "snapshot"
+       commit id:"THREE"
+       checkout develop
+       commit id:"C"
+      `,
+      {}
+    );
+  });
+  it('27: should render a gitgraph with cherry pick commit with no tag | Vertical Branch', () => {
+    imgSnapshotTest(
+      `
+    gitGraph TB:
+       commit id: "ZERO"
+       branch develop
+       commit id:"A"
+       checkout main
+       commit id:"ONE"
+       checkout develop
+       commit id:"B"
+       checkout main
+       commit id:"TWO"
+       cherry-pick id:"A" tag: ""
+       commit id:"THREE"
+       checkout develop
+       commit id:"C"
+      `,
+      {}
+    );
+  });
+  it('28: should render a simple gitgraph with two cherry pick commit | Vertical Branch', () => {
+    imgSnapshotTest(
+      `
+    gitGraph TB:
+       commit id: "ZERO"
+       branch develop
+       commit id:"A"
+       checkout main
+       commit id:"ONE"
+       checkout develop
+       commit id:"B"
+       branch featureA
+       commit id:"FIX"
+       commit id: "FIX-2"
+       checkout main
+       commit id:"TWO"
+       cherry-pick id:"A"
+       commit id:"THREE"
+       cherry-pick id:"FIX"
+       checkout develop
+       commit id:"C"
+       merge featureA
+      `,
+      {}
+    );
+  });
+  it('29: should render commits for more than 8 branches | Vertical Branch', () => {
+    imgSnapshotTest(
+      `
+      gitGraph TB:
+      checkout main
+      %% Make sure to manually set the ID of all commits, for consistent visual tests
+      commit id: "1-abcdefg"
+      checkout main
+      branch branch1
+      commit id: "2-abcdefg"
+      checkout main
+      merge branch1
+      branch branch2
+      commit id: "3-abcdefg"
+      checkout main
+      merge branch2
+      branch branch3
+      commit id: "4-abcdefg"
+      checkout main
+      merge branch3
+      branch branch4
+      commit id: "5-abcdefg"
+      checkout main
+      merge branch4
+      branch branch5
+      commit id: "6-abcdefg"
+      checkout main
+      merge branch5
+      branch branch6
+      commit id: "7-abcdefg"
+      checkout main
+      merge branch6
+      branch branch7
+      commit id: "8-abcdefg"
+      checkout main
+      merge branch7
+      branch branch8
+      commit id: "9-abcdefg"
+      checkout main
+      merge branch8
+      branch branch9
+      commit id: "10-abcdefg"
+      `,
+      {}
+    );
+  });
+  it('30: should render a simple gitgraph with three branches,custom merge commit id,tag,type | Vertical Branch', () => {
+    imgSnapshotTest(
+      `gitGraph TB:
+       commit id: "1"
+       commit id: "2"
+       branch nice_feature
+       checkout nice_feature
+       commit id: "3"
+       checkout main
+       commit id: "4"
+       checkout nice_feature
+       branch very_nice_feature
+       checkout very_nice_feature
+       commit id: "5"
+       checkout main
+       commit id: "6"
+       checkout nice_feature
+       commit id: "7"
+       checkout main
+       merge nice_feature id: "customID" tag: "customTag" type: REVERSE
+       checkout very_nice_feature
+       commit id: "8"
+       checkout main
+       commit id: "9"
+      `,
+      {}
+    );
+  });
+  it('31: should render a simple gitgraph with a title | Vertical Branch', () => {
+    imgSnapshotTest(
+      `---
+title: simple gitGraph
+---
+gitGraph TB:
+  commit id: "1-abcdefg"
 `,
       {}
     );

From cba5b5a7e339ab91fc0a3a68da2a5184357a5acc Mon Sep 17 00:00:00 2001
From: Sibin Thomas <sibinjordaan@gmail.com>
Date: Wed, 19 Jul 2023 21:55:24 +0530
Subject: [PATCH 157/281] ran preetier

---
 .../src/diagrams/git/gitGraphRenderer.js      | 97 +++++++------------
 1 file changed, 36 insertions(+), 61 deletions(-)

diff --git a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
index c50f11cef..2b88cfe7e 100644
--- a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
+++ b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
@@ -253,28 +253,17 @@ const drawCommits = (svg, commits, modifyGraph) => {
           .attr('height', bbox.height + 2 * py);
 
         if (dir === 'TB') {
-          labelBkg
-            .attr('x', x - (bbox.width + 4 * px + 5))
-            .attr('y', y - 12);
-          text
-            .attr('x', x - (bbox.width + 4 * px))
-            .attr('y', y + bbox.height - 12);
+          labelBkg.attr('x', x - (bbox.width + 4 * px + 5)).attr('y', y - 12);
+          text.attr('x', x - (bbox.width + 4 * px)).attr('y', y + bbox.height - 12);
         }
 
         if (dir !== 'TB') {
           text.attr('x', pos + 10 - bbox.width / 2);
         }
         if (gitGraphConfig.rotateCommitLabel) {
-          if (dir === 'TB')
-          {
-            text.attr(
-              'transform',
-              'rotate(' + -45 + ', ' + x + ', ' + y + ')'
-            );
-            labelBkg.attr(
-              'transform',
-              'rotate(' + -45 + ', ' + x + ', ' + y + ')'
-            );
+          if (dir === 'TB') {
+            text.attr('transform', 'rotate(' + -45 + ', ' + x + ', ' + y + ')');
+            labelBkg.attr('transform', 'rotate(' + -45 + ', ' + x + ', ' + y + ')');
           } else {
             let r_x = -7.5 - ((bbox.width + 10) / 25) * 9.5;
             let r_y = 10 + (bbox.width / 25) * 8.5;
@@ -316,13 +305,12 @@ const drawCommits = (svg, commits, modifyGraph) => {
           .attr('r', 1.5)
           .attr('class', 'tag-hole');
 
-        if (dir === 'TB')
-        {
+        if (dir === 'TB') {
           rect
             .attr('class', 'tag-label-bkg')
             .attr(
-            'points',
-            `
+              'points',
+              `
             ${x},${pos + py}
             ${x},${pos - py}
             ${x + 10},${pos - h2 - py}
@@ -330,15 +318,15 @@ const drawCommits = (svg, commits, modifyGraph) => {
             ${x + 10 + tagBbox.width + px},${pos + h2 + py}
             ${x + 10},${pos + h2 + py}`
             )
-            .attr('transform', 'translate(12,12) rotate(45, '+ x + ',' + pos +')');
+            .attr('transform', 'translate(12,12) rotate(45, ' + x + ',' + pos + ')');
           hole
-            .attr('cx', x + px/2)
+            .attr('cx', x + px / 2)
             .attr('cy', pos)
-            .attr('transform', 'translate(12,12) rotate(45, '+ x + ',' + pos +')');
+            .attr('transform', 'translate(12,12) rotate(45, ' + x + ',' + pos + ')');
           tag
-            .attr('x', x+5)
-            .attr('y', pos+3)
-            .attr('transform', 'translate(14,14) rotate(45, '+ x + ',' + pos +')');
+            .attr('x', x + 5)
+            .attr('y', pos + 3)
+            .attr('transform', 'translate(14,14) rotate(45, ' + x + ',' + pos + ')');
         }
       }
     }
@@ -429,19 +417,19 @@ const drawArrow = (svg, commit1, commit2, allCommits) => {
 
     if (dir === 'TB') {
       if (p1.x < p2.x) {
-        lineDef = `M ${p1.x} ${p1.y} L ${lineX - radius} ${p1.y} ${arc2} ${lineX} ${p1.y + offset} L ${
-          lineX
-        } ${p2.y - radius} ${arc} ${lineX + offset} ${p2.y} L ${p2.x} ${p2.y}`;
+        lineDef = `M ${p1.x} ${p1.y} L ${lineX - radius} ${p1.y} ${arc2} ${lineX} ${
+          p1.y + offset
+        } L ${lineX} ${p2.y - radius} ${arc} ${lineX + offset} ${p2.y} L ${p2.x} ${p2.y}`;
       } else {
-        lineDef = `M ${p1.x} ${p1.y} L ${lineX + radius} ${p1.y} ${arc} ${
-          lineX
-        } ${p1.y + offset} L ${lineX} ${p2.y - radius} ${arc2} ${lineX - offset} ${p2.y} L ${p2.x} ${p2.y}`;
+        lineDef = `M ${p1.x} ${p1.y} L ${lineX + radius} ${p1.y} ${arc} ${lineX} ${
+          p1.y + offset
+        } L ${lineX} ${p2.y - radius} ${arc2} ${lineX - offset} ${p2.y} L ${p2.x} ${p2.y}`;
       }
     } else {
       if (p1.y < p2.y) {
-        lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${lineY - radius} ${arc} ${p1.x + offset} ${lineY} L ${
-          p2.x - radius
-        } ${lineY} ${arc2} ${p2.x} ${lineY + offset} L ${p2.x} ${p2.y}`;
+        lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${lineY - radius} ${arc} ${
+          p1.x + offset
+        } ${lineY} L ${p2.x - radius} ${lineY} ${arc2} ${p2.x} ${lineY + offset} L ${p2.x} ${p2.y}`;
       } else {
         lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${lineY + radius} ${arc2} ${
           p1.x + offset
@@ -449,8 +437,7 @@ const drawArrow = (svg, commit1, commit2, allCommits) => {
       }
     }
   } else {
-    if (dir === 'TB')
-    {
+    if (dir === 'TB') {
       if (p1.x < p2.x) {
         arc = 'A 20 20, 0, 0, 0,';
         arc2 = 'A 20 20, 0, 0, 1,';
@@ -460,9 +447,9 @@ const drawArrow = (svg, commit1, commit2, allCommits) => {
         // Figure out the color of the arrow,arrows going down take the color from the destination branch
         colorClassNum = branchPos[commit2.branch].index;
 
-        lineDef = `M ${p1.x} ${p1.y} L ${p2.x - radius} ${p1.y} ${arc2} ${p2.x} ${p1.y + offset} L ${
-          p2.x
-        } ${p2.y}`;
+        lineDef = `M ${p1.x} ${p1.y} L ${p2.x - radius} ${p1.y} ${arc2} ${p2.x} ${
+          p1.y + offset
+        } L ${p2.x} ${p2.y}`;
       }
       if (p1.x > p2.x) {
         arc = 'A 20 20, 0, 0, 0,';
@@ -472,16 +459,16 @@ const drawArrow = (svg, commit1, commit2, allCommits) => {
 
         // Arrows going up take the color from the source branch
         colorClassNum = branchPos[commit1.branch].index;
-        lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y-radius} ${arc2} ${p1.x-offset} ${p2.y} L ${
-          p2.x
-        } ${p2.y}`;
+        lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc2} ${p1.x - offset} ${
+          p2.y
+        } L ${p2.x} ${p2.y}`;
       }
 
       if (p1.x === p2.x) {
         colorClassNum = branchPos[commit1.branch].index;
-        lineDef = `M ${p1.x} ${p1.y} L ${p1.x + radius} ${p1.y} ${arc} ${p1.x + offset} ${p2.y + radius} L ${
-          p2.x
-        } ${p2.y}`;
+        lineDef = `M ${p1.x} ${p1.y} L ${p1.x + radius} ${p1.y} ${arc} ${p1.x + offset} ${
+          p2.y + radius
+        } L ${p2.x} ${p2.y}`;
       }
     } else {
       if (p1.y < p2.y) {
@@ -592,18 +579,8 @@ const drawBranches = (svg, branches) => {
         ')'
     );
     if (dir === 'TB') {
-      bkg
-        .attr('x', pos - bbox.width/2 - 10)
-        .attr('y', 0);
-      label
-        .attr(
-          'transform',
-          'translate(' +
-            (pos - bbox.width/2 - 5) +
-            ', ' +
-            (0) +
-            ')'
-        );
+      bkg.attr('x', pos - bbox.width / 2 - 10).attr('y', 0);
+      label.attr('transform', 'translate(' + (pos - bbox.width / 2 - 5) + ', ' + 0 + ')');
     }
     if (dir !== 'TB') {
       bkg.attr('transform', 'translate(' + -19 + ', ' + (pos - bbox.height / 2) + ')');
@@ -639,14 +616,12 @@ export const draw = function (txt, id, ver, diagObj) {
     let bbox = labelElement.getBBox();
 
     branchPos[branch.name] = { pos, index };
-    pos += 50 + (gitGraphConfig.rotateCommitLabel ? 40 : 0) + ((dir === 'TB') ? bbox.width/2 : 0);
+    pos += 50 + (gitGraphConfig.rotateCommitLabel ? 40 : 0) + (dir === 'TB' ? bbox.width / 2 : 0);
     label.remove();
     branchLabel.remove();
     g.remove();
   });
 
-  
-
   drawCommits(diagram, allCommitsDict, false);
   if (gitGraphConfig.showBranches) {
     drawBranches(diagram, branches);

From e25faeee4c234e97b270f97467af8b78777dfeed Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Wed, 19 Jul 2023 22:36:55 +0530
Subject: [PATCH 158/281] Update cypress/helpers/util.ts

---
 cypress/helpers/util.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cypress/helpers/util.ts b/cypress/helpers/util.ts
index b042c3ed4..170b3fc3a 100644
--- a/cypress/helpers/util.ts
+++ b/cypress/helpers/util.ts
@@ -2,7 +2,7 @@
 import { Buffer } from 'buffer';
 import type { MermaidConfig } from '../../packages/mermaid/src/config.type.js';
 
-type CypressConfig = {
+interface CypressConfig {
   listUrl?: boolean;
   listId?: string;
   name?: string;

From 8cd8714aaf9c1b344ce3359fd192536525303df6 Mon Sep 17 00:00:00 2001
From: Yokozuna59 <u.yokozuna@gmail.com>
Date: Wed, 19 Jul 2023 23:45:02 +0300
Subject: [PATCH 159/281] run pnpm lint:fix

---
 cypress/helpers/util.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cypress/helpers/util.ts b/cypress/helpers/util.ts
index 170b3fc3a..ea217b4fc 100644
--- a/cypress/helpers/util.ts
+++ b/cypress/helpers/util.ts
@@ -6,7 +6,7 @@ interface CypressConfig {
   listUrl?: boolean;
   listId?: string;
   name?: string;
-};
+}
 type CypressMermaidConfig = MermaidConfig & CypressConfig;
 
 interface CodeObject {

From 4d2d790cc8de03adde3fb5b820e1da7f4fd29bae Mon Sep 17 00:00:00 2001
From: Alois Klink <alois@aloisklink.com>
Date: Wed, 19 Jul 2023 23:36:13 +0100
Subject: [PATCH 160/281] build(docs): handle YAML edgecases in markdown

Our current method of adding a entry using `+=` is not safe in YAML,
since it's valid to make a YAML object entirely in JSON,
see https://github.com/mermaid-js/mermaid/pull/4640#discussion_r1265133463

We're already using `js-yaml` elsewhere in this file, so we may as well
use it for parsing/stringifying.

Reported-by: Remco Haszing <remcohaszing@gmail.com>
---
 packages/mermaid/src/docs.mts     | 29 +++++++++++++++--------------
 packages/mermaid/src/docs.spec.ts |  4 +++-
 2 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/packages/mermaid/src/docs.mts b/packages/mermaid/src/docs.mts
index 227449a0a..f62c44f07 100644
--- a/packages/mermaid/src/docs.mts
+++ b/packages/mermaid/src/docs.mts
@@ -30,10 +30,19 @@
  * @todo Write a test file for this. (Will need to be able to deal .mts file. Jest has trouble with
  *   it.)
  */
+// @ts-ignore: we're importing internal jsonschema2md functions
+import { default as schemaLoader } from '@adobe/jsonschema2md/lib/schemaProxy.js';
+// @ts-ignore: we're importing internal jsonschema2md functions
+import { default as traverseSchemas } from '@adobe/jsonschema2md/lib/traverseSchema.js';
+// @ts-ignore: we're importing internal jsonschema2md functions
+import { default as buildMarkdownFromSchema } from '@adobe/jsonschema2md/lib/markdownBuilder.js';
+// @ts-ignore: we're importing internal jsonschema2md functions
+import { default as jsonSchemaReadmeBuilder } from '@adobe/jsonschema2md/lib/readmeBuilder.js';
 import { readFileSync, writeFileSync, mkdirSync, existsSync, rmSync, rmdirSync } from 'fs';
 import { exec } from 'child_process';
 import { globby } from 'globby';
 import { JSDOM } from 'jsdom';
+import { dump, load, JSON_SCHEMA } from 'js-yaml';
 import type { Code, ListItem, Root, Text, YAML } from 'mdast';
 import { posix, dirname, relative, join } from 'path';
 import prettier from 'prettier';
@@ -286,10 +295,12 @@ export function transformMarkdownAst({
         astWithTransformedBlocks.children.unshift(yamlFrontMatter);
       }
       const filePathFromRoot = posix.join('packages/mermaid', originalFilename);
-      // TODO, should we replace this with proper YAML parsing?
-      yamlFrontMatter.value += `\neditLink: ${JSON.stringify(
-        `https://github.com/mermaid-js/mermaid/edit/develop/${filePathFromRoot}`
-      )}`;
+      yamlFrontMatter.value = dump({
+        ...(load(yamlFrontMatter.value, { schema: JSON_SCHEMA }) as
+          | Record<string, unknown>
+          | undefined),
+        editLink: `https://github.com/mermaid-js/mermaid/edit/develop/${filePathFromRoot}`,
+      });
     }
 
     if (removeYAML) {
@@ -346,16 +357,6 @@ const transformMarkdown = (file: string) => {
   copyTransformedContents(file, !verifyOnly, formatted);
 };
 
-import { load, JSON_SCHEMA } from 'js-yaml';
-// @ts-ignore: we're importing internal jsonschema2md functions
-import { default as schemaLoader } from '@adobe/jsonschema2md/lib/schemaProxy.js';
-// @ts-ignore: we're importing internal jsonschema2md functions
-import { default as traverseSchemas } from '@adobe/jsonschema2md/lib/traverseSchema.js';
-// @ts-ignore: we're importing internal jsonschema2md functions
-import { default as buildMarkdownFromSchema } from '@adobe/jsonschema2md/lib/markdownBuilder.js';
-// @ts-ignore: we're importing internal jsonschema2md functions
-import { default as jsonSchemaReadmeBuilder } from '@adobe/jsonschema2md/lib/readmeBuilder.js';
-
 /**
  * Transforms the given JSON Schema into Markdown documentation
  */
diff --git a/packages/mermaid/src/docs.spec.ts b/packages/mermaid/src/docs.spec.ts
index bea833fd9..c84bc1bac 100644
--- a/packages/mermaid/src/docs.spec.ts
+++ b/packages/mermaid/src/docs.spec.ts
@@ -119,7 +119,9 @@ This Markdown should be kept.
     ).toString();
     expect(withYaml).toEqual(`---
 title: Flowcharts Syntax
-editLink: "https://github.com/mermaid-js/mermaid/edit/develop/packages/mermaid/example-input-filename.md"
+editLink: >-
+  https://github.com/mermaid-js/mermaid/edit/develop/packages/mermaid/example-input-filename.md
+
 ---
 
 This Markdown should be kept.

From b46c28425e43268be586600b512d096895add6ed Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Wed, 19 Jul 2023 22:49:39 -0300
Subject: [PATCH 161/281] Add text state and tests

---
 .../flowchart/parser/flow-text.spec.js        | 188 +++++++++++++++
 .../src/diagrams/flowchart/parser/flow.jison  | 225 ++++++++++--------
 2 files changed, 310 insertions(+), 103 deletions(-)

diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js
index db43e75bf..6ab5ab2cd 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js
@@ -305,6 +305,194 @@ describe('[Text] when parsing', () => {
       expect(vert['C'].type).toBe('round');
       expect(vert['C'].text).toBe('Chimpansen hoppar');
     });
+
+    const keywords = [
+      'graph',
+      'flowchart',
+      'flowchart-elk',
+      'style',
+      'default',
+      'linkStyle',
+      'interpolate',
+      'classDef',
+      'class',
+      'href',
+      'call',
+      'click',
+      '_self',
+      '_blank',
+      '_parent',
+      '_top',
+      'end',
+      'subgraph',
+      'kitty',
+    ];
+
+    it.each(keywords)('should handle %s keyword in square vertex', function (keyword) {
+      const rest = flow.parser.parse(
+        `graph TD;A_${keyword}_node-->B[This node has a ${keyword} as text];`
+      );
+
+      const vert = flow.parser.yy.getVertices();
+      const edges = flow.parser.yy.getEdges();
+      expect(vert['B'].type).toBe('square');
+      expect(vert['B'].text).toBe(`This node has a ${keyword} as text`);
+    });
+
+    it.each(keywords)('should handle %s keyword in round vertex', function (keyword) {
+      const rest = flow.parser.parse(
+        `graph TD;A_${keyword}_node-->B(This node has a ${keyword} as text);`
+      );
+
+      const vert = flow.parser.yy.getVertices();
+      const edges = flow.parser.yy.getEdges();
+      expect(vert['B'].type).toBe('round');
+      expect(vert['B'].text).toBe(`This node has a ${keyword} as text`);
+    });
+
+    it.each(keywords)('should handle %s keyword in diamond vertex', function (keyword) {
+      const rest = flow.parser.parse(
+        `graph TD;A_${keyword}_node-->B{This node has a ${keyword} as text};`
+      );
+
+      const vert = flow.parser.yy.getVertices();
+      const edges = flow.parser.yy.getEdges();
+      expect(vert['B'].type).toBe('diamond');
+      expect(vert['B'].text).toBe(`This node has a ${keyword} as text`);
+    });
+
+    it.each(keywords)('should handle %s keyword in doublecircle vertex', function (keyword) {
+      const rest = flow.parser.parse(
+        `graph TD;A_${keyword}_node-->B(((This node has a ${keyword} as text)));`
+      );
+
+      const vert = flow.parser.yy.getVertices();
+      const edges = flow.parser.yy.getEdges();
+      expect(vert['B'].type).toBe('doublecircle');
+      expect(vert['B'].text).toBe(`This node has a ${keyword} as text`);
+    });
+
+    it.each(keywords)('should handle %s keyword in ellipse vertex', function (keyword) {
+      const rest = flow.parser.parse(
+        `graph TD;A_${keyword}_node-->B(-This node has a ${keyword} as text-);`
+      );
+
+      const vert = flow.parser.yy.getVertices();
+      const edges = flow.parser.yy.getEdges();
+      expect(vert['B'].type).toBe('ellipse');
+      expect(vert['B'].text).toBe(`This node has a ${keyword} as text`);
+    });
+
+    it.each(keywords)('should handle %s keyword in stadium vertex', function (keyword) {
+      const rest = flow.parser.parse(
+        `graph TD;A_${keyword}_node-->B([This node has a ${keyword} as text]);`
+      );
+
+      const vert = flow.parser.yy.getVertices();
+      const edges = flow.parser.yy.getEdges();
+      expect(vert['B'].type).toBe('stadium');
+      expect(vert['B'].text).toBe(`This node has a ${keyword} as text`);
+    });
+
+    it.each(keywords)('should handle %s keyword in subroutine vertex', function (keyword) {
+      const rest = flow.parser.parse(
+        `graph TD;A_${keyword}_node-->B[[This node has a ${keyword} as text]];`
+      );
+
+      const vert = flow.parser.yy.getVertices();
+      const edges = flow.parser.yy.getEdges();
+      expect(vert['B'].type).toBe('subroutine');
+      expect(vert['B'].text).toBe(`This node has a ${keyword} as text`);
+    });
+
+    it.each(keywords)('should handle %s keyword in rect vertex', function (keyword) {
+      const rest = flow.parser.parse(
+        `graph TD;A_${keyword}_node-->B[|borders:lt|This node has a ${keyword} as text];`
+      );
+
+      const vert = flow.parser.yy.getVertices();
+      const edges = flow.parser.yy.getEdges();
+      expect(vert['B'].type).toBe('rect');
+      expect(vert['B'].text).toBe(`This node has a ${keyword} as text`);
+    });
+
+    it.each(keywords)('should handle %s keyword in cylinder vertex', function (keyword) {
+      const rest = flow.parser.parse(
+        `graph TD;A_${keyword}_node-->B[(This node has a ${keyword} as text)];`
+      );
+
+      const vert = flow.parser.yy.getVertices();
+      const edges = flow.parser.yy.getEdges();
+      expect(vert['B'].type).toBe('cylinder');
+      expect(vert['B'].text).toBe(`This node has a ${keyword} as text`);
+    });
+
+    it.each(keywords)('should handle %s keyword in hexagon vertex', function (keyword) {
+      const rest = flow.parser.parse(
+        `graph TD;A_${keyword}_node-->B{{This node has a ${keyword} as text}};`
+      );
+
+      const vert = flow.parser.yy.getVertices();
+      const edges = flow.parser.yy.getEdges();
+      expect(vert['B'].type).toBe('hexagon');
+      expect(vert['B'].text).toBe(`This node has a ${keyword} as text`);
+    });
+
+    it.each(keywords)('should handle %s keyword in odd vertex', function (keyword) {
+      const rest = flow.parser.parse(
+        `graph TD;A_${keyword}_node-->B>This node has a ${keyword} as text];`
+      );
+
+      const vert = flow.parser.yy.getVertices();
+      const edges = flow.parser.yy.getEdges();
+      expect(vert['B'].type).toBe('odd');
+      expect(vert['B'].text).toBe(`This node has a ${keyword} as text`);
+    });
+
+    it.each(keywords)('should handle %s keyword in trapezoid vertex', function (keyword) {
+      const rest = flow.parser.parse(
+        `graph TD;A_${keyword}_node-->B[/This node has a ${keyword} as text\\];`
+      );
+
+      const vert = flow.parser.yy.getVertices();
+      const edges = flow.parser.yy.getEdges();
+      expect(vert['B'].type).toBe('trapezoid');
+      expect(vert['B'].text).toBe(`This node has a ${keyword} as text`);
+    });
+
+    it.each(keywords)('should handle %s keyword in inv_trapezoid vertex', function (keyword) {
+      const rest = flow.parser.parse(
+        `graph TD;A_${keyword}_node-->B[\\This node has a ${keyword} as text/];`
+      );
+
+      const vert = flow.parser.yy.getVertices();
+      const edges = flow.parser.yy.getEdges();
+      expect(vert['B'].type).toBe('inv_trapezoid');
+      expect(vert['B'].text).toBe(`This node has a ${keyword} as text`);
+    });
+
+    it.each(keywords)('should handle %s keyword in lean_right vertex', function (keyword) {
+      const rest = flow.parser.parse(
+        `graph TD;A_${keyword}_node-->B[/This node has a ${keyword} as text/];`
+      );
+
+      const vert = flow.parser.yy.getVertices();
+      const edges = flow.parser.yy.getEdges();
+      expect(vert['B'].type).toBe('lean_right');
+      expect(vert['B'].text).toBe(`This node has a ${keyword} as text`);
+    });
+
+    it.each(keywords)('should handle %s keyword in lean_left vertex', function (keyword) {
+      const rest = flow.parser.parse(
+        `graph TD;A_${keyword}_node-->B[\\This node has a ${keyword} as text\\];`
+      );
+
+      const vert = flow.parser.yy.getVertices();
+      const edges = flow.parser.yy.getEdges();
+      expect(vert['B'].type).toBe('lean_left');
+      expect(vert['B'].text).toBe(`This node has a ${keyword} as text`);
+    });
+
     it('should handle åäö and minus', function () {
       const res = flow.parser.parse('graph TD;A-->C{Chimpansen hoppar åäö-ÅÄÖ};');
 
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
index 70fb49162..d0e65913a 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
@@ -13,6 +13,9 @@
 %x acc_descr_multiline
 %x dir
 %x vertex
+%x text
+%x ellipseText
+%x trapText
 %x click
 %x href
 %x callbackname
@@ -23,31 +26,32 @@
 %x close_directive
 
 %%
-\%\%\{                                                          { this.begin('open_directive'); return 'open_directive'; }
-<open_directive>((?:(?!\}\%\%)[^:.])*)                          { this.begin('type_directive'); return 'type_directive'; }
-<type_directive>":"                                             { this.popState(); this.begin('arg_directive'); return ':'; }
-<type_directive,arg_directive>\}\%\%                            { this.popState(); this.popState(); return 'close_directive'; }
-<arg_directive>((?:(?!\}\%\%).|\n)*)                            return 'arg_directive';
-accTitle\s*":"\s*                                               { this.begin("acc_title");return 'acc_title'; }
-<acc_title>(?!\n|;|#)*[^\n]*                                    { this.popState(); return "acc_title_value"; }
-accDescr\s*":"\s*                                               { this.begin("acc_descr");return 'acc_descr'; }
-<acc_descr>(?!\n|;|#)*[^\n]*                                    { this.popState(); return "acc_descr_value"; }
-accDescr\s*"{"\s*                                { this.begin("acc_descr_multiline");}
+\%\%\{                                          { this.begin('open_directive'); return 'open_directive'; }
+<open_directive>((?:(?!\}\%\%)[^:.])*)          { this.begin('type_directive'); return 'type_directive'; }
+<type_directive>":"                             { this.popState(); this.begin('arg_directive'); return ':'; }
+<type_directive,arg_directive>\}\%\%            { this.popState(); this.popState(); return 'close_directive'; }
+<arg_directive>((?:(?!\}\%\%).|\n)*)            return 'arg_directive';
+accTitle\s*":"\s*                               { this.begin("acc_title");return 'acc_title'; }
+<acc_title>(?!\n|;|#)*[^\n]*                    { this.popState(); return "acc_title_value"; }
+accDescr\s*":"\s*                               { this.begin("acc_descr");return 'acc_descr'; }
+<acc_descr>(?!\n|;|#)*[^\n]*                    { this.popState(); return "acc_descr_value"; }
+accDescr\s*"{"\s*                               { this.begin("acc_descr_multiline");}
 <acc_descr_multiline>[\}]                       { this.popState(); }
 <acc_descr_multiline>[^\}]*                     return "acc_descr_multiline_value";
-// <acc_descr_multiline>.*[^\n]*                    {  return "acc_descr_line"}
-["][`]          { this.begin("md_string");}
-<md_string>[^`"]+        { return "MD_STR";}
-<md_string>[`]["]          { this.popState();}
-["]                     this.begin("string");
+// <acc_descr_multiline>.*[^\n]*                {  return "acc_descr_line"}
+
+["][`]                  { this.begin("md_string");}
+<md_string>[^`"]+       { return "MD_STR";}
+<md_string>[`]["]       { this.popState();}
+<INITIAL,text>["]       this.pushState("string");
 <string>["]             this.popState();
-<string>[^"]*           return "STR";
-"style"               return 'STYLE';
-"default"             return 'DEFAULT';
-"linkStyle"           return 'LINKSTYLE';
-"interpolate"         return 'INTERPOLATE';
-"classDef"            return 'CLASSDEF';
-"class"               return 'CLASS';
+<string>[^"]+           return "STR";
+"style"                 return 'STYLE';
+"default"               return 'DEFAULT';
+"linkStyle"             return 'LINKSTYLE';
+"interpolate"           return 'INTERPOLATE';
+"classDef"              return 'CLASSDEF';
+"class"                 return 'CLASS';
 
 /*
 ---interactivity command---
@@ -80,64 +84,80 @@ Function arguments are optional: 'call <callbackname>()' simply executes 'callba
 that id.
 'click <id>' can be followed by href or call commands in any desired order
 */
-"click"[\s]+            this.begin("click");
-<click>[\s\n]           this.popState();
-<click>[^\s\n]*         return 'CLICK';
+"click"[\s]+             this.begin("click");
+<click>[\s\n]            this.popState();
+<click>[^\s\n]*          return 'CLICK';
 
-"flowchart-elk"        {if(yy.lex.firstGraph()){this.begin("dir");}  return 'GRAPH';}
-"graph"                {if(yy.lex.firstGraph()){this.begin("dir");}  return 'GRAPH';}
-"flowchart"            {if(yy.lex.firstGraph()){this.begin("dir");}  return 'GRAPH';}
-"subgraph"            return 'subgraph';
-"end"\b\s*            return 'end';
+"flowchart-elk"          {if(yy.lex.firstGraph()){this.begin("dir");}  return 'GRAPH';}
+"graph"                  {if(yy.lex.firstGraph()){this.begin("dir");}  return 'GRAPH';}
+"flowchart"              {if(yy.lex.firstGraph()){this.begin("dir");}  return 'GRAPH';}
+"subgraph"               return 'subgraph';
+"end"\b\s*               return 'end';
 
-"_self"               return 'LINK_TARGET';
-"_blank"              return 'LINK_TARGET';
-"_parent"             return 'LINK_TARGET';
-"_top"                return 'LINK_TARGET';
+"_self"                  return 'LINK_TARGET';
+"_blank"                 return 'LINK_TARGET';
+"_parent"                return 'LINK_TARGET';
+"_top"                   return 'LINK_TARGET';
 
-<dir>(\r?\n)*\s*\n       {   this.popState();  return 'NODIR'; }
-<dir>\s*"LR"             {   this.popState();  return 'DIR'; }
-<dir>\s*"RL"             {   this.popState();  return 'DIR'; }
-<dir>\s*"TB"             {   this.popState();  return 'DIR'; }
-<dir>\s*"BT"             {   this.popState();  return 'DIR'; }
-<dir>\s*"TD"             {   this.popState();  return 'DIR'; }
-<dir>\s*"BR"             {   this.popState();  return 'DIR'; }
-<dir>\s*"<"              {   this.popState();  return 'DIR'; }
-<dir>\s*">"              {   this.popState();  return 'DIR'; }
-<dir>\s*"^"              {   this.popState();  return 'DIR'; }
-<dir>\s*"v"              {   this.popState();  return 'DIR'; }
+<dir>(\r?\n)*\s*\n       { this.popState();  return 'NODIR'; }
+<dir>\s*"LR"             { this.popState();  return 'DIR'; }
+<dir>\s*"RL"             { this.popState();  return 'DIR'; }
+<dir>\s*"TB"             { this.popState();  return 'DIR'; }
+<dir>\s*"BT"             { this.popState();  return 'DIR'; }
+<dir>\s*"TD"             { this.popState();  return 'DIR'; }
+<dir>\s*"BR"             { this.popState();  return 'DIR'; }
+<dir>\s*"<"              { this.popState();  return 'DIR'; }
+<dir>\s*">"              { this.popState();  return 'DIR'; }
+<dir>\s*"^"              { this.popState();  return 'DIR'; }
+<dir>\s*"v"              { this.popState();  return 'DIR'; }
 
-.*direction\s+TB[^\n]*                                      return 'direction_tb';
-.*direction\s+BT[^\n]*                                      return 'direction_bt';
-.*direction\s+RL[^\n]*                                      return 'direction_rl';
-.*direction\s+LR[^\n]*                                      return 'direction_lr';
+.*direction\s+TB[^\n]*       return 'direction_tb';
+.*direction\s+BT[^\n]*       return 'direction_bt';
+.*direction\s+RL[^\n]*       return 'direction_rl';
+.*direction\s+LR[^\n]*       return 'direction_lr';
+
+[0-9]+                       return 'NUM';
+\#                           return 'BRKT';
+":::"                        return 'STYLE_SEPARATOR';
+":"                          return 'COLON';
+"&"                          return 'AMP';
+";"                          return 'SEMI';
+","                          return 'COMMA';
+"*"                          return 'MULT';
+\s*[xo<]?\-\-+[-xo>]\s*      return 'LINK';
+\s*[xo<]?\=\=+[=xo>]\s*      return 'LINK';
+\s*[xo<]?\-?\.+\-[xo>]?\s*   return 'LINK';
+\s*\~\~[\~]+\s*              return 'LINK';
+\s*[xo<]?\-\-\s*             return 'START_LINK';
+\s*[xo<]?\=\=\s*             return 'START_LINK';
+\s*[xo<]?\-\.\s*             return 'START_LINK';
+
+<*>"(-"                         { this.pushState("ellipseText"); return '(-'; }
+<ellipseText>[-/\)][\)]         { this.popState(); return '-)'; }
+<ellipseText>[^/)]|-/!\)+       return "TEXT"
+
+<*>"(["                   { this.pushState("text"); return 'STADIUMSTART'; }
+<text>"])"                { this.popState(); return 'STADIUMEND'; }
+
+<*>"[["                   { this.pushState("text"); return 'SUBROUTINESTART'; }
+<text>"]]"                { this.popState(); return 'SUBROUTINEEND'; }
+
+"[|"                      { return 'VERTEX_WITH_PROPS_START'; }
+
+\>/!\s                    { this.pushState("text"); return 'TAGEND'; }
+<*>"[("                   { this.pushState("text") ;return 'CYLINDERSTART'; }
+<text>")]"                { this.popState(); return 'CYLINDEREND'; }
+
+<*>"((("                  { this.pushState("text"); return 'DOUBLECIRCLESTART'; }
+<text>")))"               { this.popState(); return 'DOUBLECIRCLEEND'; }
+
+<*>"[/"                   { this.pushState("trapText"); return 'TRAPSTART'; }
+<trapText>[\\(?=\])][\]]     { this.popState(); return 'TRAPEND'; }
+<trapText>[^\\\/]+   return 'TEXT';
+
+<trapText>\/(?=\])\]     { this.popState(); return 'INVTRAPEND'; }
+<*>"[\\"                 { this.pushState("trapText"); return 'INVTRAPSTART'; }
 
-[0-9]+                { return 'NUM';}
-\#                    return 'BRKT';
-":::"                 return 'STYLE_SEPARATOR';
-":"                   return 'COLON';
-"&"                   return 'AMP';
-";"                   return 'SEMI';
-","                   return 'COMMA';
-"*"                   return 'MULT';
-\s*[xo<]?\-\-+[-xo>]\s*     return 'LINK';
-\s*[xo<]?\=\=+[=xo>]\s*     return 'LINK';
-\s*[xo<]?\-?\.+\-[xo>]?\s*  return 'LINK';
-\s*\~\~[\~]+\s*  return 'LINK';
-\s*[xo<]?\-\-\s*            return 'START_LINK';
-\s*[xo<]?\=\=\s*            return 'START_LINK';
-\s*[xo<]?\-\.\s*            return 'START_LINK';
-"(-"                  return '(-';
-"-)"                  return '-)';
-"(["                  return 'STADIUMSTART';
-"])"                  return 'STADIUMEND';
-"[["                  return 'SUBROUTINESTART';
-"]]"                  return 'SUBROUTINEEND';
-"[|"                  return 'VERTEX_WITH_PROPS_START';
-"[("                  return 'CYLINDERSTART';
-")]"                  return 'CYLINDEREND';
-"((("                 return 'DOUBLECIRCLESTART';
-")))"                 return 'DOUBLECIRCLEEND';
 \-                    return 'MINUS';
 "."                   return 'DOT';
 [\_]                  return 'UNDERSCORE';
@@ -150,11 +170,8 @@ that id.
 "^"                   return 'UP';
 "\|"                  return 'SEP';
 "v"                   return 'DOWN';
+[A-Za-z0-9_]+         return 'ALPHA_NUM';
 [A-Za-z]+             return 'ALPHA';
-"\\]"                 return 'TRAPEND';
-"[/"                  return 'TRAPSTART';
-"/]"                  return 'INVTRAPEND';
-"[\\"                 return 'INVTRAPSTART';
 [!"#$%&'*+,-.`?\\_/]  return 'PUNCTUATION';
 [\u00AA\u00B5\u00BA\u00C0-\u00D6\u00D8-\u00F6]|
 [\u00F8-\u02C1\u02C6-\u02D1\u02E0-\u02E4\u02EC\u02EE\u0370-\u0374\u0376\u0377]|
@@ -218,13 +235,16 @@ that id.
 [\uFF21-\uFF3A\uFF41-\uFF5A\uFF66-\uFFBE\uFFC2-\uFFC7\uFFCA-\uFFCF]|
 [\uFFD2-\uFFD7\uFFDA-\uFFDC]
                       return 'UNICODE_TEXT';
-"|"                   return 'PIPE';
-"("                   return 'PS';
-")"                   return 'PE';
-"["                   return 'SQS';
-"]"                   return 'SQE';
-"{"                   return 'DIAMOND_START'
-"}"                   return 'DIAMOND_STOP'
+
+<text>"|"             { this.popState(); return 'PIPE'; }
+<*>"|"                { this.pushState("text"); return 'PIPE'; }
+<*>"("                { this.pushState("text"); return 'PS'; }
+<text>")"             { this.popState(); return 'PE'; }
+<*>"["                { this.pushState("text"); return 'SQS'; }
+<text>(\])            { this.popState(); return 'SQE'; }
+<*>"{"                { this.pushState("text"); return 'DIAMOND_START' }
+<text>(\})            { this.popState(); return 'DIAMOND_STOP' }
+<text>[^\]\)\}\|]+    return "TEXT";
 "\""                  return 'QUOTE';
 (\r?\n)+              return 'NEWLINE';
 \s                    return 'SPACE';
@@ -343,11 +363,11 @@ statement
     {$$=[];}
     | clickStatement separator
     {$$=[];}
-    | subgraph SPACE text SQS text SQE separator document end
+    | subgraph SPACE textNoTags SQS text SQE separator document end
     {$$=yy.addSubGraph($3,$8,$5);}
-    | subgraph SPACE text separator document end
+    | subgraph SPACE textNoTags separator document end
     {$$=yy.addSubGraph($3,$5,$3);}
-    // | subgraph SPACE text separator document end
+    // | subgraph SPACE textNoTags separator document end
     // {$$=yy.addSubGraph($3,$5,$3);}
     | subgraph separator document end
     {$$=yy.addSubGraph(undefined,$3,undefined);}
@@ -392,7 +412,7 @@ vertex:  idString SQS text SQE
         {$$ = $1;yy.addVertex($1,$3,'stadium');}
     | idString SUBROUTINESTART text SUBROUTINEEND
         {$$ = $1;yy.addVertex($1,$3,'subroutine');}
-    | idString VERTEX_WITH_PROPS_START ALPHA COLON ALPHA PIPE text SQE
+    | idString VERTEX_WITH_PROPS_START ALPHA_NUM COLON ALPHA_NUM PIPE text SQE
         {$$ = $1;yy.addVertex($1,$7,'rect',undefined,undefined,undefined, Object.fromEntries([[$3, $5]]));}
     | idString CYLINDERSTART text CYLINDEREND
         {$$ = $1;yy.addVertex($1,$3,'cylinder');}
@@ -426,7 +446,7 @@ link: linkStatement arrowText
     {$1.text = $2;$$ = $1;}
     | linkStatement
     {$$ = $1;}
-    | START_LINK text LINK
+    | START_LINK textNoTags LINK
         {var inf = yy.destructLink($3, $1); $$ = {"type":inf.type,"stroke":inf.stroke,"length":inf.length,"text":$2};}
     ;
 
@@ -443,10 +463,6 @@ text: textToken
     { $$={text:$1, type: 'text'};}
     | text textToken
     { $$={text:$1.text+''+$2, type: $1.type};}
-    | STR
-    { $$={text: $1, type: 'text'};}
-    | MD_STR
-    { $$={text: $1, type: 'markdown'};}
     ;
 
 
@@ -456,9 +472,13 @@ keywords
 
 
 textNoTags: textNoTagsToken
-    {$$=$1;}
+    {$$={text:$1, type: 'text'};}
     | textNoTags textNoTagsToken
-    {$$=$1+''+$2;}
+    {$$={text:$1.text+''+$2, type: $1.type};}
+    | STR
+    { $$={text: $1, type: 'text'};}
+    | MD_STR
+    { $$={text: $1, type: 'markdown'};}
     ;
 
 
@@ -527,13 +547,14 @@ style: styleComponent
     {$$ = $1 + $2;}
     ;
 
-styleComponent: ALPHA | COLON | MINUS | NUM | UNIT | SPACE | HEX | BRKT | DOT | STYLE | PCT ;
+styleComponent: ALPHA_NUM | ALPHA | COLON | MINUS | NUM | UNIT | SPACE | HEX | BRKT | DOT | STYLE | PCT ;
 
 /* Token lists */
+idStringToken  : alphaNumToken | DOWN | MINUS | DEFAULT;
 
-textToken      : textNoTagsToken | TAGSTART | TAGEND | START_LINK | PCT | DEFAULT;
+textToken      :  textNoTagsToken | STR | MD_STR | TEXT;
 
-textNoTagsToken: alphaNumToken | SPACE | MINUS | keywords ;
+textNoTagsToken: alphaNumToken | SPACE | MINUS | keywords | START_LINK ;
 
 idString
     :idStringToken
@@ -571,9 +592,7 @@ direction
     { $$={stmt:'dir', value:'LR'};}
     ;
 
-alphaNumToken  : PUNCTUATION | AMP | UNICODE_TEXT | NUM| ALPHA | COLON | COMMA | PLUS | EQUALS | MULT | DOT | BRKT| UNDERSCORE ;
-
-idStringToken  : ALPHA|UNDERSCORE |UNICODE_TEXT | NUM|  COLON | COMMA | PLUS | MINUS | DOWN |EQUALS | MULT | BRKT | DOT | PUNCTUATION | AMP | DEFAULT;
+alphaNumToken  : ALPHA_NUM | PUNCTUATION | AMP | UNICODE_TEXT | NUM| ALPHA | COLON | COMMA | PLUS | EQUALS | MULT | DOT | BRKT| UNDERSCORE ;
 
 graphCodeTokens: STADIUMSTART | STADIUMEND | SUBROUTINESTART | SUBROUTINEEND | VERTEX_WITH_PROPS_START | CYLINDERSTART | CYLINDEREND | TRAPSTART | TRAPEND | INVTRAPSTART | INVTRAPEND | PIPE | PS | PE | SQS | SQE | DIAMOND_START | DIAMOND_STOP | TAGSTART | TAGEND | ARROW_CROSS | ARROW_POINT | ARROW_CIRCLE | ARROW_OPEN | QUOTE | SEMI;
 %%

From 3496f275bc9dfbc7dab617282f0c9d81e6a72737 Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Wed, 19 Jul 2023 22:56:53 -0300
Subject: [PATCH 162/281] Re-implement markdown as its own text type

---
 packages/mermaid/src/diagrams/flowchart/parser/flow.jison | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
index d0e65913a..48f5f410b 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
@@ -40,7 +40,7 @@ accDescr\s*"{"\s*                               { this.begin("acc_descr_multilin
 <acc_descr_multiline>[^\}]*                     return "acc_descr_multiline_value";
 // <acc_descr_multiline>.*[^\n]*                {  return "acc_descr_line"}
 
-["][`]                  { this.begin("md_string");}
+<INITIAL,text>["][`]                  { this.begin("md_string");}
 <md_string>[^`"]+       { return "MD_STR";}
 <md_string>[`]["]       { this.popState();}
 <INITIAL,text>["]       this.pushState("string");
@@ -463,6 +463,8 @@ text: textToken
     { $$={text:$1, type: 'text'};}
     | text textToken
     { $$={text:$1.text+''+$2, type: $1.type};}
+    | MD_STR
+    { $$={text: $1, type: 'markdown'};}
     ;
 
 
@@ -552,7 +554,7 @@ styleComponent: ALPHA_NUM | ALPHA | COLON | MINUS | NUM | UNIT | SPACE | HEX | B
 /* Token lists */
 idStringToken  : alphaNumToken | DOWN | MINUS | DEFAULT;
 
-textToken      :  textNoTagsToken | STR | MD_STR | TEXT;
+textToken      :  textNoTagsToken | STR | TEXT;
 
 textNoTagsToken: alphaNumToken | SPACE | MINUS | keywords | START_LINK ;
 

From a171903088b08c2d7748ce2b9b34f7805a5cf3ea Mon Sep 17 00:00:00 2001
From: Sibin Thomas <sibinjordaan@gmail.com>
Date: Thu, 20 Jul 2023 13:15:05 +0530
Subject: [PATCH 163/281] added tests for overlapping commits

---
 .../integration/rendering/gitGraph.spec.js    | 36 +++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/cypress/integration/rendering/gitGraph.spec.js b/cypress/integration/rendering/gitGraph.spec.js
index 58e827135..f2d8f44b8 100644
--- a/cypress/integration/rendering/gitGraph.spec.js
+++ b/cypress/integration/rendering/gitGraph.spec.js
@@ -665,4 +665,40 @@ gitGraph TB:
       {}
     );
   });
+  it('32: should render a simple gitgraph overlapping commits | Vertical Branch', () => {
+    imgSnapshotTest(
+      `gitGraph TB:
+       commit id:"s1"
+       commit id:"s2"
+       branch branch1
+       commit id:"s3"
+       commit id:"s4"
+       checkout main
+       commit id:"s5"
+       checkout branch1
+       commit id:"s6"
+       commit id:"s7"
+       merge main
+      `,
+      {}
+    );
+  });
+  it('33: should render a simple gitgraph overlapping commits', () => {
+    imgSnapshotTest(
+      `gitGraph
+       commit id:"s1"
+       commit id:"s2"
+       branch branch1
+       commit id:"s3"
+       commit id:"s4"
+       checkout main
+       commit id:"s5"
+       checkout branch1
+       commit id:"s6"
+       commit id:"s7"
+       merge main
+      `,
+      {}
+    );
+  });
 });

From 478d3501889d5bc8d0ff9c1536c579ebd1453939 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Thu, 20 Jul 2023 20:48:12 +0530
Subject: [PATCH 164/281] Update .github/pull_request_template.md

Co-authored-by: Alois Klink <alois@aloisklink.com>
---
 .github/pull_request_template.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
index 82ca5fd5c..ff34d24fd 100644
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -14,5 +14,5 @@ Make sure you
 
 - [ ] :book: have read the [contribution guidelines](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md)
 - [ ] :computer: have added necessary unit/e2e tests.
-- [ ] :notebook: have added documentation. Make sure `MERMAID_RELEASE_VERSION` is used for all new features.
+- [ ] :notebook: have added documentation. Make sure [`MERMAID_RELEASE_VERSION`](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/docs/community/development.md#3-update-documentation) is used for all new features.
 - [ ] :bookmark: targeted `develop` branch

From 8ae35c13823900cc66afee8e336f36ec797e48b2 Mon Sep 17 00:00:00 2001
From: Sibin Thomas <sibinjordaan@gmail.com>
Date: Thu, 20 Jul 2023 21:27:34 +0530
Subject: [PATCH 165/281] updated documentation for vertical branches

---
 packages/mermaid/src/docs/syntax/gitgraph.md | 44 ++++++++++++++++++++
 1 file changed, 44 insertions(+)

diff --git a/packages/mermaid/src/docs/syntax/gitgraph.md b/packages/mermaid/src/docs/syntax/gitgraph.md
index f1930bb27..a9b99e684 100644
--- a/packages/mermaid/src/docs/syntax/gitgraph.md
+++ b/packages/mermaid/src/docs/syntax/gitgraph.md
@@ -511,6 +511,50 @@ NOTE: Because we have overridden the `mainBranchOrder` to `2`, the `main` branch
 
 Here, we have changed the default main branch name to `MetroLine1`.
 
+## Orientation
+
+In Mermaid, the default orientation is Left to Right. The branches are lined vertically.
+
+Usage example:
+
+```mermaid-example
+    gitGraph
+       commit
+       commit
+       branch develop
+       commit
+       commit
+       commit
+       checkout main
+       commit
+       commit
+       merge develop
+       commit
+       commit
+```
+
+Sometimes we may want to change the orientation. Currently, Mermaid supports two orientations: **Left to Right**(default) and **Top to Bottom**.
+
+In order to change the orientation from top to bottom i.e. branches lined horizontally, you need to add `TB` along with `gitGraph`.
+
+Usage example:
+
+```mermaid-example
+    gitGraph TB:
+       commit
+       commit
+       branch develop
+       commit
+       commit
+       commit
+       checkout main
+       commit
+       commit
+       merge develop
+       commit
+       commit
+```
+
 ## Themes
 
 Mermaid supports a bunch of pre-defined themes which you can use to find the right one for you. PS: you can actually override an existing theme's variable to get your own custom theme going. Learn more about theming your diagram [here](../config/theming.md).

From 5b987dee93f0f23eec22a1608cc6f944c8eebaa0 Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Thu, 20 Jul 2023 13:05:18 -0300
Subject: [PATCH 166/281] Put parser in stable state

---
 .../src/diagrams/flowchart/parser/flow.jison     | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
index 48f5f410b..a5ca17586 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
@@ -158,8 +158,8 @@ that id.
 <trapText>\/(?=\])\]     { this.popState(); return 'INVTRAPEND'; }
 <*>"[\\"                 { this.pushState("trapText"); return 'INVTRAPSTART'; }
 
-\-                    return 'MINUS';
-"."                   return 'DOT';
+\-                   return 'MINUS';
+"."                    return 'DOT';
 [\_]                  return 'UNDERSCORE';
 \+                    return 'PLUS';
 \%                    return 'PCT';
@@ -170,9 +170,9 @@ that id.
 "^"                   return 'UP';
 "\|"                  return 'SEP';
 "v"                   return 'DOWN';
+[0-9]+                return 'NUM';
 [A-Za-z0-9_]+         return 'ALPHA_NUM';
-[A-Za-z]+             return 'ALPHA';
-[!"#$%&'*+,-.`?\\_/]  return 'PUNCTUATION';
+[!"#$%&'*+,-\.`?\\_/]  return 'PUNCTUATION';
 [\u00AA\u00B5\u00BA\u00C0-\u00D6\u00D8-\u00F6]|
 [\u00F8-\u02C1\u02C6-\u02D1\u02E0-\u02E4\u02EC\u02EE\u0370-\u0374\u0376\u0377]|
 [\u037A-\u037D\u0386\u0388-\u038A\u038C\u038E-\u03A1\u03A3-\u03F5]|
@@ -552,9 +552,9 @@ style: styleComponent
 styleComponent: ALPHA_NUM | ALPHA | COLON | MINUS | NUM | UNIT | SPACE | HEX | BRKT | DOT | STYLE | PCT ;
 
 /* Token lists */
-idStringToken  : alphaNumToken | DOWN | MINUS | DEFAULT;
+idStringToken  :  alphaNumToken | DOWN | MINUS | DEFAULT;
 
-textToken      :  textNoTagsToken | STR | TEXT;
+textToken      :   STR | TEXT;
 
 textNoTagsToken: alphaNumToken | SPACE | MINUS | keywords | START_LINK ;
 
@@ -566,9 +566,9 @@ idString
     ;
 
 alphaNum
-    : alphaNumStatement
+    : alphaNumToken
     {$$=$1;}
-    | alphaNum alphaNumStatement
+    | alphaNum alphaNumToken
     {$$=$1+''+$2;}
     ;
 

From df89b92e2c6d353357887dce7677a2315bad65f2 Mon Sep 17 00:00:00 2001
From: Sibin Thomas <sibinjordaan@gmail.com>
Date: Thu, 20 Jul 2023 21:45:47 +0530
Subject: [PATCH 167/281] ran docs:build for documentation

---
 docs/syntax/gitgraph.md | 76 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 76 insertions(+)

diff --git a/docs/syntax/gitgraph.md b/docs/syntax/gitgraph.md
index 964fe3886..e93071851 100644
--- a/docs/syntax/gitgraph.md
+++ b/docs/syntax/gitgraph.md
@@ -825,6 +825,82 @@ NOTE: Because we have overridden the `mainBranchOrder` to `2`, the `main` branch
 
 Here, we have changed the default main branch name to `MetroLine1`.
 
+## Orientation
+
+In Mermaid, the default orientation is Left to Right. The branches are lined vertically.
+
+Usage example:
+
+```mermaid-example
+    gitGraph
+       commit
+       commit
+       branch develop
+       commit
+       commit
+       commit
+       checkout main
+       commit
+       commit
+       merge develop
+       commit
+       commit
+```
+
+```mermaid
+    gitGraph
+       commit
+       commit
+       branch develop
+       commit
+       commit
+       commit
+       checkout main
+       commit
+       commit
+       merge develop
+       commit
+       commit
+```
+
+Sometimes we may want to change the orientation. Currently, Mermaid supports two orientations: **Left to Right**(default) and **Top to Bottom**.
+
+In order to change the orientation from top to bottom i.e. branches lined horizontally, you need to add `TB` along with `gitGraph`.
+
+Usage example:
+
+```mermaid-example
+    gitGraph TB:
+       commit
+       commit
+       branch develop
+       commit
+       commit
+       commit
+       checkout main
+       commit
+       commit
+       merge develop
+       commit
+       commit
+```
+
+```mermaid
+    gitGraph TB:
+       commit
+       commit
+       branch develop
+       commit
+       commit
+       commit
+       checkout main
+       commit
+       commit
+       merge develop
+       commit
+       commit
+```
+
 ## Themes
 
 Mermaid supports a bunch of pre-defined themes which you can use to find the right one for you. PS: you can actually override an existing theme's variable to get your own custom theme going. Learn more about theming your diagram [here](../config/theming.md).

From cd0da4e060e376d389dac621352617f47dde639a Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Thu, 20 Jul 2023 17:44:05 +0000
Subject: [PATCH 168/281] build(deps-dev): bump word-wrap from 1.2.3 to 1.2.4

Bumps [word-wrap](https://github.com/jonschlinkert/word-wrap) from 1.2.3 to 1.2.4.
- [Release notes](https://github.com/jonschlinkert/word-wrap/releases)
- [Commits](https://github.com/jonschlinkert/word-wrap/compare/1.2.3...1.2.4)

---
updated-dependencies:
- dependency-name: word-wrap
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 pnpm-lock.yaml | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f258400a6..db8f628cf 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -12469,7 +12469,7 @@ packages:
       levn: 0.3.0
       prelude-ls: 1.1.2
       type-check: 0.3.2
-      word-wrap: 1.2.3
+      word-wrap: 1.2.4
     dev: true
 
   /optionator@0.9.1:
@@ -12481,7 +12481,7 @@ packages:
       levn: 0.4.1
       prelude-ls: 1.2.1
       type-check: 0.4.0
-      word-wrap: 1.2.3
+      word-wrap: 1.2.4
     dev: true
 
   /ospath@1.2.2:
@@ -16073,8 +16073,8 @@ packages:
     resolution: {integrity: sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw==}
     dev: true
 
-  /word-wrap@1.2.3:
-    resolution: {integrity: sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==}
+  /word-wrap@1.2.4:
+    resolution: {integrity: sha512-2V81OA4ugVo5pRo46hAoD2ivUJx8jXmWXfUkY4KFNw0hEptvN0QfH3K4nHiwzGeKl5rFKedV48QVoqYavy4YpA==}
     engines: {node: '>=0.10.0'}
     dev: true
 

From 7adb1bccb384cee272d44f1f6deb9c2e5b6ddd37 Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Thu, 20 Jul 2023 23:49:28 -0300
Subject: [PATCH 169/281] Replace alphanum with NODE_STRING for most usecases

What this allows is for idStrings that are separated by
dashes or underscores to be considered one whole string
rather than a bunch of tokens mixed together.

This is necessary for examples such as a-node-graph[text].
Now, the last part of the idString 'graph' will be read as
part of the NODE_STRING token rather than attempting to add
a GRAPH token to the idString.
---
 .../src/diagrams/flowchart/parser/flow.jison  | 39 ++++++++-----------
 1 file changed, 17 insertions(+), 22 deletions(-)

diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
index a5ca17586..02229e222 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
@@ -136,10 +136,10 @@ that id.
 <ellipseText>[-/\)][\)]         { this.popState(); return '-)'; }
 <ellipseText>[^/)]|-/!\)+       return "TEXT"
 
-<*>"(["                   { this.pushState("text"); return 'STADIUMSTART'; }
+"(["                   { this.pushState("text"); return 'STADIUMSTART'; }
 <text>"])"                { this.popState(); return 'STADIUMEND'; }
 
-<*>"[["                   { this.pushState("text"); return 'SUBROUTINESTART'; }
+"[["                   { this.pushState("text"); return 'SUBROUTINESTART'; }
 <text>"]]"                { this.popState(); return 'SUBROUTINEEND'; }
 
 "[|"                      { return 'VERTEX_WITH_PROPS_START'; }
@@ -152,27 +152,19 @@ that id.
 <text>")))"               { this.popState(); return 'DOUBLECIRCLEEND'; }
 
 <*>"[/"                   { this.pushState("trapText"); return 'TRAPSTART'; }
-<trapText>[\\(?=\])][\]]     { this.popState(); return 'TRAPEND'; }
-<trapText>[^\\\/]+   return 'TEXT';
-
+<trapText>[\\(?=\])][\]]  { this.popState(); return 'TRAPEND'; }
 <trapText>\/(?=\])\]     { this.popState(); return 'INVTRAPEND'; }
+<trapText>\/(?!\])|\\(?!\])|[^\\\]\/]+        return 'TEXT';
 <*>"[\\"                 { this.pushState("trapText"); return 'INVTRAPSTART'; }
 
-\-                   return 'MINUS';
-"."                    return 'DOT';
-[\_]                  return 'UNDERSCORE';
-\+                    return 'PLUS';
-\%                    return 'PCT';
-"="                   return 'EQUALS';
-\=                    return 'EQUALS';
+
 "<"                   return 'TAGSTART';
 ">"                   return 'TAGEND';
 "^"                   return 'UP';
 "\|"                  return 'SEP';
 "v"                   return 'DOWN';
-[0-9]+                return 'NUM';
-[A-Za-z0-9_]+         return 'ALPHA_NUM';
-[!"#$%&'*+,-\.`?\\_/]  return 'PUNCTUATION';
+([A-Za-z0-9!"#$%&'*+\.`?\\_]|\-(?=[^\>\-\.]))+  return 'NODE_STRING';
+"-"                   return 'MINUS'
 [\u00AA\u00B5\u00BA\u00C0-\u00D6\u00D8-\u00F6]|
 [\u00F8-\u02C1\u02C6-\u02D1\u02E0-\u02E4\u02EC\u02EE\u0370-\u0374\u0376\u0377]|
 [\u037A-\u037D\u0386\u0388-\u038A\u038C\u038E-\u03A1\u03A3-\u03F5]|
@@ -245,6 +237,7 @@ that id.
 <*>"{"                { this.pushState("text"); return 'DIAMOND_START' }
 <text>(\})            { this.popState(); return 'DIAMOND_STOP' }
 <text>[^\]\)\}\|]+    return "TEXT";
+
 "\""                  return 'QUOTE';
 (\r?\n)+              return 'NEWLINE';
 \s                    return 'SPACE';
@@ -412,7 +405,7 @@ vertex:  idString SQS text SQE
         {$$ = $1;yy.addVertex($1,$3,'stadium');}
     | idString SUBROUTINESTART text SUBROUTINEEND
         {$$ = $1;yy.addVertex($1,$3,'subroutine');}
-    | idString VERTEX_WITH_PROPS_START ALPHA_NUM COLON ALPHA_NUM PIPE text SQE
+    | idString VERTEX_WITH_PROPS_START NODE_STRING COLON NODE_STRING PIPE text SQE
         {$$ = $1;yy.addVertex($1,$7,'rect',undefined,undefined,undefined, Object.fromEntries([[$3, $5]]));}
     | idString CYLINDERSTART text CYLINDEREND
         {$$ = $1;yy.addVertex($1,$3,'cylinder');}
@@ -549,14 +542,14 @@ style: styleComponent
     {$$ = $1 + $2;}
     ;
 
-styleComponent: ALPHA_NUM | ALPHA | COLON | MINUS | NUM | UNIT | SPACE | HEX | BRKT | DOT | STYLE | PCT ;
+styleComponent: NUM | NODE_STRING| COLON | UNIT | SPACE | HEX | BRKT | STYLE | PCT ;
 
 /* Token lists */
-idStringToken  :  alphaNumToken | DOWN | MINUS | DEFAULT;
+idStringToken  :  NUM | NODE_STRING | DOWN | MINUS | DEFAULT;
 
-textToken      :   STR | TEXT;
+textToken      :   STR | TEXT | TAGSTART | TAGEND;
 
-textNoTagsToken: alphaNumToken | SPACE | MINUS | keywords | START_LINK ;
+textNoTagsToken: NUM | NODE_STRING | SPACE | MINUS | keywords |  START_LINK ;
 
 idString
     :idStringToken
@@ -566,15 +559,17 @@ idString
     ;
 
 alphaNum
-    : alphaNumToken
+    : alphaNumStatement
     {$$=$1;}
-    | alphaNum alphaNumToken
+    | alphaNum alphaNumStatement
     {$$=$1+''+$2;}
     ;
 
 alphaNumStatement
     : DIR
         {$$=$1;}
+    | NODE_STRING
+        {$$=$1;}
     | alphaNumToken
         {$$=$1;}
     | DOWN

From 69c91ae5edef445d0cf69f97038d58d0d518d75c Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Fri, 21 Jul 2023 00:06:18 -0300
Subject: [PATCH 170/281] Add unit test for edge case with lean_right/left
 vertices

---
 .../flowchart/parser/flow-text.spec.js        | 24 ++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js
index 6ab5ab2cd..9516d088b 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js
@@ -363,13 +363,13 @@ describe('[Text] when parsing', () => {
 
     it.each(keywords)('should handle %s keyword in doublecircle vertex', function (keyword) {
       const rest = flow.parser.parse(
-        `graph TD;A_${keyword}_node-->B(((This node has a ${keyword} as text)));`
+        `graph TD;A_${keyword}-->${keyword}_B(((This node has a ${keyword} as text)));`
       );
 
       const vert = flow.parser.yy.getVertices();
       const edges = flow.parser.yy.getEdges();
-      expect(vert['B'].type).toBe('doublecircle');
-      expect(vert['B'].text).toBe(`This node has a ${keyword} as text`);
+      expect(vert[`${keyword}_B`].type).toBe('doublecircle');
+      expect(vert[`${keyword}_B`].text).toBe(`This node has a ${keyword} as text`);
     });
 
     it.each(keywords)('should handle %s keyword in ellipse vertex', function (keyword) {
@@ -482,6 +482,24 @@ describe('[Text] when parsing', () => {
       expect(vert['B'].text).toBe(`This node has a ${keyword} as text`);
     });
 
+    it('should allow forward slashes in lean_right vertices', function () {
+      const rest = flow.parser.parse(`graph TD;A_node-->B[/This node has a / as text/];`);
+
+      const vert = flow.parser.yy.getVertices();
+      const edges = flow.parser.yy.getEdges();
+      expect(vert['B'].type).toBe('lean_right');
+      expect(vert['B'].text).toBe(`This node has a / as text`);
+    });
+
+    it('should allow back slashes in lean_left vertices', function () {
+      const rest = flow.parser.parse(`graph TD;A_node-->B[\\This node has a \\ as text\\];`);
+
+      const vert = flow.parser.yy.getVertices();
+      const edges = flow.parser.yy.getEdges();
+      expect(vert['B'].type).toBe('lean_left');
+      expect(vert['B'].text).toBe(`This node has a \\ as text`);
+    });
+
     it.each(keywords)('should handle %s keyword in lean_left vertex', function (keyword) {
       const rest = flow.parser.parse(
         `graph TD;A_${keyword}_node-->B[\\This node has a ${keyword} as text\\];`

From 0d7cc748b8d977974cba2b7d4c66ea2bf1ef2609 Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Fri, 21 Jul 2023 17:33:33 -0300
Subject: [PATCH 171/281] Replace alphanum with idString where appropriate

---
 .../src/diagrams/flowchart/parser/flow.jison    | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
index 02229e222..21c175062 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
@@ -118,6 +118,7 @@ that id.
 
 [0-9]+                       return 'NUM';
 \#                           return 'BRKT';
+\#[0-9]+                     return 'HEX';
 ":::"                        return 'STYLE_SEPARATOR';
 ":"                          return 'COLON';
 "&"                          return 'AMP';
@@ -163,7 +164,7 @@ that id.
 "^"                   return 'UP';
 "\|"                  return 'SEP';
 "v"                   return 'DOWN';
-([A-Za-z0-9!"#$%&'*+\.`?\\_]|\-(?=[^\>\-\.]))+  return 'NODE_STRING';
+([A-Za-z0-9!"\#$%&'*+\.`?\\_\/]|\-(?=[^\>\-\.]))+  return 'NODE_STRING';
 "-"                   return 'MINUS'
 [\u00AA\u00B5\u00BA\u00C0-\u00D6\u00D8-\u00F6]|
 [\u00F8-\u02C1\u02C6-\u02D1\u02E0-\u02E4\u02EC\u02EE\u0370-\u0374\u0376\u0377]|
@@ -477,13 +478,11 @@ textNoTags: textNoTagsToken
     ;
 
 
-classDefStatement:CLASSDEF SPACE DEFAULT SPACE stylesOpt
+classDefStatement:CLASSDEF SPACE idString SPACE stylesOpt
     {$$ = $1;yy.addClass($3,$5);}
-    | CLASSDEF SPACE alphaNum SPACE stylesOpt
-          {$$ = $1;yy.addClass($3,$5);}
     ;
 
-classStatement:CLASS SPACE alphaNum SPACE alphaNum
+classStatement:CLASS SPACE idString SPACE alphaNum
     {$$ = $1;yy.setClass($3, $5);}
     ;
 
@@ -504,7 +503,7 @@ clickStatement
     | CLICK STR SPACE STR SPACE LINK_TARGET        {$$ = $1;yy.setLink($1, $2, $6);yy.setTooltip($1, $4);}
     ;
 
-styleStatement:STYLE SPACE alphaNum SPACE stylesOpt
+styleStatement:STYLE SPACE idString SPACE stylesOpt
     {$$ = $1;yy.addVertex($3,undefined,undefined,$5);}
     | STYLE SPACE HEX SPACE stylesOpt
           {$$ = $1;yy.updateLink($3,$5);}
@@ -545,9 +544,9 @@ style: styleComponent
 styleComponent: NUM | NODE_STRING| COLON | UNIT | SPACE | HEX | BRKT | STYLE | PCT ;
 
 /* Token lists */
-idStringToken  :  NUM | NODE_STRING | DOWN | MINUS | DEFAULT;
+idStringToken  :  NUM | NODE_STRING | DOWN | MINUS | DEFAULT | COMMA | COLON;
 
-textToken      :   STR | TEXT | TAGSTART | TAGEND;
+textToken      :   STR | TEXT | TAGSTART | TAGEND | UNICODE_TEXT;
 
 textNoTagsToken: NUM | NODE_STRING | SPACE | MINUS | keywords |  START_LINK ;
 
@@ -570,8 +569,6 @@ alphaNumStatement
         {$$=$1;}
     | NODE_STRING
         {$$=$1;}
-    | alphaNumToken
-        {$$=$1;}
     | DOWN
         {$$='v';}
     | MINUS

From 0a4e5f5f6b48f415c9943d1f7b5254fc6355dfb5 Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Fri, 21 Jul 2023 18:15:27 -0300
Subject: [PATCH 172/281] Slightly alter unit test node idString

---
 .../src/diagrams/flowchart/parser/flow-text.spec.js       | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js
index 9516d088b..a64f39ef0 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js
@@ -363,18 +363,18 @@ describe('[Text] when parsing', () => {
 
     it.each(keywords)('should handle %s keyword in doublecircle vertex', function (keyword) {
       const rest = flow.parser.parse(
-        `graph TD;A_${keyword}-->${keyword}_B(((This node has a ${keyword} as text)));`
+        `graph TD;A_${keyword}-->-${keyword}-B(((This node has a ${keyword} as text)));`
       );
 
       const vert = flow.parser.yy.getVertices();
       const edges = flow.parser.yy.getEdges();
-      expect(vert[`${keyword}_B`].type).toBe('doublecircle');
-      expect(vert[`${keyword}_B`].text).toBe(`This node has a ${keyword} as text`);
+      expect(vert[`-${keyword}-B`].type).toBe('doublecircle');
+      expect(vert[`-${keyword}-B`].text).toBe(`This node has a ${keyword} as text`);
     });
 
     it.each(keywords)('should handle %s keyword in ellipse vertex', function (keyword) {
       const rest = flow.parser.parse(
-        `graph TD;A_${keyword}_node-->B(-This node has a ${keyword} as text-);`
+        `graph TD;A_${keyword}-->B(-This node has a ${keyword} as text-);`
       );
 
       const vert = flow.parser.yy.getVertices();

From 3fa3ed7b186e4fcaab75af0967f6072046561398 Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Fri, 21 Jul 2023 18:15:43 -0300
Subject: [PATCH 173/281] Remove grammar and unit test that expects HEX token

This was never really used and had many things wrong with it.
I believe that if a hex was provided in the diagram specification,
the alphanum grammar would break it up into a BRKT and NUM token
and use the first line with the addVertex() function.

Second, the styleLink grammar provides the exact same functionality
with the linkStyle keyword.

Third, updateLink() expects an array of nums, not a hex digit.

Fourth, no documentation is provided on this grammar statement existing.
Fifth, the unit test does not work in version 10.2.4
---
 .../src/diagrams/flowchart/parser/flow-style.spec.js     | 9 ---------
 .../mermaid/src/diagrams/flowchart/parser/flow.jison     | 6 ++----
 2 files changed, 2 insertions(+), 13 deletions(-)

diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js
index 3feaa2469..1ab754308 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js
@@ -26,15 +26,6 @@ describe('[Style] when parsing', () => {
     expect(vert['Q'].styles[0]).toBe('background:#fff');
   });
 
-  // log.debug(flow.parser.parse('graph TD;style Q background:#fff;'));
-  it('should handle styles for edges', function () {
-    const res = flow.parser.parse('graph TD;a-->b;\nstyle #0 stroke: #f66;');
-
-    const edges = flow.parser.yy.getEdges();
-
-    expect(edges.length).toBe(1);
-  });
-
   it('should handle multiple styles for a vortex', function () {
     const res = flow.parser.parse('graph TD;style R background:#fff,border:1px solid red;');
 
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
index 21c175062..b54eec151 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
@@ -118,7 +118,6 @@ that id.
 
 [0-9]+                       return 'NUM';
 \#                           return 'BRKT';
-\#[0-9]+                     return 'HEX';
 ":::"                        return 'STYLE_SEPARATOR';
 ":"                          return 'COLON';
 "&"                          return 'AMP';
@@ -505,8 +504,7 @@ clickStatement
 
 styleStatement:STYLE SPACE idString SPACE stylesOpt
     {$$ = $1;yy.addVertex($3,undefined,undefined,$5);}
-    | STYLE SPACE HEX SPACE stylesOpt
-          {$$ = $1;yy.updateLink($3,$5);}
+
     ;
 
 linkStyleStatement
@@ -541,7 +539,7 @@ style: styleComponent
     {$$ = $1 + $2;}
     ;
 
-styleComponent: NUM | NODE_STRING| COLON | UNIT | SPACE | HEX | BRKT | STYLE | PCT ;
+styleComponent: NUM | NODE_STRING| COLON | UNIT | SPACE | BRKT | STYLE | PCT ;
 
 /* Token lists */
 idStringToken  :  NUM | NODE_STRING | DOWN | MINUS | DEFAULT | COMMA | COLON;

From 8ff06e88ce2e60ee8212de0c7dafbd2ae9fecc4e Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Fri, 21 Jul 2023 18:27:20 -0300
Subject: [PATCH 174/281] Correct expected error message in unit test

---
 packages/mermaid/src/diagram.spec.ts                      | 2 +-
 packages/mermaid/src/diagrams/flowchart/parser/flow.jison | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/mermaid/src/diagram.spec.ts b/packages/mermaid/src/diagram.spec.ts
index aa613d8e5..6bbc057e3 100644
--- a/packages/mermaid/src/diagram.spec.ts
+++ b/packages/mermaid/src/diagram.spec.ts
@@ -49,7 +49,7 @@ describe('diagram detection', () => {
       "Parse error on line 2:
       graph TD; A-->
       --------------^
-      Expecting 'AMP', 'ALPHA', 'COLON', 'PIPE', 'TESTSTR', 'DOWN', 'DEFAULT', 'NUM', 'COMMA', 'MINUS', 'BRKT', 'DOT', 'PUNCTUATION', 'UNICODE_TEXT', 'PLUS', 'EQUALS', 'MULT', 'UNDERSCORE', got 'EOF'"
+      Expecting 'NODE_STRING', 'COLON', 'PIPE', 'TESTSTR', 'DOWN', 'DEFAULT', 'NUM', 'COMMA', 'MINUS', got 'EOF'"
     `);
     await expect(getDiagramFromText('sequenceDiagram; A-->B')).rejects
       .toThrowErrorMatchingInlineSnapshot(`
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
index b54eec151..4afeee124 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
@@ -504,7 +504,6 @@ clickStatement
 
 styleStatement:STYLE SPACE idString SPACE stylesOpt
     {$$ = $1;yy.addVertex($3,undefined,undefined,$5);}
-
     ;
 
 linkStyleStatement

From 0cc8f891156817d949e1e92880b186ef1e43c597 Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Fri, 21 Jul 2023 19:40:04 -0300
Subject: [PATCH 175/281] Add edgeText states

---
 .../src/diagrams/flowchart/parser/flow.jison  | 42 ++++++++++++++-----
 1 file changed, 32 insertions(+), 10 deletions(-)

diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
index 4afeee124..4ce12393b 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
@@ -16,6 +16,9 @@
 %x text
 %x ellipseText
 %x trapText
+%x edgeText
+%x thickEdgeText
+%x dottedEdgeText
 %x click
 %x href
 %x callbackname
@@ -40,10 +43,10 @@ accDescr\s*"{"\s*                               { this.begin("acc_descr_multilin
 <acc_descr_multiline>[^\}]*                     return "acc_descr_multiline_value";
 // <acc_descr_multiline>.*[^\n]*                {  return "acc_descr_line"}
 
-<INITIAL,text>["][`]                  { this.begin("md_string");}
+<INITIAL,text,edgeText,dottedEdgeText,thickEdgeText>["][`]                  { this.begin("md_string");}
 <md_string>[^`"]+       { return "MD_STR";}
 <md_string>[`]["]       { this.popState();}
-<INITIAL,text>["]       this.pushState("string");
+<INITIAL,text,edgeText,dottedEdgeText,thickEdgeText>["]       this.pushState("string");
 <string>["]             this.popState();
 <string>[^"]+           return "STR";
 "style"                 return 'STYLE';
@@ -124,13 +127,21 @@ that id.
 ";"                          return 'SEMI';
 ","                          return 'COMMA';
 "*"                          return 'MULT';
-\s*[xo<]?\-\-+[-xo>]\s*      return 'LINK';
-\s*[xo<]?\=\=+[=xo>]\s*      return 'LINK';
-\s*[xo<]?\-?\.+\-[xo>]?\s*   return 'LINK';
-\s*\~\~[\~]+\s*              return 'LINK';
-\s*[xo<]?\-\-\s*             return 'START_LINK';
-\s*[xo<]?\=\=\s*             return 'START_LINK';
-\s*[xo<]?\-\.\s*             return 'START_LINK';
+
+<INITIAL,edgeText>\s*[xo<]?\-\-+[-xo>]\s*          { this.popState(); return 'LINK'; }
+<INITIAL>\s*[xo<]?\-\-\s*                          { this.pushState("edgeText"); return 'START_LINK'; }
+<edgeText>[^-]|\-(?!\-)+                           return 'EDGE_TEXT';
+
+<INITIAL,thickEdgeText>\s*[xo<]?\=\=+[=xo>]\s*      { this.popState(); return 'LINK'; }
+<INITIAL>\s*[xo<]?\=\=\s*                           { this.pushState("thickEdgeText"); return 'START_LINK'; }
+<thickEdgeText>[^=]|\=(?!=)                         return 'EDGE_TEXT';
+
+<INITIAL,dottedEdgeText>\s*[xo<]?\-?\.+\-[xo>]?\s*   { this.popState(); return 'LINK'; }
+<INITIAL>\s*[xo<]?\-\.\s*                            { this.pushState("dottedEdgeText"); return 'START_LINK'; }
+<dottedEdgeText>[^\.]|\.(?!-)                        return 'EDGE_TEXT';
+
+
+<*>\s*\~\~[\~]+\s*              return 'LINK';
 
 <*>"(-"                         { this.pushState("ellipseText"); return '(-'; }
 <ellipseText>[-/\)][\)]         { this.popState(); return '-)'; }
@@ -439,10 +450,19 @@ link: linkStatement arrowText
     {$1.text = $2;$$ = $1;}
     | linkStatement
     {$$ = $1;}
-    | START_LINK textNoTags LINK
+    | START_LINK edgeText LINK
         {var inf = yy.destructLink($3, $1); $$ = {"type":inf.type,"stroke":inf.stroke,"length":inf.length,"text":$2};}
     ;
 
+edgeText: edgeTextToken
+    {$$={text:$1, type:'text'};}
+    | edgeText edgeTextToken
+    {$$={text:$1.text+''+$2, type:$1.type};}
+    | MD_STR
+    {$$={text:$1, type:'markdown'};}
+    ;
+
+
 linkStatement: LINK
         {var inf = yy.destructLink($1);$$ = {"type":inf.type,"stroke":inf.stroke,"length":inf.length};}
         ;
@@ -547,6 +567,8 @@ textToken      :   STR | TEXT | TAGSTART | TAGEND | UNICODE_TEXT;
 
 textNoTagsToken: NUM | NODE_STRING | SPACE | MINUS | keywords |  START_LINK ;
 
+edgeTextToken  :  STR | EDGE_TEXT | UNICODE_TEXT ;
+
 idString
     :idStringToken
     {$$=$1}

From 20011c6882853551c377d64fed11cc36bca62aad Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Fri, 21 Jul 2023 20:44:37 -0300
Subject: [PATCH 176/281] Add unit tests for edge text

---
 .../flowchart/parser/flow-edges.spec.js       | 127 ++++++++++++++++++
 1 file changed, 127 insertions(+)

diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-edges.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-edges.spec.js
index dcac21ee7..80dce1bd6 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-edges.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-edges.spec.js
@@ -6,6 +6,28 @@ setConfig({
   securityLevel: 'strict',
 });
 
+const keywords = [
+  'graph',
+  'flowchart',
+  'flowchart-elk',
+  'style',
+  'default',
+  'linkStyle',
+  'interpolate',
+  'classDef',
+  'class',
+  'href',
+  'call',
+  'click',
+  '_self',
+  '_blank',
+  '_parent',
+  '_top',
+  'end',
+  'subgraph',
+  'kitty',
+];
+
 describe('[Edges] when parsing', () => {
   beforeEach(function () {
     flow.parser.yy = flowDb;
@@ -74,6 +96,23 @@ describe('[Edges] when parsing', () => {
       expect(edges[0].length).toBe(1);
     });
 
+    it.each(keywords)('should handle %s as text in double edged nodes', function (keyword) {
+      const res = flow.parser.parse(`graph TD;\nA x-- ${keyword} --x B;`);
+
+      const vert = flow.parser.yy.getVertices();
+      const edges = flow.parser.yy.getEdges();
+
+      expect(vert['A'].id).toBe('A');
+      expect(vert['B'].id).toBe('B');
+      expect(edges.length).toBe(1);
+      expect(edges[0].start).toBe('A');
+      expect(edges[0].end).toBe('B');
+      expect(edges[0].type).toBe('double_arrow_cross');
+      expect(edges[0].text).toBe(`${keyword}`);
+      expect(edges[0].stroke).toBe('normal');
+      expect(edges[0].length).toBe(1);
+    });
+
     it('should handle double edged nodes and edges on thick arrows', function () {
       const res = flow.parser.parse('graph TD;\nA x==x B;');
 
@@ -108,6 +147,23 @@ describe('[Edges] when parsing', () => {
       expect(edges[0].length).toBe(1);
     });
 
+    it.each(keywords)('should handle %s as text in thick double edged nodes', function (keyword) {
+      const res = flow.parser.parse(`graph TD;\nA x== ${keyword} ==x B;`);
+
+      const vert = flow.parser.yy.getVertices();
+      const edges = flow.parser.yy.getEdges();
+
+      expect(vert['A'].id).toBe('A');
+      expect(vert['B'].id).toBe('B');
+      expect(edges.length).toBe(1);
+      expect(edges[0].start).toBe('A');
+      expect(edges[0].end).toBe('B');
+      expect(edges[0].type).toBe('double_arrow_cross');
+      expect(edges[0].text).toBe(`${keyword}`);
+      expect(edges[0].stroke).toBe('thick');
+      expect(edges[0].length).toBe(1);
+    });
+
     it('should handle double edged nodes and edges on dotted arrows', function () {
       const res = flow.parser.parse('graph TD;\nA x-.-x B;');
 
@@ -143,6 +199,23 @@ describe('[Edges] when parsing', () => {
     });
   });
 
+  it.each(keywords)('should handle %s as text in dotted double edged nodes', function (keyword) {
+    const res = flow.parser.parse(`graph TD;\nA x-. ${keyword} .-x B;`);
+
+    const vert = flow.parser.yy.getVertices();
+    const edges = flow.parser.yy.getEdges();
+
+    expect(vert['A'].id).toBe('A');
+    expect(vert['B'].id).toBe('B');
+    expect(edges.length).toBe(1);
+    expect(edges[0].start).toBe('A');
+    expect(edges[0].end).toBe('B');
+    expect(edges[0].type).toBe('double_arrow_cross');
+    expect(edges[0].text).toBe(`${keyword}`);
+    expect(edges[0].stroke).toBe('dotted');
+    expect(edges[0].length).toBe(1);
+  });
+
   describe('circle', function () {
     it('should handle double edged nodes and edges', function () {
       const res = flow.parser.parse('graph TD;\nA o--o B;');
@@ -178,6 +251,23 @@ describe('[Edges] when parsing', () => {
       expect(edges[0].length).toBe(1);
     });
 
+    it.each(keywords)('should handle double edged nodes with %s as text', function (keyword) {
+      const res = flow.parser.parse(`graph TD;\nA o-- ${keyword} --o B;`);
+
+      const vert = flow.parser.yy.getVertices();
+      const edges = flow.parser.yy.getEdges();
+
+      expect(vert['A'].id).toBe('A');
+      expect(vert['B'].id).toBe('B');
+      expect(edges.length).toBe(1);
+      expect(edges[0].start).toBe('A');
+      expect(edges[0].end).toBe('B');
+      expect(edges[0].type).toBe('double_arrow_circle');
+      expect(edges[0].text).toBe(`${keyword}`);
+      expect(edges[0].stroke).toBe('normal');
+      expect(edges[0].length).toBe(1);
+    });
+
     it('should handle double edged nodes and edges on thick arrows', function () {
       const res = flow.parser.parse('graph TD;\nA o==o B;');
 
@@ -212,6 +302,23 @@ describe('[Edges] when parsing', () => {
       expect(edges[0].length).toBe(1);
     });
 
+    it.each(keywords)('should handle thick double edged nodes with %s as text', function (keyword) {
+      const res = flow.parser.parse(`graph TD;\nA o== ${keyword} ==o B;`);
+
+      const vert = flow.parser.yy.getVertices();
+      const edges = flow.parser.yy.getEdges();
+
+      expect(vert['A'].id).toBe('A');
+      expect(vert['B'].id).toBe('B');
+      expect(edges.length).toBe(1);
+      expect(edges[0].start).toBe('A');
+      expect(edges[0].end).toBe('B');
+      expect(edges[0].type).toBe('double_arrow_circle');
+      expect(edges[0].text).toBe(`${keyword}`);
+      expect(edges[0].stroke).toBe('thick');
+      expect(edges[0].length).toBe(1);
+    });
+
     it('should handle double edged nodes and edges on dotted arrows', function () {
       const res = flow.parser.parse('graph TD;\nA o-.-o B;');
 
@@ -245,6 +352,26 @@ describe('[Edges] when parsing', () => {
       expect(edges[0].stroke).toBe('dotted');
       expect(edges[0].length).toBe(1);
     });
+
+    it.each(keywords)(
+      'should handle dotted double edged nodes with %s as text',
+      function (keyword) {
+        const res = flow.parser.parse(`graph TD;\nA o-. ${keyword} .-o B;`);
+
+        const vert = flow.parser.yy.getVertices();
+        const edges = flow.parser.yy.getEdges();
+
+        expect(vert['A'].id).toBe('A');
+        expect(vert['B'].id).toBe('B');
+        expect(edges.length).toBe(1);
+        expect(edges[0].start).toBe('A');
+        expect(edges[0].end).toBe('B');
+        expect(edges[0].type).toBe('double_arrow_circle');
+        expect(edges[0].text).toBe(`${keyword}`);
+        expect(edges[0].stroke).toBe('dotted');
+        expect(edges[0].length).toBe(1);
+      }
+    );
   });
 
   it('should handle multiple edges', function () {

From eea0ea5e07f622abed42252d1d5dc637288c8235 Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Fri, 21 Jul 2023 21:08:33 -0300
Subject: [PATCH 177/281] Add unit tests for node id strings with keywords

---
 .../flowchart/parser/flow-singlenode.spec.js  | 47 +++++++++++++++++++
 1 file changed, 47 insertions(+)

diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-singlenode.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-singlenode.spec.js
index b959f019e..6b6e93857 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-singlenode.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-singlenode.spec.js
@@ -6,6 +6,27 @@ setConfig({
   securityLevel: 'strict',
 });
 
+const keywords = [
+  'graph',
+  'flowchart',
+  'flowchart-elk',
+  'style',
+  'default',
+  'linkStyle',
+  'interpolate',
+  'classDef',
+  'class',
+  'href',
+  'call',
+  'click',
+  '_self',
+  '_blank',
+  '_parent',
+  '_top',
+  'end',
+  'subgraph',
+];
+
 describe('[Singlenodes] when parsing', () => {
   beforeEach(function () {
     flow.parser.yy = flowDb;
@@ -259,4 +280,30 @@ describe('[Singlenodes] when parsing', () => {
     expect(edges.length).toBe(0);
     expect(vert['i_d'].styles.length).toBe(0);
   });
+
+  it.each(keywords)('should handle keywords between dashes "-"', function (keyword) {
+    const res = flow.parser.parse(`graph TD;a-${keyword}-node;`);
+    const vert = flow.parser.yy.getVertices();
+    expect(vert[`a-${keyword}-node`].text).toBe(`a-${keyword}-node`);
+  });
+
+  it.each(keywords)('should handle keywords between periods "."', function (keyword) {
+    const res = flow.parser.parse(`graph TD;a.${keyword}.node;`);
+    const vert = flow.parser.yy.getVertices();
+    expect(vert[`a.${keyword}.node`].text).toBe(`a.${keyword}.node`);
+  });
+
+  it.each(keywords)('should handle keywords between underscores "_"', function (keyword) {
+    const res = flow.parser.parse(`graph TD;a_${keyword}_node;`);
+    const vert = flow.parser.yy.getVertices();
+    expect(vert[`a_${keyword}_node`].text).toBe(`a_${keyword}_node`);
+  });
+
+  it.each(keywords)('should handle nodes ending in keywords', function (keyword) {
+    const res = flow.parser.parse(`graph TD;node_${keyword};node.${keyword};node-${keyword};`);
+    const vert = flow.parser.yy.getVertices();
+    expect(vert[`node_${keyword}`].text).toBe(`node_${keyword}`);
+    expect(vert[`node.${keyword}`].text).toBe(`node.${keyword}`);
+    expect(vert[`node-${keyword}`].text).toBe(`node-${keyword}`);
+  });
 });

From 3ab0e9998d4a4e6cce3139bc1a5681092391d2ae Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Sat, 22 Jul 2023 14:39:45 -0300
Subject: [PATCH 178/281] Remove href state and give call higher precedence

Similar to what was done in the class diagram parser,
this will allow string tokens to appear in any state.
This is especially helpful, because it will simplify the
code and any future refactoring
---
 .../src/diagrams/flowchart/parser/flow.jison  | 75 +++++++++----------
 1 file changed, 37 insertions(+), 38 deletions(-)

diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
index 4ce12393b..0b34839a1 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
@@ -43,29 +43,6 @@ accDescr\s*"{"\s*                               { this.begin("acc_descr_multilin
 <acc_descr_multiline>[^\}]*                     return "acc_descr_multiline_value";
 // <acc_descr_multiline>.*[^\n]*                {  return "acc_descr_line"}
 
-<INITIAL,text,edgeText,dottedEdgeText,thickEdgeText>["][`]                  { this.begin("md_string");}
-<md_string>[^`"]+       { return "MD_STR";}
-<md_string>[`]["]       { this.popState();}
-<INITIAL,text,edgeText,dottedEdgeText,thickEdgeText>["]       this.pushState("string");
-<string>["]             this.popState();
-<string>[^"]+           return "STR";
-"style"                 return 'STYLE';
-"default"               return 'DEFAULT';
-"linkStyle"             return 'LINKSTYLE';
-"interpolate"           return 'INTERPOLATE';
-"classDef"              return 'CLASSDEF';
-"class"                 return 'CLASS';
-
-/*
----interactivity command---
-'href' adds a link to the specified node. 'href' can only be specified when the
-line was introduced with 'click'.
-'href "<link>"' attaches the specified link to the node that was specified by 'click'.
-*/
-"href"[\s]+["]          this.begin("href");
-<href>["]               this.popState();
-<href>[^"]*             return 'HREF';
-
 /*
 ---interactivity command---
 'call' adds a callback to the specified node. 'call' can only be specified when
@@ -81,6 +58,28 @@ Function arguments are optional: 'call <callbackname>()' simply executes 'callba
 <callbackargs>\)        this.popState();
 <callbackargs>[^)]*     return 'CALLBACKARGS';
 
+<md_string>[^`"]+       { return "MD_STR";}
+<md_string>[`]["]       { this.popState();}
+<*>["][`]                  { this.begin("md_string");}
+<string>["]             this.popState();
+<string>[^"]+           return "STR";
+<*>["]       this.pushState("string");
+"style"                 return 'STYLE';
+"default"               return 'DEFAULT';
+"linkStyle"             return 'LINKSTYLE';
+"interpolate"           return 'INTERPOLATE';
+"classDef"              return 'CLASSDEF';
+"class"                 return 'CLASS';
+
+/*
+---interactivity command---
+'href' adds a link to the specified node. 'href' can only be specified when the
+line was introduced with 'click'.
+'href "<link>"' attaches the specified link to the node that was specified by 'click'.
+*/
+"href"                  return 'HREF';
+
+
 /*
 'click' is the keyword to introduce a line that contains interactivity commands.
 'click' must be followed by an existing node-id. All commands are attached to
@@ -383,7 +382,7 @@ statement
 
 separator: NEWLINE | SEMI | EOF ;
 
- 
+
 verticeStatement: verticeStatement link node
         { /* console.warn('vs',$1.stmt,$3); */ yy.addLink($1.stmt,$3,$2); $$ = { stmt: $3, nodes: $3.concat($1.nodes) } }
     |  verticeStatement link node spaceList
@@ -506,20 +505,20 @@ classStatement:CLASS SPACE idString SPACE alphaNum
     ;
 
 clickStatement
-    : CLICK CALLBACKNAME                           {$$ = $1;yy.setClickEvent($1, $2);}
-    | CLICK CALLBACKNAME SPACE STR                 {$$ = $1;yy.setClickEvent($1, $2);yy.setTooltip($1, $4);}
-    | CLICK CALLBACKNAME CALLBACKARGS              {$$ = $1;yy.setClickEvent($1, $2, $3);}
-    | CLICK CALLBACKNAME CALLBACKARGS SPACE STR    {$$ = $1;yy.setClickEvent($1, $2, $3);yy.setTooltip($1, $5);}
-    | CLICK HREF                                   {$$ = $1;yy.setLink($1, $2);}
-    | CLICK HREF SPACE STR                         {$$ = $1;yy.setLink($1, $2);yy.setTooltip($1, $4);}
-    | CLICK HREF SPACE LINK_TARGET                 {$$ = $1;yy.setLink($1, $2, $4);}
-    | CLICK HREF SPACE STR SPACE LINK_TARGET       {$$ = $1;yy.setLink($1, $2, $6);yy.setTooltip($1, $4);}
-    | CLICK alphaNum                               {$$ = $1;yy.setClickEvent($1, $2);}
-    | CLICK alphaNum SPACE STR                     {$$ = $1;yy.setClickEvent($1, $2);yy.setTooltip($1, $4);}
-    | CLICK STR                                    {$$ = $1;yy.setLink($1, $2);}
-    | CLICK STR SPACE STR                          {$$ = $1;yy.setLink($1, $2);yy.setTooltip($1, $4);}
-    | CLICK STR SPACE LINK_TARGET                  {$$ = $1;yy.setLink($1, $2, $4);}
-    | CLICK STR SPACE STR SPACE LINK_TARGET        {$$ = $1;yy.setLink($1, $2, $6);yy.setTooltip($1, $4);}
+    : CLICK CALLBACKNAME                                    {$$ = $1;yy.setClickEvent($1, $2);}
+    | CLICK CALLBACKNAME SPACE STR                          {$$ = $1;yy.setClickEvent($1, $2);yy.setTooltip($1, $4);}
+    | CLICK CALLBACKNAME CALLBACKARGS                       {$$ = $1;yy.setClickEvent($1, $2, $3);}
+    | CLICK CALLBACKNAME CALLBACKARGS SPACE STR             {$$ = $1;yy.setClickEvent($1, $2, $3);yy.setTooltip($1, $5);}
+    | CLICK HREF SPACE STR                                  {$$ = $1;yy.setLink($1, $4);}
+    | CLICK HREF SPACE STR SPACE STR                        {$$ = $1;yy.setLink($1, $4);yy.setTooltip($1, $6);}
+    | CLICK HREF SPACE STR SPACE LINK_TARGET                {$$ = $1;yy.setLink($1, $4, $6);}
+    | CLICK HREF SPACE STR SPACE STR SPACE LINK_TARGET      {$$ = $1;yy.setLink($1, $4, $8);yy.setTooltip($1, $6);}
+    | CLICK alphaNum                                        {$$ = $1;yy.setClickEvent($1, $2);}
+    | CLICK alphaNum SPACE STR                              {$$ = $1;yy.setClickEvent($1, $2);yy.setTooltip($1, $4);}
+    | CLICK STR                                             {$$ = $1;yy.setLink($1, $2);}
+    | CLICK STR SPACE STR                                   {$$ = $1;yy.setLink($1, $2);yy.setTooltip($1, $4);}
+    | CLICK STR SPACE LINK_TARGET                           {$$ = $1;yy.setLink($1, $2, $4);}
+    | CLICK STR SPACE STR SPACE LINK_TARGET                 {$$ = $1;yy.setLink($1, $2, $6);yy.setTooltip($1, $4);}
     ;
 
 styleStatement:STYLE SPACE idString SPACE stylesOpt

From fd88b424b4d3094ed08d00d24e4e8d98967e141a Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Sat, 22 Jul 2023 15:09:24 -0300
Subject: [PATCH 179/281] Add unit test for vertex and edge having both strings
 and text

---
 .../src/diagrams/flowchart/parser/flow-text.spec.js  | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js
index a64f39ef0..922508e80 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js
@@ -690,4 +690,16 @@ describe('[Text] when parsing', () => {
     expect(vert['A'].text).toBe(',.?!+-*');
     expect(edges[0].text).toBe(',.?!+-*');
   });
+
+  it('should handle strings and text at the same time', function () {
+    const res = flow.parser.parse(
+      'graph TD;A(this node has "string" and text)-->|this link has "string" and text|C;'
+    );
+
+    const vert = flow.parser.yy.getVertices();
+    const edges = flow.parser.yy.getEdges();
+
+    expect(vert['A'].text).toBe('this node has "string" and text');
+    expect(edges[0].text).toBe('this link has "string" and text');
+  });
 });

From 60cf043c3d2c10a7f0bc048272a4fa3e36cc17b6 Mon Sep 17 00:00:00 2001
From: Brian Graham <379322+Incognito@users.noreply.github.com>
Date: Sun, 23 Jul 2023 08:27:54 +0200
Subject: [PATCH 180/281] Corrects name of C4 link

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

diff --git a/packages/mermaid/src/docs/.vitepress/config.ts b/packages/mermaid/src/docs/.vitepress/config.ts
index 8fceb810b..054b57ae3 100644
--- a/packages/mermaid/src/docs/.vitepress/config.ts
+++ b/packages/mermaid/src/docs/.vitepress/config.ts
@@ -134,7 +134,7 @@ function sidebarSyntax() {
         { text: 'Quadrant Chart', link: '/syntax/quadrantChart' },
         { text: 'Requirement Diagram', link: '/syntax/requirementDiagram' },
         { text: 'Gitgraph (Git) Diagram 🔥', link: '/syntax/gitgraph' },
-        { text: 'C4C Diagram (Context) Diagram 🦺⚠️', link: '/syntax/c4c' },
+        { text: 'C4 Diagram 🦺⚠️', link: '/syntax/c4c' },
         { text: 'Mindmaps 🔥', link: '/syntax/mindmap' },
         { text: 'Timeline 🔥', link: '/syntax/timeline' },
         { text: 'Zenuml 🔥', link: '/syntax/zenuml' },

From e4699ef02a4c2b7d6bc01ca8028d59d8018d357e Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Mon, 24 Jul 2023 00:18:49 +0000
Subject: [PATCH 181/281] chore(deps): update all patch dependencies

---
 docker-compose.yml                     |  2 +-
 package.json                           |  2 +-
 packages/mermaid/src/docs/package.json |  2 +-
 pnpm-lock.yaml                         | 84 +++++++++++++++++---------
 4 files changed, 57 insertions(+), 33 deletions(-)

diff --git a/docker-compose.yml b/docker-compose.yml
index 1037b5102..c6c6d8885 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -17,7 +17,7 @@ services:
       - 9000:9000
       - 3333:3333
   cypress:
-    image: cypress/included:12.17.1
+    image: cypress/included:12.17.2
     stdin_open: true
     tty: true
     working_dir: /mermaid
diff --git a/package.json b/package.json
index 9cbdcdb1e..3b6362836 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "version": "10.2.4",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "type": "module",
-  "packageManager": "pnpm@8.6.7",
+  "packageManager": "pnpm@8.6.10",
   "keywords": [
     "diagram",
     "markdown",
diff --git a/packages/mermaid/src/docs/package.json b/packages/mermaid/src/docs/package.json
index 4529a7622..64f24fe50 100644
--- a/packages/mermaid/src/docs/package.json
+++ b/packages/mermaid/src/docs/package.json
@@ -31,7 +31,7 @@
     "unplugin-vue-components": "^0.25.0",
     "vite": "^4.3.3",
     "vite-plugin-pwa": "^0.16.0",
-    "vitepress": "1.0.0-beta.5",
+    "vitepress": "1.0.0-beta.6",
     "workbox-window": "^7.0.0"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index db8f628cf..9f37261f6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -466,8 +466,8 @@ importers:
         specifier: ^0.16.0
         version: 0.16.0(vite@4.3.3)(workbox-build@7.0.0)(workbox-window@7.0.0)
       vitepress:
-        specifier: 1.0.0-beta.5
-        version: 1.0.0-beta.5(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0)
+        specifier: 1.0.0-beta.6
+        version: 1.0.0-beta.6(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0)
       workbox-window:
         specifier: ^7.0.0
         version: 7.0.0
@@ -3833,7 +3833,7 @@ packages:
     engines: {node: '>=6.0.0'}
     dependencies:
       '@jridgewell/set-array': 1.1.2
-      '@jridgewell/sourcemap-codec': 1.4.14
+      '@jridgewell/sourcemap-codec': 1.4.15
       '@jridgewell/trace-mapping': 0.3.17
 
   /@jridgewell/resolve-uri@3.1.0:
@@ -3856,7 +3856,6 @@ packages:
 
   /@jridgewell/sourcemap-codec@1.4.15:
     resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
-    dev: true
 
   /@jridgewell/trace-mapping@0.3.17:
     resolution: {integrity: sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==}
@@ -3868,7 +3867,7 @@ packages:
     resolution: {integrity: sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==}
     dependencies:
       '@jridgewell/resolve-uri': 3.1.0
-      '@jridgewell/sourcemap-codec': 1.4.14
+      '@jridgewell/sourcemap-codec': 1.4.15
 
   /@jsdevtools/ono@7.1.3:
     resolution: {integrity: sha512-4JQNk+3mVzK3xh2rqd6RB4J46qUR19azEHBneZyTZM+c456qOrbbM/5xcR8huNCCcbVt7+UmizG6GuUvPvKUYg==}
@@ -4981,7 +4980,7 @@ packages:
       colorette: 2.0.20
       consola: 3.1.0
       fast-glob: 3.2.12
-      magic-string: 0.30.0
+      magic-string: 0.30.1
       pathe: 1.1.1
       perfect-debounce: 1.0.0
     transitivePeerDependencies:
@@ -5023,7 +5022,7 @@ packages:
       '@unocss/core': 0.53.0
       css-tree: 2.3.1
       fast-glob: 3.2.12
-      magic-string: 0.30.0
+      magic-string: 0.30.1
       postcss: 8.4.24
     dev: true
 
@@ -5138,7 +5137,7 @@ packages:
       '@unocss/transformer-directives': 0.53.0
       chokidar: 3.5.3
       fast-glob: 3.2.12
-      magic-string: 0.30.0
+      magic-string: 0.30.1
       vite: 4.3.3(@types/node@18.16.0)
     transitivePeerDependencies:
       - rollup
@@ -5174,14 +5173,14 @@ packages:
       vue: 3.3.4
     dev: true
 
-  /@vitejs/plugin-vue@4.2.3(vite@4.4.0-beta.3)(vue@3.3.4):
+  /@vitejs/plugin-vue@4.2.3(vite@4.4.6)(vue@3.3.4):
     resolution: {integrity: sha512-R6JDUfiZbJA9cMiguQ7jxALsgiprjBeHL5ikpXfJCH62pPHtI+JdJ5xWj6Ev73yXSlYl86+blXn1kZHQ7uElxw==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
       vite: ^4.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 4.4.0-beta.3(@types/node@18.16.0)
+      vite: 4.4.6(@types/node@18.16.0)
       vue: 3.3.4
     dev: true
 
@@ -5322,7 +5321,7 @@ packages:
       '@vue/reactivity-transform': 3.3.4
       '@vue/shared': 3.3.4
       estree-walker: 2.0.2
-      magic-string: 0.30.0
+      magic-string: 0.30.1
       postcss: 8.4.24
       source-map-js: 1.0.2
 
@@ -5357,7 +5356,7 @@ packages:
       '@vue/compiler-core': 3.3.4
       '@vue/shared': 3.3.4
       estree-walker: 2.0.2
-      magic-string: 0.30.0
+      magic-string: 0.30.1
 
   /@vue/reactivity@3.2.47:
     resolution: {integrity: sha512-7khqQ/75oyyg+N/e+iwV6lpy1f5wq759NdlS1fpAhFXa8VeAIKGgk2E/C4VF59lx5b+Ezs5fpp/5WsRYXQiKxQ==}
@@ -5455,7 +5454,7 @@ packages:
       - vue
     dev: true
 
-  /@vueuse/integrations@10.2.1(focus-trap@7.4.3)(vue@3.3.4):
+  /@vueuse/integrations@10.2.1(focus-trap@7.5.2)(vue@3.3.4):
     resolution: {integrity: sha512-FDP5lni+z9FjHE9H3xuvwSjoRV9U8jmDvJpmHPCBjUgPGYRynwb60eHWXCFJXLUtb4gSIHy0e+iaEbrKdalCkQ==}
     peerDependencies:
       async-validator: '*'
@@ -5498,7 +5497,7 @@ packages:
     dependencies:
       '@vueuse/core': 10.2.1(vue@3.3.4)
       '@vueuse/shared': 10.2.1(vue@3.3.4)
-      focus-trap: 7.4.3
+      focus-trap: 7.5.2
       vue-demi: 0.14.5(vue@3.3.4)
     transitivePeerDependencies:
       - '@vue/composition-api'
@@ -5520,7 +5519,7 @@ packages:
   /@vueuse/shared@10.1.0(vue@3.2.47):
     resolution: {integrity: sha512-2X52ogu12i9DkKOQ01yeb/BKg9UO87RNnpm5sXkQvyORlbq8ONS5l39MYkjkeVWWjdT0teJru7a2S41dmHmqjQ==}
     dependencies:
-      vue-demi: 0.14.0(vue@3.2.47)
+      vue-demi: 0.14.5(vue@3.2.47)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -5955,6 +5954,7 @@ packages:
   /amdefine@1.0.1:
     resolution: {integrity: sha512-S2Hw0TtNkMJhIabBwIojKL9YHO5T0n5eNqWJ7Lrlel/zDbftQpxpapi8tZs3X1HWa+u+QeydGmzzNU0m09+Rcg==}
     engines: {node: '>=0.4.2'}
+    requiresBuild: true
     dev: true
     optional: true
 
@@ -9173,10 +9173,10 @@ packages:
     resolution: {integrity: sha512-XGozTsMPYkm+6b5QL3Z9wQcJjNYxp0CYn3U1gO7dwD6PAqU1SVWZxI9CCg3z+ml3YfqdPnrBehaBrnH2AGKbNA==}
     dev: true
 
-  /focus-trap@7.4.3:
-    resolution: {integrity: sha512-BgSSbK4GPnS2VbtZ50VtOv1Sti6DIkj3+LkVjiWMNjLeAp1SH1UlLx3ULu/DCu4vq5R4/uvTm+zrvsMsuYmGLg==}
+  /focus-trap@7.5.2:
+    resolution: {integrity: sha512-p6vGNNWLDGwJCiEjkSK6oERj/hEyI9ITsSwIUICBoKLlWiTWXJRfQibCwcoi50rTZdbi87qDtUlMCmQwsGSgPw==}
     dependencies:
-      tabbable: 6.1.2
+      tabbable: 6.2.0
     dev: true
 
   /follow-redirects@1.15.2(debug@4.3.4):
@@ -11479,13 +11479,13 @@ packages:
     engines: {node: '>=12'}
     dependencies:
       '@jridgewell/sourcemap-codec': 1.4.14
+    dev: true
 
   /magic-string@0.30.1:
     resolution: {integrity: sha512-mbVKXPmS0z0G4XqFDCTllmDQ6coZzn94aMlb0o/A4HEHJCKcanlDZwYJgwnkmgD3jyWhUgj9VsPrfd972yPffA==}
     engines: {node: '>=12'}
     dependencies:
       '@jridgewell/sourcemap-codec': 1.4.15
-    dev: true
 
   /make-dir@3.1.0:
     resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==}
@@ -12973,6 +12973,15 @@ packages:
       picocolors: 1.0.0
       source-map-js: 1.0.2
 
+  /postcss@8.4.27:
+    resolution: {integrity: sha512-gY/ACJtJPSmUFPDCHtX78+01fHa64FaU4zaaWfuh1MhGJISufJAH4cun6k/8fwsHYeK4UQmENQK+tRLCFJE8JQ==}
+    engines: {node: ^10 || ^12 || >=14}
+    dependencies:
+      nanoid: 3.3.6
+      picocolors: 1.0.0
+      source-map-js: 1.0.2
+    dev: true
+
   /preact@10.11.0:
     resolution: {integrity: sha512-Fk6+vB2kb6mSJfDgODq0YDhMfl0HNtK5+Uc9QqECO4nlyPAQwCI+BKyWO//idA7ikV7o+0Fm6LQmNuQi1wXI1w==}
     dev: true
@@ -14394,8 +14403,8 @@ packages:
       tslib: 2.5.0
     dev: true
 
-  /tabbable@6.1.2:
-    resolution: {integrity: sha512-qCN98uP7i9z0fIS4amQ5zbGBOq+OSigYeGvPy7NDk8Y9yncqDZ9pRPgfsc2PJIVM9RrJj7GIfuRgmjoUU9zTHQ==}
+  /tabbable@6.2.0:
+    resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
     dev: true
 
   /tailwindcss@3.3.2(ts-node@10.9.1):
@@ -15405,8 +15414,8 @@ packages:
       fsevents: 2.3.2
     dev: true
 
-  /vite@4.4.0-beta.3(@types/node@18.16.0):
-    resolution: {integrity: sha512-IC/thYTvArOFRJ4qvvudnu4KKZOVc+gduS3I9OfC5SbP/Rf4kkP7z6Of2QpKeOSVqwIK24khW6VOUmVD/0yzSQ==}
+  /vite@4.4.6(@types/node@18.16.0):
+    resolution: {integrity: sha512-EY6Mm8vJ++S3D4tNAckaZfw3JwG3wa794Vt70M6cNJ6NxT87yhq7EC8Rcap3ahyHdo8AhCmV9PTk+vG1HiYn1A==}
     engines: {node: ^14.18.0 || >=16.0.0}
     hasBin: true
     peerDependencies:
@@ -15435,7 +15444,7 @@ packages:
     dependencies:
       '@types/node': 18.16.0
       esbuild: 0.18.11
-      postcss: 8.4.24
+      postcss: 8.4.27
       rollup: 3.26.0
     optionalDependencies:
       fsevents: 2.3.2
@@ -15487,22 +15496,22 @@ packages:
       - terser
     dev: true
 
-  /vitepress@1.0.0-beta.5(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0):
-    resolution: {integrity: sha512-/RjqqRsSEKkzF6HhK5e5Ij+bZ7ETb9jNCRRgIMm10gJ+ZLC3D1OqkE465lEqCeJUgt2HZ6jmWjDqIBfrJSpv7w==}
+  /vitepress@1.0.0-beta.6(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0):
+    resolution: {integrity: sha512-xK/ulKgQpKZVbvlL4+/vW49VG7ySi5nmSoKUNH1G4kM+Cj9JwYM+PDJO7jSJROv8zW99G0ise+maDYnaLlbGBQ==}
     hasBin: true
     dependencies:
       '@docsearch/css': 3.5.1
       '@docsearch/js': 3.5.1(@algolia/client-search@4.14.2)(search-insights@2.6.0)
-      '@vitejs/plugin-vue': 4.2.3(vite@4.4.0-beta.3)(vue@3.3.4)
+      '@vitejs/plugin-vue': 4.2.3(vite@4.4.6)(vue@3.3.4)
       '@vue/devtools-api': 6.5.0
       '@vueuse/core': 10.2.1(vue@3.3.4)
-      '@vueuse/integrations': 10.2.1(focus-trap@7.4.3)(vue@3.3.4)
+      '@vueuse/integrations': 10.2.1(focus-trap@7.5.2)(vue@3.3.4)
       body-scroll-lock: 4.0.0-beta.0
-      focus-trap: 7.4.3
+      focus-trap: 7.5.2
       mark.js: 8.11.1
       minisearch: 6.1.0
       shiki: 0.14.3
-      vite: 4.4.0-beta.3(@types/node@18.16.0)
+      vite: 4.4.6(@types/node@18.16.0)
       vue: 3.3.4
     transitivePeerDependencies:
       - '@algolia/client-search'
@@ -15654,6 +15663,21 @@ packages:
       vue: 3.2.47
     dev: false
 
+  /vue-demi@0.14.5(vue@3.2.47):
+    resolution: {integrity: sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+    dependencies:
+      vue: 3.2.47
+    dev: false
+
   /vue-demi@0.14.5(vue@3.3.4):
     resolution: {integrity: sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==}
     engines: {node: '>=12'}

From 45400240d40198032775cf73eacfc622e5be2116 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Mon, 24 Jul 2023 00:19:12 +0000
Subject: [PATCH 182/281] chore(deps): update all minor dependencies

---
 docker-compose.yml | 2 +-
 package.json       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docker-compose.yml b/docker-compose.yml
index 1037b5102..2d08e050e 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,7 +1,7 @@
 version: '3.9'
 services:
   mermaid:
-    image: node:18.16.1-alpine3.18
+    image: node:18.17.0-alpine3.18
     stdin_open: true
     tty: true
     working_dir: /mermaid
diff --git a/package.json b/package.json
index 9cbdcdb1e..d6cd3cef6 100644
--- a/package.json
+++ b/package.json
@@ -122,7 +122,7 @@
     "vitest": "^0.33.0"
   },
   "volta": {
-    "node": "18.16.1"
+    "node": "18.17.0"
   },
   "nyc": {
     "report-dir": "coverage/cypress"

From 4b9773a272b5c1eb1d5f2381640393a6698aa1da Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Sun, 23 Jul 2023 21:25:19 -0300
Subject: [PATCH 183/281] Refactor token precedence that concern vertex text
 states

---
 .../src/diagrams/flowchart/parser/flow.jison  | 25 +++++++++++--------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
index 0b34839a1..80214cbff 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
@@ -142,29 +142,31 @@ that id.
 
 <*>\s*\~\~[\~]+\s*              return 'LINK';
 
-<*>"(-"                         { this.pushState("ellipseText"); return '(-'; }
 <ellipseText>[-/\)][\)]         { this.popState(); return '-)'; }
 <ellipseText>[^/)]|-/!\)+       return "TEXT"
+<*>"(-"                         { this.pushState("ellipseText"); return '(-'; }
 
-"(["                   { this.pushState("text"); return 'STADIUMSTART'; }
 <text>"])"                { this.popState(); return 'STADIUMEND'; }
+<*>"(["                   { this.pushState("text"); return 'STADIUMSTART'; }
 
-"[["                   { this.pushState("text"); return 'SUBROUTINESTART'; }
 <text>"]]"                { this.popState(); return 'SUBROUTINEEND'; }
+<*>"[["                   { this.pushState("text"); return 'SUBROUTINESTART'; }
 
 "[|"                      { return 'VERTEX_WITH_PROPS_START'; }
 
 \>/!\s                    { this.pushState("text"); return 'TAGEND'; }
-<*>"[("                   { this.pushState("text") ;return 'CYLINDERSTART'; }
+
 <text>")]"                { this.popState(); return 'CYLINDEREND'; }
+<*>"[("                   { this.pushState("text") ;return 'CYLINDERSTART'; }
 
-<*>"((("                  { this.pushState("text"); return 'DOUBLECIRCLESTART'; }
 <text>")))"               { this.popState(); return 'DOUBLECIRCLEEND'; }
+<*>"((("                  { this.pushState("text"); return 'DOUBLECIRCLESTART'; }
 
-<*>"[/"                   { this.pushState("trapText"); return 'TRAPSTART'; }
 <trapText>[\\(?=\])][\]]  { this.popState(); return 'TRAPEND'; }
 <trapText>\/(?=\])\]     { this.popState(); return 'INVTRAPEND'; }
 <trapText>\/(?!\])|\\(?!\])|[^\\\]\/]+        return 'TEXT';
+<*>"[/"                   { this.pushState("trapText"); return 'TRAPSTART'; }
+
 <*>"[\\"                 { this.pushState("trapText"); return 'INVTRAPSTART'; }
 
 
@@ -240,13 +242,16 @@ that id.
 
 <text>"|"             { this.popState(); return 'PIPE'; }
 <*>"|"                { this.pushState("text"); return 'PIPE'; }
-<*>"("                { this.pushState("text"); return 'PS'; }
+
 <text>")"             { this.popState(); return 'PE'; }
+<*>"("                { this.pushState("text"); return 'PS'; }
+
+<text>"]"            { this.popState(); return 'SQE'; }
 <*>"["                { this.pushState("text"); return 'SQS'; }
-<text>(\])            { this.popState(); return 'SQE'; }
-<*>"{"                { this.pushState("text"); return 'DIAMOND_START' }
+
 <text>(\})            { this.popState(); return 'DIAMOND_STOP' }
-<text>[^\]\)\}\|]+    return "TEXT";
+<*>"{"                { this.pushState("text"); return 'DIAMOND_START' }
+<text>[^\]\)\}\|\"]+    return "TEXT";
 
 "\""                  return 'QUOTE';
 (\r?\n)+              return 'NEWLINE';

From fa8e02721a02ebbf61544ce21fe7521b656def0f Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Sun, 23 Jul 2023 21:32:52 -0300
Subject: [PATCH 184/281] Refactor directive grammar to use name instead of
 position in production

---
 .../src/diagrams/flowchart/parser/flow.jison  | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
index 80214cbff..d077c734f 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
@@ -283,11 +283,11 @@ openDirective
   ;
 
 typeDirective
-  : type_directive { yy.parseDirective($1, 'type_directive'); }
+  : type_directive { yy.parseDirective($type_directive, 'type_directive'); }
   ;
 
 argDirective
-  : arg_directive { $1 = $1.trim().replace(/'/g, '"'); yy.parseDirective($1, 'arg_directive'); }
+  : arg_directive { $arg_directive = $arg_directive.trim().replace(/'/g, '"'); yy.parseDirective($arg_directive, 'arg_directive'); }
   ;
 
 closeDirective
@@ -303,15 +303,15 @@ document
 	{ $$ = [];}
 	| document line
 	{
-	    if(!Array.isArray($2) || $2.length > 0){
-	        $1.push($2);
+	    if(!Array.isArray($line) || $line.length > 0){
+	        $document.push($line);
 	    }
-	    $$=$1;}
+	    $$=$document;}
 	;
 
 line
 	: statement
-	{$$=$1;}
+	{$$=$statement;}
 	| SEMI
 	| NEWLINE
 	| SPACE
@@ -324,15 +324,15 @@ graphConfig
     | GRAPH NODIR
         { yy.setDirection('TB');$$ = 'TB';}
     | GRAPH DIR FirstStmtSeperator
-        { yy.setDirection($2);$$ = $2;}
+        { yy.setDirection($DIR);$$ = $DIR;}
     // | GRAPH SPACE TAGEND FirstStmtSeperator
-    //     { yy.setDirection("LR");$$ = $3;}
+    //     { yy.setDirection("LR");$$ = $TAGEND;}
     // | GRAPH SPACE TAGSTART FirstStmtSeperator
-    //     { yy.setDirection("RL");$$ = $3;}
+    //     { yy.setDirection("RL");$$ = $TAGSTART;}
     // | GRAPH SPACE UP FirstStmtSeperator
-    //     { yy.setDirection("BT");$$ = $3;}
+    //     { yy.setDirection("BT");$$ = $UP;}
     // | GRAPH SPACE DOWN FirstStmtSeperator
-    //     { yy.setDirection("TB");$$ = $3;}
+    //     { yy.setDirection("TB");$$ = $DOWN;}
     ;
 
 ending: endToken ending

From 087738df783f8744544678dcd8c69b7a2aca1b67 Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Sun, 23 Jul 2023 21:39:21 -0300
Subject: [PATCH 185/281] Refactor statement grammars to use name values
 instead of positions in production

---
 .../src/diagrams/flowchart/parser/flow.jison  | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
index d077c734f..e4466bc5d 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
@@ -360,7 +360,7 @@ spaceList
 
 statement
     : verticeStatement separator
-    { /* console.warn('finat vs', $1.nodes); */ $$=$1.nodes}
+    { /* console.warn('finat vs', $verticeStatement.nodes); */ $$=$verticeStatement.nodes}
     | styleStatement separator
     {$$=[];}
     | linkStyleStatement separator
@@ -372,28 +372,28 @@ statement
     | clickStatement separator
     {$$=[];}
     | subgraph SPACE textNoTags SQS text SQE separator document end
-    {$$=yy.addSubGraph($3,$8,$5);}
+    {$$=yy.addSubGraph($textNoTags,$document,$text);}
     | subgraph SPACE textNoTags separator document end
-    {$$=yy.addSubGraph($3,$5,$3);}
+    {$$=yy.addSubGraph($textNoTags,$document,$textNoTags);}
     // | subgraph SPACE textNoTags separator document end
-    // {$$=yy.addSubGraph($3,$5,$3);}
+    // {$$=yy.addSubGraph($textNoTags,$document,$textNoTags);}
     | subgraph separator document end
-    {$$=yy.addSubGraph(undefined,$3,undefined);}
+    {$$=yy.addSubGraph(undefined,$document,undefined);}
     | direction
-    | acc_title acc_title_value  { $$=$2.trim();yy.setAccTitle($$); }
-    | acc_descr acc_descr_value  { $$=$2.trim();yy.setAccDescription($$); }
-    | acc_descr_multiline_value { $$=$1.trim();yy.setAccDescription($$); }
+    | acc_title acc_title_value  { $$=$acc_title_value.trim();yy.setAccTitle($$); }
+    | acc_descr acc_descr_value  { $$=$acc_descr_value.trim();yy.setAccDescription($$); }
+    | acc_descr_multiline_value { $$=$acc_descr_multiline_value.trim();yy.setAccDescription($$); }
     ;
 
 separator: NEWLINE | SEMI | EOF ;
 
 
 verticeStatement: verticeStatement link node
-        { /* console.warn('vs',$1.stmt,$3); */ yy.addLink($1.stmt,$3,$2); $$ = { stmt: $3, nodes: $3.concat($1.nodes) } }
+        { /* console.warn('vs',$verticeStatement.stmt,$node); */ yy.addLink($verticeStatement.stmt,$node,$link); $$ = { stmt: $node, nodes: $node.concat($verticeStatement.nodes) } }
     |  verticeStatement link node spaceList
-        { /* console.warn('vs',$1.stmt,$3); */ yy.addLink($1.stmt,$3,$2); $$ = { stmt: $3, nodes: $3.concat($1.nodes) } }
-    |node spaceList {/*console.warn('noda', $1);*/ $$ = {stmt: $1, nodes:$1 }}
-    |node { /*console.warn('noda', $1);*/ $$ = {stmt: $1, nodes:$1 }}
+        { /* console.warn('vs',$verticeStatement.stmt,$node); */ yy.addLink($verticeStatement.stmt,$node,$link); $$ = { stmt: $node, nodes: $node.concat($verticeStatement.nodes) } }
+    |node spaceList {/*console.warn('noda', $node);*/ $$ = {stmt: $node, nodes:$node }}
+    |node { /*console.warn('noda', $node);*/ $$ = {stmt: $node, nodes:$node }}
     ;
 
 node: styledVertex

From 474e0b9c8292c6322847192ce16148999ae1e7d6 Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Sun, 23 Jul 2023 21:54:42 -0300
Subject: [PATCH 186/281] Refactor vertex grammars to use name values instead
 of position in production

---
 packages/mermaid/src/diagram.spec.ts          |  2 +-
 .../src/diagrams/flowchart/parser/flow.jison  | 44 +++++++++----------
 2 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/packages/mermaid/src/diagram.spec.ts b/packages/mermaid/src/diagram.spec.ts
index 6bbc057e3..75a9e2d2c 100644
--- a/packages/mermaid/src/diagram.spec.ts
+++ b/packages/mermaid/src/diagram.spec.ts
@@ -49,7 +49,7 @@ describe('diagram detection', () => {
       "Parse error on line 2:
       graph TD; A-->
       --------------^
-      Expecting 'NODE_STRING', 'COLON', 'PIPE', 'TESTSTR', 'DOWN', 'DEFAULT', 'NUM', 'COMMA', 'MINUS', got 'EOF'"
+      Expecting 'COLON', 'PIPE', 'TESTSTR', 'DOWN', 'DEFAULT', 'NUM', 'COMMA', 'NODE_STRING', 'MINUS', got 'EOF'"
     `);
     await expect(getDiagramFromText('sequenceDiagram; A-->B')).rejects
       .toThrowErrorMatchingInlineSnapshot(`
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
index e4466bc5d..90c935542 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
@@ -397,51 +397,51 @@ verticeStatement: verticeStatement link node
     ;
 
 node: styledVertex
-        { /* console.warn('nod', $1); */ $$ = [$1];}
+        { /* console.warn('nod', $styledVertex); */ $$ = [$styledVertex];}
     | node spaceList AMP spaceList styledVertex
-        { $$ = $1.concat($5); /* console.warn('pip', $1[0], $5, $$); */ }
+        { $$ = $node.concat($styledVertex); /* console.warn('pip', $node[0], $styledVertex, $$); */ }
     ;
 
 styledVertex: vertex
-        { /* console.warn('nod', $1); */ $$ = $1;}
+        { /* console.warn('nod', $vertex); */ $$ = $vertex;}
     | vertex STYLE_SEPARATOR idString
-        {$$ = $1;yy.setClass($1,$3)}
+        {$$ = $vertex;yy.setClass($vertex,$idString)}
     ;
 
 vertex:  idString SQS text SQE
-        {$$ = $1;yy.addVertex($1,$3,'square');}
+        {$$ = $idString;yy.addVertex($idString,$text,'square');}
     | idString DOUBLECIRCLESTART text DOUBLECIRCLEEND
-        {$$ = $1;yy.addVertex($1,$3,'doublecircle');}
+        {$$ = $idString;yy.addVertex($idString,$text,'doublecircle');}
     | idString PS PS text PE PE
-        {$$ = $1;yy.addVertex($1,$4,'circle');}
+        {$$ = $idString;yy.addVertex($idString,$text,'circle');}
     | idString '(-' text '-)'
-        {$$ = $1;yy.addVertex($1,$3,'ellipse');}
+        {$$ = $idString;yy.addVertex($idString,$text,'ellipse');}
     | idString STADIUMSTART text STADIUMEND
-        {$$ = $1;yy.addVertex($1,$3,'stadium');}
+        {$$ = $idString;yy.addVertex($idString,$text,'stadium');}
     | idString SUBROUTINESTART text SUBROUTINEEND
-        {$$ = $1;yy.addVertex($1,$3,'subroutine');}
-    | idString VERTEX_WITH_PROPS_START NODE_STRING COLON NODE_STRING PIPE text SQE
-        {$$ = $1;yy.addVertex($1,$7,'rect',undefined,undefined,undefined, Object.fromEntries([[$3, $5]]));}
+        {$$ = $idString;yy.addVertex($idString,$text,'subroutine');}
+    | idString VERTEX_WITH_PROPS_START NODE_STRING\[field] COLON NODE_STRING\[value] PIPE text SQE
+        {$$ = $idString;yy.addVertex($idString,$text,'rect',undefined,undefined,undefined, Object.fromEntries([[$field, $value]]));}
     | idString CYLINDERSTART text CYLINDEREND
-        {$$ = $1;yy.addVertex($1,$3,'cylinder');}
+        {$$ = $idString;yy.addVertex($idString,$text,'cylinder');}
     | idString PS text PE
-        {$$ = $1;yy.addVertex($1,$3,'round');}
+        {$$ = $idString;yy.addVertex($idString,$text,'round');}
     | idString DIAMOND_START text DIAMOND_STOP
-        {$$ = $1;yy.addVertex($1,$3,'diamond');}
+        {$$ = $idString;yy.addVertex($idString,$text,'diamond');}
     | idString DIAMOND_START DIAMOND_START text DIAMOND_STOP DIAMOND_STOP
-        {$$ = $1;yy.addVertex($1,$4,'hexagon');}
+        {$$ = $idString;yy.addVertex($idString,$text,'hexagon');}
     | idString TAGEND text SQE
-        {$$ = $1;yy.addVertex($1,$3,'odd');}
+        {$$ = $idString;yy.addVertex($idString,$text,'odd');}
     | idString TRAPSTART text TRAPEND
-        {$$ = $1;yy.addVertex($1,$3,'trapezoid');}
+        {$$ = $idString;yy.addVertex($idString,$text,'trapezoid');}
     | idString INVTRAPSTART text INVTRAPEND
-        {$$ = $1;yy.addVertex($1,$3,'inv_trapezoid');}
+        {$$ = $idString;yy.addVertex($idString,$text,'inv_trapezoid');}
     | idString TRAPSTART text INVTRAPEND
-        {$$ = $1;yy.addVertex($1,$3,'lean_right');}
+        {$$ = $idString;yy.addVertex($idString,$text,'lean_right');}
     | idString INVTRAPSTART text TRAPEND
-        {$$ = $1;yy.addVertex($1,$3,'lean_left');}
+        {$$ = $idString;yy.addVertex($idString,$text,'lean_left');}
     | idString
-        { /*console.warn('h: ', $1);*/$$ = $1;yy.addVertex($1);}
+        { /*console.warn('h: ', $idString);*/$$ = $idString;yy.addVertex($idString);}
     ;
 
 

From 3e3e784fd90e807d32ae10cb0d9e472e26cb22c6 Mon Sep 17 00:00:00 2001
From: kgilbert78 <kgilbert78@gmail.com>
Date: Mon, 24 Jul 2023 13:24:33 -0400
Subject: [PATCH 187/281] added Typora to integrations list

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

diff --git a/cSpell.json b/cSpell.json
index abcfa0383..af7a9ca46 100644
--- a/cSpell.json
+++ b/cSpell.json
@@ -136,6 +136,7 @@
     "tsdoc",
     "tuleap",
     "tylerlong",
+    "typora",
     "ugge",
     "unist",
     "unocss",
diff --git a/docs/ecosystem/integrations.md b/docs/ecosystem/integrations.md
index 896a23c56..c0e8f96c8 100644
--- a/docs/ecosystem/integrations.md
+++ b/docs/ecosystem/integrations.md
@@ -187,6 +187,7 @@ They also serve as proof of concept, for the variety of things that can be built
 - [mdbook](https://rust-lang.github.io/mdBook/index.html)
   - [mdbook-mermaid](https://github.com/badboy/mdbook-mermaid)
 - [Quarto](https://quarto.org/)
+- [Typora](https://typora.io/) ([Native support](https://support.typora.io/Draw-Diagrams-With-Markdown/#mermaid))
 
 ## Browser Extensions
 
diff --git a/packages/mermaid/src/docs/ecosystem/integrations.md b/packages/mermaid/src/docs/ecosystem/integrations.md
index e64cf1a13..4935fc96a 100644
--- a/packages/mermaid/src/docs/ecosystem/integrations.md
+++ b/packages/mermaid/src/docs/ecosystem/integrations.md
@@ -181,6 +181,7 @@ They also serve as proof of concept, for the variety of things that can be built
 - [mdbook](https://rust-lang.github.io/mdBook/index.html)
   - [mdbook-mermaid](https://github.com/badboy/mdbook-mermaid)
 - [Quarto](https://quarto.org/)
+- [Typora](https://typora.io/) ([Native support](https://support.typora.io/Draw-Diagrams-With-Markdown/#mermaid))
 
 ## Browser Extensions
 

From 45d92769aa4cbcd41685a6e2394682add487e197 Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Mon, 24 Jul 2023 21:04:36 -0300
Subject: [PATCH 188/281] Change rest of grammar statements to use variable
 name instead of position

---
 .../src/diagrams/flowchart/parser/flow.jison  | 102 +++++++++---------
 1 file changed, 51 insertions(+), 51 deletions(-)

diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
index 90c935542..1f5050117 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
@@ -447,41 +447,41 @@ vertex:  idString SQS text SQE
 
 
 link: linkStatement arrowText
-    {$1.text = $2;$$ = $1;}
+    {$linkStatement.text = $arrowText;$$ = $linkStatement;}
     | linkStatement TESTSTR SPACE
-    {$1.text = $2;$$ = $1;}
+    {$linkStatement.text = $TESTSTR;$$ = $linkStatement;}
     | linkStatement arrowText SPACE
-    {$1.text = $2;$$ = $1;}
+    {$linkStatement.text = $arrowText;$$ = $linkStatement;}
     | linkStatement
-    {$$ = $1;}
+    {$$ = $linkStatement;}
     | START_LINK edgeText LINK
-        {var inf = yy.destructLink($3, $1); $$ = {"type":inf.type,"stroke":inf.stroke,"length":inf.length,"text":$2};}
+        {var inf = yy.destructLink($LINK, $START_LINK); $$ = {"type":inf.type,"stroke":inf.stroke,"length":inf.length,"text":$edgeText};}
     ;
 
 edgeText: edgeTextToken
-    {$$={text:$1, type:'text'};}
+    {$$={text:$edgeTextToken, type:'text'};}
     | edgeText edgeTextToken
-    {$$={text:$1.text+''+$2, type:$1.type};}
+    {$$={text:$edgeText.text+''+$edgeTextToken, type:$edgeText.type};}
     | MD_STR
-    {$$={text:$1, type:'markdown'};}
+    {$$={text:$MD_STR, type:'markdown'};}
     ;
 
 
 linkStatement: LINK
-        {var inf = yy.destructLink($1);$$ = {"type":inf.type,"stroke":inf.stroke,"length":inf.length};}
+        {var inf = yy.destructLink($LINK);$$ = {"type":inf.type,"stroke":inf.stroke,"length":inf.length};}
         ;
 
 arrowText:
     PIPE text PIPE
-    {$$ = $2;}
+    {$$ = $text;}
     ;
 
 text: textToken
-    { $$={text:$1, type: 'text'};}
+    { $$={text:$textToken, type: 'text'};}
     | text textToken
-    { $$={text:$1.text+''+$2, type: $1.type};}
+    { $$={text:$text.text+''+$textToken, type: $text.type};}
     | MD_STR
-    { $$={text: $1, type: 'markdown'};}
+    { $$={text: $MD_STR, type: 'markdown'};}
     ;
 
 
@@ -491,75 +491,75 @@ keywords
 
 
 textNoTags: textNoTagsToken
-    {$$={text:$1, type: 'text'};}
+    {$$={text:$textNoTagsToken, type: 'text'};}
     | textNoTags textNoTagsToken
-    {$$={text:$1.text+''+$2, type: $1.type};}
+    {$$={text:$textNoTags.text+''+$textNoTagsToken, type: $textNoTags.type};}
     | STR
-    { $$={text: $1, type: 'text'};}
+    { $$={text: $STR, type: 'text'};}
     | MD_STR
-    { $$={text: $1, type: 'markdown'};}
+    { $$={text: $MD_STR, type: 'markdown'};}
     ;
 
 
 classDefStatement:CLASSDEF SPACE idString SPACE stylesOpt
-    {$$ = $1;yy.addClass($3,$5);}
+    {$$ = $CLASSDEF;yy.addClass($idString,$stylesOpt);}
     ;
 
 classStatement:CLASS SPACE idString SPACE alphaNum
-    {$$ = $1;yy.setClass($3, $5);}
+    {$$ = $CLASS;yy.setClass($idString, $alphaNum);}
     ;
 
 clickStatement
-    : CLICK CALLBACKNAME                                    {$$ = $1;yy.setClickEvent($1, $2);}
-    | CLICK CALLBACKNAME SPACE STR                          {$$ = $1;yy.setClickEvent($1, $2);yy.setTooltip($1, $4);}
-    | CLICK CALLBACKNAME CALLBACKARGS                       {$$ = $1;yy.setClickEvent($1, $2, $3);}
-    | CLICK CALLBACKNAME CALLBACKARGS SPACE STR             {$$ = $1;yy.setClickEvent($1, $2, $3);yy.setTooltip($1, $5);}
-    | CLICK HREF SPACE STR                                  {$$ = $1;yy.setLink($1, $4);}
-    | CLICK HREF SPACE STR SPACE STR                        {$$ = $1;yy.setLink($1, $4);yy.setTooltip($1, $6);}
-    | CLICK HREF SPACE STR SPACE LINK_TARGET                {$$ = $1;yy.setLink($1, $4, $6);}
-    | CLICK HREF SPACE STR SPACE STR SPACE LINK_TARGET      {$$ = $1;yy.setLink($1, $4, $8);yy.setTooltip($1, $6);}
-    | CLICK alphaNum                                        {$$ = $1;yy.setClickEvent($1, $2);}
-    | CLICK alphaNum SPACE STR                              {$$ = $1;yy.setClickEvent($1, $2);yy.setTooltip($1, $4);}
-    | CLICK STR                                             {$$ = $1;yy.setLink($1, $2);}
-    | CLICK STR SPACE STR                                   {$$ = $1;yy.setLink($1, $2);yy.setTooltip($1, $4);}
-    | CLICK STR SPACE LINK_TARGET                           {$$ = $1;yy.setLink($1, $2, $4);}
-    | CLICK STR SPACE STR SPACE LINK_TARGET                 {$$ = $1;yy.setLink($1, $2, $6);yy.setTooltip($1, $4);}
+    : CLICK CALLBACKNAME                                    {$$ = $CLICK;yy.setClickEvent($CLICK, $CALLBACKNAME);}
+    | CLICK CALLBACKNAME SPACE STR                          {$$ = $CLICK;yy.setClickEvent($CLICK, $CALLBACKNAME);yy.setTooltip($CLICK, $STR);}
+    | CLICK CALLBACKNAME CALLBACKARGS                       {$$ = $CLICK;yy.setClickEvent($CLICK, $CALLBACKNAME, $CALLBACKARGS);}
+    | CLICK CALLBACKNAME CALLBACKARGS SPACE STR             {$$ = $CLICK;yy.setClickEvent($CLICK, $CALLBACKNAME, $CALLBACKARGS);yy.setTooltip($CLICK, $STR);}
+    | CLICK HREF SPACE STR                                  {$$ = $CLICK;yy.setLink($CLICK, $STR);}
+    | CLICK HREF SPACE STR\[link] SPACE STR\[target]        {$$ = $CLICK;yy.setLink($CLICK, $link);yy.setTooltip($CLICK, $target);}
+    | CLICK HREF SPACE STR SPACE LINK_TARGET                {$$ = $CLICK;yy.setLink($CLICK, $STR, $LINK_TARGET);}
+    | CLICK HREF SPACE STR\[link] SPACE STR\[tooltip] SPACE LINK_TARGET      {$$ = $CLICK;yy.setLink($CLICK, $link, $LINK_TARGET);yy.setTooltip($CLICK, $tooltip);}
+    | CLICK alphaNum                                        {$$ = $CLICK;yy.setClickEvent($CLICK, $alphaNum);}
+    | CLICK alphaNum SPACE STR                              {$$ = $CLICK;yy.setClickEvent($CLICK, $alphaNum);yy.setTooltip($CLICK, $STR);}
+    | CLICK STR                                             {$$ = $CLICK;yy.setLink($CLICK, $STR);}
+    | CLICK STR\[link] SPACE STR\[tooltip]                  {$$ = $CLICK;yy.setLink($CLICK, $link);yy.setTooltip($CLICK, $tooltip);}
+    | CLICK STR SPACE LINK_TARGET                           {$$ = $CLICK;yy.setLink($CLICK, $STR, $LINK_TARGET);}
+    | CLICK STR\[link] SPACE STR\[tooltip] SPACE LINK_TARGET    {$$ = $CLICK;yy.setLink($CLICK, $link, $LINK_TARGET);yy.setTooltip($CLICK, $tooltip);}
     ;
 
 styleStatement:STYLE SPACE idString SPACE stylesOpt
-    {$$ = $1;yy.addVertex($3,undefined,undefined,$5);}
+    {$$ = $STYLE;yy.addVertex($idString,undefined,undefined,$stylesOpt);}
     ;
 
 linkStyleStatement
     : LINKSTYLE SPACE DEFAULT SPACE stylesOpt
-          {$$ = $1;yy.updateLink([$3],$5);}
+          {$$ = $LINKSTYLE;yy.updateLink([$DEFAULT],$stylesOpt);}
     | LINKSTYLE SPACE numList SPACE stylesOpt
-          {$$ = $1;yy.updateLink($3,$5);}
+          {$$ = $LINKSTYLE;yy.updateLink($numList,$stylesOpt);}
     | LINKSTYLE SPACE DEFAULT SPACE INTERPOLATE SPACE alphaNum SPACE stylesOpt
-          {$$ = $1;yy.updateLinkInterpolate([$3],$7);yy.updateLink([$3],$9);}
+          {$$ = $LINKSTYLE;yy.updateLinkInterpolate([$DEFAULT],$alphaNum);yy.updateLink([$DEFAULT],$stylesOpt);}
     | LINKSTYLE SPACE numList SPACE INTERPOLATE SPACE alphaNum SPACE stylesOpt
-          {$$ = $1;yy.updateLinkInterpolate($3,$7);yy.updateLink($3,$9);}
+          {$$ = $LINKSTYLE;yy.updateLinkInterpolate($numList,$alphaNum);yy.updateLink($numList,$stylesOpt);}
     | LINKSTYLE SPACE DEFAULT SPACE INTERPOLATE SPACE alphaNum
-          {$$ = $1;yy.updateLinkInterpolate([$3],$7);}
+          {$$ = $LINKSTYLE;yy.updateLinkInterpolate([$DEFAULT],$alphaNum);}
     | LINKSTYLE SPACE numList SPACE INTERPOLATE SPACE alphaNum
-          {$$ = $1;yy.updateLinkInterpolate($3,$7);}
+          {$$ = $LINKSTYLE;yy.updateLinkInterpolate($numList,$alphaNum);}
     ;
 
 numList: NUM
-        {$$ = [$1]}
+        {$$ = [$NUM]}
     | numList COMMA NUM
-        {$1.push($3);$$ = $1;}
+        {$numList.push($NUM);$$ = $numList;}
     ;
 
 stylesOpt: style
-        {$$ = [$1]}
+        {$$ = [$style]}
     | stylesOpt COMMA style
-        {$1.push($3);$$ = $1;}
+        {$stylesOpt.push($style);$$ = $stylesOpt;}
     ;
 
 style: styleComponent
     |style styleComponent
-    {$$ = $1 + $2;}
+    {$$ = $style + $styleComponent;}
     ;
 
 styleComponent: NUM | NODE_STRING| COLON | UNIT | SPACE | BRKT | STYLE | PCT ;
@@ -575,23 +575,23 @@ edgeTextToken  :  STR | EDGE_TEXT | UNICODE_TEXT ;
 
 idString
     :idStringToken
-    {$$=$1}
+    {$$=$idStringToken}
     | idString idStringToken
-    {$$=$1+''+$2}
+    {$$=$idString+''+$idStringToken}
     ;
 
 alphaNum
     : alphaNumStatement
-    {$$=$1;}
+    {$$=$alphaNumStatement;}
     | alphaNum alphaNumStatement
-    {$$=$1+''+$2;}
+    {$$=$alphaNum+''+$alphaNumStatement;}
     ;
 
 alphaNumStatement
     : DIR
-        {$$=$1;}
+        {$$=$DIR;}
     | NODE_STRING
-        {$$=$1;}
+        {$$=$NODE_STRING;}
     | DOWN
         {$$='v';}
     | MINUS

From 4cfbd0d380d5f7940d7c7c0cb933e27206efe6da Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Mon, 24 Jul 2023 21:05:17 -0300
Subject: [PATCH 189/281] Remove unused definitions

---
 packages/mermaid/src/diagrams/flowchart/parser/flow.jison | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
index 1f5050117..0219fec2d 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
@@ -609,7 +609,4 @@ direction
     { $$={stmt:'dir', value:'LR'};}
     ;
 
-alphaNumToken  : ALPHA_NUM | PUNCTUATION | AMP | UNICODE_TEXT | NUM| ALPHA | COLON | COMMA | PLUS | EQUALS | MULT | DOT | BRKT| UNDERSCORE ;
-
-graphCodeTokens: STADIUMSTART | STADIUMEND | SUBROUTINESTART | SUBROUTINEEND | VERTEX_WITH_PROPS_START | CYLINDERSTART | CYLINDEREND | TRAPSTART | TRAPEND | INVTRAPSTART | INVTRAPEND | PIPE | PS | PE | SQS | SQE | DIAMOND_START | DIAMOND_STOP | TAGSTART | TAGEND | ARROW_CROSS | ARROW_POINT | ARROW_CIRCLE | ARROW_OPEN | QUOTE | SEMI;
 %%

From 651274bc6f69b2c4b751c62a25453e9425ca8a0b Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Mon, 24 Jul 2023 21:23:21 -0300
Subject: [PATCH 190/281] Only allow quotes to wrap entire string

---
 .../src/diagrams/flowchart/parser/flow-text.spec.js  | 12 +++---------
 .../mermaid/src/diagrams/flowchart/parser/flow.jison |  4 +++-
 2 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js
index 922508e80..ef72bb6b8 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js
@@ -691,15 +691,9 @@ describe('[Text] when parsing', () => {
     expect(edges[0].text).toBe(',.?!+-*');
   });
 
-  it('should handle strings and text at the same time', function () {
-    const res = flow.parser.parse(
-      'graph TD;A(this node has "string" and text)-->|this link has "string" and text|C;'
-    );
+  it('should throw error for strings and text at the same time', function () {
+    const str = 'graph TD;A(this node has "string" and text)-->|this link has "string" and text|C;';
 
-    const vert = flow.parser.yy.getVertices();
-    const edges = flow.parser.yy.getEdges();
-
-    expect(vert['A'].text).toBe('this node has "string" and text');
-    expect(edges[0].text).toBe('this link has "string" and text');
+    expect(() => flow.parser.parse(str)).toThrowError("got 'STR'");
   });
 });
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
index 0219fec2d..7dbe3b4d4 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
@@ -480,6 +480,8 @@ text: textToken
     { $$={text:$textToken, type: 'text'};}
     | text textToken
     { $$={text:$text.text+''+$textToken, type: $text.type};}
+    | STR
+    {$$={text: $STR, type: 'text'};}
     | MD_STR
     { $$={text: $MD_STR, type: 'markdown'};}
     ;
@@ -567,7 +569,7 @@ styleComponent: NUM | NODE_STRING| COLON | UNIT | SPACE | BRKT | STYLE | PCT ;
 /* Token lists */
 idStringToken  :  NUM | NODE_STRING | DOWN | MINUS | DEFAULT | COMMA | COLON;
 
-textToken      :   STR | TEXT | TAGSTART | TAGEND | UNICODE_TEXT;
+textToken      :   TEXT | TAGSTART | TAGEND | UNICODE_TEXT;
 
 textNoTagsToken: NUM | NODE_STRING | SPACE | MINUS | keywords |  START_LINK ;
 

From 47c100809bd2ede57244a5298875ff64ddedf6d6 Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Mon, 24 Jul 2023 21:46:28 -0300
Subject: [PATCH 191/281] Add unit tests for all cases of TEXT and STR
 combinations

---
 .../flowchart/parser/flow-text.spec.js        | 26 +++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js
index ef72bb6b8..c043acd29 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js
@@ -691,9 +691,35 @@ describe('[Text] when parsing', () => {
     expect(edges[0].text).toBe(',.?!+-*');
   });
 
+  it('should throw error at nested set of brackets', function () {
+    const str = 'graph TD; A[This is a () in text];';
+    expect(() => flow.parser.parse(str)).toThrowError("got 'PE'");
+  });
+
   it('should throw error for strings and text at the same time', function () {
     const str = 'graph TD;A(this node has "string" and text)-->|this link has "string" and text|C;';
 
     expect(() => flow.parser.parse(str)).toThrowError("got 'STR'");
   });
+
+  it('should throw error for escaping quotes in text state', function () {
+    //prettier-ignore
+    const str = 'graph TD; A[This is a \"()\" in text];'; //eslint-disable-line no-useless-escape
+
+    expect(() => flow.parser.parse(str)).toThrowError("got 'STR'");
+  });
+
+  it('should throw error for nested quoatation marks', function () {
+    const str = 'graph TD; A["This is a "()" in text"];';
+
+    expect(() => flow.parser.parse(str)).toThrowError("Expecting 'SQE'");
+  });
+
+  it('should parse escaped quotes in a string state', function () {
+    //prettier-ignore
+    const str = 'graph TD; A["This is a \"()\" in text"];'; //eslint-disable-line no-useless-escape
+
+    flow.parser.parse(str);
+    expect(flow.parser.getVertices[0].text).toBe('This is a "()" in text');
+  });
 });

From 20cd685ae371625099f858a7f0c38bcba87420fa Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Mon, 24 Jul 2023 22:43:06 -0300
Subject: [PATCH 192/281] Allow escaped quotations in strings

---
 packages/mermaid/src/diagrams/flowchart/flowDb.js          | 1 +
 .../src/diagrams/flowchart/parser/flow-md-string.spec.js   | 2 +-
 .../src/diagrams/flowchart/parser/flow-text.spec.js        | 7 +++----
 packages/mermaid/src/diagrams/flowchart/parser/flow.jison  | 6 +++---
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.js b/packages/mermaid/src/diagrams/flowchart/flowDb.js
index ea8fa71d2..8d17a30c0 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowDb.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowDb.js
@@ -91,6 +91,7 @@ export const addVertex = function (_id, textObj, type, style, classes, dir, prop
   if (textObj !== undefined) {
     config = configApi.getConfig();
     txt = sanitizeText(textObj.text.trim());
+    txt = textObj.type === 'string' ? txt.replaceAll('\\"', '"') : txt;
     vertices[id].labelType = textObj.type;
     // strip quotes if string starts and ends with a quote
     if (txt[0] === '"' && txt[txt.length - 1] === '"') {
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-md-string.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-md-string.spec.js
index 0e6efaef1..9560a33df 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-md-string.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-md-string.spec.js
@@ -24,7 +24,7 @@ A["\`The cat in **the** hat\`"]-- "\`The *bat* in the chat\`" -->B["The dog in t
     expect(vert['A'].labelType).toBe('markdown');
     expect(vert['B'].id).toBe('B');
     expect(vert['B'].text).toBe('The dog in the hog');
-    expect(vert['B'].labelType).toBe('text');
+    expect(vert['B'].labelType).toBe('string');
     expect(edges.length).toBe(2);
     expect(edges[0].start).toBe('A');
     expect(edges[0].end).toBe('B');
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js
index c043acd29..dd4050adb 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js
@@ -717,9 +717,8 @@ describe('[Text] when parsing', () => {
 
   it('should parse escaped quotes in a string state', function () {
     //prettier-ignore
-    const str = 'graph TD; A["This is a \"()\" in text"];'; //eslint-disable-line no-useless-escape
-
-    flow.parser.parse(str);
-    expect(flow.parser.getVertices[0].text).toBe('This is a "()" in text');
+    flow.parser.parse('graph TD; A["This is a \\"()\\" in text"];'); //eslint-disable-line no-useless-escape
+    const vert = flow.parser.yy.getVertices();
+    expect(vert['A'].text).toBe('This is a "()" in text');
   });
 });
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
index 7dbe3b4d4..f333702d6 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
@@ -61,9 +61,9 @@ Function arguments are optional: 'call <callbackname>()' simply executes 'callba
 <md_string>[^`"]+       { return "MD_STR";}
 <md_string>[`]["]       { this.popState();}
 <*>["][`]                  { this.begin("md_string");}
+<string>(\\(?=\")\"|[^"])+           return "STR";
 <string>["]             this.popState();
-<string>[^"]+           return "STR";
-<*>["]       this.pushState("string");
+<*>["]                  this.pushState("string");
 "style"                 return 'STYLE';
 "default"               return 'DEFAULT';
 "linkStyle"             return 'LINKSTYLE';
@@ -481,7 +481,7 @@ text: textToken
     | text textToken
     { $$={text:$text.text+''+$textToken, type: $text.type};}
     | STR
-    {$$={text: $STR, type: 'text'};}
+    { $$ = {text: $STR, type: 'string'};}
     | MD_STR
     { $$={text: $MD_STR, type: 'markdown'};}
     ;

From 28bb0df6c8017c5f2be29f7f47231e20fe4362b3 Mon Sep 17 00:00:00 2001
From: Steph <35910788+huynhicode@users.noreply.github.com>
Date: Tue, 18 Jul 2023 07:27:56 -0700
Subject: [PATCH 193/281] update latest news section

---
 docs/news/announcements.md                      | 6 +++---
 docs/news/blog.md                               | 6 ++++++
 packages/mermaid/src/docs/news/announcements.md | 6 +++---
 packages/mermaid/src/docs/news/blog.md          | 6 ++++++
 4 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/docs/news/announcements.md b/docs/news/announcements.md
index ff67c57d0..b7620ec09 100644
--- a/docs/news/announcements.md
+++ b/docs/news/announcements.md
@@ -6,8 +6,8 @@
 
 # Announcements
 
-## [Mermaid Chart’s ChatGPT Plugin Combines Generative AI and Smart Diagramming For Users](https://www.mermaidchart.com/blog/posts/mermaid-chart-chatgpt-plugin-combines-generative-ai-and-smart-diagramming)
+## [Mermaid Chart Announces Visual Studio Code Plugin to Simplify Development Workflows](https://www.mermaidchart.com/blog/posts/mermaid-chart-announces-visual-studio-code-plugin)
 
-29 June 2023 · 4 mins
+17 July 2023 · 3 mins
 
-Mermaid Chart’s new ChatGPT plugin integrates AI-powered text prompts with Mermaid’s intuitive diagramming editor, enabling users to generate, edit, and share complex diagrams with ease and efficiency.
+New Integration Enhances Workflows By Enabling Developers To Reference And Edit Diagrams Within Visual Studio Code.
diff --git a/docs/news/blog.md b/docs/news/blog.md
index 6b187d406..8701569b1 100644
--- a/docs/news/blog.md
+++ b/docs/news/blog.md
@@ -6,6 +6,12 @@
 
 # Blog
 
+## [Mermaid Chart Announces Visual Studio Code Plugin to Simplify Development Workflows](https://www.mermaidchart.com/blog/posts/mermaid-chart-announces-visual-studio-code-plugin)
+
+17 July 2023 · 3 mins
+
+New Integration Enhances Workflows By Enabling Developers To Reference And Edit Diagrams Within Visual Studio Code.
+
 ## [Mermaid Chart’s ChatGPT Plugin Combines Generative AI and Smart Diagramming For Users](https://www.mermaidchart.com/blog/posts/mermaid-chart-chatgpt-plugin-combines-generative-ai-and-smart-diagramming)
 
 29 June 2023 · 4 mins
diff --git a/packages/mermaid/src/docs/news/announcements.md b/packages/mermaid/src/docs/news/announcements.md
index b8d0669ec..c4313a7f1 100644
--- a/packages/mermaid/src/docs/news/announcements.md
+++ b/packages/mermaid/src/docs/news/announcements.md
@@ -1,7 +1,7 @@
 # Announcements
 
-## [Mermaid Chart’s ChatGPT Plugin Combines Generative AI and Smart Diagramming For Users](https://www.mermaidchart.com/blog/posts/mermaid-chart-chatgpt-plugin-combines-generative-ai-and-smart-diagramming)
+## [Mermaid Chart Announces Visual Studio Code Plugin to Simplify Development Workflows](https://www.mermaidchart.com/blog/posts/mermaid-chart-announces-visual-studio-code-plugin)
 
-29 June 2023 · 4 mins
+17 July 2023 · 3 mins
 
-Mermaid Chart’s new ChatGPT plugin integrates AI-powered text prompts with Mermaid’s intuitive diagramming editor, enabling users to generate, edit, and share complex diagrams with ease and efficiency.
+New Integration Enhances Workflows By Enabling Developers To Reference And Edit Diagrams Within Visual Studio Code.
diff --git a/packages/mermaid/src/docs/news/blog.md b/packages/mermaid/src/docs/news/blog.md
index b536cb87e..d3f5f70af 100644
--- a/packages/mermaid/src/docs/news/blog.md
+++ b/packages/mermaid/src/docs/news/blog.md
@@ -1,5 +1,11 @@
 # Blog
 
+## [Mermaid Chart Announces Visual Studio Code Plugin to Simplify Development Workflows](https://www.mermaidchart.com/blog/posts/mermaid-chart-announces-visual-studio-code-plugin)
+
+17 July 2023 · 3 mins
+
+New Integration Enhances Workflows By Enabling Developers To Reference And Edit Diagrams Within Visual Studio Code.
+
 ## [Mermaid Chart’s ChatGPT Plugin Combines Generative AI and Smart Diagramming For Users](https://www.mermaidchart.com/blog/posts/mermaid-chart-chatgpt-plugin-combines-generative-ai-and-smart-diagramming)
 
 29 June 2023 · 4 mins

From 27d98728a6ff25797528c504bf1e71572969fe2a Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Tue, 25 Jul 2023 17:42:12 +0530
Subject: [PATCH 194/281] chore: Rename C4C to C4

---
 docs/syntax/{c4c.md => c4.md}                          | 6 +++---
 packages/mermaid/src/docs/.vitepress/config.ts         | 2 +-
 packages/mermaid/src/docs/.vitepress/theme/redirect.ts | 3 ++-
 packages/mermaid/src/docs/syntax/{c4c.md => c4.md}     | 4 ++--
 4 files changed, 8 insertions(+), 7 deletions(-)
 rename docs/syntax/{c4c.md => c4.md} (99%)
 rename packages/mermaid/src/docs/syntax/{c4c.md => c4.md} (99%)

diff --git a/docs/syntax/c4c.md b/docs/syntax/c4.md
similarity index 99%
rename from docs/syntax/c4c.md
rename to docs/syntax/c4.md
index dd5fa21b0..5c8967168 100644
--- a/docs/syntax/c4c.md
+++ b/docs/syntax/c4.md
@@ -2,13 +2,13 @@
 >
 > ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
 >
-> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/c4c.md](../../packages/mermaid/src/docs/syntax/c4c.md).
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/c4.md](../../packages/mermaid/src/docs/syntax/c4.md).
 
 # C4 Diagrams
 
 > C4 Diagram: This is an experimental diagram for now. The syntax and properties can change in future releases. Proper documentation will be provided when the syntax is stable.
 
-Mermaid's c4 diagram syntax is compatible with plantUML. See example below:
+Mermaid's C4 diagram syntax is compatible with plantUML. See example below:
 
 ```mermaid-example
     C4Context
@@ -114,7 +114,7 @@ For an example, see the source code demos/index.html
 - Dynamic diagram (C4Dynamic)
 - Deployment diagram (C4Deployment)
 
-Please refer to the linked document [C4-PlantUML syntax](https://github.com/plantuml-stdlib/C4-PlantUML/blob/master/README.md) for how to write the c4 diagram.
+Please refer to the linked document [C4-PlantUML syntax](https://github.com/plantuml-stdlib/C4-PlantUML/blob/master/README.md) for how to write the C4 diagram.
 
 C4 diagram is fixed style, such as css color, so different css is not provided under different skins.
 updateElementStyle and UpdateElementStyle are written in the diagram last part. updateElementStyle is inconsistent with the original definition and updates the style of the relationship, including the offset of the text label relative to the original position.
diff --git a/packages/mermaid/src/docs/.vitepress/config.ts b/packages/mermaid/src/docs/.vitepress/config.ts
index 054b57ae3..b7b952950 100644
--- a/packages/mermaid/src/docs/.vitepress/config.ts
+++ b/packages/mermaid/src/docs/.vitepress/config.ts
@@ -134,7 +134,7 @@ function sidebarSyntax() {
         { text: 'Quadrant Chart', link: '/syntax/quadrantChart' },
         { text: 'Requirement Diagram', link: '/syntax/requirementDiagram' },
         { text: 'Gitgraph (Git) Diagram 🔥', link: '/syntax/gitgraph' },
-        { text: 'C4 Diagram 🦺⚠️', link: '/syntax/c4c' },
+        { text: 'C4 Diagram 🦺⚠️', link: '/syntax/c4' },
         { text: 'Mindmaps 🔥', link: '/syntax/mindmap' },
         { text: 'Timeline 🔥', link: '/syntax/timeline' },
         { text: 'Zenuml 🔥', link: '/syntax/zenuml' },
diff --git a/packages/mermaid/src/docs/.vitepress/theme/redirect.ts b/packages/mermaid/src/docs/.vitepress/theme/redirect.ts
index 936d6f7e2..24b9a4d1f 100644
--- a/packages/mermaid/src/docs/.vitepress/theme/redirect.ts
+++ b/packages/mermaid/src/docs/.vitepress/theme/redirect.ts
@@ -28,7 +28,7 @@ const idRedirectMap: Record<string, string> = {
   '8.6.0_docs': '',
   accessibility: 'config/theming',
   breakingchanges: '',
-  c4c: 'syntax/c4c',
+  c4c: 'syntax/c4',
   classdiagram: 'syntax/classDiagram',
   configuration: 'config/configuration',
   demos: 'ecosystem/integrations',
@@ -70,6 +70,7 @@ const idRedirectMap: Record<string, string> = {
 
 const urlRedirectMap: Record<string, string> = {
   '/misc/faq.html': 'configure/faq.html',
+  '/syntax/c4c.html': 'syntax/c4.html',
 };
 
 /**
diff --git a/packages/mermaid/src/docs/syntax/c4c.md b/packages/mermaid/src/docs/syntax/c4.md
similarity index 99%
rename from packages/mermaid/src/docs/syntax/c4c.md
rename to packages/mermaid/src/docs/syntax/c4.md
index 78528f7b9..489b423c0 100644
--- a/packages/mermaid/src/docs/syntax/c4c.md
+++ b/packages/mermaid/src/docs/syntax/c4.md
@@ -2,7 +2,7 @@
 
 > C4 Diagram: This is an experimental diagram for now. The syntax and properties can change in future releases. Proper documentation will be provided when the syntax is stable.
 
-Mermaid's c4 diagram syntax is compatible with plantUML. See example below:
+Mermaid's C4 diagram syntax is compatible with plantUML. See example below:
 
 ```mermaid-example
     C4Context
@@ -61,7 +61,7 @@ For an example, see the source code demos/index.html
 - Dynamic diagram (C4Dynamic)
 - Deployment diagram (C4Deployment)
 
-Please refer to the linked document [C4-PlantUML syntax](https://github.com/plantuml-stdlib/C4-PlantUML/blob/master/README.md) for how to write the c4 diagram.
+Please refer to the linked document [C4-PlantUML syntax](https://github.com/plantuml-stdlib/C4-PlantUML/blob/master/README.md) for how to write the C4 diagram.
 
 C4 diagram is fixed style, such as css color, so different css is not provided under different skins.
 updateElementStyle and UpdateElementStyle are written in the diagram last part. updateElementStyle is inconsistent with the original definition and updates the style of the relationship, including the offset of the text label relative to the original position.

From 68305fea9ecbba269e3fc94e24b2b52e8e0ae402 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Tue, 25 Jul 2023 18:56:58 +0530
Subject: [PATCH 195/281] Fix lint

---
 packages/mermaid/src/rendering-util/splitText.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mermaid/src/rendering-util/splitText.spec.ts b/packages/mermaid/src/rendering-util/splitText.spec.ts
index 017fe9c6a..bc7df08dd 100644
--- a/packages/mermaid/src/rendering-util/splitText.spec.ts
+++ b/packages/mermaid/src/rendering-util/splitText.spec.ts
@@ -64,7 +64,7 @@ describe('when Intl.Segmenter is available', () => {
 
 /**
  * Intl.Segmenter is not supported in Firefox yet,
- * see https://bugzilla.mozilla.org/show_bug.cgi?id=1423593 
+ * see https://bugzilla.mozilla.org/show_bug.cgi?id=1423593
  */
 describe('when Intl.Segmenter is not available', () => {
   beforeAll(() => {

From 4ea1227e29a321eec0f8d1557b181fe756b3ddcc Mon Sep 17 00:00:00 2001
From: sidharthv96 <sidharthv96@users.noreply.github.com>
Date: Tue, 25 Jul 2023 13:33:37 +0000
Subject: [PATCH 196/281] Update docs

---
 docs/config/usage.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/config/usage.md b/docs/config/usage.md
index 4203e3a13..7246fe318 100644
--- a/docs/config/usage.md
+++ b/docs/config/usage.md
@@ -228,7 +228,7 @@ mermaid fully supports webpack. Here is a [working demo](https://github.com/merm
 
 The main idea of the API is to be able to call a render function with the graph definition as a string. The render function will render the graph and call a callback with the resulting SVG code. With this approach it is up to the site creator to fetch the graph definition from the site (perhaps from a textarea), render it and place the graph somewhere in the site.
 
-The example below show an outline of how this could be used. The example just logs the resulting SVG to the JavaScript console.
+The example below shows an example of how this could be used. The example just logs the resulting SVG to the JavaScript console.
 
 ```html
 <script type="module">

From 409dedb3efcffa07af93bb7dd844dd4f07a8d2ed Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Tue, 25 Jul 2023 19:08:40 +0530
Subject: [PATCH 197/281] Remove redundant test. Already checked in lint.

---
 .../diagrams/class/classDiagramGrammar.spec.ts   | 16 ----------------
 1 file changed, 16 deletions(-)
 delete mode 100644 packages/mermaid/src/diagrams/class/classDiagramGrammar.spec.ts

diff --git a/packages/mermaid/src/diagrams/class/classDiagramGrammar.spec.ts b/packages/mermaid/src/diagrams/class/classDiagramGrammar.spec.ts
deleted file mode 100644
index f7d93741a..000000000
--- a/packages/mermaid/src/diagrams/class/classDiagramGrammar.spec.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { readFile } from 'node:fs/promises';
-import { fileURLToPath } from 'node:url';
-// @ts-ignore - no types
-import { LALRGenerator } from 'jison';
-
-const getAbsolutePath = (relativePath: string) => {
-  return fileURLToPath(new URL(relativePath, import.meta.url));
-};
-
-describe('class diagram grammar', function () {
-  it('should have no conflicts', async function () {
-    const grammarSource = await readFile(getAbsolutePath('./parser/classDiagram.jison'), 'utf8');
-    const grammarParser = new LALRGenerator(grammarSource, {});
-    expect(grammarParser.conflicts).toBe(0);
-  });
-});

From a7d40724b4e112c11412d7eb1946352e57566b4d Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Tue, 25 Jul 2023 19:13:54 +0530
Subject: [PATCH 198/281] Update packages/mermaid/src/rendering-util/types.d.ts

Co-authored-by: Alois Klink <alois@aloisklink.com>
---
 packages/mermaid/src/rendering-util/types.d.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/mermaid/src/rendering-util/types.d.ts b/packages/mermaid/src/rendering-util/types.d.ts
index aec99e636..6dabb476d 100644
--- a/packages/mermaid/src/rendering-util/types.d.ts
+++ b/packages/mermaid/src/rendering-util/types.d.ts
@@ -4,4 +4,5 @@ export interface MarkdownWord {
   type: MarkdownWordType;
 }
 export type MarkdownLine = MarkdownWord[];
+/** Returns `true` if the line fits a constraint (e.g. it's under 𝑛 chars) */
 export type CheckFitFunction = (text: MarkdownLine) => boolean;

From 841ae15fb5561526bd9d9c64cc2817d17b0cba35 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Tue, 25 Jul 2023 20:10:05 +0530
Subject: [PATCH 199/281] Add comments

---
 packages/mermaid/src/rendering-util/splitText.ts | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/mermaid/src/rendering-util/splitText.ts b/packages/mermaid/src/rendering-util/splitText.ts
index 103e8ca67..36dc6278e 100644
--- a/packages/mermaid/src/rendering-util/splitText.ts
+++ b/packages/mermaid/src/rendering-util/splitText.ts
@@ -11,7 +11,8 @@ export function splitTextToChars(text: string): string[] {
 }
 
 /**
- * Splits a string into words.
+ * Splits a string into words by using `Intl.Segmenter` if available, or splitting by ' '.
+ * `Intl.Segmenter` uses the default locale, which might be different across browsers.
  */
 export function splitLineToWords(text: string): string[] {
   if (Intl.Segmenter) {
@@ -70,6 +71,12 @@ function splitWordToFitWidthRecursion(
   ];
 }
 
+/**
+ * Splits a line into multiple lines that satisfy the checkFit function.
+ * @param line - Line to split
+ * @param checkFit - Function to check if line fits
+ * @returns Array of lines that fit
+ */
 export function splitLineToFitWidth(
   line: MarkdownLine,
   checkFit: CheckFitFunction

From 15c6dfcbb559f551209218fb236b6c5837376a40 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Tue, 25 Jul 2023 16:42:34 +0200
Subject: [PATCH 200/281] Updates after tests

---
 .../rendering/flowchart-v2.spec.js            |  4 +-
 cypress/platform/knsv2.html                   | 52 +++++++++++++------
 packages/mermaid-zenuml/package.json          |  2 +-
 packages/mermaid/package.json                 |  2 +-
 .../src/diagrams/mindmap/parser/mindmap.jison |  2 +-
 5 files changed, 40 insertions(+), 22 deletions(-)

diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js
index 27e728405..0f4b079c9 100644
--- a/cypress/integration/rendering/flowchart-v2.spec.js
+++ b/cypress/integration/rendering/flowchart-v2.spec.js
@@ -671,7 +671,7 @@ title: Simple flowchart
 flowchart TD
 A --> B
 `,
-      { flowchart: { titleTopMargin: 0 } }
+      { flowchart: { titleTopMargin: 10 } }
     );
   });
   it('3192: It should be possieble to render flowcharts with invisible edges', () => {
@@ -682,7 +682,7 @@ title: Simple flowchart with invisible edges
 flowchart TD
 A ~~~ B
 `,
-      { flowchart: { titleTopMargin: 0 } }
+      { flowchart: { titleTopMargin: 10 } }
     );
   });
   it('4023: Should render html labels with images and-or text correctly', () => {
diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index 1b1ccd685..13de19ba0 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -58,6 +58,14 @@
   </head>
   <body>
     <pre id="diagram" class="mermaid">
+---
+title: Simple flowchart with invisible edges
+---
+flowchart TD
+A ~~~ B
+  </pre
+    >
+    <pre id="diagram" class="mermaid2">
 stateDiagram-v2
     [*] --> Still
     Still --> [*]
@@ -73,7 +81,7 @@ flowchart RL
       a1 -- l2 --> a2
     end
     </pre>
-    <pre id="diagram" class="mermaid">
+    <pre id="diagram" class="mermaid2">
 flowchart RL
     subgraph "`one`"
       a1 -- l1 --> a2
@@ -98,11 +106,11 @@ flowchart LR
         way`"]
   </pre
     >
-    <pre id="diagram" class="mermaid">
+    <pre id="diagram" class="mermaid2">
       classDiagram-v2
         note "I love this diagram!\nDo you love it?"
     </pre>
-    <pre id="diagram" class="mermaid">
+    <pre id="diagram" class="mermaid2">
     stateDiagram-v2
     State1: The state with a note with minus - and plus + in it
     note left of State1
@@ -147,7 +155,7 @@ mindmap
       शान्तिः سلام  和平 `"]
 
     </pre>
-    <pre id="diagram" class="mermaid">
+    <pre id="diagram" class="mermaid2">
 %%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
 flowchart TB
   %% I could not figure out how to use double quotes in labels in Mermaid
@@ -399,21 +407,31 @@ mindmap
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
       };
+      // mermaid.initialize({
+      //   // theme: 'forest',
+      //   startOnLoad: true,
+      //   logLevel: 0,
+      //   flowchart: {
+      //     // defaultRenderer: 'elk',
+      //     useMaxWidth: false,
+      //     // htmlLabels: false,
+      //     htmlLabels: true,
+      //   },
+      //   // htmlLabels: false,
+      //   gantt: {
+      //     useMaxWidth: false,
+      //   },
+      //   useMaxWidth: false,
+      // });
       mermaid.initialize({
-        // theme: 'forest',
-        startOnLoad: true,
-        logLevel: 0,
-        flowchart: {
-          // defaultRenderer: 'elk',
-          useMaxWidth: false,
-          // htmlLabels: false,
-          htmlLabels: true,
+        flowchart: { titleTopMargin: 10 },
+        fontFamily: 'courier',
+        sequence: {
+          actorFontFamily: 'courier',
+          noteFontFamily: 'courier',
+          messageFontFamily: 'courier',
         },
-        // htmlLabels: false,
-        gantt: {
-          useMaxWidth: false,
-        },
-        useMaxWidth: false,
+        fontSize: 16,
       });
       function callback() {
         alert('It worked');
diff --git a/packages/mermaid-zenuml/package.json b/packages/mermaid-zenuml/package.json
index cb8da96b6..8167174e6 100644
--- a/packages/mermaid-zenuml/package.json
+++ b/packages/mermaid-zenuml/package.json
@@ -33,7 +33,7 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@zenuml/core": "^3.0.0"
+    "@zenuml/core": "^3.0.3"
   },
   "devDependencies": {
     "mermaid": "workspace:^"
diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index 9a1f34676..b1b98f5f7 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "10.2.4",
+  "version": "10.4.0",
   "description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "type": "module",
   "module": "./dist/mermaid.core.mjs",
diff --git a/packages/mermaid/src/diagrams/mindmap/parser/mindmap.jison b/packages/mermaid/src/diagrams/mindmap/parser/mindmap.jison
index 9dd046a3d..afd5e2300 100644
--- a/packages/mermaid/src/diagrams/mindmap/parser/mindmap.jison
+++ b/packages/mermaid/src/diagrams/mindmap/parser/mindmap.jison
@@ -40,7 +40,7 @@
 "["                { this.begin('NODE');return 'NODE_DSTART'; }
 [\s]+              return 'SPACELIST'                 /* skip all whitespace */    ;
 // !(-\()            return 'NODE_ID';
-[^\(\[\n\-\)\{\}]+         return 'NODE_ID';
+[^\(\[\n\)\{\}]+         return 'NODE_ID';
 <<EOF>>            return 'EOF';
 <NODE>["][`]          { this.begin("NSTR2");}
 <NSTR2>[^`"]+        { return "NODE_DESCR";}

From 48c831136915055774f561f1a03a1847e7704ab5 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Tue, 25 Jul 2023 20:49:54 +0530
Subject: [PATCH 201/281] Add MERMAID_RELEASE_VERSION in sankey

---
 docs/config/usage.md                       | 2 +-
 docs/syntax/sankey.md                      | 2 +-
 packages/mermaid/src/docs/syntax/sankey.md | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/config/usage.md b/docs/config/usage.md
index 4203e3a13..7246fe318 100644
--- a/docs/config/usage.md
+++ b/docs/config/usage.md
@@ -228,7 +228,7 @@ mermaid fully supports webpack. Here is a [working demo](https://github.com/merm
 
 The main idea of the API is to be able to call a render function with the graph definition as a string. The render function will render the graph and call a callback with the resulting SVG code. With this approach it is up to the site creator to fetch the graph definition from the site (perhaps from a textarea), render it and place the graph somewhere in the site.
 
-The example below show an outline of how this could be used. The example just logs the resulting SVG to the JavaScript console.
+The example below shows an example of how this could be used. The example just logs the resulting SVG to the JavaScript console.
 
 ```html
 <script type="module">
diff --git a/docs/syntax/sankey.md b/docs/syntax/sankey.md
index 156e82f5a..718489f20 100644
--- a/docs/syntax/sankey.md
+++ b/docs/syntax/sankey.md
@@ -4,7 +4,7 @@
 >
 > ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/sankey.md](../../packages/mermaid/src/docs/syntax/sankey.md).
 
-# Sankey diagrams
+# Sankey diagram (v\<MERMAID_RELEASE_VERSION>+)
 
 > A sankey diagram is a visualization used to depict a flow from one set of values to another.
 
diff --git a/packages/mermaid/src/docs/syntax/sankey.md b/packages/mermaid/src/docs/syntax/sankey.md
index 914c7024b..5b5a9ed66 100644
--- a/packages/mermaid/src/docs/syntax/sankey.md
+++ b/packages/mermaid/src/docs/syntax/sankey.md
@@ -1,4 +1,4 @@
-# Sankey diagrams
+# Sankey diagram (v<MERMAID_RELEASE_VERSION>+)
 
 > A sankey diagram is a visualization used to depict a flow from one set of values to another.
 

From 68909a43f7d39c50bac41ca42fe1823540729de9 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Tue, 25 Jul 2023 21:57:48 +0530
Subject: [PATCH 202/281] Update lockfile

---
 pnpm-lock.yaml | 295 +++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 234 insertions(+), 61 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9f37261f6..e38b1bf26 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -413,8 +413,8 @@ importers:
   packages/mermaid-zenuml:
     dependencies:
       '@zenuml/core':
-        specifier: ^3.0.0
-        version: 3.0.0(ts-node@10.9.1)
+        specifier: ^3.0.3
+        version: 3.0.3(ts-node@10.9.1)
     devDependencies:
       mermaid:
         specifier: workspace:^
@@ -455,7 +455,7 @@ importers:
         version: 1.1.0
       unocss:
         specifier: ^0.53.0
-        version: 0.53.0(postcss@8.4.24)(rollup@2.79.1)(vite@4.3.3)
+        version: 0.53.0(postcss@8.4.27)(rollup@2.79.1)(vite@4.3.3)
       unplugin-vue-components:
         specifier: ^0.25.0
         version: 0.25.0(rollup@2.79.1)(vue@3.2.47)
@@ -472,6 +472,58 @@ importers:
         specifier: ^7.0.0
         version: 7.0.0
 
+  packages/mermaid/src/vitepress:
+    dependencies:
+      '@vueuse/core':
+        specifier: ^10.1.0
+        version: 10.1.0(vue@3.2.47)
+      jiti:
+        specifier: ^1.18.2
+        version: 1.18.2
+      vue:
+        specifier: ^3.2.47
+        version: 3.2.47
+    devDependencies:
+      '@iconify-json/carbon':
+        specifier: ^1.1.16
+        version: 1.1.16
+      '@unocss/reset':
+        specifier: ^0.53.0
+        version: 0.53.0
+      '@vite-pwa/vitepress':
+        specifier: ^0.2.0
+        version: 0.2.0(vite-plugin-pwa@0.16.0)
+      '@vitejs/plugin-vue':
+        specifier: ^4.2.1
+        version: 4.2.1(vite@4.3.9)(vue@3.2.47)
+      fast-glob:
+        specifier: ^3.2.12
+        version: 3.2.12
+      https-localhost:
+        specifier: ^4.7.1
+        version: 4.7.1
+      pathe:
+        specifier: ^1.1.0
+        version: 1.1.0
+      unocss:
+        specifier: ^0.53.0
+        version: 0.53.0(postcss@8.4.27)(rollup@2.79.1)(vite@4.3.9)
+      unplugin-vue-components:
+        specifier: ^0.25.0
+        version: 0.25.0(rollup@2.79.1)(vue@3.2.47)
+      vite:
+        specifier: ^4.3.3
+        version: 4.3.9(@types/node@18.16.0)
+      vite-plugin-pwa:
+        specifier: ^0.16.0
+        version: 0.16.0(vite@4.3.9)(workbox-build@7.0.0)(workbox-window@7.0.0)
+      vitepress:
+        specifier: 1.0.0-beta.3
+        version: 1.0.0-beta.3(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0)
+      workbox-window:
+        specifier: ^7.0.0
+        version: 7.0.0
+
   tests/webpack:
     dependencies:
       '@mermaid-js/mermaid-example-diagram':
@@ -923,7 +975,7 @@ packages:
     engines: {node: '>=12'}
     dependencies:
       abab: 2.0.6
-      acorn: 8.8.2
+      acorn: 8.10.0
       acorn-globals: 6.0.0
       cssom: 0.5.0
       cssstyle: 2.3.0
@@ -4965,6 +5017,17 @@ packages:
       - vite
     dev: true
 
+  /@unocss/astro@0.53.0(rollup@2.79.1)(vite@4.3.9):
+    resolution: {integrity: sha512-8bR7ysIMZEOpcjd/cVmogcABSFDYPjUqMnbflv44p1A2/deemo9CIkpRARoq/96NQuzWJsKhKodcQodExZcqiA==}
+    dependencies:
+      '@unocss/core': 0.53.0
+      '@unocss/reset': 0.53.0
+      '@unocss/vite': 0.53.0(rollup@2.79.1)(vite@4.3.9)
+    transitivePeerDependencies:
+      - rollup
+      - vite
+    dev: true
+
   /@unocss/cli@0.53.0(rollup@2.79.1):
     resolution: {integrity: sha512-9WNBHy8m8tMqwcp7mUhebRUBvHQfbx01CMe5cAFLmUYtJULM+8IjJxqERkaAZyyoOXf1TNO2v1dFAmCwhMRCLQ==}
     engines: {node: '>=14'}
@@ -4979,7 +5042,7 @@ packages:
       chokidar: 3.5.3
       colorette: 2.0.20
       consola: 3.1.0
-      fast-glob: 3.2.12
+      fast-glob: 3.3.0
       magic-string: 0.30.1
       pathe: 1.1.1
       perfect-debounce: 1.0.0
@@ -5012,7 +5075,7 @@ packages:
       sirv: 2.0.3
     dev: true
 
-  /@unocss/postcss@0.53.0(postcss@8.4.24):
+  /@unocss/postcss@0.53.0(postcss@8.4.27):
     resolution: {integrity: sha512-q+5aDvkwP1eEhDmdz32WrwsGEEcJdQLy3apiU/df+CaL71HATvUfMZJVZbXZlFqoed703c+cGLHOhRHMPDk/dw==}
     engines: {node: '>=14'}
     peerDependencies:
@@ -5021,9 +5084,9 @@ packages:
       '@unocss/config': 0.53.0
       '@unocss/core': 0.53.0
       css-tree: 2.3.1
-      fast-glob: 3.2.12
+      fast-glob: 3.3.0
       magic-string: 0.30.1
-      postcss: 8.4.24
+      postcss: 8.4.27
     dev: true
 
   /@unocss/preset-attributify@0.53.0:
@@ -5136,13 +5199,33 @@ packages:
       '@unocss/scope': 0.53.0
       '@unocss/transformer-directives': 0.53.0
       chokidar: 3.5.3
-      fast-glob: 3.2.12
+      fast-glob: 3.3.0
       magic-string: 0.30.1
       vite: 4.3.3(@types/node@18.16.0)
     transitivePeerDependencies:
       - rollup
     dev: true
 
+  /@unocss/vite@0.53.0(rollup@2.79.1)(vite@4.3.9):
+    resolution: {integrity: sha512-JoZhKVNruRjfySMVg/zNJbLEn/NTXj29Wf0SN4++xnGKrSapkPzYC46psL5bm5N5v4SHdpepTCoonC3FWCY6Fw==}
+    peerDependencies:
+      vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0
+    dependencies:
+      '@ampproject/remapping': 2.2.1
+      '@rollup/pluginutils': 5.0.2(rollup@2.79.1)
+      '@unocss/config': 0.53.0
+      '@unocss/core': 0.53.0
+      '@unocss/inspector': 0.53.0
+      '@unocss/scope': 0.53.0
+      '@unocss/transformer-directives': 0.53.0
+      chokidar: 3.5.3
+      fast-glob: 3.3.0
+      magic-string: 0.30.1
+      vite: 4.3.9(@types/node@18.16.0)
+    transitivePeerDependencies:
+      - rollup
+    dev: true
+
   /@vite-pwa/vitepress@0.2.0(vite-plugin-pwa@0.16.0):
     resolution: {integrity: sha512-dVQVaP6NB9woCFe4UASUqRp7uwBQJOVXlJlqK4krqXcbb3NuXIXIWOnU7HLpJnHqZj5U/81gKtLN6gs5gJBwiQ==}
     peerDependencies:
@@ -5162,6 +5245,17 @@ packages:
       vue: 3.2.47
     dev: true
 
+  /@vitejs/plugin-vue@4.2.1(vite@4.3.9)(vue@3.2.47):
+    resolution: {integrity: sha512-ZTZjzo7bmxTRTkb8GSTwkPOYDIP7pwuyV+RV53c9PYUouwcbkIZIvWvNWlX2b1dYZqtOv7D6iUAnJLVNGcLrSw==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      vite: ^4.0.0
+      vue: ^3.2.25
+    dependencies:
+      vite: 4.3.9(@types/node@18.16.0)
+      vue: 3.2.47
+    dev: true
+
   /@vitejs/plugin-vue@4.2.3(vite@4.3.8)(vue@3.3.4):
     resolution: {integrity: sha512-R6JDUfiZbJA9cMiguQ7jxALsgiprjBeHL5ikpXfJCH62pPHtI+JdJ5xWj6Ev73yXSlYl86+blXn1kZHQ7uElxw==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -5308,7 +5402,7 @@ packages:
       '@vue/shared': 3.2.47
       estree-walker: 2.0.2
       magic-string: 0.25.9
-      postcss: 8.4.24
+      postcss: 8.4.27
       source-map: 0.6.1
 
   /@vue/compiler-sfc@3.3.4:
@@ -5322,7 +5416,7 @@ packages:
       '@vue/shared': 3.3.4
       estree-walker: 2.0.2
       magic-string: 0.30.1
-      postcss: 8.4.24
+      postcss: 8.4.27
       source-map-js: 1.0.2
 
   /@vue/compiler-ssr@3.2.47:
@@ -5424,7 +5518,7 @@ packages:
       '@types/web-bluetooth': 0.0.16
       '@vueuse/metadata': 10.1.0
       '@vueuse/shared': 10.1.0(vue@3.2.47)
-      vue-demi: 0.14.0(vue@3.2.47)
+      vue-demi: 0.14.5(vue@3.2.47)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -5742,8 +5836,8 @@ packages:
     resolution: {integrity: sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==}
     dev: true
 
-  /@zenuml/core@3.0.0(ts-node@10.9.1):
-    resolution: {integrity: sha512-DLX3vFfrV66X0b2kv8MPy3//l4jSoEGuf/zK2m+4t4CvaQ3rArQgXOc5aywi8pRyF1GmCiqgnG9NMRZ6RfqboA==}
+  /@zenuml/core@3.0.3(ts-node@10.9.1):
+    resolution: {integrity: sha512-Wp6yF5iERvGXrR3z/mNhQYP2uI54Bd7RQ2ZwA26Lca+tufj4X8pfqGVSORLqbUl4wjjdcwHc2RNT8AU+cz2NCg==}
     engines: {node: '>=12.0.0'}
     dependencies:
       '@types/assert': 1.5.6
@@ -5758,7 +5852,7 @@ packages:
       lodash: 4.17.21
       marked: 4.3.0
       pino: 8.14.1
-      postcss: 8.4.23
+      postcss: 8.4.27
       ramda: 0.28.0
       tailwindcss: 3.3.2(ts-node@10.9.1)
       vue: 3.3.4
@@ -8931,6 +9025,7 @@ packages:
       glob-parent: 5.1.2
       merge2: 1.4.1
       micromatch: 4.0.5
+    dev: true
 
   /fast-glob@3.3.0:
     resolution: {integrity: sha512-ChDuvbOypPuNjO8yIDf36x7BlZX1smcUMTTcyoIjycexOxd6DFsKsg21qVBzEmr3G7fUKIRy2/psii+CIUt7FA==}
@@ -8941,7 +9036,6 @@ packages:
       glob-parent: 5.1.2
       merge2: 1.4.1
       micromatch: 4.0.5
-    dev: true
 
   /fast-json-stable-stringify@2.1.0:
     resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
@@ -9548,7 +9642,7 @@ packages:
     dependencies:
       array-union: 2.1.0
       dir-glob: 3.0.1
-      fast-glob: 3.2.12
+      fast-glob: 3.3.0
       ignore: 5.2.0
       merge2: 1.4.1
       slash: 3.0.0
@@ -9560,7 +9654,7 @@ packages:
     dependencies:
       array-union: 2.1.0
       dir-glob: 3.0.1
-      fast-glob: 3.2.12
+      fast-glob: 3.3.0
       ignore: 5.2.0
       merge2: 1.4.1
       slash: 3.0.0
@@ -11474,13 +11568,6 @@ packages:
     dependencies:
       sourcemap-codec: 1.4.8
 
-  /magic-string@0.30.0:
-    resolution: {integrity: sha512-LA+31JYDJLs82r2ScLrlz1GjSgu66ZV518eyWT+S8VhyQn/JL0u9MeBOvQMGYiPk1DBiSN9DDMOcXvigJZaViQ==}
-    engines: {node: '>=12'}
-    dependencies:
-      '@jridgewell/sourcemap-codec': 1.4.14
-    dev: true
-
   /magic-string@0.30.1:
     resolution: {integrity: sha512-mbVKXPmS0z0G4XqFDCTllmDQ6coZzn94aMlb0o/A4HEHJCKcanlDZwYJgwnkmgD3jyWhUgj9VsPrfd972yPffA==}
     engines: {node: '>=12'}
@@ -12895,29 +12982,29 @@ packages:
       trouter: 2.0.1
     dev: true
 
-  /postcss-import@15.1.0(postcss@8.4.24):
+  /postcss-import@15.1.0(postcss@8.4.27):
     resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       postcss: ^8.0.0
     dependencies:
-      postcss: 8.4.24
+      postcss: 8.4.27
       postcss-value-parser: 4.2.0
       read-cache: 1.0.0
       resolve: 1.22.2
     dev: false
 
-  /postcss-js@4.0.1(postcss@8.4.24):
+  /postcss-js@4.0.1(postcss@8.4.27):
     resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
     engines: {node: ^12 || ^14 || >= 16}
     peerDependencies:
       postcss: ^8.4.21
     dependencies:
       camelcase-css: 2.0.1
-      postcss: 8.4.24
+      postcss: 8.4.27
     dev: false
 
-  /postcss-load-config@4.0.1(postcss@8.4.24)(ts-node@10.9.1):
+  /postcss-load-config@4.0.1(postcss@8.4.27)(ts-node@10.9.1):
     resolution: {integrity: sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==}
     engines: {node: '>= 14'}
     peerDependencies:
@@ -12930,18 +13017,18 @@ packages:
         optional: true
     dependencies:
       lilconfig: 2.1.0
-      postcss: 8.4.24
+      postcss: 8.4.27
       ts-node: 10.9.1(@types/node@18.16.0)(typescript@5.1.3)
       yaml: 2.2.2
     dev: false
 
-  /postcss-nested@6.0.1(postcss@8.4.24):
+  /postcss-nested@6.0.1(postcss@8.4.27):
     resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==}
     engines: {node: '>=12.0'}
     peerDependencies:
       postcss: ^8.2.14
     dependencies:
-      postcss: 8.4.24
+      postcss: 8.4.27
       postcss-selector-parser: 6.0.13
     dev: false
 
@@ -12964,6 +13051,7 @@ packages:
       nanoid: 3.3.6
       picocolors: 1.0.0
       source-map-js: 1.0.2
+    dev: true
 
   /postcss@8.4.24:
     resolution: {integrity: sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==}
@@ -12972,6 +13060,7 @@ packages:
       nanoid: 3.3.6
       picocolors: 1.0.0
       source-map-js: 1.0.2
+    dev: true
 
   /postcss@8.4.27:
     resolution: {integrity: sha512-gY/ACJtJPSmUFPDCHtX78+01fHa64FaU4zaaWfuh1MhGJISufJAH4cun6k/8fwsHYeK4UQmENQK+tRLCFJE8JQ==}
@@ -12980,7 +13069,6 @@ packages:
       nanoid: 3.3.6
       picocolors: 1.0.0
       source-map-js: 1.0.2
-    dev: true
 
   /preact@10.11.0:
     resolution: {integrity: sha512-Fk6+vB2kb6mSJfDgODq0YDhMfl0HNtK5+Uc9QqECO4nlyPAQwCI+BKyWO//idA7ikV7o+0Fm6LQmNuQi1wXI1w==}
@@ -14417,7 +14505,7 @@ packages:
       chokidar: 3.5.3
       didyoumean: 1.2.2
       dlv: 1.1.3
-      fast-glob: 3.2.12
+      fast-glob: 3.3.0
       glob-parent: 6.0.2
       is-glob: 4.0.3
       jiti: 1.18.2
@@ -14426,11 +14514,11 @@ packages:
       normalize-path: 3.0.0
       object-hash: 3.0.0
       picocolors: 1.0.0
-      postcss: 8.4.24
-      postcss-import: 15.1.0(postcss@8.4.24)
-      postcss-js: 4.0.1(postcss@8.4.24)
-      postcss-load-config: 4.0.1(postcss@8.4.24)(ts-node@10.9.1)
-      postcss-nested: 6.0.1(postcss@8.4.24)
+      postcss: 8.4.27
+      postcss-import: 15.1.0(postcss@8.4.27)
+      postcss-js: 4.0.1(postcss@8.4.27)
+      postcss-load-config: 4.0.1(postcss@8.4.27)(ts-node@10.9.1)
+      postcss-nested: 6.0.1(postcss@8.4.27)
       postcss-selector-parser: 6.0.13
       postcss-value-parser: 4.2.0
       resolve: 1.22.2
@@ -15061,7 +15149,7 @@ packages:
     engines: {node: '>= 10.0.0'}
     dev: true
 
-  /unocss@0.53.0(postcss@8.4.24)(rollup@2.79.1)(vite@4.3.3):
+  /unocss@0.53.0(postcss@8.4.27)(rollup@2.79.1)(vite@4.3.3):
     resolution: {integrity: sha512-kY4h5ERiDYlSnL2X+hbDfh+uaF7QNouy7j51GOTUr3Q0aaWehaNd05b15SjHrab559dEC0mYfrSEdh/DnCK1cw==}
     engines: {node: '>=14'}
     peerDependencies:
@@ -15074,7 +15162,7 @@ packages:
       '@unocss/cli': 0.53.0(rollup@2.79.1)
       '@unocss/core': 0.53.0
       '@unocss/extractor-arbitrary-variants': 0.53.0
-      '@unocss/postcss': 0.53.0(postcss@8.4.24)
+      '@unocss/postcss': 0.53.0(postcss@8.4.27)
       '@unocss/preset-attributify': 0.53.0
       '@unocss/preset-icons': 0.53.0
       '@unocss/preset-mini': 0.53.0
@@ -15097,6 +15185,42 @@ packages:
       - vite
     dev: true
 
+  /unocss@0.53.0(postcss@8.4.27)(rollup@2.79.1)(vite@4.3.9):
+    resolution: {integrity: sha512-kY4h5ERiDYlSnL2X+hbDfh+uaF7QNouy7j51GOTUr3Q0aaWehaNd05b15SjHrab559dEC0mYfrSEdh/DnCK1cw==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@unocss/webpack': 0.53.0
+    peerDependenciesMeta:
+      '@unocss/webpack':
+        optional: true
+    dependencies:
+      '@unocss/astro': 0.53.0(rollup@2.79.1)(vite@4.3.9)
+      '@unocss/cli': 0.53.0(rollup@2.79.1)
+      '@unocss/core': 0.53.0
+      '@unocss/extractor-arbitrary-variants': 0.53.0
+      '@unocss/postcss': 0.53.0(postcss@8.4.27)
+      '@unocss/preset-attributify': 0.53.0
+      '@unocss/preset-icons': 0.53.0
+      '@unocss/preset-mini': 0.53.0
+      '@unocss/preset-tagify': 0.53.0
+      '@unocss/preset-typography': 0.53.0
+      '@unocss/preset-uno': 0.53.0
+      '@unocss/preset-web-fonts': 0.53.0
+      '@unocss/preset-wind': 0.53.0
+      '@unocss/reset': 0.53.0
+      '@unocss/transformer-attributify-jsx': 0.53.0
+      '@unocss/transformer-attributify-jsx-babel': 0.53.0
+      '@unocss/transformer-compile-class': 0.53.0
+      '@unocss/transformer-directives': 0.53.0
+      '@unocss/transformer-variant-group': 0.53.0
+      '@unocss/vite': 0.53.0(rollup@2.79.1)(vite@4.3.9)
+    transitivePeerDependencies:
+      - postcss
+      - rollup
+      - supports-color
+      - vite
+    dev: true
+
   /unpipe@1.0.0:
     resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
     engines: {node: '>= 0.8'}
@@ -15119,9 +15243,9 @@ packages:
       '@rollup/pluginutils': 5.0.2(rollup@2.79.1)
       chokidar: 3.5.3
       debug: 4.3.4(supports-color@8.1.1)
-      fast-glob: 3.2.12
+      fast-glob: 3.3.0
       local-pkg: 0.4.3
-      magic-string: 0.30.0
+      magic-string: 0.30.1
       minimatch: 9.0.1
       resolve: 1.22.2
       unplugin: 1.3.1
@@ -15134,7 +15258,7 @@ packages:
   /unplugin@1.3.1:
     resolution: {integrity: sha512-h4uUTIvFBQRxUKS2Wjys6ivoeofGhxzTe2sRWlooyjHXVttcVfV/JiavNd3d4+jty0SVV0dxGw9AkY9MwiaCEw==}
     dependencies:
-      acorn: 8.8.2
+      acorn: 8.10.0
       chokidar: 3.5.3
       webpack-sources: 3.2.3
       webpack-virtual-modules: 0.5.0
@@ -15272,10 +15396,11 @@ packages:
       mlly: 1.4.0
       pathe: 1.1.1
       picocolors: 1.0.0
-      vite: 4.3.9(@types/node@18.16.0)
+      vite: 4.4.6(@types/node@18.16.0)
     transitivePeerDependencies:
       - '@types/node'
       - less
+      - lightningcss
       - sass
       - stylus
       - sugarss
@@ -15315,6 +15440,24 @@ packages:
       - supports-color
     dev: true
 
+  /vite-plugin-pwa@0.16.0(vite@4.3.9)(workbox-build@7.0.0)(workbox-window@7.0.0):
+    resolution: {integrity: sha512-E+AQRzHxqNU4ZhEeR8X37/foZB+ezJEhXauE/mcf1UITY6k2Pa1dtlFl+BQu57fTdiVlWim5S0Qy44Yap93Dkg==}
+    engines: {node: '>=16.0.0'}
+    peerDependencies:
+      vite: ^3.1.0 || ^4.0.0
+      workbox-build: ^7.0.0
+      workbox-window: ^7.0.0
+    dependencies:
+      debug: 4.3.4(supports-color@8.1.1)
+      fast-glob: 3.3.0
+      pretty-bytes: 6.1.0
+      vite: 4.3.9(@types/node@18.16.0)
+      workbox-build: 7.0.0
+      workbox-window: 7.0.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /vite@4.3.3(@types/node@18.16.0):
     resolution: {integrity: sha512-MwFlLBO4udZXd+VBcezo3u8mC77YQk+ik+fbc0GZWGgzfbPP+8Kf0fldhARqvSYmtIWoAJ5BXPClUbMTlqFxrA==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -15496,6 +15639,50 @@ packages:
       - terser
     dev: true
 
+  /vitepress@1.0.0-beta.3(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0):
+    resolution: {integrity: sha512-GR5Pvr/o343NN1M4Na1shhDYZRrQbjmLq7WE0lla0H8iDPAsHE8agTHLWfu3FWx+3q2KA29sv16+0O9RQKGjlA==}
+    hasBin: true
+    dependencies:
+      '@docsearch/css': 3.5.1
+      '@docsearch/js': 3.5.1(@algolia/client-search@4.14.2)(search-insights@2.6.0)
+      '@vitejs/plugin-vue': 4.2.3(vite@4.4.6)(vue@3.3.4)
+      '@vue/devtools-api': 6.5.0
+      '@vueuse/core': 10.2.1(vue@3.3.4)
+      '@vueuse/integrations': 10.2.1(focus-trap@7.5.2)(vue@3.3.4)
+      body-scroll-lock: 4.0.0-beta.0
+      focus-trap: 7.5.2
+      mark.js: 8.11.1
+      minisearch: 6.1.0
+      shiki: 0.14.3
+      vite: 4.4.6(@types/node@18.16.0)
+      vue: 3.3.4
+    transitivePeerDependencies:
+      - '@algolia/client-search'
+      - '@types/node'
+      - '@types/react'
+      - '@vue/composition-api'
+      - async-validator
+      - axios
+      - change-case
+      - drauu
+      - fuse.js
+      - idb-keyval
+      - jwt-decode
+      - less
+      - lightningcss
+      - nprogress
+      - qrcode
+      - react
+      - react-dom
+      - sass
+      - search-insights
+      - sortablejs
+      - stylus
+      - sugarss
+      - terser
+      - universal-cookie
+    dev: true
+
   /vitepress@1.0.0-beta.6(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0):
     resolution: {integrity: sha512-xK/ulKgQpKZVbvlL4+/vW49VG7ySi5nmSoKUNH1G4kM+Cj9JwYM+PDJO7jSJROv8zW99G0ise+maDYnaLlbGBQ==}
     hasBin: true
@@ -15599,6 +15786,7 @@ packages:
       why-is-node-running: 2.2.2
     transitivePeerDependencies:
       - less
+      - lightningcss
       - sass
       - stylus
       - sugarss
@@ -15648,21 +15836,6 @@ packages:
     resolution: {integrity: sha512-eOpPHogvorZRobNqJGhapa0JdwaxpjVvyBp0QIUMRMSf8ZAlqOdEquKuRmw9Qwu0qXtJIWqFtMkmvJjUZmMjVA==}
     dev: true
 
-  /vue-demi@0.14.0(vue@3.2.47):
-    resolution: {integrity: sha512-gt58r2ogsNQeVoQ3EhoUAvUsH9xviydl0dWJj7dabBC/2L4uBId7ujtCwDRD0JhkGsV1i0CtfLAeyYKBht9oWg==}
-    engines: {node: '>=12'}
-    hasBin: true
-    requiresBuild: true
-    peerDependencies:
-      '@vue/composition-api': ^1.0.0-rc.1
-      vue: ^3.0.0-0 || ^2.6.0
-    peerDependenciesMeta:
-      '@vue/composition-api':
-        optional: true
-    dependencies:
-      vue: 3.2.47
-    dev: false
-
   /vue-demi@0.14.5(vue@3.2.47):
     resolution: {integrity: sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==}
     engines: {node: '>=12'}

From edf94790f207d56c2e4d37eb22f0ec22354d8ff9 Mon Sep 17 00:00:00 2001
From: Steph <35910788+huynhicode@users.noreply.github.com>
Date: Tue, 25 Jul 2023 10:22:17 -0700
Subject: [PATCH 203/281] add latest blog post

---
 docs/news/announcements.md                      | 6 +++---
 docs/news/blog.md                               | 6 ++++++
 packages/mermaid/src/docs/news/announcements.md | 6 +++---
 packages/mermaid/src/docs/news/blog.md          | 6 ++++++
 4 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/docs/news/announcements.md b/docs/news/announcements.md
index b7620ec09..fd53daa4e 100644
--- a/docs/news/announcements.md
+++ b/docs/news/announcements.md
@@ -6,8 +6,8 @@
 
 # Announcements
 
-## [Mermaid Chart Announces Visual Studio Code Plugin to Simplify Development Workflows](https://www.mermaidchart.com/blog/posts/mermaid-chart-announces-visual-studio-code-plugin)
+## [From Chaos to Clarity: Exploring Mind Maps with MermaidJS](https://www.mermaidchart.com/blog/posts/from-chaos-to-clarity-exploring-mind-maps-with-mermaidjs)
 
-17 July 2023 · 3 mins
+24 July 2023 · 4 mins
 
-New Integration Enhances Workflows By Enabling Developers To Reference And Edit Diagrams Within Visual Studio Code.
+Introducing the concept of mind mapping as a tool for organizing complex information, and highlights Mermaid as a user-friendly software that simplifies the creation and editing of mind maps for applications in IT solution design, business decision-making, and knowledge organization.
diff --git a/docs/news/blog.md b/docs/news/blog.md
index 8701569b1..be2f48461 100644
--- a/docs/news/blog.md
+++ b/docs/news/blog.md
@@ -6,6 +6,12 @@
 
 # Blog
 
+## [From Chaos to Clarity: Exploring Mind Maps with MermaidJS](https://www.mermaidchart.com/blog/posts/from-chaos-to-clarity-exploring-mind-maps-with-mermaidjs)
+
+24 July 2023 · 4 mins
+
+Introducing the concept of mind mapping as a tool for organizing complex information, and highlights Mermaid as a user-friendly software that simplifies the creation and editing of mind maps for applications in IT solution design, business decision-making, and knowledge organization.
+
 ## [Mermaid Chart Announces Visual Studio Code Plugin to Simplify Development Workflows](https://www.mermaidchart.com/blog/posts/mermaid-chart-announces-visual-studio-code-plugin)
 
 17 July 2023 · 3 mins
diff --git a/packages/mermaid/src/docs/news/announcements.md b/packages/mermaid/src/docs/news/announcements.md
index c4313a7f1..1cf14284a 100644
--- a/packages/mermaid/src/docs/news/announcements.md
+++ b/packages/mermaid/src/docs/news/announcements.md
@@ -1,7 +1,7 @@
 # Announcements
 
-## [Mermaid Chart Announces Visual Studio Code Plugin to Simplify Development Workflows](https://www.mermaidchart.com/blog/posts/mermaid-chart-announces-visual-studio-code-plugin)
+## [From Chaos to Clarity: Exploring Mind Maps with MermaidJS](https://www.mermaidchart.com/blog/posts/from-chaos-to-clarity-exploring-mind-maps-with-mermaidjs)
 
-17 July 2023 · 3 mins
+24 July 2023 · 4 mins
 
-New Integration Enhances Workflows By Enabling Developers To Reference And Edit Diagrams Within Visual Studio Code.
+Introducing the concept of mind mapping as a tool for organizing complex information, and highlights Mermaid as a user-friendly software that simplifies the creation and editing of mind maps for applications in IT solution design, business decision-making, and knowledge organization.
diff --git a/packages/mermaid/src/docs/news/blog.md b/packages/mermaid/src/docs/news/blog.md
index d3f5f70af..4c6eac3f3 100644
--- a/packages/mermaid/src/docs/news/blog.md
+++ b/packages/mermaid/src/docs/news/blog.md
@@ -1,5 +1,11 @@
 # Blog
 
+## [From Chaos to Clarity: Exploring Mind Maps with MermaidJS](https://www.mermaidchart.com/blog/posts/from-chaos-to-clarity-exploring-mind-maps-with-mermaidjs)
+
+24 July 2023 · 4 mins
+
+Introducing the concept of mind mapping as a tool for organizing complex information, and highlights Mermaid as a user-friendly software that simplifies the creation and editing of mind maps for applications in IT solution design, business decision-making, and knowledge organization.
+
 ## [Mermaid Chart Announces Visual Studio Code Plugin to Simplify Development Workflows](https://www.mermaidchart.com/blog/posts/mermaid-chart-announces-visual-studio-code-plugin)
 
 17 July 2023 · 3 mins

From 30a9b5574d90da958f305372078ad9c80522641d Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Tue, 25 Jul 2023 20:34:48 -0300
Subject: [PATCH 204/281] Correct classDef and class grammar

Previously, you were allowed to define a class called 'default'
but were not allowed to use it because the classStatement grammar
expected an alphanum, which did not include the word DEFAULT
---
 cypress/integration/rendering/flowchart.spec.js       | 11 +++++++++++
 .../mermaid/src/diagrams/flowchart/parser/flow.jison  |  4 ++--
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/cypress/integration/rendering/flowchart.spec.js b/cypress/integration/rendering/flowchart.spec.js
index 4f6d6478e..6d8b4a49a 100644
--- a/cypress/integration/rendering/flowchart.spec.js
+++ b/cypress/integration/rendering/flowchart.spec.js
@@ -891,4 +891,15 @@ graph TD
       { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
   });
+  it('66: apply class called default on node called default', () => {
+    imgSnapshotTest(
+      `
+      graph TD
+        classDef default fill:#000,stroke:#000,stroke-width:4px,color:#fff 
+        default --> default2
+        class default,default2 default
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
 });
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
index f333702d6..2ed1c7b2e 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
@@ -507,8 +507,8 @@ classDefStatement:CLASSDEF SPACE idString SPACE stylesOpt
     {$$ = $CLASSDEF;yy.addClass($idString,$stylesOpt);}
     ;
 
-classStatement:CLASS SPACE idString SPACE alphaNum
-    {$$ = $CLASS;yy.setClass($idString, $alphaNum);}
+classStatement:CLASS SPACE idString\[vertex] SPACE idString\[class]
+    {$$ = $CLASS;yy.setClass($vertex, $class);}
     ;
 
 clickStatement

From fd461b7860f93dcc33fb24aa4a10333685e433a1 Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Tue, 25 Jul 2023 20:56:08 -0300
Subject: [PATCH 205/281] Reimplement old alphaNumToken

---
 .../src/diagrams/flowchart/parser/flow.jison  | 22 ++++++-------------
 1 file changed, 7 insertions(+), 15 deletions(-)

diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
index 2ed1c7b2e..6bc434c3c 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
@@ -175,7 +175,7 @@ that id.
 "^"                   return 'UP';
 "\|"                  return 'SEP';
 "v"                   return 'DOWN';
-([A-Za-z0-9!"\#$%&'*+\.`?\\_\/]|\-(?=[^\>\-\.]))+  return 'NODE_STRING';
+([A-Za-z0-9!"\#$%&'*+\.`?\\_\/]|\-(?=[^\>\-\.])|=(?!=))+  return 'NODE_STRING';
 "-"                   return 'MINUS'
 [\u00AA\u00B5\u00BA\u00C0-\u00D6\u00D8-\u00F6]|
 [\u00F8-\u02C1\u02C6-\u02D1\u02E0-\u02E4\u02EC\u02EE\u0370-\u0374\u0376\u0377]|
@@ -575,6 +575,8 @@ textNoTagsToken: NUM | NODE_STRING | SPACE | MINUS | keywords |  START_LINK ;
 
 edgeTextToken  :  STR | EDGE_TEXT | UNICODE_TEXT ;
 
+alphaNumToken   :  NUM | UNICODE_TEXT | NODE_STRING | DIR | DOWN | MINUS | COMMA;
+
 idString
     :idStringToken
     {$$=$idStringToken}
@@ -583,22 +585,12 @@ idString
     ;
 
 alphaNum
-    : alphaNumStatement
-    {$$=$alphaNumStatement;}
-    | alphaNum alphaNumStatement
-    {$$=$alphaNum+''+$alphaNumStatement;}
+    : alphaNumToken
+    {$$=$alphaNumToken;}
+    | alphaNum alphaNumToken
+    {$$=$alphaNum+''+$alphaNumToken;}
     ;
 
-alphaNumStatement
-    : DIR
-        {$$=$DIR;}
-    | NODE_STRING
-        {$$=$NODE_STRING;}
-    | DOWN
-        {$$='v';}
-    | MINUS
-        {$$='-';}
-    ;
 
 direction
     : direction_tb

From dbee34aba78f8947bb9d8b257388218cdd5f80a3 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Wed, 26 Jul 2023 11:14:46 +0530
Subject: [PATCH 206/281] fix: edgeLabel width

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

diff --git a/packages/mermaid/src/rendering-util/createText.ts b/packages/mermaid/src/rendering-util/createText.ts
index 2705a37ac..703e121e2 100644
--- a/packages/mermaid/src/rendering-util/createText.ts
+++ b/packages/mermaid/src/rendering-util/createText.ts
@@ -162,7 +162,7 @@ export const createText = (
     classes = '',
     useHtmlLabels = true,
     isNode = true,
-    width,
+    width = 200,
     addSvgBackground = false,
   } = {}
 ) => {

From e1ca108b0048f7f4e67b0929ea45b90084139417 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Wed, 26 Jul 2023 11:26:07 +0530
Subject: [PATCH 207/281] Update version

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

diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index b1b98f5f7..51c0b018c 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "10.4.0",
+  "version": "10.3.0",
   "description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "type": "module",
   "module": "./dist/mermaid.core.mjs",

From 21b90cbcd2fb6ce2ddafb0550214c236642820fa Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Wed, 26 Jul 2023 11:33:20 +0530
Subject: [PATCH 208/281] Add release version

---
 docs/syntax/gantt.md                                | 2 ++
 docs/syntax/gitgraph.md                             | 2 +-
 docs/syntax/sequenceDiagram.md                      | 2 +-
 packages/mermaid/src/docs/syntax/gantt.md           | 2 ++
 packages/mermaid/src/docs/syntax/gitgraph.md        | 2 +-
 packages/mermaid/src/docs/syntax/sequenceDiagram.md | 2 +-
 6 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/docs/syntax/gantt.md b/docs/syntax/gantt.md
index 5cf584050..6fd2c6860 100644
--- a/docs/syntax/gantt.md
+++ b/docs/syntax/gantt.md
@@ -271,6 +271,8 @@ gantt
   weekday monday
 ```
 
+Support: v\<MERMAID_RELEASE_VERSION>+
+
 ## Output in compact mode
 
 The compact mode allows you to display multiple tasks in the same row. Compact mode can be enabled for a gantt chart by setting the display mode of the graph via preceeding YAML settings.
diff --git a/docs/syntax/gitgraph.md b/docs/syntax/gitgraph.md
index e93071851..4bb1cfb51 100644
--- a/docs/syntax/gitgraph.md
+++ b/docs/syntax/gitgraph.md
@@ -825,7 +825,7 @@ NOTE: Because we have overridden the `mainBranchOrder` to `2`, the `main` branch
 
 Here, we have changed the default main branch name to `MetroLine1`.
 
-## Orientation
+## Orientation (v\<MERMAID_RELEASE_VERSION>+)
 
 In Mermaid, the default orientation is Left to Right. The branches are lined vertically.
 
diff --git a/docs/syntax/sequenceDiagram.md b/docs/syntax/sequenceDiagram.md
index 89c232ea6..4e19971c0 100644
--- a/docs/syntax/sequenceDiagram.md
+++ b/docs/syntax/sequenceDiagram.md
@@ -94,7 +94,7 @@ sequenceDiagram
     J->>A: Great!
 ```
 
-### Actor Creation and Destruction
+### Actor Creation and Destruction (v\<MERMAID_RELEASE_VERSION>+)
 
 It is possible to create and destroy actors by messages. To do so, add a create or destroy directive before the message.
 
diff --git a/packages/mermaid/src/docs/syntax/gantt.md b/packages/mermaid/src/docs/syntax/gantt.md
index 05ccf7bff..423192e0e 100644
--- a/packages/mermaid/src/docs/syntax/gantt.md
+++ b/packages/mermaid/src/docs/syntax/gantt.md
@@ -197,6 +197,8 @@ gantt
   weekday monday
 ```
 
+Support: v<MERMAID_RELEASE_VERSION>+
+
 ## Output in compact mode
 
 The compact mode allows you to display multiple tasks in the same row. Compact mode can be enabled for a gantt chart by setting the display mode of the graph via preceeding YAML settings.
diff --git a/packages/mermaid/src/docs/syntax/gitgraph.md b/packages/mermaid/src/docs/syntax/gitgraph.md
index a9b99e684..400f2a6d2 100644
--- a/packages/mermaid/src/docs/syntax/gitgraph.md
+++ b/packages/mermaid/src/docs/syntax/gitgraph.md
@@ -511,7 +511,7 @@ NOTE: Because we have overridden the `mainBranchOrder` to `2`, the `main` branch
 
 Here, we have changed the default main branch name to `MetroLine1`.
 
-## Orientation
+## Orientation (v<MERMAID_RELEASE_VERSION>+)
 
 In Mermaid, the default orientation is Left to Right. The branches are lined vertically.
 
diff --git a/packages/mermaid/src/docs/syntax/sequenceDiagram.md b/packages/mermaid/src/docs/syntax/sequenceDiagram.md
index e061a192e..13d04dc52 100644
--- a/packages/mermaid/src/docs/syntax/sequenceDiagram.md
+++ b/packages/mermaid/src/docs/syntax/sequenceDiagram.md
@@ -58,7 +58,7 @@ sequenceDiagram
     J->>A: Great!
 ```
 
-### Actor Creation and Destruction
+### Actor Creation and Destruction (v<MERMAID_RELEASE_VERSION>+)
 
 It is possible to create and destroy actors by messages. To do so, add a create or destroy directive before the message.
 

From aa54127784233ee6c559a1ffd5e774c5bc57259c Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Wed, 26 Jul 2023 11:34:10 +0530
Subject: [PATCH 209/281] Set proper release version

---
 docs/syntax/gantt.md                                | 2 +-
 docs/syntax/gitgraph.md                             | 2 +-
 docs/syntax/sankey.md                               | 2 +-
 docs/syntax/sequenceDiagram.md                      | 2 +-
 packages/mermaid/src/docs/syntax/gantt.md           | 2 +-
 packages/mermaid/src/docs/syntax/gitgraph.md        | 2 +-
 packages/mermaid/src/docs/syntax/sankey.md          | 2 +-
 packages/mermaid/src/docs/syntax/sequenceDiagram.md | 2 +-
 8 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/docs/syntax/gantt.md b/docs/syntax/gantt.md
index 6fd2c6860..8ad438fb1 100644
--- a/docs/syntax/gantt.md
+++ b/docs/syntax/gantt.md
@@ -271,7 +271,7 @@ gantt
   weekday monday
 ```
 
-Support: v\<MERMAID_RELEASE_VERSION>+
+Support: v10.3.0+
 
 ## Output in compact mode
 
diff --git a/docs/syntax/gitgraph.md b/docs/syntax/gitgraph.md
index 4bb1cfb51..f2609e31c 100644
--- a/docs/syntax/gitgraph.md
+++ b/docs/syntax/gitgraph.md
@@ -825,7 +825,7 @@ NOTE: Because we have overridden the `mainBranchOrder` to `2`, the `main` branch
 
 Here, we have changed the default main branch name to `MetroLine1`.
 
-## Orientation (v\<MERMAID_RELEASE_VERSION>+)
+## Orientation (v10.3.0+)
 
 In Mermaid, the default orientation is Left to Right. The branches are lined vertically.
 
diff --git a/docs/syntax/sankey.md b/docs/syntax/sankey.md
index 718489f20..6f9e14d82 100644
--- a/docs/syntax/sankey.md
+++ b/docs/syntax/sankey.md
@@ -4,7 +4,7 @@
 >
 > ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/sankey.md](../../packages/mermaid/src/docs/syntax/sankey.md).
 
-# Sankey diagram (v\<MERMAID_RELEASE_VERSION>+)
+# Sankey diagram (v10.3.0+)
 
 > A sankey diagram is a visualization used to depict a flow from one set of values to another.
 
diff --git a/docs/syntax/sequenceDiagram.md b/docs/syntax/sequenceDiagram.md
index 4e19971c0..60e7411a1 100644
--- a/docs/syntax/sequenceDiagram.md
+++ b/docs/syntax/sequenceDiagram.md
@@ -94,7 +94,7 @@ sequenceDiagram
     J->>A: Great!
 ```
 
-### Actor Creation and Destruction (v\<MERMAID_RELEASE_VERSION>+)
+### Actor Creation and Destruction (v10.3.0+)
 
 It is possible to create and destroy actors by messages. To do so, add a create or destroy directive before the message.
 
diff --git a/packages/mermaid/src/docs/syntax/gantt.md b/packages/mermaid/src/docs/syntax/gantt.md
index 423192e0e..6ddd011f6 100644
--- a/packages/mermaid/src/docs/syntax/gantt.md
+++ b/packages/mermaid/src/docs/syntax/gantt.md
@@ -197,7 +197,7 @@ gantt
   weekday monday
 ```
 
-Support: v<MERMAID_RELEASE_VERSION>+
+Support: v10.3.0+
 
 ## Output in compact mode
 
diff --git a/packages/mermaid/src/docs/syntax/gitgraph.md b/packages/mermaid/src/docs/syntax/gitgraph.md
index 400f2a6d2..87f43afdd 100644
--- a/packages/mermaid/src/docs/syntax/gitgraph.md
+++ b/packages/mermaid/src/docs/syntax/gitgraph.md
@@ -511,7 +511,7 @@ NOTE: Because we have overridden the `mainBranchOrder` to `2`, the `main` branch
 
 Here, we have changed the default main branch name to `MetroLine1`.
 
-## Orientation (v<MERMAID_RELEASE_VERSION>+)
+## Orientation (v10.3.0+)
 
 In Mermaid, the default orientation is Left to Right. The branches are lined vertically.
 
diff --git a/packages/mermaid/src/docs/syntax/sankey.md b/packages/mermaid/src/docs/syntax/sankey.md
index 5b5a9ed66..c5e7244c6 100644
--- a/packages/mermaid/src/docs/syntax/sankey.md
+++ b/packages/mermaid/src/docs/syntax/sankey.md
@@ -1,4 +1,4 @@
-# Sankey diagram (v<MERMAID_RELEASE_VERSION>+)
+# Sankey diagram (v10.3.0+)
 
 > A sankey diagram is a visualization used to depict a flow from one set of values to another.
 
diff --git a/packages/mermaid/src/docs/syntax/sequenceDiagram.md b/packages/mermaid/src/docs/syntax/sequenceDiagram.md
index 13d04dc52..20baee228 100644
--- a/packages/mermaid/src/docs/syntax/sequenceDiagram.md
+++ b/packages/mermaid/src/docs/syntax/sequenceDiagram.md
@@ -58,7 +58,7 @@ sequenceDiagram
     J->>A: Great!
 ```
 
-### Actor Creation and Destruction (v<MERMAID_RELEASE_VERSION>+)
+### Actor Creation and Destruction (v10.3.0+)
 
 It is possible to create and destroy actors by messages. To do so, add a create or destroy directive before the message.
 

From 304d8844f06bf30038a8303bf04237c82a66261b Mon Sep 17 00:00:00 2001
From: Kiran <kiran@blkmarket.co>
Date: Wed, 26 Jul 2023 00:19:50 -0600
Subject: [PATCH 210/281] fix style in contributors section of intro

---
 docs/intro/index.md                      | 4 +++-
 packages/mermaid/src/docs/intro/index.md | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/docs/intro/index.md b/docs/intro/index.md
index 36707bace..b6065c85f 100644
--- a/docs/intro/index.md
+++ b/docs/intro/index.md
@@ -387,7 +387,9 @@ The above command generates files into the `dist` folder and publishes them to \
 - [Live Editor](https://github.com/mermaid-js/mermaid-live-editor)
 - [HTTP Server](https://github.com/TomWright/mermaid-server)
 
-## Contributors [![Good first issue](https://img.shields.io/github/labels/mermaid-js/mermaid/Good%20first%20issue%21)](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue+is%3Aopen+label%3A%22Good+first+issue%21%22) [![Contributors](https://img.shields.io/github/contributors/mermaid-js/mermaid)](https://github.com/mermaid-js/mermaid/graphs/contributors) [![Commits](https://img.shields.io/github/commit-activity/m/mermaid-js/mermaid)](https://github.com/mermaid-js/mermaid/graphs/contributors)
+## Contributors
+
+[![Good first issue](https://img.shields.io/github/labels/mermaid-js/mermaid/Good%20first%20issue%21)](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue+is%3Aopen+label%3A%22Good+first+issue%21%22) [![Contributors](https://img.shields.io/github/contributors/mermaid-js/mermaid)](https://github.com/mermaid-js/mermaid/graphs/contributors) [![Commits](https://img.shields.io/github/commit-activity/m/mermaid-js/mermaid)](https://github.com/mermaid-js/mermaid/graphs/contributors)
 
 Mermaid is a growing community and is always accepting new contributors. There's a lot of different ways to help out and we're always looking for extra hands! Look at [this issue](https://github.com/mermaid-js/mermaid/issues/866) if you want to know where to start helping out.
 
diff --git a/packages/mermaid/src/docs/intro/index.md b/packages/mermaid/src/docs/intro/index.md
index e886b5f60..7f2a5c052 100644
--- a/packages/mermaid/src/docs/intro/index.md
+++ b/packages/mermaid/src/docs/intro/index.md
@@ -164,7 +164,9 @@ The above command generates files into the `dist` folder and publishes them to <
 - [Live Editor](https://github.com/mermaid-js/mermaid-live-editor)
 - [HTTP Server](https://github.com/TomWright/mermaid-server)
 
-## Contributors [![Good first issue](https://img.shields.io/github/labels/mermaid-js/mermaid/Good%20first%20issue%21)](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue+is%3Aopen+label%3A%22Good+first+issue%21%22) [![Contributors](https://img.shields.io/github/contributors/mermaid-js/mermaid)](https://github.com/mermaid-js/mermaid/graphs/contributors) [![Commits](https://img.shields.io/github/commit-activity/m/mermaid-js/mermaid)](https://github.com/mermaid-js/mermaid/graphs/contributors)
+## Contributors
+
+[![Good first issue](https://img.shields.io/github/labels/mermaid-js/mermaid/Good%20first%20issue%21)](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue+is%3Aopen+label%3A%22Good+first+issue%21%22) [![Contributors](https://img.shields.io/github/contributors/mermaid-js/mermaid)](https://github.com/mermaid-js/mermaid/graphs/contributors) [![Commits](https://img.shields.io/github/commit-activity/m/mermaid-js/mermaid)](https://github.com/mermaid-js/mermaid/graphs/contributors)
 
 Mermaid is a growing community and is always accepting new contributors. There's a lot of different ways to help out and we're always looking for extra hands! Look at [this issue](https://github.com/mermaid-js/mermaid/issues/866) if you want to know where to start helping out.
 

From 9c92f779ae45b188b9eab89d2e3def4e522e82e1 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Wed, 26 Jul 2023 09:44:24 +0200
Subject: [PATCH 211/281] Updates after testing and new version for
 mermaid-zenuml

---
 packages/mermaid-zenuml/package.json |   2 +-
 pnpm-lock.yaml                       | 196 ---------------------------
 2 files changed, 1 insertion(+), 197 deletions(-)

diff --git a/packages/mermaid-zenuml/package.json b/packages/mermaid-zenuml/package.json
index 0ba70607f..d4186f05c 100644
--- a/packages/mermaid-zenuml/package.json
+++ b/packages/mermaid-zenuml/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mermaid-js/mermaid-zenuml",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "MermaidJS plugin for ZenUML integration",
   "module": "dist/mermaid-zenuml.core.mjs",
   "types": "dist/detector.d.ts",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e38b1bf26..b8c6b9d6c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,9 +1,5 @@
 lockfileVersion: '6.0'
 
-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false
-
 importers:
 
   .:
@@ -472,58 +468,6 @@ importers:
         specifier: ^7.0.0
         version: 7.0.0
 
-  packages/mermaid/src/vitepress:
-    dependencies:
-      '@vueuse/core':
-        specifier: ^10.1.0
-        version: 10.1.0(vue@3.2.47)
-      jiti:
-        specifier: ^1.18.2
-        version: 1.18.2
-      vue:
-        specifier: ^3.2.47
-        version: 3.2.47
-    devDependencies:
-      '@iconify-json/carbon':
-        specifier: ^1.1.16
-        version: 1.1.16
-      '@unocss/reset':
-        specifier: ^0.53.0
-        version: 0.53.0
-      '@vite-pwa/vitepress':
-        specifier: ^0.2.0
-        version: 0.2.0(vite-plugin-pwa@0.16.0)
-      '@vitejs/plugin-vue':
-        specifier: ^4.2.1
-        version: 4.2.1(vite@4.3.9)(vue@3.2.47)
-      fast-glob:
-        specifier: ^3.2.12
-        version: 3.2.12
-      https-localhost:
-        specifier: ^4.7.1
-        version: 4.7.1
-      pathe:
-        specifier: ^1.1.0
-        version: 1.1.0
-      unocss:
-        specifier: ^0.53.0
-        version: 0.53.0(postcss@8.4.27)(rollup@2.79.1)(vite@4.3.9)
-      unplugin-vue-components:
-        specifier: ^0.25.0
-        version: 0.25.0(rollup@2.79.1)(vue@3.2.47)
-      vite:
-        specifier: ^4.3.3
-        version: 4.3.9(@types/node@18.16.0)
-      vite-plugin-pwa:
-        specifier: ^0.16.0
-        version: 0.16.0(vite@4.3.9)(workbox-build@7.0.0)(workbox-window@7.0.0)
-      vitepress:
-        specifier: 1.0.0-beta.3
-        version: 1.0.0-beta.3(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0)
-      workbox-window:
-        specifier: ^7.0.0
-        version: 7.0.0
-
   tests/webpack:
     dependencies:
       '@mermaid-js/mermaid-example-diagram':
@@ -5017,17 +4961,6 @@ packages:
       - vite
     dev: true
 
-  /@unocss/astro@0.53.0(rollup@2.79.1)(vite@4.3.9):
-    resolution: {integrity: sha512-8bR7ysIMZEOpcjd/cVmogcABSFDYPjUqMnbflv44p1A2/deemo9CIkpRARoq/96NQuzWJsKhKodcQodExZcqiA==}
-    dependencies:
-      '@unocss/core': 0.53.0
-      '@unocss/reset': 0.53.0
-      '@unocss/vite': 0.53.0(rollup@2.79.1)(vite@4.3.9)
-    transitivePeerDependencies:
-      - rollup
-      - vite
-    dev: true
-
   /@unocss/cli@0.53.0(rollup@2.79.1):
     resolution: {integrity: sha512-9WNBHy8m8tMqwcp7mUhebRUBvHQfbx01CMe5cAFLmUYtJULM+8IjJxqERkaAZyyoOXf1TNO2v1dFAmCwhMRCLQ==}
     engines: {node: '>=14'}
@@ -5206,26 +5139,6 @@ packages:
       - rollup
     dev: true
 
-  /@unocss/vite@0.53.0(rollup@2.79.1)(vite@4.3.9):
-    resolution: {integrity: sha512-JoZhKVNruRjfySMVg/zNJbLEn/NTXj29Wf0SN4++xnGKrSapkPzYC46psL5bm5N5v4SHdpepTCoonC3FWCY6Fw==}
-    peerDependencies:
-      vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0
-    dependencies:
-      '@ampproject/remapping': 2.2.1
-      '@rollup/pluginutils': 5.0.2(rollup@2.79.1)
-      '@unocss/config': 0.53.0
-      '@unocss/core': 0.53.0
-      '@unocss/inspector': 0.53.0
-      '@unocss/scope': 0.53.0
-      '@unocss/transformer-directives': 0.53.0
-      chokidar: 3.5.3
-      fast-glob: 3.3.0
-      magic-string: 0.30.1
-      vite: 4.3.9(@types/node@18.16.0)
-    transitivePeerDependencies:
-      - rollup
-    dev: true
-
   /@vite-pwa/vitepress@0.2.0(vite-plugin-pwa@0.16.0):
     resolution: {integrity: sha512-dVQVaP6NB9woCFe4UASUqRp7uwBQJOVXlJlqK4krqXcbb3NuXIXIWOnU7HLpJnHqZj5U/81gKtLN6gs5gJBwiQ==}
     peerDependencies:
@@ -5245,17 +5158,6 @@ packages:
       vue: 3.2.47
     dev: true
 
-  /@vitejs/plugin-vue@4.2.1(vite@4.3.9)(vue@3.2.47):
-    resolution: {integrity: sha512-ZTZjzo7bmxTRTkb8GSTwkPOYDIP7pwuyV+RV53c9PYUouwcbkIZIvWvNWlX2b1dYZqtOv7D6iUAnJLVNGcLrSw==}
-    engines: {node: ^14.18.0 || >=16.0.0}
-    peerDependencies:
-      vite: ^4.0.0
-      vue: ^3.2.25
-    dependencies:
-      vite: 4.3.9(@types/node@18.16.0)
-      vue: 3.2.47
-    dev: true
-
   /@vitejs/plugin-vue@4.2.3(vite@4.3.8)(vue@3.3.4):
     resolution: {integrity: sha512-R6JDUfiZbJA9cMiguQ7jxALsgiprjBeHL5ikpXfJCH62pPHtI+JdJ5xWj6Ev73yXSlYl86+blXn1kZHQ7uElxw==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -15185,42 +15087,6 @@ packages:
       - vite
     dev: true
 
-  /unocss@0.53.0(postcss@8.4.27)(rollup@2.79.1)(vite@4.3.9):
-    resolution: {integrity: sha512-kY4h5ERiDYlSnL2X+hbDfh+uaF7QNouy7j51GOTUr3Q0aaWehaNd05b15SjHrab559dEC0mYfrSEdh/DnCK1cw==}
-    engines: {node: '>=14'}
-    peerDependencies:
-      '@unocss/webpack': 0.53.0
-    peerDependenciesMeta:
-      '@unocss/webpack':
-        optional: true
-    dependencies:
-      '@unocss/astro': 0.53.0(rollup@2.79.1)(vite@4.3.9)
-      '@unocss/cli': 0.53.0(rollup@2.79.1)
-      '@unocss/core': 0.53.0
-      '@unocss/extractor-arbitrary-variants': 0.53.0
-      '@unocss/postcss': 0.53.0(postcss@8.4.27)
-      '@unocss/preset-attributify': 0.53.0
-      '@unocss/preset-icons': 0.53.0
-      '@unocss/preset-mini': 0.53.0
-      '@unocss/preset-tagify': 0.53.0
-      '@unocss/preset-typography': 0.53.0
-      '@unocss/preset-uno': 0.53.0
-      '@unocss/preset-web-fonts': 0.53.0
-      '@unocss/preset-wind': 0.53.0
-      '@unocss/reset': 0.53.0
-      '@unocss/transformer-attributify-jsx': 0.53.0
-      '@unocss/transformer-attributify-jsx-babel': 0.53.0
-      '@unocss/transformer-compile-class': 0.53.0
-      '@unocss/transformer-directives': 0.53.0
-      '@unocss/transformer-variant-group': 0.53.0
-      '@unocss/vite': 0.53.0(rollup@2.79.1)(vite@4.3.9)
-    transitivePeerDependencies:
-      - postcss
-      - rollup
-      - supports-color
-      - vite
-    dev: true
-
   /unpipe@1.0.0:
     resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
     engines: {node: '>= 0.8'}
@@ -15440,24 +15306,6 @@ packages:
       - supports-color
     dev: true
 
-  /vite-plugin-pwa@0.16.0(vite@4.3.9)(workbox-build@7.0.0)(workbox-window@7.0.0):
-    resolution: {integrity: sha512-E+AQRzHxqNU4ZhEeR8X37/foZB+ezJEhXauE/mcf1UITY6k2Pa1dtlFl+BQu57fTdiVlWim5S0Qy44Yap93Dkg==}
-    engines: {node: '>=16.0.0'}
-    peerDependencies:
-      vite: ^3.1.0 || ^4.0.0
-      workbox-build: ^7.0.0
-      workbox-window: ^7.0.0
-    dependencies:
-      debug: 4.3.4(supports-color@8.1.1)
-      fast-glob: 3.3.0
-      pretty-bytes: 6.1.0
-      vite: 4.3.9(@types/node@18.16.0)
-      workbox-build: 7.0.0
-      workbox-window: 7.0.0
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /vite@4.3.3(@types/node@18.16.0):
     resolution: {integrity: sha512-MwFlLBO4udZXd+VBcezo3u8mC77YQk+ik+fbc0GZWGgzfbPP+8Kf0fldhARqvSYmtIWoAJ5BXPClUbMTlqFxrA==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -15639,50 +15487,6 @@ packages:
       - terser
     dev: true
 
-  /vitepress@1.0.0-beta.3(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0):
-    resolution: {integrity: sha512-GR5Pvr/o343NN1M4Na1shhDYZRrQbjmLq7WE0lla0H8iDPAsHE8agTHLWfu3FWx+3q2KA29sv16+0O9RQKGjlA==}
-    hasBin: true
-    dependencies:
-      '@docsearch/css': 3.5.1
-      '@docsearch/js': 3.5.1(@algolia/client-search@4.14.2)(search-insights@2.6.0)
-      '@vitejs/plugin-vue': 4.2.3(vite@4.4.6)(vue@3.3.4)
-      '@vue/devtools-api': 6.5.0
-      '@vueuse/core': 10.2.1(vue@3.3.4)
-      '@vueuse/integrations': 10.2.1(focus-trap@7.5.2)(vue@3.3.4)
-      body-scroll-lock: 4.0.0-beta.0
-      focus-trap: 7.5.2
-      mark.js: 8.11.1
-      minisearch: 6.1.0
-      shiki: 0.14.3
-      vite: 4.4.6(@types/node@18.16.0)
-      vue: 3.3.4
-    transitivePeerDependencies:
-      - '@algolia/client-search'
-      - '@types/node'
-      - '@types/react'
-      - '@vue/composition-api'
-      - async-validator
-      - axios
-      - change-case
-      - drauu
-      - fuse.js
-      - idb-keyval
-      - jwt-decode
-      - less
-      - lightningcss
-      - nprogress
-      - qrcode
-      - react
-      - react-dom
-      - sass
-      - search-insights
-      - sortablejs
-      - stylus
-      - sugarss
-      - terser
-      - universal-cookie
-    dev: true
-
   /vitepress@1.0.0-beta.6(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0):
     resolution: {integrity: sha512-xK/ulKgQpKZVbvlL4+/vW49VG7ySi5nmSoKUNH1G4kM+Cj9JwYM+PDJO7jSJROv8zW99G0ise+maDYnaLlbGBQ==}
     hasBin: true

From 1df68f9a5fffdab42b3f406946023f18110f156e Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Wed, 26 Jul 2023 21:46:12 -0300
Subject: [PATCH 212/281] Remove class statement to show application of default
 class

---
 cypress/integration/rendering/flowchart.spec.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/cypress/integration/rendering/flowchart.spec.js b/cypress/integration/rendering/flowchart.spec.js
index 6d8b4a49a..81c1ceeb9 100644
--- a/cypress/integration/rendering/flowchart.spec.js
+++ b/cypress/integration/rendering/flowchart.spec.js
@@ -897,7 +897,6 @@ graph TD
       graph TD
         classDef default fill:#000,stroke:#000,stroke-width:4px,color:#fff 
         default --> default2
-        class default,default2 default
       `,
       { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );

From 9eed2e278bd88bc4caf833e09ce23ec25d76ed74 Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Wed, 26 Jul 2023 22:36:26 -0300
Subject: [PATCH 213/281] Add imgSnapshotTest for escaped quotes

---
 cypress/integration/rendering/flowchart.spec.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/cypress/integration/rendering/flowchart.spec.js b/cypress/integration/rendering/flowchart.spec.js
index 81c1ceeb9..3f7368a3a 100644
--- a/cypress/integration/rendering/flowchart.spec.js
+++ b/cypress/integration/rendering/flowchart.spec.js
@@ -901,4 +901,10 @@ graph TD
       { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
   });
+  it('67: allow escaping quotes with backslash', () => {
+    imgSnapshotTest(`
+      graph TD
+        a_node("This has an escaped \\" in it") -- "edge string can escape too \\"" --> b_node
+    `);
+  });
 });

From d8897426cde74efe044751f2921d127ebac940c6 Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Wed, 26 Jul 2023 22:36:57 -0300
Subject: [PATCH 214/281] Correct edge strings to have same configuration as
 vertex strings

---
 packages/mermaid/src/diagrams/flowchart/flowDb.js             | 1 +
 .../src/diagrams/flowchart/parser/flow-md-string.spec.js      | 2 +-
 packages/mermaid/src/diagrams/flowchart/parser/flow.jison     | 4 +++-
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.js b/packages/mermaid/src/diagrams/flowchart/flowDb.js
index 8d17a30c0..33ae68a86 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowDb.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowDb.js
@@ -150,6 +150,7 @@ export const addSingleLink = function (_start, _end, type) {
   if (linkTextObj !== undefined) {
     edge.text = sanitizeText(linkTextObj.text.trim());
 
+    edge.text = edge.text.replaceAll('\\"', '"');
     // 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);
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-md-string.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-md-string.spec.js
index 9560a33df..13cb262e3 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-md-string.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-md-string.spec.js
@@ -35,7 +35,7 @@ A["\`The cat in **the** hat\`"]-- "\`The *bat* in the chat\`" -->B["The dog in t
     expect(edges[1].end).toBe('C');
     expect(edges[1].type).toBe('arrow_point');
     expect(edges[1].text).toBe('The rat in the mat');
-    expect(edges[1].labelType).toBe('text');
+    expect(edges[1].labelType).toBe('string');
   });
   it('mardown formatting in subgraphs', function () {
     const res = flow.parser.parse(`flowchart LR
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
index 6bc434c3c..e8f0775b8 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
@@ -462,6 +462,8 @@ edgeText: edgeTextToken
     {$$={text:$edgeTextToken, type:'text'};}
     | edgeText edgeTextToken
     {$$={text:$edgeText.text+''+$edgeTextToken, type:$edgeText.type};}
+    |STR
+    {$$={text: $STR, type: 'string'};}
     | MD_STR
     {$$={text:$MD_STR, type:'markdown'};}
     ;
@@ -573,7 +575,7 @@ textToken      :   TEXT | TAGSTART | TAGEND | UNICODE_TEXT;
 
 textNoTagsToken: NUM | NODE_STRING | SPACE | MINUS | keywords |  START_LINK ;
 
-edgeTextToken  :  STR | EDGE_TEXT | UNICODE_TEXT ;
+edgeTextToken  :  EDGE_TEXT | UNICODE_TEXT ;
 
 alphaNumToken   :  NUM | UNICODE_TEXT | NODE_STRING | DIR | DOWN | MINUS | COMMA;
 

From 6c12bbb80fcb1ca308904f83ad075078349abf25 Mon Sep 17 00:00:00 2001
From: Dheeraj Joshi <djoshi@gitlab.com>
Date: Fri, 28 Jul 2023 15:59:32 +0530
Subject: [PATCH 215/281] chore(deps): unpin the dompurify dependency

---
 packages/mermaid/package.json | 2 +-
 pnpm-lock.yaml                | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index 51c0b018c..513b46404 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -67,7 +67,7 @@
     "d3-sankey": "^0.12.3",
     "dagre-d3-es": "7.0.10",
     "dayjs": "^1.11.7",
-    "dompurify": "3.0.5",
+    "dompurify": "^3.0.5",
     "elkjs": "^0.8.2",
     "khroma": "^2.0.0",
     "lodash-es": "^4.17.21",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b8c6b9d6c..11e87708d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -218,7 +218,7 @@ importers:
         specifier: ^1.11.7
         version: 1.11.7
       dompurify:
-        specifier: 3.0.5
+        specifier: ^3.0.5
         version: 3.0.5
       elkjs:
         specifier: ^0.8.2

From e25763d64574b847535aadc7bb56f73e433cb169 Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Fri, 28 Jul 2023 21:19:30 -0300
Subject: [PATCH 216/281] Modified docs to mention escaping quotes with
 backslash

---
 docs/syntax/flowchart.md                      | 5 +++--
 packages/mermaid/src/docs/syntax/flowchart.md | 3 ++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md
index 92678fb6e..97c0113bf 100644
--- a/docs/syntax/flowchart.md
+++ b/docs/syntax/flowchart.md
@@ -605,15 +605,16 @@ flowchart LR
 ### Entity codes to escape characters
 
 It is possible to escape characters using the syntax exemplified here.
+For quotation marks, you can escape them with a backslash.
 
 ```mermaid-example
     flowchart LR
-        A["A double quote:#quot;"] -->B["A dec char:#9829;"]
+        A["A double quote:\""] -->B["A dec char:#9829;"]
 ```
 
 ```mermaid
     flowchart LR
-        A["A double quote:#quot;"] -->B["A dec char:#9829;"]
+        A["A double quote:\""] -->B["A dec char:#9829;"]
 ```
 
 Numbers given are base 10, so `#` can be encoded as `#35;`. It is also supported to use HTML character names.
diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md
index 2e3d78c30..2a3c003b2 100644
--- a/packages/mermaid/src/docs/syntax/flowchart.md
+++ b/packages/mermaid/src/docs/syntax/flowchart.md
@@ -387,10 +387,11 @@ flowchart LR
 ### Entity codes to escape characters
 
 It is possible to escape characters using the syntax exemplified here.
+For quotation marks, you can escape them with a backslash.
 
 ```mermaid-example
     flowchart LR
-        A["A double quote:#quot;"] -->B["A dec char:#9829;"]
+        A["A double quote:\""] -->B["A dec char:#9829;"]
 ```
 
 Numbers given are base 10, so `#` can be encoded as `#35;`. It is also supported to use HTML character names.

From f269f8cc5b94edde1bff1b1b191e321f422e98a3 Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Sat, 29 Jul 2023 21:14:02 -0300
Subject: [PATCH 217/281] Refactor unit tests for vertex shape

---
 .../flowchart/parser/flow-text.spec.js        | 183 +++---------------
 1 file changed, 32 insertions(+), 151 deletions(-)

diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js
index dd4050adb..3898e8775 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js
@@ -328,81 +328,34 @@ describe('[Text] when parsing', () => {
       'kitty',
     ];
 
-    it.each(keywords)('should handle %s keyword in square vertex', function (keyword) {
-      const rest = flow.parser.parse(
-        `graph TD;A_${keyword}_node-->B[This node has a ${keyword} as text];`
-      );
+    const shapes = [
+      { start: '[', end: ']', name: 'square' },
+      { start: '(', end: ')', name: 'round' },
+      { start: '{', end: '}', name: 'diamond' },
+      { start: '(-', end: '-)', name: 'ellipse' },
+      { start: '([', end: '])', name: 'stadium' },
+      { start: '>', end: ']', name: 'odd' },
+      { start: '[(', end: ')]', name: 'cylinder' },
+      { start: '(((', end: ')))', name: 'doublecircle' },
+      { start: '[/', end: '\\]', name: 'trapezoid' },
+      { start: '[\\', end: '/]', name: 'inv_trapezoid' },
+      { start: '[/', end: '/]', name: 'lean_right' },
+      { start: '[\\', end: '\\]', name: 'lean_left' },
+      { start: '[[', end: ']]', name: 'subroutine' },
+      { start: '{{', end: '}}', name: 'hexagon' },
+    ];
 
-      const vert = flow.parser.yy.getVertices();
-      const edges = flow.parser.yy.getEdges();
-      expect(vert['B'].type).toBe('square');
-      expect(vert['B'].text).toBe(`This node has a ${keyword} as text`);
-    });
+    shapes.forEach((shape) => {
+      it.each(keywords)(`should handle %s keyword in ${shape.name} vertex`, function (keyword) {
+        const rest = flow.parser.parse(
+          `graph TD;A_${keyword}_node-->B${shape.start}This node has a ${keyword} as text${shape.end};`
+        );
 
-    it.each(keywords)('should handle %s keyword in round vertex', function (keyword) {
-      const rest = flow.parser.parse(
-        `graph TD;A_${keyword}_node-->B(This node has a ${keyword} as text);`
-      );
-
-      const vert = flow.parser.yy.getVertices();
-      const edges = flow.parser.yy.getEdges();
-      expect(vert['B'].type).toBe('round');
-      expect(vert['B'].text).toBe(`This node has a ${keyword} as text`);
-    });
-
-    it.each(keywords)('should handle %s keyword in diamond vertex', function (keyword) {
-      const rest = flow.parser.parse(
-        `graph TD;A_${keyword}_node-->B{This node has a ${keyword} as text};`
-      );
-
-      const vert = flow.parser.yy.getVertices();
-      const edges = flow.parser.yy.getEdges();
-      expect(vert['B'].type).toBe('diamond');
-      expect(vert['B'].text).toBe(`This node has a ${keyword} as text`);
-    });
-
-    it.each(keywords)('should handle %s keyword in doublecircle vertex', function (keyword) {
-      const rest = flow.parser.parse(
-        `graph TD;A_${keyword}-->-${keyword}-B(((This node has a ${keyword} as text)));`
-      );
-
-      const vert = flow.parser.yy.getVertices();
-      const edges = flow.parser.yy.getEdges();
-      expect(vert[`-${keyword}-B`].type).toBe('doublecircle');
-      expect(vert[`-${keyword}-B`].text).toBe(`This node has a ${keyword} as text`);
-    });
-
-    it.each(keywords)('should handle %s keyword in ellipse vertex', function (keyword) {
-      const rest = flow.parser.parse(
-        `graph TD;A_${keyword}-->B(-This node has a ${keyword} as text-);`
-      );
-
-      const vert = flow.parser.yy.getVertices();
-      const edges = flow.parser.yy.getEdges();
-      expect(vert['B'].type).toBe('ellipse');
-      expect(vert['B'].text).toBe(`This node has a ${keyword} as text`);
-    });
-
-    it.each(keywords)('should handle %s keyword in stadium vertex', function (keyword) {
-      const rest = flow.parser.parse(
-        `graph TD;A_${keyword}_node-->B([This node has a ${keyword} as text]);`
-      );
-
-      const vert = flow.parser.yy.getVertices();
-      const edges = flow.parser.yy.getEdges();
-      expect(vert['B'].type).toBe('stadium');
-      expect(vert['B'].text).toBe(`This node has a ${keyword} as text`);
-    });
-
-    it.each(keywords)('should handle %s keyword in subroutine vertex', function (keyword) {
-      const rest = flow.parser.parse(
-        `graph TD;A_${keyword}_node-->B[[This node has a ${keyword} as text]];`
-      );
-
-      const vert = flow.parser.yy.getVertices();
-      const edges = flow.parser.yy.getEdges();
-      expect(vert['B'].type).toBe('subroutine');
-      expect(vert['B'].text).toBe(`This node has a ${keyword} as text`);
+        const vert = flow.parser.yy.getVertices();
+        const edges = flow.parser.yy.getEdges();
+        expect(vert['B'].type).toBe(`${shape.name}`);
+        expect(vert['B'].text).toBe(`This node has a ${keyword} as text`);
+      });
     });
 
     it.each(keywords)('should handle %s keyword in rect vertex', function (keyword) {
@@ -416,72 +369,6 @@ describe('[Text] when parsing', () => {
       expect(vert['B'].text).toBe(`This node has a ${keyword} as text`);
     });
 
-    it.each(keywords)('should handle %s keyword in cylinder vertex', function (keyword) {
-      const rest = flow.parser.parse(
-        `graph TD;A_${keyword}_node-->B[(This node has a ${keyword} as text)];`
-      );
-
-      const vert = flow.parser.yy.getVertices();
-      const edges = flow.parser.yy.getEdges();
-      expect(vert['B'].type).toBe('cylinder');
-      expect(vert['B'].text).toBe(`This node has a ${keyword} as text`);
-    });
-
-    it.each(keywords)('should handle %s keyword in hexagon vertex', function (keyword) {
-      const rest = flow.parser.parse(
-        `graph TD;A_${keyword}_node-->B{{This node has a ${keyword} as text}};`
-      );
-
-      const vert = flow.parser.yy.getVertices();
-      const edges = flow.parser.yy.getEdges();
-      expect(vert['B'].type).toBe('hexagon');
-      expect(vert['B'].text).toBe(`This node has a ${keyword} as text`);
-    });
-
-    it.each(keywords)('should handle %s keyword in odd vertex', function (keyword) {
-      const rest = flow.parser.parse(
-        `graph TD;A_${keyword}_node-->B>This node has a ${keyword} as text];`
-      );
-
-      const vert = flow.parser.yy.getVertices();
-      const edges = flow.parser.yy.getEdges();
-      expect(vert['B'].type).toBe('odd');
-      expect(vert['B'].text).toBe(`This node has a ${keyword} as text`);
-    });
-
-    it.each(keywords)('should handle %s keyword in trapezoid vertex', function (keyword) {
-      const rest = flow.parser.parse(
-        `graph TD;A_${keyword}_node-->B[/This node has a ${keyword} as text\\];`
-      );
-
-      const vert = flow.parser.yy.getVertices();
-      const edges = flow.parser.yy.getEdges();
-      expect(vert['B'].type).toBe('trapezoid');
-      expect(vert['B'].text).toBe(`This node has a ${keyword} as text`);
-    });
-
-    it.each(keywords)('should handle %s keyword in inv_trapezoid vertex', function (keyword) {
-      const rest = flow.parser.parse(
-        `graph TD;A_${keyword}_node-->B[\\This node has a ${keyword} as text/];`
-      );
-
-      const vert = flow.parser.yy.getVertices();
-      const edges = flow.parser.yy.getEdges();
-      expect(vert['B'].type).toBe('inv_trapezoid');
-      expect(vert['B'].text).toBe(`This node has a ${keyword} as text`);
-    });
-
-    it.each(keywords)('should handle %s keyword in lean_right vertex', function (keyword) {
-      const rest = flow.parser.parse(
-        `graph TD;A_${keyword}_node-->B[/This node has a ${keyword} as text/];`
-      );
-
-      const vert = flow.parser.yy.getVertices();
-      const edges = flow.parser.yy.getEdges();
-      expect(vert['B'].type).toBe('lean_right');
-      expect(vert['B'].text).toBe(`This node has a ${keyword} as text`);
-    });
-
     it('should allow forward slashes in lean_right vertices', function () {
       const rest = flow.parser.parse(`graph TD;A_node-->B[/This node has a / as text/];`);
 
@@ -500,17 +387,6 @@ describe('[Text] when parsing', () => {
       expect(vert['B'].text).toBe(`This node has a \\ as text`);
     });
 
-    it.each(keywords)('should handle %s keyword in lean_left vertex', function (keyword) {
-      const rest = flow.parser.parse(
-        `graph TD;A_${keyword}_node-->B[\\This node has a ${keyword} as text\\];`
-      );
-
-      const vert = flow.parser.yy.getVertices();
-      const edges = flow.parser.yy.getEdges();
-      expect(vert['B'].type).toBe('lean_left');
-      expect(vert['B'].text).toBe(`This node has a ${keyword} as text`);
-    });
-
     it('should handle åäö and minus', function () {
       const res = flow.parser.parse('graph TD;A-->C{Chimpansen hoppar åäö-ÅÄÖ};');
 
@@ -693,7 +569,7 @@ describe('[Text] when parsing', () => {
 
   it('should throw error at nested set of brackets', function () {
     const str = 'graph TD; A[This is a () in text];';
-    expect(() => flow.parser.parse(str)).toThrowError("got 'PE'");
+    expect(() => flow.parser.parse(str)).toThrowError("got 'PS'");
   });
 
   it('should throw error for strings and text at the same time', function () {
@@ -721,4 +597,9 @@ describe('[Text] when parsing', () => {
     const vert = flow.parser.yy.getVertices();
     expect(vert['A'].text).toBe('This is a "()" in text');
   });
+
+  it('should throw error', function () {
+    const str = `graph TD; node[hello ) world] --> works`;
+    expect(() => flow.parser.parse(str)).toThrowError("got 'PE'");
+  });
 });

From bed05ce0619eac4ff26478a145559a9b59f84d6f Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Sat, 29 Jul 2023 21:23:05 -0300
Subject: [PATCH 218/281] Disallow any vertex shape start or end token in any
 text state

---
 packages/mermaid/src/diagrams/flowchart/parser/flow.jison | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
index e8f0775b8..49a56e82b 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
@@ -143,7 +143,7 @@ that id.
 <*>\s*\~\~[\~]+\s*              return 'LINK';
 
 <ellipseText>[-/\)][\)]         { this.popState(); return '-)'; }
-<ellipseText>[^/)]|-/!\)+       return "TEXT"
+<ellipseText>[^\(\)\[\]\{\}]|-/!\)+       return "TEXT"
 <*>"(-"                         { this.pushState("ellipseText"); return '(-'; }
 
 <text>"])"                { this.popState(); return 'STADIUMEND'; }
@@ -164,7 +164,7 @@ that id.
 
 <trapText>[\\(?=\])][\]]  { this.popState(); return 'TRAPEND'; }
 <trapText>\/(?=\])\]     { this.popState(); return 'INVTRAPEND'; }
-<trapText>\/(?!\])|\\(?!\])|[^\\\]\/]+        return 'TEXT';
+<trapText>\/(?!\])|\\(?!\])|[^\\\[\]\(\)\{\}\/]+        return 'TEXT';
 <*>"[/"                   { this.pushState("trapText"); return 'TRAPSTART'; }
 
 <*>"[\\"                 { this.pushState("trapText"); return 'INVTRAPSTART'; }
@@ -251,7 +251,7 @@ that id.
 
 <text>(\})            { this.popState(); return 'DIAMOND_STOP' }
 <*>"{"                { this.pushState("text"); return 'DIAMOND_START' }
-<text>[^\]\)\}\|\"]+    return "TEXT";
+<text>[^\[\]\(\)\{\}\|\"]+    return "TEXT";
 
 "\""                  return 'QUOTE';
 (\r?\n)+              return 'NEWLINE';

From 844f9d96e75ed3713b5a7ddadd337815a56d66b0 Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Sat, 29 Jul 2023 22:16:28 -0300
Subject: [PATCH 219/281] Update and add new imgSnapshotTest

---
 cypress/integration/rendering/flowchart.spec.js | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/cypress/integration/rendering/flowchart.spec.js b/cypress/integration/rendering/flowchart.spec.js
index 3f7368a3a..1ae10aba9 100644
--- a/cypress/integration/rendering/flowchart.spec.js
+++ b/cypress/integration/rendering/flowchart.spec.js
@@ -895,8 +895,8 @@ graph TD
     imgSnapshotTest(
       `
       graph TD
-        classDef default fill:#000,stroke:#000,stroke-width:4px,color:#fff 
-        default --> default2
+        classDef default fill:#a34,stroke:#000,stroke-width:4px,color:#fff 
+        hello --> default
       `,
       { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
@@ -907,4 +907,16 @@ graph TD
         a_node("This has an escaped \\" in it") -- "edge string can escape too \\"" --> b_node
     `);
   });
+  it('68: should be able to style default node independently', () => {
+    imgSnapshotTest(
+      `
+    flowchart TD
+      classDef default fill:#a34
+      hello --> default
+
+      style default stroke:#000,stroke-width:4px
+    `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
 });

From ed4feaebf2a237e98b363526f31360e793cfb396 Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Sat, 29 Jul 2023 22:27:31 -0300
Subject: [PATCH 220/281] Remove required space from TAGEND token regex

Originally, I thought this was necessary to prevent parsing
the token as part of an edge. I forgot that the token will always
be separated from the link/edge by the node id. Added an unit test
for an edge case to be certain.
---
 .../src/diagrams/flowchart/parser/flow-text.spec.js        | 7 +++++++
 packages/mermaid/src/diagrams/flowchart/parser/flow.jison  | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js
index 3898e8775..3dfde5ccb 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js
@@ -369,6 +369,13 @@ describe('[Text] when parsing', () => {
       expect(vert['B'].text).toBe(`This node has a ${keyword} as text`);
     });
 
+    it('should handle edge case for odd vertex with node id ending with minus', function () {
+      const res = flow.parser.parse('graph TD;A_node-->odd->Vertex Text];');
+      const vert = flow.parser.yy.getVertices();
+
+      expect(vert['odd-'].type).toBe('odd');
+      expect(vert['odd-'].text).toBe('Vertex Text');
+    });
     it('should allow forward slashes in lean_right vertices', function () {
       const rest = flow.parser.parse(`graph TD;A_node-->B[/This node has a / as text/];`);
 
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
index 49a56e82b..a4584c808 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
@@ -154,7 +154,7 @@ that id.
 
 "[|"                      { return 'VERTEX_WITH_PROPS_START'; }
 
-\>/!\s                    { this.pushState("text"); return 'TAGEND'; }
+\>                    { this.pushState("text"); return 'TAGEND'; }
 
 <text>")]"                { this.popState(); return 'CYLINDEREND'; }
 <*>"[("                   { this.pushState("text") ;return 'CYLINDERSTART'; }

From b5456813e855dfc6396ee234e05ebda5b21c2832 Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Sat, 29 Jul 2023 22:44:18 -0300
Subject: [PATCH 221/281] Show escaped quotes in docs using old and new method

---
 docs/syntax/flowchart.md                      | 8 +++++---
 packages/mermaid/src/docs/syntax/flowchart.md | 5 +++--
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md
index 97c0113bf..5a338c261 100644
--- a/docs/syntax/flowchart.md
+++ b/docs/syntax/flowchart.md
@@ -605,16 +605,18 @@ flowchart LR
 ### Entity codes to escape characters
 
 It is possible to escape characters using the syntax exemplified here.
-For quotation marks, you can escape them with a backslash.
+For quotation marks, you can escape them with a backslash as well.
 
 ```mermaid-example
     flowchart LR
-        A["A double quote:\""] -->B["A dec char:#9829;"]
+        A["A double quote:#quot;"] --> B["A dec char:#9829;"]
+        B --> C["This is a \"square\" vertex"]
 ```
 
 ```mermaid
     flowchart LR
-        A["A double quote:\""] -->B["A dec char:#9829;"]
+        A["A double quote:#quot;"] --> B["A dec char:#9829;"]
+        B --> C["This is a \"square\" vertex"]
 ```
 
 Numbers given are base 10, so `#` can be encoded as `#35;`. It is also supported to use HTML character names.
diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md
index 2a3c003b2..b5308ad50 100644
--- a/packages/mermaid/src/docs/syntax/flowchart.md
+++ b/packages/mermaid/src/docs/syntax/flowchart.md
@@ -387,11 +387,12 @@ flowchart LR
 ### Entity codes to escape characters
 
 It is possible to escape characters using the syntax exemplified here.
-For quotation marks, you can escape them with a backslash.
+For quotation marks, you can escape them with a backslash as well.
 
 ```mermaid-example
     flowchart LR
-        A["A double quote:\""] -->B["A dec char:#9829;"]
+        A["A double quote:#quot;"] --> B["A dec char:#9829;"]
+        B --> C["This is a \"square\" vertex"]
 ```
 
 Numbers given are base 10, so `#` can be encoded as `#35;`. It is also supported to use HTML character names.

From 1a99825ab2adb93c1a8b9eaa866c309e7b26aa67 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Mon, 31 Jul 2023 01:25:54 +0000
Subject: [PATCH 222/281] chore(deps): update all minor dependencies

---
 packages/mermaid/src/docs/package.json |   4 +-
 pnpm-lock.yaml                         | 261 +++++++++++++------------
 2 files changed, 133 insertions(+), 132 deletions(-)

diff --git a/packages/mermaid/src/docs/package.json b/packages/mermaid/src/docs/package.json
index 64f24fe50..27b363f6a 100644
--- a/packages/mermaid/src/docs/package.json
+++ b/packages/mermaid/src/docs/package.json
@@ -21,13 +21,13 @@
   },
   "devDependencies": {
     "@iconify-json/carbon": "^1.1.16",
-    "@unocss/reset": "^0.53.0",
+    "@unocss/reset": "^0.54.0",
     "@vite-pwa/vitepress": "^0.2.0",
     "@vitejs/plugin-vue": "^4.2.1",
     "fast-glob": "^3.2.12",
     "https-localhost": "^4.7.1",
     "pathe": "^1.1.0",
-    "unocss": "^0.53.0",
+    "unocss": "^0.54.0",
     "unplugin-vue-components": "^0.25.0",
     "vite": "^4.3.3",
     "vite-plugin-pwa": "^0.16.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b8c6b9d6c..397cd55b4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,5 +1,9 @@
 lockfileVersion: '6.0'
 
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
 importers:
 
   .:
@@ -432,8 +436,8 @@ importers:
         specifier: ^1.1.16
         version: 1.1.16
       '@unocss/reset':
-        specifier: ^0.53.0
-        version: 0.53.0
+        specifier: ^0.54.0
+        version: 0.54.0
       '@vite-pwa/vitepress':
         specifier: ^0.2.0
         version: 0.2.0(vite-plugin-pwa@0.16.0)
@@ -450,8 +454,8 @@ importers:
         specifier: ^1.1.0
         version: 1.1.0
       unocss:
-        specifier: ^0.53.0
-        version: 0.53.0(postcss@8.4.27)(rollup@2.79.1)(vite@4.3.3)
+        specifier: ^0.54.0
+        version: 0.54.0(postcss@8.4.27)(rollup@2.79.1)(vite@4.3.3)
       unplugin-vue-components:
         specifier: ^0.25.0
         version: 0.25.0(rollup@2.79.1)(vue@3.2.47)
@@ -3582,14 +3586,14 @@ packages:
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
     dev: true
 
-  /@iconify/utils@2.1.5:
-    resolution: {integrity: sha512-6MvDI+I6QMvXn5rK9KQGdpEE4mmLTcuQdLZEiX5N+uZB+vc4Yw9K1OtnOgkl8mp4d9X0UrILREyZgF1NUwUt+Q==}
+  /@iconify/utils@2.1.7:
+    resolution: {integrity: sha512-P8S3z/L1LcV4Qem9AoCfVAaTFGySEMzFEY4CHZLkfRj0Fv9LiR+AwjDgrDrzyI93U2L2mg9JHsbTJ52mF8suNw==}
     dependencies:
       '@antfu/install-pkg': 0.1.1
       '@antfu/utils': 0.7.4
       '@iconify/types': 2.0.0
       debug: 4.3.4(supports-color@8.1.1)
-      kolorist: 1.7.0
+      kolorist: 1.8.0
       local-pkg: 0.4.3
     transitivePeerDependencies:
       - supports-color
@@ -4950,31 +4954,31 @@ packages:
       eslint-visitor-keys: 3.4.0
     dev: true
 
-  /@unocss/astro@0.53.0(rollup@2.79.1)(vite@4.3.3):
-    resolution: {integrity: sha512-8bR7ysIMZEOpcjd/cVmogcABSFDYPjUqMnbflv44p1A2/deemo9CIkpRARoq/96NQuzWJsKhKodcQodExZcqiA==}
+  /@unocss/astro@0.54.0(rollup@2.79.1)(vite@4.3.3):
+    resolution: {integrity: sha512-Zq4GGRiXbWCipN9lUKlu3fmlrqIYu3rFoGwjL+v7VJulP8tVhiqzfbLXFKQePOVvCmiSvCKr6leuqgFA7PlPBg==}
     dependencies:
-      '@unocss/core': 0.53.0
-      '@unocss/reset': 0.53.0
-      '@unocss/vite': 0.53.0(rollup@2.79.1)(vite@4.3.3)
+      '@unocss/core': 0.54.0
+      '@unocss/reset': 0.54.0
+      '@unocss/vite': 0.54.0(rollup@2.79.1)(vite@4.3.3)
     transitivePeerDependencies:
       - rollup
       - vite
     dev: true
 
-  /@unocss/cli@0.53.0(rollup@2.79.1):
-    resolution: {integrity: sha512-9WNBHy8m8tMqwcp7mUhebRUBvHQfbx01CMe5cAFLmUYtJULM+8IjJxqERkaAZyyoOXf1TNO2v1dFAmCwhMRCLQ==}
+  /@unocss/cli@0.54.0(rollup@2.79.1):
+    resolution: {integrity: sha512-SuQkqJxuvC9JHUpHbFQY5r+6/FoF0j4zTwY25POlr9SIz3CFrdn4tDndxvhClap9d6wVHKSbHBP9EY0fA2SQzw==}
     engines: {node: '>=14'}
     hasBin: true
     dependencies:
       '@ampproject/remapping': 2.2.1
       '@rollup/pluginutils': 5.0.2(rollup@2.79.1)
-      '@unocss/config': 0.53.0
-      '@unocss/core': 0.53.0
-      '@unocss/preset-uno': 0.53.0
+      '@unocss/config': 0.54.0
+      '@unocss/core': 0.54.0
+      '@unocss/preset-uno': 0.54.0
       cac: 6.7.14
       chokidar: 3.5.3
       colorette: 2.0.20
-      consola: 3.1.0
+      consola: 3.2.3
       fast-glob: 3.3.0
       magic-string: 0.30.1
       pathe: 1.1.1
@@ -4983,154 +4987,154 @@ packages:
       - rollup
     dev: true
 
-  /@unocss/config@0.53.0:
-    resolution: {integrity: sha512-D9A3uFT6jSj/EgMOCpQQ+dPadLQDiEIb0BHa7BYW7/3STijnPMcFjPVjzABj9Wn7RQjka/MZ2/AvfH9eYMTR8g==}
+  /@unocss/config@0.54.0:
+    resolution: {integrity: sha512-FT0zOJCR2qr5P08msNovsJ4Qx+P4rXoYlK2zt/hgLKiFRIUKxnwSBDvapqmW6vo3vzOsdmBBO0YKpaZJ877F8A==}
     engines: {node: '>=14'}
     dependencies:
-      '@unocss/core': 0.53.0
+      '@unocss/core': 0.54.0
       unconfig: 0.3.9
     dev: true
 
-  /@unocss/core@0.53.0:
-    resolution: {integrity: sha512-MB6hqSN2wjmm3NNYspNqzxvMv7LnyLqz0uCWr15elRqnjsuq01w7DZ1iPS9ckA2M3YjQIRTXR9YPtDbSqY0jcA==}
+  /@unocss/core@0.54.0:
+    resolution: {integrity: sha512-iHfJJ8U+pVhMrbVpzMb0GImZUJu3Xmp165Q5Qr44hGOEzcMdvdBxbMSSl2VBKjRsEuNudNVhh7XJAyUcKxnSWg==}
     dev: true
 
-  /@unocss/extractor-arbitrary-variants@0.53.0:
-    resolution: {integrity: sha512-f1v2E5PherulTAdrsXXb5Knaz4Viu2dM71WalNYhb+j9QqwGngagLrMzRzeIRLOEI2c0D0l7HBQtew+QFWsXcg==}
+  /@unocss/extractor-arbitrary-variants@0.54.0:
+    resolution: {integrity: sha512-luJTF3TnXFbMZ2Gau56p0uRsR+yIUbvHbT6ag6mvv0TvUsnhEFsMUdkXVJ1arp0duIl/dg0r1drL/Ax75RszNw==}
     dependencies:
-      '@unocss/core': 0.53.0
+      '@unocss/core': 0.54.0
     dev: true
 
-  /@unocss/inspector@0.53.0:
-    resolution: {integrity: sha512-TX8O39tXuEStUs516YBiCr2BS68Z9oHXnMZspxBxMma1X47bW2Hz+x9kWkhFzqmHWBjFPJob1PjjkbfeE4TbOQ==}
+  /@unocss/inspector@0.54.0:
+    resolution: {integrity: sha512-D3yVO7zE4NY/sARiNCUXQC7HPQZhEy7U1mSZEPc+vsVKx3nJJuRMqK9qo60SV4AZuxnd8WhL0T00W7cjVldzRw==}
     dependencies:
       gzip-size: 6.0.0
       sirv: 2.0.3
     dev: true
 
-  /@unocss/postcss@0.53.0(postcss@8.4.27):
-    resolution: {integrity: sha512-q+5aDvkwP1eEhDmdz32WrwsGEEcJdQLy3apiU/df+CaL71HATvUfMZJVZbXZlFqoed703c+cGLHOhRHMPDk/dw==}
+  /@unocss/postcss@0.54.0(postcss@8.4.27):
+    resolution: {integrity: sha512-t1PmIkp2Qa9F/9swfCVCXMuheQxd1ddrcvf0+d4fOckpFF8YhvOi+WfMoZW4YFwoCmG5pvDg4VYgKbDunGHhRg==}
     engines: {node: '>=14'}
     peerDependencies:
       postcss: ^8.4.21
     dependencies:
-      '@unocss/config': 0.53.0
-      '@unocss/core': 0.53.0
+      '@unocss/config': 0.54.0
+      '@unocss/core': 0.54.0
       css-tree: 2.3.1
       fast-glob: 3.3.0
       magic-string: 0.30.1
       postcss: 8.4.27
     dev: true
 
-  /@unocss/preset-attributify@0.53.0:
-    resolution: {integrity: sha512-RqvSbuECeMBVVt2rmNIozznLBkfzkfe7vOIx3arytPBG/nggDnC1GB/xTxCGAiU7UcEXw03laWtjwXHmJHt8Gw==}
+  /@unocss/preset-attributify@0.54.0:
+    resolution: {integrity: sha512-5Ar1n7LHKF6z1BF9N5CR8jjl9TXrVktTDd+Ldyia69jDLi+stVhM9AOGEDE8wbDkLKwv9CK5XhvyPCazGHrG+A==}
     dependencies:
-      '@unocss/core': 0.53.0
+      '@unocss/core': 0.54.0
     dev: true
 
-  /@unocss/preset-icons@0.53.0:
-    resolution: {integrity: sha512-0Et3dtrmBRVPZ5pGiITrwb9O01M88s0juOVSM7L4z0Uf0RNXuPCGwh2N5TRX2IIS7LAi4k0tAXFUORlkUiC2Lg==}
+  /@unocss/preset-icons@0.54.0:
+    resolution: {integrity: sha512-WHdkpMzj6tohIkCc/+mEOzn0Yppqoz3y5zbI3WsDqA2/QFNSXx4haWcjV5iJI42uGcLXRp4K3l9JV3EL+oAxbg==}
     dependencies:
-      '@iconify/utils': 2.1.5
-      '@unocss/core': 0.53.0
-      ofetch: 1.0.1
+      '@iconify/utils': 2.1.7
+      '@unocss/core': 0.54.0
+      ofetch: 1.1.1
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@unocss/preset-mini@0.53.0:
-    resolution: {integrity: sha512-hGj9ltZUJIuPT+9bO+R0OlsQOSlV7rjQRkSSMnUaDsuKfzhahsyc7QglNHZI4wuTI/9iSJKGUD4nvTe559+8Hg==}
+  /@unocss/preset-mini@0.54.0:
+    resolution: {integrity: sha512-y+BnGpQAGC3ZWWZfXnsvUuTTO2rNnakHx4jIyf1cv7rw5oo7jL+ONb8stKqlmLGCzlQUKjG1xp+DGuKSVnRXBw==}
     dependencies:
-      '@unocss/core': 0.53.0
-      '@unocss/extractor-arbitrary-variants': 0.53.0
+      '@unocss/core': 0.54.0
+      '@unocss/extractor-arbitrary-variants': 0.54.0
     dev: true
 
-  /@unocss/preset-tagify@0.53.0:
-    resolution: {integrity: sha512-S3e1d2jJvjEbGBE0jPEht/Hmp+245SxjWcrDdO7HmKVL2+0vwIQQg6P2P9aUWqt+/kZQ6iBStSzGm9RyKRKMhw==}
+  /@unocss/preset-tagify@0.54.0:
+    resolution: {integrity: sha512-FTIZc0vMoX9+fcjPYMWALpCQp3cZQCFzR05CVJapvymxb6zl5eZq7e+tpvrmU9ZPSOdG+eHTd3SxhjeJSwh15g==}
     dependencies:
-      '@unocss/core': 0.53.0
+      '@unocss/core': 0.54.0
     dev: true
 
-  /@unocss/preset-typography@0.53.0:
-    resolution: {integrity: sha512-VFTNV8O9KIH/JX9Pn43Vv6JrCTljG9NYnuvZpKpEp95uYDcZQAISao04RWEzbAzqB31x8N9Aga1Bq2TSOg3uTA==}
+  /@unocss/preset-typography@0.54.0:
+    resolution: {integrity: sha512-QqHmC49nDgYeoOCMZp1OPn6R7ISIb2LMpSq81iuuFDeYO8J+JTBWe+Z1TZhVRAXwc9rsVZeUWW6PqoBGP9QCOw==}
     dependencies:
-      '@unocss/core': 0.53.0
-      '@unocss/preset-mini': 0.53.0
+      '@unocss/core': 0.54.0
+      '@unocss/preset-mini': 0.54.0
     dev: true
 
-  /@unocss/preset-uno@0.53.0:
-    resolution: {integrity: sha512-f50D2nFnX7nXvxtueUfCRbSCrWNJTFm4qKg0J9gzqyOJGWJoNcN2Ig9aL0P47W1TmIjYA5SpGlvg6U5qIfkNtQ==}
+  /@unocss/preset-uno@0.54.0:
+    resolution: {integrity: sha512-09/sthjGLDNMr/Cayu0Gy9jTMSxUuTfetWnM3jkByNidhfuzMW26eaMhxTrbUd28H8Titt6M+WgbJ7Gi0lQtZA==}
     dependencies:
-      '@unocss/core': 0.53.0
-      '@unocss/preset-mini': 0.53.0
-      '@unocss/preset-wind': 0.53.0
+      '@unocss/core': 0.54.0
+      '@unocss/preset-mini': 0.54.0
+      '@unocss/preset-wind': 0.54.0
     dev: true
 
-  /@unocss/preset-web-fonts@0.53.0:
-    resolution: {integrity: sha512-CAZW/PSp9+VBvzE/T56v2Yb8Nk3xF9XJaQrDydF9cAPyz/gVOZBbKQSDS8OqyAqKiXbnn+NYCwEqTG8v/YOMyw==}
+  /@unocss/preset-web-fonts@0.54.0:
+    resolution: {integrity: sha512-3x1SDbJ2omwNNc3eK19zOdNU6moJg4SEr09GkeV4MMHrMXM6BHW2mEJYFSVgmTVD1RN4LZuoy/gTHMWpJhTuzw==}
     dependencies:
-      '@unocss/core': 0.53.0
-      ofetch: 1.0.1
+      '@unocss/core': 0.54.0
+      ofetch: 1.1.1
     dev: true
 
-  /@unocss/preset-wind@0.53.0:
-    resolution: {integrity: sha512-vb9tV3Cze+w8OZyOd/Xi6Zn8F8+EV53AZIqCrQvMD/6ZeqQJ9gjFx/Q69H/bu009wnPleQpce6RKJcNqMzif8g==}
+  /@unocss/preset-wind@0.54.0:
+    resolution: {integrity: sha512-SO971KQOYzM5IKwGDBve+EWBKevU1T0mK20g17BHxPI++ubHPWRRQIh/xxHyew592taBFWK6Q75fcbOgIodx4w==}
     dependencies:
-      '@unocss/core': 0.53.0
-      '@unocss/preset-mini': 0.53.0
+      '@unocss/core': 0.54.0
+      '@unocss/preset-mini': 0.54.0
     dev: true
 
-  /@unocss/reset@0.53.0:
-    resolution: {integrity: sha512-4XJkEtVxUGYp+WX2aRTrZLNp6MEwulBvhhpkAjwfkS+wVdo9lMma0O93TCqJaFeYx7lU8W92APB4n918rz9scA==}
+  /@unocss/reset@0.54.0:
+    resolution: {integrity: sha512-zxvr96hVsmvJtxCLatLSCc67RBEgqvVDhEtkIFxIz5oCJzxvipJTGdKxM4F6Akyzx1A+q7zM8dimqvmC6D5Idw==}
     dev: true
 
-  /@unocss/scope@0.53.0:
-    resolution: {integrity: sha512-JAk3jJeFTmmafVI8Oy/TkAs1/NXpR9Vy5IEIMO6gyAmYw0VjiL9dkYDNZAD9hwdj/oRIUgJMcX96Huhy+YDl/w==}
+  /@unocss/scope@0.54.0:
+    resolution: {integrity: sha512-47M3y3sl512BWZL5/aLrGPglQIRUjQrIW+WVVh3uzwIGVnDNHlxIhcHQUXXJuf8SLduXoIvcZQTfJt+jSXeuhA==}
     dev: true
 
-  /@unocss/transformer-attributify-jsx-babel@0.53.0:
-    resolution: {integrity: sha512-++DTBEkFS2/1VE+TBPEmK0NAaCa/KP7dkJ7uldrQ+c5MpDp/IcCkOt8vPEL/6qKhUbTYXb/hruqq6wv27ZDrSg==}
+  /@unocss/transformer-attributify-jsx-babel@0.54.0:
+    resolution: {integrity: sha512-+YWhyReh6JZvGiYFZ61tyqkKOc/Tn+hyYaO7VP+G2IvJqtjTwzAuyxANHimCle7O4GLodouiHPe3lKscVFt0vg==}
     dependencies:
-      '@unocss/core': 0.53.0
+      '@unocss/core': 0.54.0
     dev: true
 
-  /@unocss/transformer-attributify-jsx@0.53.0:
-    resolution: {integrity: sha512-4QJEmoj2of7nZM8afNsMk+NWX3K89j1sHx+EKw5+s1r/Pg4/PxeDgF4PnRWvPnjvRpDaRRTZGRxTrBEimup8vg==}
+  /@unocss/transformer-attributify-jsx@0.54.0:
+    resolution: {integrity: sha512-in5IglhFqY/3GFe7IZA7g5Q9fskjiWAZiKtCTp5vFExagq1d3Tr9VIOA98SEXBrpXXIh3lKbTiY0NusJRU3K2Q==}
     dependencies:
-      '@unocss/core': 0.53.0
+      '@unocss/core': 0.54.0
     dev: true
 
-  /@unocss/transformer-compile-class@0.53.0:
-    resolution: {integrity: sha512-PTPysxBAimEWspMU3gMo+053M5RURnLT88Wp0y8f4F8oEMg7fV9Tn5f/bftvG+iI7dPyl4m/OsislxfucoESYw==}
+  /@unocss/transformer-compile-class@0.54.0:
+    resolution: {integrity: sha512-WK1fC+iDOl7Z7fO2ids6nWiMXMPHEfwMOs5dbv5lBz9UTrY1kpObToBsm3EfzhR6vwOTgld1UzpKAs3zCqZoKg==}
     dependencies:
-      '@unocss/core': 0.53.0
+      '@unocss/core': 0.54.0
     dev: true
 
-  /@unocss/transformer-directives@0.53.0:
-    resolution: {integrity: sha512-EIrrVphm0Bv+Ng2w1Qj5f0JFkfbN0b1/1fJ9hwgb5S2ewE3Xvwk59/h321D/GGDraQCUqqyZGgcG368xVh3pQA==}
+  /@unocss/transformer-directives@0.54.0:
+    resolution: {integrity: sha512-DJ9B5TSxScoj4B1C8H3qeUIfNGjUPuM42Lvl2exDEk4RhA/IwVePnCAjTl8UsHTDI9z+6H37v4p8j8srPrzEmQ==}
     dependencies:
-      '@unocss/core': 0.53.0
+      '@unocss/core': 0.54.0
       css-tree: 2.3.1
     dev: true
 
-  /@unocss/transformer-variant-group@0.53.0:
-    resolution: {integrity: sha512-dwfjifgoa2VuO3LCl2ayRw3M5T6EfDKt16s9KbIRUcHqMJFnoHACAk8e4YsHGBvly0utbQHxFuBygOar3IfxEg==}
+  /@unocss/transformer-variant-group@0.54.0:
+    resolution: {integrity: sha512-qwviBwjBKhbXYK0T1wNuM3weY+RJbmrWmKqWTldXAuZDf0q06KAa4jQC8FF1YXhq5/Z6tn2MW2GFPVWd/8nPHQ==}
     dependencies:
-      '@unocss/core': 0.53.0
+      '@unocss/core': 0.54.0
     dev: true
 
-  /@unocss/vite@0.53.0(rollup@2.79.1)(vite@4.3.3):
-    resolution: {integrity: sha512-JoZhKVNruRjfySMVg/zNJbLEn/NTXj29Wf0SN4++xnGKrSapkPzYC46psL5bm5N5v4SHdpepTCoonC3FWCY6Fw==}
+  /@unocss/vite@0.54.0(rollup@2.79.1)(vite@4.3.3):
+    resolution: {integrity: sha512-lABmJKYs/yNfZZSs3xwVhBZwNhfLaYcdKxPAopJ8MKiUqECdWvHqLvklKQvLttZpN3dQUmGTQLblM+55IodKEw==}
     peerDependencies:
       vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0
     dependencies:
       '@ampproject/remapping': 2.2.1
       '@rollup/pluginutils': 5.0.2(rollup@2.79.1)
-      '@unocss/config': 0.53.0
-      '@unocss/core': 0.53.0
-      '@unocss/inspector': 0.53.0
-      '@unocss/scope': 0.53.0
-      '@unocss/transformer-directives': 0.53.0
+      '@unocss/config': 0.54.0
+      '@unocss/core': 0.54.0
+      '@unocss/inspector': 0.54.0
+      '@unocss/scope': 0.54.0
+      '@unocss/transformer-directives': 0.54.0
       chokidar: 3.5.3
       fast-glob: 3.3.0
       magic-string: 0.30.1
@@ -7029,8 +7033,9 @@ packages:
     engines: {node: '>=0.8'}
     dev: true
 
-  /consola@3.1.0:
-    resolution: {integrity: sha512-rrrJE6rP0qzl/Srg+C9x/AE5Kxfux7reVm1Wh0wCjuXvih6DqZgqDZe8auTD28fzJ9TF0mHlSDrPpWlujQRo1Q==}
+  /consola@3.2.3:
+    resolution: {integrity: sha512-I5qxpzLv+sJhTVEoLYNcTW+bThDCPsit0vLNKShZx6rLtpilNpmmeTPaeqJb9ZE9dV3DGaeby6Vuhrw38WjeyQ==}
+    engines: {node: ^14.18.0 || >=16.10.0}
     dev: true
 
   /content-disposition@0.5.4:
@@ -7966,8 +7971,8 @@ packages:
     resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
     engines: {node: '>=6'}
 
-  /destr@1.2.2:
-    resolution: {integrity: sha512-lrbCJwD9saUQrqUfXvl6qoM+QN3W7tLV5pAOs+OqOmopCCz/JkE05MHedJR1xfk4IAnZuJXPVuN5+7jNA2ZCiA==}
+  /destr@2.0.0:
+    resolution: {integrity: sha512-FJ9RDpf3GicEBvzI3jxc2XhHzbqD8p4ANw/1kPsFBfTvP1b7Gn/Lg1vO7R9J4IVgoMbyUmFrFGZafJ1hPZpvlg==}
     dev: true
 
   /destroy@1.2.0:
@@ -11169,8 +11174,8 @@ packages:
     resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
     engines: {node: '>=6'}
 
-  /kolorist@1.7.0:
-    resolution: {integrity: sha512-ymToLHqL02udwVdbkowNpzjFd6UzozMtshPQKVi5k1EjKRqKqBrOnE9QbLEb0/pV76SAiIT13hdL8R6suc+f3g==}
+  /kolorist@1.8.0:
+    resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==}
     dev: true
 
   /ky@0.30.0:
@@ -12198,8 +12203,8 @@ packages:
     engines: {node: '>=10.5.0'}
     dev: true
 
-  /node-fetch-native@1.1.0:
-    resolution: {integrity: sha512-nl5goFCig93JZ9FIV8GHT9xpNqXbxQUzkOmKIMKmncsBH9jhg7qKex8hirpymkBFmNQ114chEEG5lS4wgK2I+Q==}
+  /node-fetch-native@1.2.0:
+    resolution: {integrity: sha512-5IAMBTl9p6PaAjYCnMv5FmqIF6GcZnawAVnzaCG0rX2aYZJ4CxEkZNtVPuTRug7fL7wyM5BQYTlAzcyMPi6oTQ==}
     dev: true
 
   /node-fetch@2.6.7:
@@ -12397,12 +12402,12 @@ packages:
     resolution: {integrity: sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==}
     dev: true
 
-  /ofetch@1.0.1:
-    resolution: {integrity: sha512-icBz2JYfEpt+wZz1FRoGcrMigjNKjzvufE26m9+yUiacRQRHwnNlGRPiDnW4op7WX/MR6aniwS8xw8jyVelF2g==}
+  /ofetch@1.1.1:
+    resolution: {integrity: sha512-SSMoktrp9SNLi20BWfB/BnnKcL0RDigXThD/mZBeQxkIRv1xrd9183MtLdsqRYLYSqW0eTr5t8w8MqjNhvoOQQ==}
     dependencies:
-      destr: 1.2.2
-      node-fetch-native: 1.1.0
-      ufo: 1.1.1
+      destr: 2.0.0
+      node-fetch-native: 1.2.0
+      ufo: 1.1.2
     dev: true
 
   /on-exit-leak-free@2.1.0:
@@ -14918,10 +14923,6 @@ packages:
     resolution: {integrity: sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==}
     dev: true
 
-  /ufo@1.1.1:
-    resolution: {integrity: sha512-MvlCc4GHrmZdAllBc0iUDowff36Q9Ndw/UzqmEKyrfSzokTd9ZCy1i+IIk5hrYKkjoYVQyNbrw7/F8XJ2rEwTg==}
-    dev: true
-
   /ufo@1.1.2:
     resolution: {integrity: sha512-TrY6DsjTQQgyS3E3dBaOXf0TpPD8u9FVrVYmKVegJuFw51n/YB9XPt+U6ydzFG5ZIN7+DIjPbNmXoBj9esYhgQ==}
     dev: true
@@ -15051,35 +15052,35 @@ packages:
     engines: {node: '>= 10.0.0'}
     dev: true
 
-  /unocss@0.53.0(postcss@8.4.27)(rollup@2.79.1)(vite@4.3.3):
-    resolution: {integrity: sha512-kY4h5ERiDYlSnL2X+hbDfh+uaF7QNouy7j51GOTUr3Q0aaWehaNd05b15SjHrab559dEC0mYfrSEdh/DnCK1cw==}
+  /unocss@0.54.0(postcss@8.4.27)(rollup@2.79.1)(vite@4.3.3):
+    resolution: {integrity: sha512-SXjyQqt/MP1uW8mjEmQaSa0zd+QB3FwaGD/ityNlu+zNRx1D03BPP9ACbJDB1zZKx4aodMVSsHZ3TV5wsu+VRQ==}
     engines: {node: '>=14'}
     peerDependencies:
-      '@unocss/webpack': 0.53.0
+      '@unocss/webpack': 0.54.0
     peerDependenciesMeta:
       '@unocss/webpack':
         optional: true
     dependencies:
-      '@unocss/astro': 0.53.0(rollup@2.79.1)(vite@4.3.3)
-      '@unocss/cli': 0.53.0(rollup@2.79.1)
-      '@unocss/core': 0.53.0
-      '@unocss/extractor-arbitrary-variants': 0.53.0
-      '@unocss/postcss': 0.53.0(postcss@8.4.27)
-      '@unocss/preset-attributify': 0.53.0
-      '@unocss/preset-icons': 0.53.0
-      '@unocss/preset-mini': 0.53.0
-      '@unocss/preset-tagify': 0.53.0
-      '@unocss/preset-typography': 0.53.0
-      '@unocss/preset-uno': 0.53.0
-      '@unocss/preset-web-fonts': 0.53.0
-      '@unocss/preset-wind': 0.53.0
-      '@unocss/reset': 0.53.0
-      '@unocss/transformer-attributify-jsx': 0.53.0
-      '@unocss/transformer-attributify-jsx-babel': 0.53.0
-      '@unocss/transformer-compile-class': 0.53.0
-      '@unocss/transformer-directives': 0.53.0
-      '@unocss/transformer-variant-group': 0.53.0
-      '@unocss/vite': 0.53.0(rollup@2.79.1)(vite@4.3.3)
+      '@unocss/astro': 0.54.0(rollup@2.79.1)(vite@4.3.3)
+      '@unocss/cli': 0.54.0(rollup@2.79.1)
+      '@unocss/core': 0.54.0
+      '@unocss/extractor-arbitrary-variants': 0.54.0
+      '@unocss/postcss': 0.54.0(postcss@8.4.27)
+      '@unocss/preset-attributify': 0.54.0
+      '@unocss/preset-icons': 0.54.0
+      '@unocss/preset-mini': 0.54.0
+      '@unocss/preset-tagify': 0.54.0
+      '@unocss/preset-typography': 0.54.0
+      '@unocss/preset-uno': 0.54.0
+      '@unocss/preset-web-fonts': 0.54.0
+      '@unocss/preset-wind': 0.54.0
+      '@unocss/reset': 0.54.0
+      '@unocss/transformer-attributify-jsx': 0.54.0
+      '@unocss/transformer-attributify-jsx-babel': 0.54.0
+      '@unocss/transformer-compile-class': 0.54.0
+      '@unocss/transformer-directives': 0.54.0
+      '@unocss/transformer-variant-group': 0.54.0
+      '@unocss/vite': 0.54.0(rollup@2.79.1)(vite@4.3.3)
     transitivePeerDependencies:
       - postcss
       - rollup

From 834c67ecaaacf46533f9be16d694eb9c50c0ad44 Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Mon, 31 Jul 2023 21:35:56 -0300
Subject: [PATCH 223/281] Remove escaped quotes with backslash feature

---
 cypress/integration/rendering/flowchart.spec.js          | 9 ++-------
 docs/syntax/flowchart.md                                 | 2 --
 packages/mermaid/src/diagrams/flowchart/flowDb.js        | 1 -
 .../src/diagrams/flowchart/parser/flow-text.spec.js      | 7 -------
 .../mermaid/src/diagrams/flowchart/parser/flow.jison     | 4 ++--
 packages/mermaid/src/docs/syntax/flowchart.md            | 1 -
 6 files changed, 4 insertions(+), 20 deletions(-)

diff --git a/cypress/integration/rendering/flowchart.spec.js b/cypress/integration/rendering/flowchart.spec.js
index 1ae10aba9..e4766e792 100644
--- a/cypress/integration/rendering/flowchart.spec.js
+++ b/cypress/integration/rendering/flowchart.spec.js
@@ -901,13 +901,8 @@ graph TD
       { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
   });
-  it('67: allow escaping quotes with backslash', () => {
-    imgSnapshotTest(`
-      graph TD
-        a_node("This has an escaped \\" in it") -- "edge string can escape too \\"" --> b_node
-    `);
-  });
-  it('68: should be able to style default node independently', () => {
+
+  it('67: should be able to style default node independently', () => {
     imgSnapshotTest(
       `
     flowchart TD
diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md
index 5a338c261..fb0b7f2e3 100644
--- a/docs/syntax/flowchart.md
+++ b/docs/syntax/flowchart.md
@@ -610,13 +610,11 @@ For quotation marks, you can escape them with a backslash as well.
 ```mermaid-example
     flowchart LR
         A["A double quote:#quot;"] --> B["A dec char:#9829;"]
-        B --> C["This is a \"square\" vertex"]
 ```
 
 ```mermaid
     flowchart LR
         A["A double quote:#quot;"] --> B["A dec char:#9829;"]
-        B --> C["This is a \"square\" vertex"]
 ```
 
 Numbers given are base 10, so `#` can be encoded as `#35;`. It is also supported to use HTML character names.
diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.js b/packages/mermaid/src/diagrams/flowchart/flowDb.js
index 33ae68a86..32ffb3df0 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowDb.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowDb.js
@@ -91,7 +91,6 @@ export const addVertex = function (_id, textObj, type, style, classes, dir, prop
   if (textObj !== undefined) {
     config = configApi.getConfig();
     txt = sanitizeText(textObj.text.trim());
-    txt = textObj.type === 'string' ? txt.replaceAll('\\"', '"') : txt;
     vertices[id].labelType = textObj.type;
     // strip quotes if string starts and ends with a quote
     if (txt[0] === '"' && txt[txt.length - 1] === '"') {
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js
index 3dfde5ccb..b127e1b65 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js
@@ -598,13 +598,6 @@ describe('[Text] when parsing', () => {
     expect(() => flow.parser.parse(str)).toThrowError("Expecting 'SQE'");
   });
 
-  it('should parse escaped quotes in a string state', function () {
-    //prettier-ignore
-    flow.parser.parse('graph TD; A["This is a \\"()\\" in text"];'); //eslint-disable-line no-useless-escape
-    const vert = flow.parser.yy.getVertices();
-    expect(vert['A'].text).toBe('This is a "()" in text');
-  });
-
   it('should throw error', function () {
     const str = `graph TD; node[hello ) world] --> works`;
     expect(() => flow.parser.parse(str)).toThrowError("got 'PE'");
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
index a4584c808..8268722f3 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
@@ -60,8 +60,8 @@ Function arguments are optional: 'call <callbackname>()' simply executes 'callba
 
 <md_string>[^`"]+       { return "MD_STR";}
 <md_string>[`]["]       { this.popState();}
-<*>["][`]                  { this.begin("md_string");}
-<string>(\\(?=\")\"|[^"])+           return "STR";
+<*>["][`]               { this.begin("md_string");}
+<string>[^"]+           return "STR";
 <string>["]             this.popState();
 <*>["]                  this.pushState("string");
 "style"                 return 'STYLE';
diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md
index b5308ad50..960bf9755 100644
--- a/packages/mermaid/src/docs/syntax/flowchart.md
+++ b/packages/mermaid/src/docs/syntax/flowchart.md
@@ -392,7 +392,6 @@ For quotation marks, you can escape them with a backslash as well.
 ```mermaid-example
     flowchart LR
         A["A double quote:#quot;"] --> B["A dec char:#9829;"]
-        B --> C["This is a \"square\" vertex"]
 ```
 
 Numbers given are base 10, so `#` can be encoded as `#35;`. It is also supported to use HTML character names.

From a7e37d0c8be669a24e639a5397597bdbc9a4bd61 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 1 Aug 2023 06:36:36 +0000
Subject: [PATCH 224/281] build(deps-dev): bump json5 from 2.2.1 to 2.2.3

Bumps [json5](https://github.com/json5/json5) from 2.2.1 to 2.2.3.
- [Release notes](https://github.com/json5/json5/releases)
- [Changelog](https://github.com/json5/json5/blob/main/CHANGELOG.md)
- [Commits](https://github.com/json5/json5/compare/v2.2.1...v2.2.3)

---
updated-dependencies:
- dependency-name: json5
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 pnpm-lock.yaml | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 397cd55b4..c8300a728 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1104,7 +1104,7 @@ packages:
       convert-source-map: 1.8.0
       debug: 4.3.4(supports-color@8.1.1)
       gensync: 1.0.0-beta.2
-      json5: 2.2.1
+      json5: 2.2.3
       lodash: 4.17.21
       resolve: 1.22.2
       semver: 5.7.1
@@ -4061,7 +4061,7 @@ packages:
     resolution: {integrity: sha512-lR8q/9W7hZpMWweNiAKU7NQerBnzQQLvi8qnTDU/fxItPhtZVMbPV3lbCwjhIlNBe9Bbr5V+KHshvWmVSG9cxQ==}
     dependencies:
       ejs: 3.1.8
-      json5: 2.2.1
+      json5: 2.2.3
       magic-string: 0.25.9
       string.prototype.matchall: 4.0.8
     dev: true
@@ -11092,8 +11092,8 @@ packages:
     resolution: {integrity: sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==}
     dev: true
 
-  /json5@2.2.1:
-    resolution: {integrity: sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==}
+  /json5@2.2.3:
+    resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
     engines: {node: '>=6'}
     hasBin: true
     dev: true

From 55963107d07172f9b4aa7bf28443d9f4e4fd785f Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 1 Aug 2023 06:38:16 +0000
Subject: [PATCH 225/281] build(deps): bump @braintree/sanitize-url from 6.0.0
 to 6.0.1

Bumps [@braintree/sanitize-url](https://github.com/braintree/sanitize-url) from 6.0.0 to 6.0.1.
- [Changelog](https://github.com/braintree/sanitize-url/blob/main/CHANGELOG.md)
- [Commits](https://github.com/braintree/sanitize-url/compare/v6.0.0...v6.0.1)

---
updated-dependencies:
- dependency-name: "@braintree/sanitize-url"
  dependency-type: direct:production
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 packages/mermaid-example-diagram/package.json |  2 +-
 packages/mermaid/package.json                 |  2 +-
 pnpm-lock.yaml                                | 16 ++++++----------
 3 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/packages/mermaid-example-diagram/package.json b/packages/mermaid-example-diagram/package.json
index 1ea4135ef..dc468a6c7 100644
--- a/packages/mermaid-example-diagram/package.json
+++ b/packages/mermaid-example-diagram/package.json
@@ -38,7 +38,7 @@
     ]
   },
   "dependencies": {
-    "@braintree/sanitize-url": "^6.0.0",
+    "@braintree/sanitize-url": "^6.0.1",
     "cytoscape": "^3.23.0",
     "cytoscape-cose-bilkent": "^4.1.0",
     "cytoscape-fcose": "^2.1.0",
diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index 51c0b018c..8b313d099 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -57,7 +57,7 @@
     ]
   },
   "dependencies": {
-    "@braintree/sanitize-url": "^6.0.2",
+    "@braintree/sanitize-url": "^6.0.1",
     "@types/d3-scale": "^4.0.3",
     "@types/d3-scale-chromatic": "^3.0.0",
     "cytoscape": "^3.23.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 397cd55b4..dd79a9aa6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -192,8 +192,8 @@ importers:
   packages/mermaid:
     dependencies:
       '@braintree/sanitize-url':
-        specifier: ^6.0.2
-        version: 6.0.2
+        specifier: ^6.0.1
+        version: 6.0.1
       '@types/d3-scale':
         specifier: ^4.0.3
         version: 4.0.3
@@ -376,8 +376,8 @@ importers:
   packages/mermaid-example-diagram:
     dependencies:
       '@braintree/sanitize-url':
-        specifier: ^6.0.0
-        version: 6.0.0
+        specifier: ^6.0.1
+        version: 6.0.1
       cytoscape:
         specifier: ^3.23.0
         version: 3.23.0
@@ -2271,12 +2271,8 @@ packages:
     resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==}
     dev: true
 
-  /@braintree/sanitize-url@6.0.0:
-    resolution: {integrity: sha512-mgmE7XBYY/21erpzhexk4Cj1cyTQ9LzvnTxtzM17BJ7ERMNE6W72mQRo0I1Ud8eFJ+RVVIcBNhLFZ3GX4XFz5w==}
-    dev: false
-
-  /@braintree/sanitize-url@6.0.2:
-    resolution: {integrity: sha512-Tbsj02wXCbqGmzdnXNk0SOF19ChhRU70BsroIi4Pm6Ehp56in6vch94mfbdQ17DozxkL3BAVjbZ4Qc1a0HFRAg==}
+  /@braintree/sanitize-url@6.0.1:
+    resolution: {integrity: sha512-zr9Qs9KFQiEvMWdZesjcmRJlUck5NR+eKGS1uyKk+oYTWwlYrsoPEi6VmG6/TzBD1hKCGEimrhTgGS6hvn/xIQ==}
     dev: false
 
   /@colors/colors@1.5.0:

From 266a5e8133b06ede539edec79b7c5a8a3f0501a8 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 1 Aug 2023 06:38:37 +0000
Subject: [PATCH 226/281] build(deps-dev): bump vite from 4.3.3 to 4.3.9

Bumps [vite](https://github.com/vitejs/vite/tree/HEAD/packages/vite) from 4.3.3 to 4.3.9.
- [Release notes](https://github.com/vitejs/vite/releases)
- [Changelog](https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md)
- [Commits](https://github.com/vitejs/vite/commits/v4.3.9/packages/vite)

---
updated-dependencies:
- dependency-name: vite
  dependency-type: direct:development
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 packages/mermaid/src/docs/package.json |   2 +-
 pnpm-lock.yaml                         | 101 +++++--------------------
 2 files changed, 22 insertions(+), 81 deletions(-)

diff --git a/packages/mermaid/src/docs/package.json b/packages/mermaid/src/docs/package.json
index 27b363f6a..246094352 100644
--- a/packages/mermaid/src/docs/package.json
+++ b/packages/mermaid/src/docs/package.json
@@ -29,7 +29,7 @@
     "pathe": "^1.1.0",
     "unocss": "^0.54.0",
     "unplugin-vue-components": "^0.25.0",
-    "vite": "^4.3.3",
+    "vite": "^4.3.9",
     "vite-plugin-pwa": "^0.16.0",
     "vitepress": "1.0.0-beta.6",
     "workbox-window": "^7.0.0"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 397cd55b4..ff2615ace 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -443,7 +443,7 @@ importers:
         version: 0.2.0(vite-plugin-pwa@0.16.0)
       '@vitejs/plugin-vue':
         specifier: ^4.2.1
-        version: 4.2.1(vite@4.3.3)(vue@3.2.47)
+        version: 4.2.1(vite@4.3.9)(vue@3.2.47)
       fast-glob:
         specifier: ^3.2.12
         version: 3.2.12
@@ -455,16 +455,16 @@ importers:
         version: 1.1.0
       unocss:
         specifier: ^0.54.0
-        version: 0.54.0(postcss@8.4.27)(rollup@2.79.1)(vite@4.3.3)
+        version: 0.54.0(postcss@8.4.27)(rollup@2.79.1)(vite@4.3.9)
       unplugin-vue-components:
         specifier: ^0.25.0
         version: 0.25.0(rollup@2.79.1)(vue@3.2.47)
       vite:
-        specifier: ^4.3.3
-        version: 4.3.3(@types/node@18.16.0)
+        specifier: ^4.3.9
+        version: 4.3.9(@types/node@18.16.0)
       vite-plugin-pwa:
         specifier: ^0.16.0
-        version: 0.16.0(vite@4.3.3)(workbox-build@7.0.0)(workbox-window@7.0.0)
+        version: 0.16.0(vite@4.3.9)(workbox-build@7.0.0)(workbox-window@7.0.0)
       vitepress:
         specifier: 1.0.0-beta.6
         version: 1.0.0-beta.6(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0)
@@ -4954,12 +4954,12 @@ packages:
       eslint-visitor-keys: 3.4.0
     dev: true
 
-  /@unocss/astro@0.54.0(rollup@2.79.1)(vite@4.3.3):
+  /@unocss/astro@0.54.0(rollup@2.79.1)(vite@4.3.9):
     resolution: {integrity: sha512-Zq4GGRiXbWCipN9lUKlu3fmlrqIYu3rFoGwjL+v7VJulP8tVhiqzfbLXFKQePOVvCmiSvCKr6leuqgFA7PlPBg==}
     dependencies:
       '@unocss/core': 0.54.0
       '@unocss/reset': 0.54.0
-      '@unocss/vite': 0.54.0(rollup@2.79.1)(vite@4.3.3)
+      '@unocss/vite': 0.54.0(rollup@2.79.1)(vite@4.3.9)
     transitivePeerDependencies:
       - rollup
       - vite
@@ -5123,7 +5123,7 @@ packages:
       '@unocss/core': 0.54.0
     dev: true
 
-  /@unocss/vite@0.54.0(rollup@2.79.1)(vite@4.3.3):
+  /@unocss/vite@0.54.0(rollup@2.79.1)(vite@4.3.9):
     resolution: {integrity: sha512-lABmJKYs/yNfZZSs3xwVhBZwNhfLaYcdKxPAopJ8MKiUqECdWvHqLvklKQvLttZpN3dQUmGTQLblM+55IodKEw==}
     peerDependencies:
       vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0
@@ -5138,7 +5138,7 @@ packages:
       chokidar: 3.5.3
       fast-glob: 3.3.0
       magic-string: 0.30.1
-      vite: 4.3.3(@types/node@18.16.0)
+      vite: 4.3.9(@types/node@18.16.0)
     transitivePeerDependencies:
       - rollup
     dev: true
@@ -5148,17 +5148,17 @@ packages:
     peerDependencies:
       vite-plugin-pwa: '>=0.16.3 <1'
     dependencies:
-      vite-plugin-pwa: 0.16.0(vite@4.3.3)(workbox-build@7.0.0)(workbox-window@7.0.0)
+      vite-plugin-pwa: 0.16.0(vite@4.3.9)(workbox-build@7.0.0)(workbox-window@7.0.0)
     dev: true
 
-  /@vitejs/plugin-vue@4.2.1(vite@4.3.3)(vue@3.2.47):
+  /@vitejs/plugin-vue@4.2.1(vite@4.3.9)(vue@3.2.47):
     resolution: {integrity: sha512-ZTZjzo7bmxTRTkb8GSTwkPOYDIP7pwuyV+RV53c9PYUouwcbkIZIvWvNWlX2b1dYZqtOv7D6iUAnJLVNGcLrSw==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
       vite: ^4.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 4.3.3(@types/node@18.16.0)
+      vite: 4.3.9(@types/node@18.16.0)
       vue: 3.2.47
     dev: true
 
@@ -12951,24 +12951,6 @@ packages:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
     dev: false
 
-  /postcss@8.4.23:
-    resolution: {integrity: sha512-bQ3qMcpF6A/YjR55xtoTr0jGOlnPOKAIMdOWiv0EIT6HVPEaJiJB4NLljSbiHoC2RX7DN5Uvjtpbg1NPdwv1oA==}
-    engines: {node: ^10 || ^12 || >=14}
-    dependencies:
-      nanoid: 3.3.6
-      picocolors: 1.0.0
-      source-map-js: 1.0.2
-    dev: true
-
-  /postcss@8.4.24:
-    resolution: {integrity: sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==}
-    engines: {node: ^10 || ^12 || >=14}
-    dependencies:
-      nanoid: 3.3.6
-      picocolors: 1.0.0
-      source-map-js: 1.0.2
-    dev: true
-
   /postcss@8.4.27:
     resolution: {integrity: sha512-gY/ACJtJPSmUFPDCHtX78+01fHa64FaU4zaaWfuh1MhGJISufJAH4cun6k/8fwsHYeK4UQmENQK+tRLCFJE8JQ==}
     engines: {node: ^10 || ^12 || >=14}
@@ -13575,14 +13557,6 @@ packages:
       fsevents: 2.3.2
     dev: true
 
-  /rollup@3.21.0:
-    resolution: {integrity: sha512-ANPhVcyeHvYdQMUyCbczy33nbLzI7RzrBje4uvNiTDJGIMtlKoOStmympwr9OtS1LZxiDmE2wvxHyVhoLtf1KQ==}
-    engines: {node: '>=14.18.0', npm: '>=8.0.0'}
-    hasBin: true
-    optionalDependencies:
-      fsevents: 2.3.2
-    dev: true
-
   /rollup@3.26.0:
     resolution: {integrity: sha512-YzJH0eunH2hr3knvF3i6IkLO/jTjAEwU4HoMUbQl4//Tnl3ou0e7P5SjxdDr8HQJdeUJShlbEHXrrnEHy1l7Yg==}
     engines: {node: '>=14.18.0', npm: '>=8.0.0'}
@@ -15052,7 +15026,7 @@ packages:
     engines: {node: '>= 10.0.0'}
     dev: true
 
-  /unocss@0.54.0(postcss@8.4.27)(rollup@2.79.1)(vite@4.3.3):
+  /unocss@0.54.0(postcss@8.4.27)(rollup@2.79.1)(vite@4.3.9):
     resolution: {integrity: sha512-SXjyQqt/MP1uW8mjEmQaSa0zd+QB3FwaGD/ityNlu+zNRx1D03BPP9ACbJDB1zZKx4aodMVSsHZ3TV5wsu+VRQ==}
     engines: {node: '>=14'}
     peerDependencies:
@@ -15061,7 +15035,7 @@ packages:
       '@unocss/webpack':
         optional: true
     dependencies:
-      '@unocss/astro': 0.54.0(rollup@2.79.1)(vite@4.3.3)
+      '@unocss/astro': 0.54.0(rollup@2.79.1)(vite@4.3.9)
       '@unocss/cli': 0.54.0(rollup@2.79.1)
       '@unocss/core': 0.54.0
       '@unocss/extractor-arbitrary-variants': 0.54.0
@@ -15080,7 +15054,7 @@ packages:
       '@unocss/transformer-compile-class': 0.54.0
       '@unocss/transformer-directives': 0.54.0
       '@unocss/transformer-variant-group': 0.54.0
-      '@unocss/vite': 0.54.0(rollup@2.79.1)(vite@4.3.3)
+      '@unocss/vite': 0.54.0(rollup@2.79.1)(vite@4.3.9)
     transitivePeerDependencies:
       - postcss
       - rollup
@@ -15289,7 +15263,7 @@ packages:
       - supports-color
     dev: true
 
-  /vite-plugin-pwa@0.16.0(vite@4.3.3)(workbox-build@7.0.0)(workbox-window@7.0.0):
+  /vite-plugin-pwa@0.16.0(vite@4.3.9)(workbox-build@7.0.0)(workbox-window@7.0.0):
     resolution: {integrity: sha512-E+AQRzHxqNU4ZhEeR8X37/foZB+ezJEhXauE/mcf1UITY6k2Pa1dtlFl+BQu57fTdiVlWim5S0Qy44Yap93Dkg==}
     engines: {node: '>=16.0.0'}
     peerDependencies:
@@ -15300,46 +15274,13 @@ packages:
       debug: 4.3.4(supports-color@8.1.1)
       fast-glob: 3.2.12
       pretty-bytes: 6.1.0
-      vite: 4.3.3(@types/node@18.16.0)
+      vite: 4.3.9(@types/node@18.16.0)
       workbox-build: 7.0.0
       workbox-window: 7.0.0
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /vite@4.3.3(@types/node@18.16.0):
-    resolution: {integrity: sha512-MwFlLBO4udZXd+VBcezo3u8mC77YQk+ik+fbc0GZWGgzfbPP+8Kf0fldhARqvSYmtIWoAJ5BXPClUbMTlqFxrA==}
-    engines: {node: ^14.18.0 || >=16.0.0}
-    hasBin: true
-    peerDependencies:
-      '@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:
-      '@types/node': 18.16.0
-      esbuild: 0.17.18
-      postcss: 8.4.23
-      rollup: 3.21.0
-    optionalDependencies:
-      fsevents: 2.3.2
-    dev: true
-
   /vite@4.3.8(@types/node@18.16.0):
     resolution: {integrity: sha512-uYB8PwN7hbMrf4j1xzGDk/lqjsZvCDbt/JC5dyfxc19Pg8kRm14LinK/uq+HSLNswZEoKmweGdtpbnxRtrAXiQ==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -15367,7 +15308,7 @@ packages:
     dependencies:
       '@types/node': 18.16.0
       esbuild: 0.17.18
-      postcss: 8.4.24
+      postcss: 8.4.27
       rollup: 3.26.0
     optionalDependencies:
       fsevents: 2.3.2
@@ -15400,8 +15341,8 @@ packages:
     dependencies:
       '@types/node': 18.16.0
       esbuild: 0.17.18
-      postcss: 8.4.23
-      rollup: 3.21.0
+      postcss: 8.4.27
+      rollup: 3.26.0
     optionalDependencies:
       fsevents: 2.3.2
     dev: true
@@ -15586,7 +15527,7 @@ packages:
       strip-literal: 1.0.1
       tinybench: 2.5.0
       tinypool: 0.6.0
-      vite: 4.3.9(@types/node@18.16.0)
+      vite: 4.4.6(@types/node@18.16.0)
       vite-node: 0.33.0(@types/node@18.16.0)
       why-is-node-running: 2.2.2
     transitivePeerDependencies:

From c292c897a17ecdf7890e19812b67b5f863c68e1f Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Tue, 1 Aug 2023 08:42:21 +0000
Subject: [PATCH 227/281] chore(deps): update all patch dependencies

---
 package.json                           |  2 +-
 packages/mermaid/src/docs/package.json |  2 +-
 pnpm-lock.yaml                         | 52 ++++++++++++++++++++++----
 3 files changed, 46 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index 47fae3be4..c06f94082 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "version": "10.2.4",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "type": "module",
-  "packageManager": "pnpm@8.6.10",
+  "packageManager": "pnpm@8.6.11",
   "keywords": [
     "diagram",
     "markdown",
diff --git a/packages/mermaid/src/docs/package.json b/packages/mermaid/src/docs/package.json
index 246094352..922d8fa32 100644
--- a/packages/mermaid/src/docs/package.json
+++ b/packages/mermaid/src/docs/package.json
@@ -31,7 +31,7 @@
     "unplugin-vue-components": "^0.25.0",
     "vite": "^4.3.9",
     "vite-plugin-pwa": "^0.16.0",
-    "vitepress": "1.0.0-beta.6",
+    "vitepress": "1.0.0-beta.7",
     "workbox-window": "^7.0.0"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d78136d7c..9aea01362 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -466,8 +466,8 @@ importers:
         specifier: ^0.16.0
         version: 0.16.0(vite@4.3.9)(workbox-build@7.0.0)(workbox-window@7.0.0)
       vitepress:
-        specifier: 1.0.0-beta.6
-        version: 1.0.0-beta.6(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0)
+        specifier: 1.0.0-beta.7
+        version: 1.0.0-beta.7(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0)
       workbox-window:
         specifier: ^7.0.0
         version: 7.0.0
@@ -5169,14 +5169,14 @@ packages:
       vue: 3.3.4
     dev: true
 
-  /@vitejs/plugin-vue@4.2.3(vite@4.4.6)(vue@3.3.4):
+  /@vitejs/plugin-vue@4.2.3(vite@4.4.7)(vue@3.3.4):
     resolution: {integrity: sha512-R6JDUfiZbJA9cMiguQ7jxALsgiprjBeHL5ikpXfJCH62pPHtI+JdJ5xWj6Ev73yXSlYl86+blXn1kZHQ7uElxw==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
       vite: ^4.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 4.4.6(@types/node@18.16.0)
+      vite: 4.4.7(@types/node@18.16.0)
       vue: 3.3.4
     dev: true
 
@@ -15379,6 +15379,42 @@ packages:
       fsevents: 2.3.2
     dev: true
 
+  /vite@4.4.7(@types/node@18.16.0):
+    resolution: {integrity: sha512-6pYf9QJ1mHylfVh39HpuSfMPojPSKVxZvnclX1K1FyZ1PXDOcLBibdq5t1qxJSnL63ca8Wf4zts6mD8u8oc9Fw==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': '>= 14'
+      less: '*'
+      lightningcss: ^1.21.0
+      sass: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.4.0
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+    dependencies:
+      '@types/node': 18.16.0
+      esbuild: 0.18.11
+      postcss: 8.4.27
+      rollup: 3.26.0
+    optionalDependencies:
+      fsevents: 2.3.2
+    dev: true
+
   /vitepress-plugin-search@1.0.4-alpha.20(flexsearch@0.7.31)(vitepress@1.0.0-alpha.72)(vue@3.3.4):
     resolution: {integrity: sha512-zG+ev9pw1Mg7htABlFCNXb8XwnKN+qfTKw+vU0Ers6RIrABx+45EAAFBoaL1mEpl1FRFn1o/dQ7F4b8GP6HdGQ==}
     engines: {node: ^14.13.1 || ^16.7.0 || >=18}
@@ -15425,13 +15461,13 @@ packages:
       - terser
     dev: true
 
-  /vitepress@1.0.0-beta.6(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0):
-    resolution: {integrity: sha512-xK/ulKgQpKZVbvlL4+/vW49VG7ySi5nmSoKUNH1G4kM+Cj9JwYM+PDJO7jSJROv8zW99G0ise+maDYnaLlbGBQ==}
+  /vitepress@1.0.0-beta.7(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0):
+    resolution: {integrity: sha512-P9Rw+FXatKIU4fVdtKxqwHl6fby8E/8zE3FIfep6meNgN4BxbWqoKJ6yfuuQQR9IrpQqwnyaBh4LSabyll6tWg==}
     hasBin: true
     dependencies:
       '@docsearch/css': 3.5.1
       '@docsearch/js': 3.5.1(@algolia/client-search@4.14.2)(search-insights@2.6.0)
-      '@vitejs/plugin-vue': 4.2.3(vite@4.4.6)(vue@3.3.4)
+      '@vitejs/plugin-vue': 4.2.3(vite@4.4.7)(vue@3.3.4)
       '@vue/devtools-api': 6.5.0
       '@vueuse/core': 10.2.1(vue@3.3.4)
       '@vueuse/integrations': 10.2.1(focus-trap@7.5.2)(vue@3.3.4)
@@ -15440,7 +15476,7 @@ packages:
       mark.js: 8.11.1
       minisearch: 6.1.0
       shiki: 0.14.3
-      vite: 4.4.6(@types/node@18.16.0)
+      vite: 4.4.7(@types/node@18.16.0)
       vue: 3.3.4
     transitivePeerDependencies:
       - '@algolia/client-search'

From ef4f22841f87d3a0b1ac3e48f0d170c005edf3d2 Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Tue, 1 Aug 2023 07:54:32 -0300
Subject: [PATCH 228/281] Add unit tests for stange node names

---
 .../flowchart/parser/flow-singlenode.spec.js  | 35 ++++++++++++++++++-
 1 file changed, 34 insertions(+), 1 deletion(-)

diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-singlenode.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-singlenode.spec.js
index 6b6e93857..e078af4cb 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-singlenode.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-singlenode.spec.js
@@ -299,11 +299,44 @@ describe('[Singlenodes] when parsing', () => {
     expect(vert[`a_${keyword}_node`].text).toBe(`a_${keyword}_node`);
   });
 
-  it.each(keywords)('should handle nodes ending in keywords', function (keyword) {
+  it.each(keywords)('should handle nodes ending in %s', function (keyword) {
     const res = flow.parser.parse(`graph TD;node_${keyword};node.${keyword};node-${keyword};`);
     const vert = flow.parser.yy.getVertices();
     expect(vert[`node_${keyword}`].text).toBe(`node_${keyword}`);
     expect(vert[`node.${keyword}`].text).toBe(`node.${keyword}`);
     expect(vert[`node-${keyword}`].text).toBe(`node-${keyword}`);
   });
+
+  const errorKeywords = [
+    'graph',
+    'flowchart',
+    'flowchart-elk',
+    'style',
+    'linkStyle',
+    'interpolate',
+    'classDef',
+    'class',
+    '_self',
+    '_blank',
+    '_parent',
+    '_top',
+    'end',
+    'subgraph',
+  ];
+  it.each(errorKeywords)('should throw error at nodes beginning with %s', function (keyword) {
+    const str = `graph TD;${keyword}.node;${keyword}-node;${keyword}/node`;
+    const vert = flow.parser.yy.getVertices();
+
+    expect(() => flow.parser.parse(str)).toThrowError();
+  });
+
+  const workingKeywords = ['default', 'href', 'click', 'call'];
+
+  it.each(workingKeywords)('should parse node beginning with %s', function (keyword) {
+    flow.parser.parse(`graph TD; ${keyword}.node;${keyword}-node;${keyword}/node;`);
+    const vert = flow.parser.yy.getVertices();
+    expect(vert[`${keyword}.node`].text).toBe(`${keyword}.node`);
+    expect(vert[`${keyword}-node`].text).toBe(`${keyword}-node`);
+    expect(vert[`${keyword}/node`].text).toBe(`${keyword}/node`);
+  });
 });

From e3c5e6f095e591b653b3a806d6cac27d7f462321 Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Tue, 1 Aug 2023 07:54:48 -0300
Subject: [PATCH 229/281] Modify HREF token regex to contain space

This attempts to maintain the current behaviour.
Previously, because HREF contained a space and called
a state, the href token was able to be placed in the
beginning of node ids (because it wouldn't conflict
without the space). We require the space to keep that
behaviour.
---
 .../mermaid/src/diagrams/flowchart/parser/flow.jison   | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
index 8268722f3..e303dd178 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
@@ -77,7 +77,7 @@ Function arguments are optional: 'call <callbackname>()' simply executes 'callba
 line was introduced with 'click'.
 'href "<link>"' attaches the specified link to the node that was specified by 'click'.
 */
-"href"                  return 'HREF';
+"href"[\s]                  return 'HREF';
 
 
 /*
@@ -518,10 +518,10 @@ clickStatement
     | CLICK CALLBACKNAME SPACE STR                          {$$ = $CLICK;yy.setClickEvent($CLICK, $CALLBACKNAME);yy.setTooltip($CLICK, $STR);}
     | CLICK CALLBACKNAME CALLBACKARGS                       {$$ = $CLICK;yy.setClickEvent($CLICK, $CALLBACKNAME, $CALLBACKARGS);}
     | CLICK CALLBACKNAME CALLBACKARGS SPACE STR             {$$ = $CLICK;yy.setClickEvent($CLICK, $CALLBACKNAME, $CALLBACKARGS);yy.setTooltip($CLICK, $STR);}
-    | CLICK HREF SPACE STR                                  {$$ = $CLICK;yy.setLink($CLICK, $STR);}
-    | CLICK HREF SPACE STR\[link] SPACE STR\[target]        {$$ = $CLICK;yy.setLink($CLICK, $link);yy.setTooltip($CLICK, $target);}
-    | CLICK HREF SPACE STR SPACE LINK_TARGET                {$$ = $CLICK;yy.setLink($CLICK, $STR, $LINK_TARGET);}
-    | CLICK HREF SPACE STR\[link] SPACE STR\[tooltip] SPACE LINK_TARGET      {$$ = $CLICK;yy.setLink($CLICK, $link, $LINK_TARGET);yy.setTooltip($CLICK, $tooltip);}
+    | CLICK HREF STR                                        {$$ = $CLICK;yy.setLink($CLICK, $STR);}
+    | CLICK HREF STR SPACE STR                              {$$ = $CLICK;yy.setLink($CLICK, $STR1);yy.setTooltip($CLICK, $STR2);}
+    | CLICK HREF STR SPACE LINK_TARGET                      {$$ = $CLICK;yy.setLink($CLICK, $STR, $LINK_TARGET);}
+    | CLICK HREF STR\[link] SPACE STR\[tooltip] SPACE LINK_TARGET      {$$ = $CLICK;yy.setLink($CLICK, $link, $LINK_TARGET);yy.setTooltip($CLICK, $tooltip);}
     | CLICK alphaNum                                        {$$ = $CLICK;yy.setClickEvent($CLICK, $alphaNum);}
     | CLICK alphaNum SPACE STR                              {$$ = $CLICK;yy.setClickEvent($CLICK, $alphaNum);yy.setTooltip($CLICK, $STR);}
     | CLICK STR                                             {$$ = $CLICK;yy.setLink($CLICK, $STR);}

From cc01ff9129e62c7b255bcba1744c26347b67a54d Mon Sep 17 00:00:00 2001
From: Brian Graham <brian@statagroup.com>
Date: Tue, 1 Aug 2023 14:08:41 +0200
Subject: [PATCH 230/281] Directives not needed in new diagrams as yaml
 formatter does this for all new diagrams

---
 docs/community/newDiagram.md                  | 49 +------------------
 .../mermaid/src/docs/community/newDiagram.md  | 49 +------------------
 2 files changed, 2 insertions(+), 96 deletions(-)

diff --git a/docs/community/newDiagram.md b/docs/community/newDiagram.md
index bb7e2a961..ba52999f4 100644
--- a/docs/community/newDiagram.md
+++ b/docs/community/newDiagram.md
@@ -124,53 +124,6 @@ There are a few features that are common between the different types of diagrams
 
 Here some pointers on how to handle these different areas.
 
-#### [Directives](../config/directives.md)
-
-Here is example handling from flowcharts:
-Jison:
-
-```jison
-/* lexical grammar */
-%lex
-%x open_directive
-%x type_directive
-%x arg_directive
-%x close_directive
-
-\%\%\{                                                          { this.begin('open_directive'); return 'open_directive'; }
-<open_directive>((?:(?!\}\%\%)[^:.])*)                          { this.begin('type_directive'); return 'type_directive'; }
-<type_directive>":"                                             { this.popState(); this.begin('arg_directive'); return ':'; }
-<type_directive,arg_directive>\}\%\%                            { this.popState(); this.popState(); return 'close_directive'; }
-<arg_directive>((?:(?!\}\%\%).|\n)*)                            return 'arg_directive';
-
-/* language grammar */
-
-/* ... */
-
-directive
-  : openDirective typeDirective closeDirective separator
-  | openDirective typeDirective ':' argDirective closeDirective separator
-  ;
-
-openDirective
-  : open_directive { yy.parseDirective('%%{', 'open_directive'); }
-  ;
-
-typeDirective
-  : type_directive { yy.parseDirective($1, 'type_directive'); }
-  ;
-
-argDirective
-  : arg_directive { $1 = $1.trim().replace(/'/g, '"'); yy.parseDirective($1, 'arg_directive'); }
-  ;
-
-closeDirective
-  : close_directive { yy.parseDirective('}%%', 'close_directive', 'flowchart'); }
-  ;
-```
-
-It is probably a good idea to keep the handling similar to this in your new diagram. The parseDirective function is provided by the mermaidAPI.
-
 ## Accessibility
 
 Mermaid automatically adds the following accessibility information for the diagram SVG HTML element:
@@ -189,7 +142,7 @@ See [the definition of aria-roledescription](https://www.w3.org/TR/wai-aria-1.1/
 
 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.
+As a design goal, the jison syntax should be similar between the diagrams.
 
 ```jison
 
diff --git a/packages/mermaid/src/docs/community/newDiagram.md b/packages/mermaid/src/docs/community/newDiagram.md
index 75e17e4c9..3393396ee 100644
--- a/packages/mermaid/src/docs/community/newDiagram.md
+++ b/packages/mermaid/src/docs/community/newDiagram.md
@@ -119,53 +119,6 @@ There are a few features that are common between the different types of diagrams
 
 Here some pointers on how to handle these different areas.
 
-#### [Directives](../config/directives.md)
-
-Here is example handling from flowcharts:
-Jison:
-
-```jison
-/* lexical grammar */
-%lex
-%x open_directive
-%x type_directive
-%x arg_directive
-%x close_directive
-
-\%\%\{                                                          { this.begin('open_directive'); return 'open_directive'; }
-<open_directive>((?:(?!\}\%\%)[^:.])*)                          { this.begin('type_directive'); return 'type_directive'; }
-<type_directive>":"                                             { this.popState(); this.begin('arg_directive'); return ':'; }
-<type_directive,arg_directive>\}\%\%                            { this.popState(); this.popState(); return 'close_directive'; }
-<arg_directive>((?:(?!\}\%\%).|\n)*)                            return 'arg_directive';
-
-/* language grammar */
-
-/* ... */
-
-directive
-  : openDirective typeDirective closeDirective separator
-  | openDirective typeDirective ':' argDirective closeDirective separator
-  ;
-
-openDirective
-  : open_directive { yy.parseDirective('%%{', 'open_directive'); }
-  ;
-
-typeDirective
-  : type_directive { yy.parseDirective($1, 'type_directive'); }
-  ;
-
-argDirective
-  : arg_directive { $1 = $1.trim().replace(/'/g, '"'); yy.parseDirective($1, 'arg_directive'); }
-  ;
-
-closeDirective
-  : close_directive { yy.parseDirective('}%%', 'close_directive', 'flowchart'); }
-  ;
-```
-
-It is probably a good idea to keep the handling similar to this in your new diagram. The parseDirective function is provided by the mermaidAPI.
-
 ## Accessibility
 
 Mermaid automatically adds the following accessibility information for the diagram SVG HTML element:
@@ -184,7 +137,7 @@ See [the definition of aria-roledescription](https://www.w3.org/TR/wai-aria-1.1/
 
 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.
+As a design goal, the jison syntax should be similar between the diagrams.
 
 ```jison
 

From 4cdb43f791345fb1c711707a54befd7066d12161 Mon Sep 17 00:00:00 2001
From: Brian Graham <brian@statagroup.com>
Date: Tue, 1 Aug 2023 14:30:58 +0200
Subject: [PATCH 231/281] ts-ignore comment was misleading, JISON doesn't
 support types

---
 packages/mermaid/src/diagrams/c4/c4Diagram.ts                   | 2 +-
 packages/mermaid/src/diagrams/class/classDiagram-v2.ts          | 2 +-
 packages/mermaid/src/diagrams/class/classDiagram.ts             | 2 +-
 packages/mermaid/src/diagrams/flowchart/flowDiagram-v2.ts       | 2 +-
 packages/mermaid/src/diagrams/flowchart/flowDiagram.ts          | 2 +-
 packages/mermaid/src/diagrams/gantt/ganttDiagram.ts             | 2 +-
 packages/mermaid/src/diagrams/git/gitGraphDiagram.ts            | 2 +-
 packages/mermaid/src/diagrams/mindmap/mindmap-definition.ts     | 2 +-
 packages/mermaid/src/diagrams/pie/pieDiagram.ts                 | 2 +-
 .../src/diagrams/quadrant-chart/parser/quadrant.jison.spec.ts   | 2 +-
 packages/mermaid/src/diagrams/quadrant-chart/quadrantDiagram.ts | 2 +-
 packages/mermaid/src/diagrams/requirement/requirementDiagram.ts | 2 +-
 packages/mermaid/src/diagrams/sequence/sequenceDiagram.ts       | 2 +-
 packages/mermaid/src/diagrams/state/stateDiagram-v2.ts          | 2 +-
 packages/mermaid/src/diagrams/state/stateDiagram.ts             | 2 +-
 packages/mermaid/src/diagrams/timeline/timeline-definition.ts   | 2 +-
 packages/mermaid/src/diagrams/user-journey/journeyDiagram.ts    | 2 +-
 17 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/packages/mermaid/src/diagrams/c4/c4Diagram.ts b/packages/mermaid/src/diagrams/c4/c4Diagram.ts
index 04567fafa..b3c7ae8eb 100644
--- a/packages/mermaid/src/diagrams/c4/c4Diagram.ts
+++ b/packages/mermaid/src/diagrams/c4/c4Diagram.ts
@@ -1,4 +1,4 @@
-// @ts-ignore: TODO Fix ts errors
+// @ts-ignore: JISON doesn't support types
 import c4Parser from './parser/c4Diagram.jison';
 import c4Db from './c4Db.js';
 import c4Renderer from './c4Renderer.js';
diff --git a/packages/mermaid/src/diagrams/class/classDiagram-v2.ts b/packages/mermaid/src/diagrams/class/classDiagram-v2.ts
index 5b952627c..91e8597a4 100644
--- a/packages/mermaid/src/diagrams/class/classDiagram-v2.ts
+++ b/packages/mermaid/src/diagrams/class/classDiagram-v2.ts
@@ -1,5 +1,5 @@
 import { DiagramDefinition } from '../../diagram-api/types.js';
-// @ts-ignore: TODO Fix ts errors
+// @ts-ignore: JISON doesn't support types
 import parser from './parser/classDiagram.jison';
 import db from './classDb.js';
 import styles from './styles.js';
diff --git a/packages/mermaid/src/diagrams/class/classDiagram.ts b/packages/mermaid/src/diagrams/class/classDiagram.ts
index 0d2a246b4..532d52189 100644
--- a/packages/mermaid/src/diagrams/class/classDiagram.ts
+++ b/packages/mermaid/src/diagrams/class/classDiagram.ts
@@ -1,5 +1,5 @@
 import { DiagramDefinition } from '../../diagram-api/types.js';
-// @ts-ignore: TODO Fix ts errors
+// @ts-ignore: JISON doesn't support types
 import parser from './parser/classDiagram.jison';
 import db from './classDb.js';
 import styles from './styles.js';
diff --git a/packages/mermaid/src/diagrams/flowchart/flowDiagram-v2.ts b/packages/mermaid/src/diagrams/flowchart/flowDiagram-v2.ts
index 7a2c0e0bc..754057211 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowDiagram-v2.ts
+++ b/packages/mermaid/src/diagrams/flowchart/flowDiagram-v2.ts
@@ -1,4 +1,4 @@
-// @ts-ignore: TODO Fix ts errors
+// @ts-ignore: JISON doesn't support types
 import flowParser from './parser/flow.jison';
 import flowDb from './flowDb.js';
 import flowRendererV2 from './flowRenderer-v2.js';
diff --git a/packages/mermaid/src/diagrams/flowchart/flowDiagram.ts b/packages/mermaid/src/diagrams/flowchart/flowDiagram.ts
index 7018e4890..2c331f4eb 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowDiagram.ts
+++ b/packages/mermaid/src/diagrams/flowchart/flowDiagram.ts
@@ -1,4 +1,4 @@
-// @ts-ignore: TODO Fix ts errors
+// @ts-ignore: JISON doesn't support types
 import flowParser from './parser/flow.jison';
 import flowDb from './flowDb.js';
 import flowRenderer from './flowRenderer.js';
diff --git a/packages/mermaid/src/diagrams/gantt/ganttDiagram.ts b/packages/mermaid/src/diagrams/gantt/ganttDiagram.ts
index 0104c7d0c..cf2974d44 100644
--- a/packages/mermaid/src/diagrams/gantt/ganttDiagram.ts
+++ b/packages/mermaid/src/diagrams/gantt/ganttDiagram.ts
@@ -1,4 +1,4 @@
-// @ts-ignore: TODO Fix ts errors
+// @ts-ignore: JISON doesn't support types
 import ganttParser from './parser/gantt.jison';
 import ganttDb from './ganttDb.js';
 import ganttRenderer from './ganttRenderer.js';
diff --git a/packages/mermaid/src/diagrams/git/gitGraphDiagram.ts b/packages/mermaid/src/diagrams/git/gitGraphDiagram.ts
index 08ff126c4..c9a21cc2d 100644
--- a/packages/mermaid/src/diagrams/git/gitGraphDiagram.ts
+++ b/packages/mermaid/src/diagrams/git/gitGraphDiagram.ts
@@ -1,4 +1,4 @@
-// @ts-ignore: TODO Fix ts errors
+// @ts-ignore: JISON doesn't support types
 import gitGraphParser from './parser/gitGraph.jison';
 import gitGraphDb from './gitGraphAst.js';
 import gitGraphRenderer from './gitGraphRenderer.js';
diff --git a/packages/mermaid/src/diagrams/mindmap/mindmap-definition.ts b/packages/mermaid/src/diagrams/mindmap/mindmap-definition.ts
index 846fd5dc5..b35214435 100644
--- a/packages/mermaid/src/diagrams/mindmap/mindmap-definition.ts
+++ b/packages/mermaid/src/diagrams/mindmap/mindmap-definition.ts
@@ -1,4 +1,4 @@
-// @ts-ignore: TODO Fix ts errors
+// @ts-ignore: JISON doesn't support types
 import mindmapParser from './parser/mindmap.jison';
 import * as mindmapDb from './mindmapDb.js';
 import mindmapRenderer from './mindmapRenderer.js';
diff --git a/packages/mermaid/src/diagrams/pie/pieDiagram.ts b/packages/mermaid/src/diagrams/pie/pieDiagram.ts
index 4c6b7d3bc..21756dd4e 100644
--- a/packages/mermaid/src/diagrams/pie/pieDiagram.ts
+++ b/packages/mermaid/src/diagrams/pie/pieDiagram.ts
@@ -1,5 +1,5 @@
 import { DiagramDefinition } from '../../diagram-api/types.js';
-// @ts-ignore: TODO Fix ts errors
+// @ts-ignore: JISON doesn't support types
 import parser from './parser/pie.jison';
 import db from './pieDb.js';
 import styles from './styles.js';
diff --git a/packages/mermaid/src/diagrams/quadrant-chart/parser/quadrant.jison.spec.ts b/packages/mermaid/src/diagrams/quadrant-chart/parser/quadrant.jison.spec.ts
index 05b18b935..f4a9835e1 100644
--- a/packages/mermaid/src/diagrams/quadrant-chart/parser/quadrant.jison.spec.ts
+++ b/packages/mermaid/src/diagrams/quadrant-chart/parser/quadrant.jison.spec.ts
@@ -1,4 +1,4 @@
-// @ts-ignore: TODO Fix ts errors
+// @ts-ignore: JISON doesn't support types
 import { parser } from './quadrant.jison';
 import { Mock, vi } from 'vitest';
 
diff --git a/packages/mermaid/src/diagrams/quadrant-chart/quadrantDiagram.ts b/packages/mermaid/src/diagrams/quadrant-chart/quadrantDiagram.ts
index 40ae798d2..c2fc970b1 100644
--- a/packages/mermaid/src/diagrams/quadrant-chart/quadrantDiagram.ts
+++ b/packages/mermaid/src/diagrams/quadrant-chart/quadrantDiagram.ts
@@ -1,5 +1,5 @@
 import { DiagramDefinition } from '../../diagram-api/types.js';
-// @ts-ignore: TODO Fix ts errors
+// @ts-ignore: JISON doesn't support types
 import parser from './parser/quadrant.jison';
 import db from './quadrantDb.js';
 import renderer from './quadrantRenderer.js';
diff --git a/packages/mermaid/src/diagrams/requirement/requirementDiagram.ts b/packages/mermaid/src/diagrams/requirement/requirementDiagram.ts
index 4505afc56..c2e997628 100644
--- a/packages/mermaid/src/diagrams/requirement/requirementDiagram.ts
+++ b/packages/mermaid/src/diagrams/requirement/requirementDiagram.ts
@@ -1,5 +1,5 @@
 import { DiagramDefinition } from '../../diagram-api/types.js';
-// @ts-ignore: TODO Fix ts errors
+// @ts-ignore: JISON doesn't support types
 import parser from './parser/requirementDiagram.jison';
 import db from './requirementDb.js';
 import styles from './styles.js';
diff --git a/packages/mermaid/src/diagrams/sequence/sequenceDiagram.ts b/packages/mermaid/src/diagrams/sequence/sequenceDiagram.ts
index 382d47b61..b4342a694 100644
--- a/packages/mermaid/src/diagrams/sequence/sequenceDiagram.ts
+++ b/packages/mermaid/src/diagrams/sequence/sequenceDiagram.ts
@@ -1,5 +1,5 @@
 import { DiagramDefinition } from '../../diagram-api/types.js';
-// @ts-ignore: TODO Fix ts errors
+// @ts-ignore: JISON doesn't support types
 import parser from './parser/sequenceDiagram.jison';
 import db from './sequenceDb.js';
 import styles from './styles.js';
diff --git a/packages/mermaid/src/diagrams/state/stateDiagram-v2.ts b/packages/mermaid/src/diagrams/state/stateDiagram-v2.ts
index 616a97556..8f62a64db 100644
--- a/packages/mermaid/src/diagrams/state/stateDiagram-v2.ts
+++ b/packages/mermaid/src/diagrams/state/stateDiagram-v2.ts
@@ -1,5 +1,5 @@
 import { DiagramDefinition } from '../../diagram-api/types.js';
-// @ts-ignore: TODO Fix ts errors
+// @ts-ignore: JISON doesn't support types
 import parser from './parser/stateDiagram.jison';
 import db from './stateDb.js';
 import styles from './styles.js';
diff --git a/packages/mermaid/src/diagrams/state/stateDiagram.ts b/packages/mermaid/src/diagrams/state/stateDiagram.ts
index 44552c246..fd3467607 100644
--- a/packages/mermaid/src/diagrams/state/stateDiagram.ts
+++ b/packages/mermaid/src/diagrams/state/stateDiagram.ts
@@ -1,5 +1,5 @@
 import { DiagramDefinition } from '../../diagram-api/types.js';
-// @ts-ignore: TODO Fix ts errors
+// @ts-ignore: JISON doesn't support types
 import parser from './parser/stateDiagram.jison';
 import db from './stateDb.js';
 import styles from './styles.js';
diff --git a/packages/mermaid/src/diagrams/timeline/timeline-definition.ts b/packages/mermaid/src/diagrams/timeline/timeline-definition.ts
index 7f671291f..0c5561610 100644
--- a/packages/mermaid/src/diagrams/timeline/timeline-definition.ts
+++ b/packages/mermaid/src/diagrams/timeline/timeline-definition.ts
@@ -1,4 +1,4 @@
-// @ts-ignore: TODO Fix ts errors
+// @ts-ignore: JISON doesn't support types
 import parser from './parser/timeline.jison';
 import * as db from './timelineDb.js';
 import renderer from './timelineRenderer.js';
diff --git a/packages/mermaid/src/diagrams/user-journey/journeyDiagram.ts b/packages/mermaid/src/diagrams/user-journey/journeyDiagram.ts
index 969cf0e5e..1c009d9ea 100644
--- a/packages/mermaid/src/diagrams/user-journey/journeyDiagram.ts
+++ b/packages/mermaid/src/diagrams/user-journey/journeyDiagram.ts
@@ -1,5 +1,5 @@
 import { DiagramDefinition } from '../../diagram-api/types.js';
-// @ts-ignore: TODO Fix ts errors
+// @ts-ignore: JISON doesn't support types
 import parser from './parser/journey.jison';
 import db from './journeyDb.js';
 import styles from './styles.js';

From 8b79060829c39451ea84fbd0bfdadfd9a6f63763 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 1 Aug 2023 17:07:15 +0000
Subject: [PATCH 232/281] build(deps-dev): bump pnpm from 8.3.1 to 8.6.8

Bumps [pnpm](https://github.com/pnpm/pnpm) from 8.3.1 to 8.6.8.
- [Release notes](https://github.com/pnpm/pnpm/releases)
- [Commits](https://github.com/pnpm/pnpm/compare/v8.3.1...v8.6.8)

---
updated-dependencies:
- dependency-name: pnpm
  dependency-type: direct:development
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 package.json   | 2 +-
 pnpm-lock.yaml | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index c06f94082..03ab8c6ec 100644
--- a/package.json
+++ b/package.json
@@ -109,7 +109,7 @@
     "lint-staged": "^13.2.1",
     "nyc": "^15.1.0",
     "path-browserify": "^1.0.1",
-    "pnpm": "^8.3.1",
+    "pnpm": "^8.6.8",
     "prettier": "^2.8.8",
     "prettier-plugin-jsdoc": "^0.4.2",
     "rimraf": "^5.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9aea01362..c60f693af 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -156,8 +156,8 @@ importers:
         specifier: ^1.0.1
         version: 1.0.1
       pnpm:
-        specifier: ^8.3.1
-        version: 8.3.1
+        specifier: ^8.6.8
+        version: 8.6.8
       prettier:
         specifier: ^2.8.8
         version: 2.8.8
@@ -12872,8 +12872,8 @@ packages:
     engines: {node: '>=12.13.0'}
     dev: true
 
-  /pnpm@8.3.1:
-    resolution: {integrity: sha512-0mT2ZAv08J3nz8xUdWhRW88GE89IWgPo/xZhb6acQXK2+aCikl7kT7Bg31ZcnJqOrwYXSed68xjLd/ZoSnBR8w==}
+  /pnpm@8.6.8:
+    resolution: {integrity: sha512-OtrCRUE7VqRyKly9E3gfExZHOAHtFDpmulyVFKrnl3v/n2xJckdueVumWJqUA5FHxcRP/T42r8P8CDr9duPP9w==}
     engines: {node: '>=16.14'}
     hasBin: true
     dev: true

From dc57fcf7e7ddeb66ecdf4c1d07b93804068d1d01 Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Tue, 1 Aug 2023 16:36:37 -0300
Subject: [PATCH 233/281] Remove replaceAll method in addLink

---
 packages/mermaid/src/diagrams/flowchart/flowDb.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.js b/packages/mermaid/src/diagrams/flowchart/flowDb.js
index 32ffb3df0..ea8fa71d2 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowDb.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowDb.js
@@ -149,7 +149,6 @@ export const addSingleLink = function (_start, _end, type) {
   if (linkTextObj !== undefined) {
     edge.text = sanitizeText(linkTextObj.text.trim());
 
-    edge.text = edge.text.replaceAll('\\"', '"');
     // 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);

From 7ebfc272e47ebdcb05c417df6448f404e9adeede Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Wed, 2 Aug 2023 09:36:40 +0530
Subject: [PATCH 234/281] fix: #4676 redirect fix

---
 packages/mermaid/src/docs/.vitepress/theme/redirect.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mermaid/src/docs/.vitepress/theme/redirect.ts b/packages/mermaid/src/docs/.vitepress/theme/redirect.ts
index 24b9a4d1f..da32e5f8f 100644
--- a/packages/mermaid/src/docs/.vitepress/theme/redirect.ts
+++ b/packages/mermaid/src/docs/.vitepress/theme/redirect.ts
@@ -50,7 +50,7 @@ const idRedirectMap: Record<string, string> = {
   'n00b-advanced': 'config/n00b-advanced',
   'n00b-gettingstarted': 'intro/n00b-gettingStarted',
   'n00b-overview': 'community/n00b-overview',
-  'n00b-syntaxreference': '',
+  'n00b-syntaxreference': 'intro/n00b-syntaxReference',
   newdiagram: 'community/newDiagram',
   pie: 'syntax/pie',
   plugins: '',

From 7465384e1d1133582f5caeea790e4cb5a0562248 Mon Sep 17 00:00:00 2001
From: Reda Al Sulais <u.yokozuna@gmail.com>
Date: Wed, 2 Aug 2023 16:18:21 +0300
Subject: [PATCH 235/281] remove info sandbox test case

---
 cypress/integration/rendering/info.spec.ts | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/cypress/integration/rendering/info.spec.ts b/cypress/integration/rendering/info.spec.ts
index 03661f941..3db74c980 100644
--- a/cypress/integration/rendering/info.spec.ts
+++ b/cypress/integration/rendering/info.spec.ts
@@ -8,8 +8,4 @@ describe('info diagram', () => {
   it('should handle an info definition with showInfo', () => {
     imgSnapshotTest(`info showInfo`);
   });
-
-  it('should handle an info definition in sandbox', () => {
-    imgSnapshotTest(`info`, { securityLevel: 'sandbox' });
-  });
 });

From b99eb8b6249ef8fa0a85b2c89f9d740debe97c38 Mon Sep 17 00:00:00 2001
From: Reda Al Sulais <u.yokozuna@gmail.com>
Date: Wed, 2 Aug 2023 16:30:55 +0300
Subject: [PATCH 236/281] run docs:build

---
 docs/config/setup/modules/mermaidAPI.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/config/setup/modules/mermaidAPI.md b/docs/config/setup/modules/mermaidAPI.md
index 7601c5069..330c136dc 100644
--- a/docs/config/setup/modules/mermaidAPI.md
+++ b/docs/config/setup/modules/mermaidAPI.md
@@ -96,7 +96,7 @@ mermaid.initialize(config);
 
 #### Defined in
 
-[mermaidAPI.ts:665](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L665)
+[mermaidAPI.ts:669](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L669)
 
 ## Functions
 

From bb6664a2c64a16912fa1f7fcb56785ba1151bcb9 Mon Sep 17 00:00:00 2001
From: Reda Al Sulais <u.yokozuna@gmail.com>
Date: Thu, 3 Aug 2023 15:47:31 +0300
Subject: [PATCH 237/281] add `configureSvgSize` in infoRenderer

---
 packages/mermaid/src/diagrams/info/infoRenderer.ts | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/mermaid/src/diagrams/info/infoRenderer.ts b/packages/mermaid/src/diagrams/info/infoRenderer.ts
index 3950957ac..c1ca2b1cf 100644
--- a/packages/mermaid/src/diagrams/info/infoRenderer.ts
+++ b/packages/mermaid/src/diagrams/info/infoRenderer.ts
@@ -1,6 +1,7 @@
 import { select } from 'd3';
 import { log } from '../../logger.js';
 import { getConfig } from '../../config.js';
+import { configureSvgSize } from '../../setupGraphViewbox.js';
 import type { DrawDefinition, HTML, SVG } from '../../diagram-api/types.js';
 
 /**
@@ -15,7 +16,6 @@ const draw: DrawDefinition = (text, id, version) => {
     log.debug('rendering info diagram\n' + text);
 
     const { securityLevel } = getConfig();
-
     // handle root and document for when rendering in sandbox mode
     let doc: Document = document;
     if (securityLevel === 'sandbox') {
@@ -26,19 +26,19 @@ const draw: DrawDefinition = (text, id, version) => {
       securityLevel === 'sandbox' ? select(doc.body as HTMLIFrameElement) : select('body');
 
     const svg: SVG = root.select(`#${id}`);
-    svg.attr('height', 100);
-    svg.attr('width', 400);
+    configureSvgSize(svg, 100, 400, true);
 
-    const g = svg.append('g');
-    g.append('text') // text label for the x axis
+    svg
+      .append('g')
+      .append('text')
       .attr('x', 100)
       .attr('y', 40)
       .attr('class', 'version')
-      .attr('font-size', '32px')
+      .attr('font-size', 32)
       .style('text-anchor', 'middle')
       .text(`v${version}`);
   } catch (e) {
-    log.error('error while rendering info diagram\n', e);
+    log.error('error while rendering info diagram', e);
   }
 };
 

From a4f778f4def7bb535c70917b2f147774a70aa83c Mon Sep 17 00:00:00 2001
From: Reda Al Sulais <u.yokozuna@gmail.com>
Date: Thu, 3 Aug 2023 15:55:05 +0300
Subject: [PATCH 238/281] change `svgElem` to `SVG` in `configureSvgSize`

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

diff --git a/packages/mermaid/src/setupGraphViewbox.js b/packages/mermaid/src/setupGraphViewbox.js
index 0396d654f..e4050c205 100644
--- a/packages/mermaid/src/setupGraphViewbox.js
+++ b/packages/mermaid/src/setupGraphViewbox.js
@@ -1,4 +1,5 @@
 import { log } from './logger.js';
+import { SVG } from './diagram-api/types.js';
 
 /**
  * Applies d3 attributes
@@ -35,7 +36,7 @@ export const calculateSvgSizeAttrs = function (height, width, useMaxWidth) {
 /**
  * Applies attributes from `calculateSvgSizeAttrs`
  *
- * @param {SVGSVGElement} svgElem The SVG Element to configure
+ * @param {SVG} svgElem The SVG Element to configure
  * @param {number} height The height of the SVG
  * @param {number} width The width of the SVG
  * @param {boolean} useMaxWidth Whether or not to use max-width and set width to 100%

From 10d5b5d1d6a40c74deabecb3e6cc7e9b00be7218 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Thu, 3 Aug 2023 22:54:37 +0530
Subject: [PATCH 239/281] fix: Remove triple parsing of diagrams

---
 packages/mermaid/src/Diagram.ts                 |  3 +--
 packages/mermaid/src/diagrams/er/erRenderer.js  |  1 -
 .../diagrams/flowchart/elk/flowRenderer-elk.js  | 15 +--------------
 .../src/diagrams/flowchart/flowRenderer-v2.js   | 17 +----------------
 .../src/diagrams/flowchart/flowRenderer.js      | 11 +----------
 .../src/diagrams/sequence/sequenceRenderer.ts   |  3 ---
 .../src/diagrams/state/stateRenderer-v2.js      | 13 +------------
 7 files changed, 5 insertions(+), 58 deletions(-)

diff --git a/packages/mermaid/src/Diagram.ts b/packages/mermaid/src/Diagram.ts
index 4fb329b28..a5de65124 100644
--- a/packages/mermaid/src/Diagram.ts
+++ b/packages/mermaid/src/Diagram.ts
@@ -32,7 +32,6 @@ export class Diagram {
     log.debug('Type ' + this.type);
     // Setup diagram
     this.db = diagram.db;
-    this.db.clear?.();
     this.renderer = diagram.renderer;
     this.parser = diagram.parser;
     const originalParse = this.parser.parse.bind(this.parser);
@@ -49,6 +48,7 @@ export class Diagram {
       originalParse(cleanupComments(extractFrontMatter(text, this.db)));
 
     this.parser.parser.yy = this.db;
+    this.db.clear?.();
     if (diagram.init) {
       diagram.init(cnf);
       log.info('Initialized diagram ' + this.type, cnf);
@@ -60,7 +60,6 @@ export class Diagram {
     if (this.detectError) {
       throw this.detectError;
     }
-    this.db.clear?.();
     this.parser.parse(this.text);
   }
 
diff --git a/packages/mermaid/src/diagrams/er/erRenderer.js b/packages/mermaid/src/diagrams/er/erRenderer.js
index 63fb05633..b992afd65 100644
--- a/packages/mermaid/src/diagrams/er/erRenderer.js
+++ b/packages/mermaid/src/diagrams/er/erRenderer.js
@@ -555,7 +555,6 @@ const drawRelationshipFromLayout = function (svg, rel, g, insert, diagObj) {
 export const draw = function (text, id, _version, diagObj) {
   conf = getConfig().er;
   log.info('Drawing ER diagram');
-  //  diag.db.clear();
   const securityLevel = getConfig().securityLevel;
   // Handle root and Document for when rendering in sandbox mode
   let sandboxElement;
diff --git a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js b/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js
index 5ed06723e..c7bfdf524 100644
--- a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js
+++ b/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js
@@ -655,14 +655,7 @@ const addMarkersToEdge = function (svgPath, edgeData, diagramType, arrowMarkerAb
  */
 export const getClasses = function (text, diagObj) {
   log.info('Extracting classes');
-  diagObj.db.clear('ver-2');
-  try {
-    // Parse the graph definition
-    diagObj.parse(text);
-    return diagObj.db.getClasses();
-  } catch (e) {
-    return {};
-  }
+  return diagObj.db.getClasses();
 };
 
 const addSubGraphs = function (db) {
@@ -766,14 +759,8 @@ const insertChildren = (nodeArray, parentLookupDb) => {
  */
 
 export const draw = async function (text, id, _version, diagObj) {
-  // Add temporary render element
-  diagObj.db.clear();
   nodeDb = {};
   portPos = {};
-  diagObj.db.setGen('gen-2');
-  // Parse the graph definition
-  diagObj.parser.parse(text);
-
   const renderEl = select('body').append('div').attr('style', 'height:400px').attr('id', 'cy');
   let graph = {
     id: 'root',
diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
index 23f94942c..4a3b7a8ce 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
@@ -1,10 +1,7 @@
 import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
 import { select, curveLinear, selectAll } from 'd3';
-
-import flowDb from './flowDb.js';
 import { getConfig } from '../../config.js';
 import utils from '../../utils.js';
-
 import { render } from '../../dagre-wrapper/index.js';
 import { addHtmlLabel } from 'dagre-d3-es/src/dagre-js/label/add-html-label.js';
 import { log } from '../../logger.js';
@@ -344,15 +341,7 @@ export const addEdges = function (edges, g, diagObj) {
  * @returns {object} ClassDef styles
  */
 export const getClasses = function (text, diagObj) {
-  log.info('Extracting classes');
-  diagObj.db.clear();
-  try {
-    // Parse the graph definition
-    diagObj.parse(text);
-    return diagObj.db.getClasses();
-  } catch (e) {
-    return;
-  }
+  return diagObj.db.getClasses();
 };
 
 /**
@@ -364,10 +353,6 @@ export const getClasses = function (text, diagObj) {
 
 export const draw = async function (text, id, _version, diagObj) {
   log.info('Drawing flowchart');
-  diagObj.db.clear();
-  flowDb.setGen('gen-2');
-  // Parse the graph definition
-  diagObj.parser.parse(text);
 
   // Fetch the default direction, use TD if none was found
   let dir = diagObj.db.getDirection();
diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer.js b/packages/mermaid/src/diagrams/flowchart/flowRenderer.js
index 4382aa9a4..fc06cacd4 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowRenderer.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer.js
@@ -273,15 +273,7 @@ export const addEdges = function (edges, g, diagObj) {
  */
 export const getClasses = function (text, diagObj) {
   log.info('Extracting classes');
-  diagObj.db.clear();
-  try {
-    // Parse the graph definition
-    diagObj.parse(text);
-    return diagObj.db.getClasses();
-  } catch (e) {
-    log.error(e);
-    return {};
-  }
+  return diagObj.db.getClasses();
 };
 
 /**
@@ -294,7 +286,6 @@ export const getClasses = function (text, diagObj) {
  */
 export const draw = function (text, id, _version, diagObj) {
   log.info('Drawing flowchart');
-  diagObj.db.clear();
   const { securityLevel, flowchart: conf } = getConfig();
   let sandboxElement;
   if (securityLevel === 'sandbox') {
diff --git a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
index 4f8b1889b..f6fde5001 100644
--- a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
+++ b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
@@ -749,9 +749,6 @@ function adjustCreatedDestroyedData(
 export const draw = function (_text: string, id: string, _version: string, diagObj: Diagram) {
   const { securityLevel, sequence } = configApi.getConfig();
   conf = sequence;
-  diagObj.db.clear();
-  // Parse the graph definition
-  diagObj.parser.parse(_text);
   // Handle root and Document for when rendering in sandbox mode
   let sandboxElement;
   if (securityLevel === 'sandbox') {
diff --git a/packages/mermaid/src/diagrams/state/stateRenderer-v2.js b/packages/mermaid/src/diagrams/state/stateRenderer-v2.js
index 592cb43cc..990048ec7 100644
--- a/packages/mermaid/src/diagrams/state/stateRenderer-v2.js
+++ b/packages/mermaid/src/diagrams/state/stateRenderer-v2.js
@@ -84,17 +84,7 @@ export const setConf = function (cnf) {
  * @returns {object} ClassDef styles (a Map with keys = strings, values = )
  */
 export const getClasses = function (text, diagramObj) {
-  log.trace('Extracting classes');
-  diagramObj.db.clear();
-  try {
-    // Parse the graph definition
-    diagramObj.parser.parse(text);
-    // must run extract() to turn the parsed statements into states, relationships, classes, etc.
-    diagramObj.db.extract(diagramObj.db.getRootDocV2());
-    return diagramObj.db.getClasses();
-  } catch (e) {
-    return e;
-  }
+  return diagramObj.db.getClasses();
 };
 
 /**
@@ -384,7 +374,6 @@ const getDir = (parsedItem, defaultDir = DEFAULT_NESTED_DOC_DIR) => {
  */
 export const draw = async function (text, id, _version, diag) {
   log.info('Drawing state diagram (v2)', id);
-  // diag.sb.clear();
   nodeDb = {};
   // Fetch the default direction, use TD if none was found
   let dir = diag.db.getDirection();

From 95efc1786f6776c89f18a4d8ec776ba07c44d09f Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Thu, 3 Aug 2023 23:21:49 +0530
Subject: [PATCH 240/281] fix: unitTests after tripleParsing removal

---
 packages/mermaid/src/Diagram.ts               | 16 +++++++++------
 .../diagrams/sequence/sequenceDiagram.spec.js | 20 ++++---------------
 packages/mermaid/src/mermaidAPI.ts            |  4 ++--
 3 files changed, 16 insertions(+), 24 deletions(-)

diff --git a/packages/mermaid/src/Diagram.ts b/packages/mermaid/src/Diagram.ts
index a5de65124..f4b1e2c4f 100644
--- a/packages/mermaid/src/Diagram.ts
+++ b/packages/mermaid/src/Diagram.ts
@@ -4,8 +4,9 @@ import { getDiagram, registerDiagram } from './diagram-api/diagramAPI.js';
 import { detectType, getDiagramLoader } from './diagram-api/detectType.js';
 import { extractFrontMatter } from './diagram-api/frontmatter.js';
 import { UnknownDiagramError } from './errors.js';
-import { DetailedError } from './utils.js';
 import { cleanupComments } from './diagram-api/comments.js';
+import type { DetailedError } from './utils.js';
+import type { MermaidConfig } from './config.type.js';
 
 export type ParseErrorFunction = (err: string | DetailedError | unknown, hash?: any) => void;
 
@@ -18,6 +19,7 @@ export class Diagram {
   parser;
   renderer;
   db;
+  private init?: (config: MermaidConfig) => void;
   private detectError?: UnknownDiagramError;
   constructor(public text: string) {
     this.text += '\n';
@@ -48,11 +50,7 @@ export class Diagram {
       originalParse(cleanupComments(extractFrontMatter(text, this.db)));
 
     this.parser.parser.yy = this.db;
-    this.db.clear?.();
-    if (diagram.init) {
-      diagram.init(cnf);
-      log.info('Initialized diagram ' + this.type, cnf);
-    }
+    this.init = diagram.init;
     this.parse();
   }
 
@@ -60,6 +58,12 @@ export class Diagram {
     if (this.detectError) {
       throw this.detectError;
     }
+    this.db.clear?.();
+    if (this.init) {
+      const config = configApi.getConfig();
+      this.init(config);
+      log.info('Initialized diagram ' + this.type, config);
+    }
     this.parser.parse(this.text);
   }
 
diff --git a/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js b/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js
index 8b7d6f8d0..1b4c62e66 100644
--- a/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js
+++ b/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js
@@ -173,13 +173,12 @@ describe('more than one sequence diagram', () => {
 describe('when parsing a sequenceDiagram', function () {
   beforeEach(function () {
     // diagram.db = sequenceDb;
-    // diagram.db.clear();
+    //
     diagram = new Diagram(`
 sequenceDiagram
 Alice->Bob:Hello Bob, how are you?
 Note right of Bob: Bob thinks
 Bob-->Alice: I am good thanks!`);
-    diagram.db.clear();
   });
   it('should handle a sequenceDiagram definition', async function () {
     const str = `
@@ -1482,8 +1481,6 @@ describe('when checking the bounds in a sequenceDiagram', function () {
   let conf;
   beforeEach(function () {
     mermaidAPI.reset();
-    // diagram.db = sequenceDb;
-    // diagram.db.clear();
     diagram.renderer.bounds.init();
     conf = diagram.db.getConfig();
   });
@@ -1635,7 +1632,6 @@ sequenceDiagram
 Alice->Bob:Hello Bob, how are you?
 Note right of Bob: Bob thinks
 Bob-->Alice: I am good thanks!`);
-    diagram.db.clear();
   });
   ['tspan', 'fo', 'old', undefined].forEach(function (textPlacement) {
     it(`
@@ -2009,8 +2005,6 @@ describe('when rendering a sequenceDiagram with actor mirror activated', () => {
   let conf;
   beforeEach(function () {
     mermaidAPI.reset();
-    // diagram.db = sequenceDb;
-    diagram.db.clear();
     conf = diagram.db.getConfig();
     diagram.renderer.bounds.init();
   });
@@ -2052,12 +2046,9 @@ describe('when rendering a sequenceDiagram with directives', () => {
     mermaidAPI.initialize({ sequence: conf });
   });
 
-  let conf;
   beforeEach(function () {
     mermaidAPI.reset();
     // diagram.db = sequenceDb;
-    diagram.db.clear();
-    conf = diagram.db.getConfig();
     diagram.renderer.bounds.init();
   });
 
@@ -2069,10 +2060,7 @@ sequenceDiagram
 participant Alice
 `;
     diagram = new Diagram(str);
-
     diagram.renderer.bounds.init();
-    await mermaidAPI.parse(str);
-
     diagram.renderer.draw(str, 'tst', '1.2.3', diagram);
 
     const { bounds, models } = diagram.renderer.bounds.getBounds();
@@ -2093,7 +2081,7 @@ sequenceDiagram
 participant Alice
 `;
 
-    diagram.parse(str);
+    diagram = new Diagram(str);
     diagram.renderer.draw(str, 'tst', '1.2.3', diagram);
 
     const { bounds, models } = diagram.renderer.bounds.getBounds();
@@ -2114,7 +2102,7 @@ Alice->Bob:Hello Bob, how are you?
 Note right of Bob: Bob thinks
 Bob-->Alice: I am good thanks!`;
 
-    await mermaidAPI.parse(str1);
+    diagram = new Diagram(str1);
     diagram.renderer.draw(str1, 'tst', '1.2.3', diagram); // needs to be rendered for the correct value of visibility auto numbers
     expect(diagram.db.showSequenceNumbers()).toBe(true);
 
@@ -2124,7 +2112,7 @@ Alice->Bob:Hello Bob, how are you?
 Note right of Bob: Bob thinks
 Bob-->Alice: I am good thanks!`;
 
-    await mermaidAPI.parse(str2);
+    diagram = new Diagram(str2);
     diagram.renderer.draw(str2, 'tst', '1.2.3', diagram);
     expect(diagram.db.showSequenceNumbers()).toBe(false);
   });
diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts
index 4d8d95290..5cbf0287e 100644
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -108,8 +108,8 @@ export interface RenderResult {
 async function parse(text: string, parseOptions?: ParseOptions): Promise<boolean> {
   addDiagrams();
   try {
-    const diagram = await getDiagramFromText(text);
-    diagram.parse();
+    await getDiagramFromText(text);
+    // diagram.parse();
   } catch (error) {
     if (parseOptions?.suppressErrors) {
       return false;

From e2fac72166737e9abfdd66bb344b9812a8d8aa68 Mon Sep 17 00:00:00 2001
From: Reda Al Sulais <u.yokozuna@gmail.com>
Date: Thu, 3 Aug 2023 21:34:22 +0300
Subject: [PATCH 241/281] create `selectSvgElement`

---
 .../mermaid/src/diagrams/info/infoRenderer.ts | 17 +++----------
 .../src/rendering-util/selectSvgElement.ts    | 24 +++++++++++++++++++
 2 files changed, 27 insertions(+), 14 deletions(-)
 create mode 100644 packages/mermaid/src/rendering-util/selectSvgElement.ts

diff --git a/packages/mermaid/src/diagrams/info/infoRenderer.ts b/packages/mermaid/src/diagrams/info/infoRenderer.ts
index c1ca2b1cf..88f4e84f6 100644
--- a/packages/mermaid/src/diagrams/info/infoRenderer.ts
+++ b/packages/mermaid/src/diagrams/info/infoRenderer.ts
@@ -1,8 +1,7 @@
-import { select } from 'd3';
 import { log } from '../../logger.js';
-import { getConfig } from '../../config.js';
 import { configureSvgSize } from '../../setupGraphViewbox.js';
-import type { DrawDefinition, HTML, SVG } from '../../diagram-api/types.js';
+import type { DrawDefinition, SVG } from '../../diagram-api/types.js';
+import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
 
 /**
  * Draws a an info picture in the tag with id: id based on the graph definition in text.
@@ -15,17 +14,7 @@ const draw: DrawDefinition = (text, id, version) => {
   try {
     log.debug('rendering info diagram\n' + text);
 
-    const { securityLevel } = getConfig();
-    // handle root and document for when rendering in sandbox mode
-    let doc: Document = document;
-    if (securityLevel === 'sandbox') {
-      const sandboxElement: HTML = select(`#i${id}`);
-      doc = sandboxElement.node()?.contentDocument ?? doc;
-    }
-    const root: HTML =
-      securityLevel === 'sandbox' ? select(doc.body as HTMLIFrameElement) : select('body');
-
-    const svg: SVG = root.select(`#${id}`);
+    const svg: SVG = selectSvgElement(id);
     configureSvgSize(svg, 100, 400, true);
 
     svg
diff --git a/packages/mermaid/src/rendering-util/selectSvgElement.ts b/packages/mermaid/src/rendering-util/selectSvgElement.ts
new file mode 100644
index 000000000..858d0a11c
--- /dev/null
+++ b/packages/mermaid/src/rendering-util/selectSvgElement.ts
@@ -0,0 +1,24 @@
+import { select } from 'd3';
+import { getConfig } from '../config.js';
+import type { HTML, SVG } from '../diagram-api/types.js';
+
+/**
+ * Selects the SVG element using {@link id}.
+ *
+ * @param id - The diagram ID.
+ * @returns The selected {@link SVG} element using {@link id}.
+ */
+export const selectSvgElement = (id: string): SVG => {
+  const { securityLevel } = getConfig();
+  // handle root and document for when rendering in sandbox mode
+  let doc: Document = document;
+  if (securityLevel === 'sandbox') {
+    const sandboxElement: HTML = select(`#i${id}`);
+    doc = sandboxElement.node()?.contentDocument ?? doc;
+  }
+  const root: HTML =
+    securityLevel === 'sandbox' ? select(doc.body as HTMLIFrameElement) : select('body');
+
+  const svg: SVG = root.select(`#${id}`);
+  return svg;
+};

From 8db2fb8f905ffb5ab8edd2004856c8f324d76dbf Mon Sep 17 00:00:00 2001
From: Matthieu MOREL <matthieu.morel35@gmail.com>
Date: Thu, 3 Aug 2023 19:55:44 +0200
Subject: [PATCH 242/281] Create lychee.toml

Signed-off-by: Matthieu MOREL <matthieu.morel35@gmail.com>
---
 .github/lychee.toml                | 44 ++++++++++++++++++++++++++++++
 .github/workflows/link-checker.yml |  7 ++---
 .lycheeignore                      | 17 ------------
 3 files changed, 46 insertions(+), 22 deletions(-)
 create mode 100644 .github/lychee.toml
 delete mode 100644 .lycheeignore

diff --git a/.github/lychee.toml b/.github/lychee.toml
new file mode 100644
index 000000000..b13e53616
--- /dev/null
+++ b/.github/lychee.toml
@@ -0,0 +1,44 @@
+#############################  Display  #############################
+
+# Verbose program output
+# Accepts log level: "error", "warn", "info", "debug", "trace"
+verbose = "debug"
+
+# Don't show interactive progress bar while checking links.
+no_progress = true
+
+#############################  Cache  ###############################
+
+# Enable link caching. This can be helpful to avoid checking the same links on
+# multiple runs.
+cache = true
+
+# Discard all cached requests older than this duration.
+max_cache_age = "1d"
+
+#############################  Requests  ############################
+
+# Comma-separated list of accepted status codes for valid links.
+accept = [200, 429]
+
+#############################  Exclusions  ##########################
+
+# Exclude URLs and mail addresses from checking (supports regex).
+exclude = [
+# Network error: Forbidden
+"https://codepen.io",
+
+# Timeout error, maybe Twitter has anti-bot defenses against GitHub's CI servers?
+"https://twitter.com/mermaidjs_",
+
+# Don't check files that are generated during the build via `pnpm docs:code`
+'packages/mermaid/src/docs/config/setup/*',
+
+# Ignore slack invite
+"https://join.slack.com/"
+]
+
+# Exclude all private IPs from checking.
+# Equivalent to setting `exclude_private`, `exclude_link_local`, and
+# `exclude_loopback` to true.
+exclude_all_private = true
diff --git a/.github/workflows/link-checker.yml b/.github/workflows/link-checker.yml
index a2dc989e7..70580bfff 100644
--- a/.github/workflows/link-checker.yml
+++ b/.github/workflows/link-checker.yml
@@ -20,7 +20,7 @@ on:
     - cron: '30 8 * * *'
 
 jobs:
-  linkChecker:
+  link-checker:
     runs-on: ubuntu-latest
     permissions:
       # lychee only uses the GITHUB_TOKEN to avoid rate-limiting
@@ -39,10 +39,7 @@ jobs:
         uses: lycheeverse/lychee-action@v1.8.0
         with:
           args: >-
-            --verbose
-            --no-progress
-            --cache
-            --max-cache-age 1d
+            --config .github/lychee.toml
             packages/mermaid/src/docs/**/*.md
             README.md
             README.zh-CN.md
diff --git a/.lycheeignore b/.lycheeignore
deleted file mode 100644
index d22d3cb15..000000000
--- a/.lycheeignore
+++ /dev/null
@@ -1,17 +0,0 @@
-# These links are ignored by our link checker https://github.com/lycheeverse/lychee
-# The file allows you to list multiple regular expressions for exclusion (one pattern per line).
-
-# Network error: Forbidden
-https://codepen.io
-
-# Timeout error, maybe Twitter has anti-bot defenses against GitHub's CI servers?
-https://twitter.com/mermaidjs_
-
-# Don't check files that are generated during the build via `pnpm docs:code`
-packages/mermaid/src/docs/config/setup/*
-
-# Ignore localhost
-http://localhost:3333/
-
-# Ignore slack invite
-https://join.slack.com/

From 199fdce982956e3b40acebf6e4fa080cec042ef2 Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Thu, 3 Aug 2023 18:59:39 -0300
Subject: [PATCH 243/281] Add unit tests for node ids with special Chars

---
 .../flowchart/parser/flow-singlenode.spec.js  | 29 +++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-singlenode.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-singlenode.spec.js
index e078af4cb..d5797933d 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-singlenode.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-singlenode.spec.js
@@ -27,6 +27,8 @@ const keywords = [
   'subgraph',
 ];
 
+const specialChars = ['#', ':', '0', '&', ',', '*', '.', '\\', 'v', '-'];
+
 describe('[Singlenodes] when parsing', () => {
   beforeEach(function () {
     flow.parser.yy = flowDb;
@@ -339,4 +341,31 @@ describe('[Singlenodes] when parsing', () => {
     expect(vert[`${keyword}-node`].text).toBe(`${keyword}-node`);
     expect(vert[`${keyword}/node`].text).toBe(`${keyword}/node`);
   });
+
+  it.each(specialChars)(
+    'should allow node ids of single special characters',
+    function (specialChar) {
+      flow.parser.parse(`graph TD; ${specialChar} --> A`);
+      const vert = flow.parser.yy.getVertices();
+      expect(vert[`${specialChar}`].text).toBe(`${specialChar}`);
+    }
+  );
+
+  it.each(specialChars)(
+    'should allow node ids with special characters at start of id',
+    function (specialChar) {
+      flow.parser.parse(`graph TD; ${specialChar}node --> A`);
+      const vert = flow.parser.yy.getVertices();
+      expect(vert[`${specialChar}node`].text).toBe(`${specialChar}node`);
+    }
+  );
+
+  it.each(specialChars)(
+    'should allow node ids with special characters at end of id',
+    function (specialChar) {
+      flow.parser.parse(`graph TD; node${specialChar} --> A`);
+      const vert = flow.parser.yy.getVertices();
+      expect(vert[`node${specialChar}`].text).toBe(`node${specialChar}`);
+    }
+  );
 });

From 971215e353eac693a8a04613bb1670f98b7ab9d1 Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Thu, 3 Aug 2023 19:15:23 -0300
Subject: [PATCH 244/281] Correct idStringToken definition to include all
 individual special tokens

---
 packages/mermaid/src/diagram.spec.ts                      | 2 +-
 packages/mermaid/src/diagrams/flowchart/parser/flow.jison | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/src/diagram.spec.ts b/packages/mermaid/src/diagram.spec.ts
index 75a9e2d2c..ae93a121a 100644
--- a/packages/mermaid/src/diagram.spec.ts
+++ b/packages/mermaid/src/diagram.spec.ts
@@ -49,7 +49,7 @@ describe('diagram detection', () => {
       "Parse error on line 2:
       graph TD; A-->
       --------------^
-      Expecting 'COLON', 'PIPE', 'TESTSTR', 'DOWN', 'DEFAULT', 'NUM', 'COMMA', 'NODE_STRING', 'MINUS', got 'EOF'"
+      Expecting 'AMP', 'COLON', 'PIPE', 'TESTSTR', 'DOWN', 'DEFAULT', 'NUM', 'COMMA', 'NODE_STRING', 'BRKT', 'MINUS', 'MULT', got 'EOF'"
     `);
     await expect(getDiagramFromText('sequenceDiagram; A-->B')).rejects
       .toThrowErrorMatchingInlineSnapshot(`
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
index e303dd178..54d28b553 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
@@ -175,6 +175,9 @@ that id.
 "^"                   return 'UP';
 "\|"                  return 'SEP';
 "v"                   return 'DOWN';
+"*"                   return 'MULT';
+"#"                   return 'BRKT';
+"&"                   return 'AMP';
 ([A-Za-z0-9!"\#$%&'*+\.`?\\_\/]|\-(?=[^\>\-\.])|=(?!=))+  return 'NODE_STRING';
 "-"                   return 'MINUS'
 [\u00AA\u00B5\u00BA\u00C0-\u00D6\u00D8-\u00F6]|
@@ -569,7 +572,7 @@ style: styleComponent
 styleComponent: NUM | NODE_STRING| COLON | UNIT | SPACE | BRKT | STYLE | PCT ;
 
 /* Token lists */
-idStringToken  :  NUM | NODE_STRING | DOWN | MINUS | DEFAULT | COMMA | COLON;
+idStringToken  :  NUM | NODE_STRING | DOWN | MINUS | DEFAULT | COMMA | COLON | AMP | BRKT | MULT;
 
 textToken      :   TEXT | TAGSTART | TAGEND | UNICODE_TEXT;
 

From ee6fa94aa247f528dfc1e4ef4bf2981882acab0e Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Thu, 3 Aug 2023 20:05:11 -0300
Subject: [PATCH 245/281] Refactor unit tests and remove repetition

---
 .../flowchart/parser/flow-edges.spec.js       | 362 +++---------------
 .../flowchart/parser/flow-singlenode.spec.js  |   2 +-
 2 files changed, 61 insertions(+), 303 deletions(-)

diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-edges.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-edges.spec.js
index 80dce1bd6..21f3a4355 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-edges.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-edges.spec.js
@@ -28,6 +28,18 @@ const keywords = [
   'kitty',
 ];
 
+const doubleEndedEdges = [
+  { edgeStart: 'x--', edgeEnd: '--x', stroke: 'normal', type: 'double_arrow_cross' },
+  { edgeStart: 'x==', edgeEnd: '==x', stroke: 'thick', type: 'double_arrow_cross' },
+  { edgeStart: 'x-.', edgeEnd: '.-x', stroke: 'dotted', type: 'double_arrow_cross' },
+  { edgeStart: 'o--', edgeEnd: '--o', stroke: 'normal', type: 'double_arrow_circle' },
+  { edgeStart: 'o==', edgeEnd: '==o', stroke: 'thick', type: 'double_arrow_circle' },
+  { edgeStart: 'o-.', edgeEnd: '.-o', stroke: 'dotted', type: 'double_arrow_circle' },
+  { edgeStart: '<--', edgeEnd: '-->', stroke: 'normal', type: 'double_arrow_point' },
+  { edgeStart: '<==', edgeEnd: '==>', stroke: 'thick', type: 'double_arrow_point' },
+  { edgeStart: '<-.', edgeEnd: '.->', stroke: 'dotted', type: 'double_arrow_point' },
+];
+
 describe('[Edges] when parsing', () => {
   beforeEach(function () {
     flow.parser.yy = flowDb;
@@ -61,302 +73,10 @@ describe('[Edges] when parsing', () => {
     expect(edges[0].type).toBe('arrow_circle');
   });
 
-  describe('cross', function () {
-    it('should handle double edged nodes and edges', function () {
-      const res = flow.parser.parse('graph TD;\nA x--x B;');
-
-      const vert = flow.parser.yy.getVertices();
-      const edges = flow.parser.yy.getEdges();
-
-      expect(vert['A'].id).toBe('A');
-      expect(vert['B'].id).toBe('B');
-      expect(edges.length).toBe(1);
-      expect(edges[0].start).toBe('A');
-      expect(edges[0].end).toBe('B');
-      expect(edges[0].type).toBe('double_arrow_cross');
-      expect(edges[0].text).toBe('');
-      expect(edges[0].stroke).toBe('normal');
-      expect(edges[0].length).toBe(1);
-    });
-
-    it('should handle double edged nodes with text', function () {
-      const res = flow.parser.parse('graph TD;\nA x-- text --x B;');
-
-      const vert = flow.parser.yy.getVertices();
-      const edges = flow.parser.yy.getEdges();
-
-      expect(vert['A'].id).toBe('A');
-      expect(vert['B'].id).toBe('B');
-      expect(edges.length).toBe(1);
-      expect(edges[0].start).toBe('A');
-      expect(edges[0].end).toBe('B');
-      expect(edges[0].type).toBe('double_arrow_cross');
-      expect(edges[0].text).toBe('text');
-      expect(edges[0].stroke).toBe('normal');
-      expect(edges[0].length).toBe(1);
-    });
-
-    it.each(keywords)('should handle %s as text in double edged nodes', function (keyword) {
-      const res = flow.parser.parse(`graph TD;\nA x-- ${keyword} --x B;`);
-
-      const vert = flow.parser.yy.getVertices();
-      const edges = flow.parser.yy.getEdges();
-
-      expect(vert['A'].id).toBe('A');
-      expect(vert['B'].id).toBe('B');
-      expect(edges.length).toBe(1);
-      expect(edges[0].start).toBe('A');
-      expect(edges[0].end).toBe('B');
-      expect(edges[0].type).toBe('double_arrow_cross');
-      expect(edges[0].text).toBe(`${keyword}`);
-      expect(edges[0].stroke).toBe('normal');
-      expect(edges[0].length).toBe(1);
-    });
-
-    it('should handle double edged nodes and edges on thick arrows', function () {
-      const res = flow.parser.parse('graph TD;\nA x==x B;');
-
-      const vert = flow.parser.yy.getVertices();
-      const edges = flow.parser.yy.getEdges();
-
-      expect(vert['A'].id).toBe('A');
-      expect(vert['B'].id).toBe('B');
-      expect(edges.length).toBe(1);
-      expect(edges[0].start).toBe('A');
-      expect(edges[0].end).toBe('B');
-      expect(edges[0].type).toBe('double_arrow_cross');
-      expect(edges[0].text).toBe('');
-      expect(edges[0].stroke).toBe('thick');
-      expect(edges[0].length).toBe(1);
-    });
-
-    it('should handle double edged nodes with text on thick arrows', function () {
-      const res = flow.parser.parse('graph TD;\nA x== text ==x B;');
-
-      const vert = flow.parser.yy.getVertices();
-      const edges = flow.parser.yy.getEdges();
-
-      expect(vert['A'].id).toBe('A');
-      expect(vert['B'].id).toBe('B');
-      expect(edges.length).toBe(1);
-      expect(edges[0].start).toBe('A');
-      expect(edges[0].end).toBe('B');
-      expect(edges[0].type).toBe('double_arrow_cross');
-      expect(edges[0].text).toBe('text');
-      expect(edges[0].stroke).toBe('thick');
-      expect(edges[0].length).toBe(1);
-    });
-
-    it.each(keywords)('should handle %s as text in thick double edged nodes', function (keyword) {
-      const res = flow.parser.parse(`graph TD;\nA x== ${keyword} ==x B;`);
-
-      const vert = flow.parser.yy.getVertices();
-      const edges = flow.parser.yy.getEdges();
-
-      expect(vert['A'].id).toBe('A');
-      expect(vert['B'].id).toBe('B');
-      expect(edges.length).toBe(1);
-      expect(edges[0].start).toBe('A');
-      expect(edges[0].end).toBe('B');
-      expect(edges[0].type).toBe('double_arrow_cross');
-      expect(edges[0].text).toBe(`${keyword}`);
-      expect(edges[0].stroke).toBe('thick');
-      expect(edges[0].length).toBe(1);
-    });
-
-    it('should handle double edged nodes and edges on dotted arrows', function () {
-      const res = flow.parser.parse('graph TD;\nA x-.-x B;');
-
-      const vert = flow.parser.yy.getVertices();
-      const edges = flow.parser.yy.getEdges();
-
-      expect(vert['A'].id).toBe('A');
-      expect(vert['B'].id).toBe('B');
-      expect(edges.length).toBe(1);
-      expect(edges[0].start).toBe('A');
-      expect(edges[0].end).toBe('B');
-      expect(edges[0].type).toBe('double_arrow_cross');
-      expect(edges[0].text).toBe('');
-      expect(edges[0].stroke).toBe('dotted');
-      expect(edges[0].length).toBe(1);
-    });
-
-    it('should handle double edged nodes with text on dotted arrows', function () {
-      const res = flow.parser.parse('graph TD;\nA x-. text .-x B;');
-
-      const vert = flow.parser.yy.getVertices();
-      const edges = flow.parser.yy.getEdges();
-
-      expect(vert['A'].id).toBe('A');
-      expect(vert['B'].id).toBe('B');
-      expect(edges.length).toBe(1);
-      expect(edges[0].start).toBe('A');
-      expect(edges[0].end).toBe('B');
-      expect(edges[0].type).toBe('double_arrow_cross');
-      expect(edges[0].text).toBe('text');
-      expect(edges[0].stroke).toBe('dotted');
-      expect(edges[0].length).toBe(1);
-    });
-  });
-
-  it.each(keywords)('should handle %s as text in dotted double edged nodes', function (keyword) {
-    const res = flow.parser.parse(`graph TD;\nA x-. ${keyword} .-x B;`);
-
-    const vert = flow.parser.yy.getVertices();
-    const edges = flow.parser.yy.getEdges();
-
-    expect(vert['A'].id).toBe('A');
-    expect(vert['B'].id).toBe('B');
-    expect(edges.length).toBe(1);
-    expect(edges[0].start).toBe('A');
-    expect(edges[0].end).toBe('B');
-    expect(edges[0].type).toBe('double_arrow_cross');
-    expect(edges[0].text).toBe(`${keyword}`);
-    expect(edges[0].stroke).toBe('dotted');
-    expect(edges[0].length).toBe(1);
-  });
-
-  describe('circle', function () {
-    it('should handle double edged nodes and edges', function () {
-      const res = flow.parser.parse('graph TD;\nA o--o B;');
-
-      const vert = flow.parser.yy.getVertices();
-      const edges = flow.parser.yy.getEdges();
-
-      expect(vert['A'].id).toBe('A');
-      expect(vert['B'].id).toBe('B');
-      expect(edges.length).toBe(1);
-      expect(edges[0].start).toBe('A');
-      expect(edges[0].end).toBe('B');
-      expect(edges[0].type).toBe('double_arrow_circle');
-      expect(edges[0].text).toBe('');
-      expect(edges[0].stroke).toBe('normal');
-      expect(edges[0].length).toBe(1);
-    });
-
-    it('should handle double edged nodes with text', function () {
-      const res = flow.parser.parse('graph TD;\nA o-- text --o B;');
-
-      const vert = flow.parser.yy.getVertices();
-      const edges = flow.parser.yy.getEdges();
-
-      expect(vert['A'].id).toBe('A');
-      expect(vert['B'].id).toBe('B');
-      expect(edges.length).toBe(1);
-      expect(edges[0].start).toBe('A');
-      expect(edges[0].end).toBe('B');
-      expect(edges[0].type).toBe('double_arrow_circle');
-      expect(edges[0].text).toBe('text');
-      expect(edges[0].stroke).toBe('normal');
-      expect(edges[0].length).toBe(1);
-    });
-
-    it.each(keywords)('should handle double edged nodes with %s as text', function (keyword) {
-      const res = flow.parser.parse(`graph TD;\nA o-- ${keyword} --o B;`);
-
-      const vert = flow.parser.yy.getVertices();
-      const edges = flow.parser.yy.getEdges();
-
-      expect(vert['A'].id).toBe('A');
-      expect(vert['B'].id).toBe('B');
-      expect(edges.length).toBe(1);
-      expect(edges[0].start).toBe('A');
-      expect(edges[0].end).toBe('B');
-      expect(edges[0].type).toBe('double_arrow_circle');
-      expect(edges[0].text).toBe(`${keyword}`);
-      expect(edges[0].stroke).toBe('normal');
-      expect(edges[0].length).toBe(1);
-    });
-
-    it('should handle double edged nodes and edges on thick arrows', function () {
-      const res = flow.parser.parse('graph TD;\nA o==o B;');
-
-      const vert = flow.parser.yy.getVertices();
-      const edges = flow.parser.yy.getEdges();
-
-      expect(vert['A'].id).toBe('A');
-      expect(vert['B'].id).toBe('B');
-      expect(edges.length).toBe(1);
-      expect(edges[0].start).toBe('A');
-      expect(edges[0].end).toBe('B');
-      expect(edges[0].type).toBe('double_arrow_circle');
-      expect(edges[0].text).toBe('');
-      expect(edges[0].stroke).toBe('thick');
-      expect(edges[0].length).toBe(1);
-    });
-
-    it('should handle double edged nodes with text on thick arrows', function () {
-      const res = flow.parser.parse('graph TD;\nA o== text ==o B;');
-
-      const vert = flow.parser.yy.getVertices();
-      const edges = flow.parser.yy.getEdges();
-
-      expect(vert['A'].id).toBe('A');
-      expect(vert['B'].id).toBe('B');
-      expect(edges.length).toBe(1);
-      expect(edges[0].start).toBe('A');
-      expect(edges[0].end).toBe('B');
-      expect(edges[0].type).toBe('double_arrow_circle');
-      expect(edges[0].text).toBe('text');
-      expect(edges[0].stroke).toBe('thick');
-      expect(edges[0].length).toBe(1);
-    });
-
-    it.each(keywords)('should handle thick double edged nodes with %s as text', function (keyword) {
-      const res = flow.parser.parse(`graph TD;\nA o== ${keyword} ==o B;`);
-
-      const vert = flow.parser.yy.getVertices();
-      const edges = flow.parser.yy.getEdges();
-
-      expect(vert['A'].id).toBe('A');
-      expect(vert['B'].id).toBe('B');
-      expect(edges.length).toBe(1);
-      expect(edges[0].start).toBe('A');
-      expect(edges[0].end).toBe('B');
-      expect(edges[0].type).toBe('double_arrow_circle');
-      expect(edges[0].text).toBe(`${keyword}`);
-      expect(edges[0].stroke).toBe('thick');
-      expect(edges[0].length).toBe(1);
-    });
-
-    it('should handle double edged nodes and edges on dotted arrows', function () {
-      const res = flow.parser.parse('graph TD;\nA o-.-o B;');
-
-      const vert = flow.parser.yy.getVertices();
-      const edges = flow.parser.yy.getEdges();
-
-      expect(vert['A'].id).toBe('A');
-      expect(vert['B'].id).toBe('B');
-      expect(edges.length).toBe(1);
-      expect(edges[0].start).toBe('A');
-      expect(edges[0].end).toBe('B');
-      expect(edges[0].type).toBe('double_arrow_circle');
-      expect(edges[0].text).toBe('');
-      expect(edges[0].stroke).toBe('dotted');
-      expect(edges[0].length).toBe(1);
-    });
-
-    it('should handle double edged nodes with text on dotted arrows', function () {
-      const res = flow.parser.parse('graph TD;\nA o-. text .-o B;');
-
-      const vert = flow.parser.yy.getVertices();
-      const edges = flow.parser.yy.getEdges();
-
-      expect(vert['A'].id).toBe('A');
-      expect(vert['B'].id).toBe('B');
-      expect(edges.length).toBe(1);
-      expect(edges[0].start).toBe('A');
-      expect(edges[0].end).toBe('B');
-      expect(edges[0].type).toBe('double_arrow_circle');
-      expect(edges[0].text).toBe('text');
-      expect(edges[0].stroke).toBe('dotted');
-      expect(edges[0].length).toBe(1);
-    });
-
-    it.each(keywords)(
-      'should handle dotted double edged nodes with %s as text',
-      function (keyword) {
-        const res = flow.parser.parse(`graph TD;\nA o-. ${keyword} .-o B;`);
+  describe('edges', function () {
+    doubleEndedEdges.forEach((edgeType) => {
+      it(`should handle ${edgeType.stroke} ${edgeType.type} with no text`, function () {
+        const res = flow.parser.parse(`graph TD;\nA ${edgeType.edgeStart}${edgeType.edgeEnd} B;`);
 
         const vert = flow.parser.yy.getVertices();
         const edges = flow.parser.yy.getEdges();
@@ -366,12 +86,50 @@ describe('[Edges] when parsing', () => {
         expect(edges.length).toBe(1);
         expect(edges[0].start).toBe('A');
         expect(edges[0].end).toBe('B');
-        expect(edges[0].type).toBe('double_arrow_circle');
-        expect(edges[0].text).toBe(`${keyword}`);
-        expect(edges[0].stroke).toBe('dotted');
-        expect(edges[0].length).toBe(1);
-      }
-    );
+        expect(edges[0].type).toBe(`${edgeType.type}`);
+        expect(edges[0].text).toBe('');
+        expect(edges[0].stroke).toBe(`${edgeType.stroke}`);
+      });
+
+      it(`should handle ${edgeType.stroke} ${edgeType.type} with text`, function () {
+        const res = flow.parser.parse(
+          `graph TD;\nA ${edgeType.edgeStart} text ${edgeType.edgeEnd} B;`
+        );
+
+        const vert = flow.parser.yy.getVertices();
+        const edges = flow.parser.yy.getEdges();
+
+        expect(vert['A'].id).toBe('A');
+        expect(vert['B'].id).toBe('B');
+        expect(edges.length).toBe(1);
+        expect(edges[0].start).toBe('A');
+        expect(edges[0].end).toBe('B');
+        expect(edges[0].type).toBe(`${edgeType.type}`);
+        expect(edges[0].text).toBe('text');
+        expect(edges[0].stroke).toBe(`${edgeType.stroke}`);
+      });
+
+      it.each(keywords)(
+        `should handle ${edgeType.stroke} ${edgeType.type} with %s text`,
+        function (keyword) {
+          const res = flow.parser.parse(
+            `graph TD;\nA ${edgeType.edgeStart} ${keyword} ${edgeType.edgeEnd} B;`
+          );
+
+          const vert = flow.parser.yy.getVertices();
+          const edges = flow.parser.yy.getEdges();
+
+          expect(vert['A'].id).toBe('A');
+          expect(vert['B'].id).toBe('B');
+          expect(edges.length).toBe(1);
+          expect(edges[0].start).toBe('A');
+          expect(edges[0].end).toBe('B');
+          expect(edges[0].type).toBe(`${edgeType.type}`);
+          expect(edges[0].text).toBe(`${keyword}`);
+          expect(edges[0].stroke).toBe(`${edgeType.stroke}`);
+        }
+      );
+    });
   });
 
   it('should handle multiple edges', function () {
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-singlenode.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-singlenode.spec.js
index d5797933d..8489ca725 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-singlenode.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-singlenode.spec.js
@@ -27,7 +27,7 @@ const keywords = [
   'subgraph',
 ];
 
-const specialChars = ['#', ':', '0', '&', ',', '*', '.', '\\', 'v', '-'];
+const specialChars = ['#', ':', '0', '&', ',', '*', '.', '\\', 'v', '-', '/'];
 
 describe('[Singlenodes] when parsing', () => {
   beforeEach(function () {

From 5a165e4c1deecb5389742f59c8f3feb8a9bf5baf Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Thu, 3 Aug 2023 20:11:50 -0300
Subject: [PATCH 246/281] Revert to old docs concerning quotations marks in
 string

---
 docs/syntax/flowchart.md                      | 1 -
 packages/mermaid/src/docs/syntax/flowchart.md | 1 -
 2 files changed, 2 deletions(-)

diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md
index fb0b7f2e3..0440c9169 100644
--- a/docs/syntax/flowchart.md
+++ b/docs/syntax/flowchart.md
@@ -605,7 +605,6 @@ flowchart LR
 ### Entity codes to escape characters
 
 It is possible to escape characters using the syntax exemplified here.
-For quotation marks, you can escape them with a backslash as well.
 
 ```mermaid-example
     flowchart LR
diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md
index 960bf9755..56cad19a0 100644
--- a/packages/mermaid/src/docs/syntax/flowchart.md
+++ b/packages/mermaid/src/docs/syntax/flowchart.md
@@ -387,7 +387,6 @@ flowchart LR
 ### Entity codes to escape characters
 
 It is possible to escape characters using the syntax exemplified here.
-For quotation marks, you can escape them with a backslash as well.
 
 ```mermaid-example
     flowchart LR

From aaf333676cd3cb91bec4245421ca5b2451a1426c Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Thu, 3 Aug 2023 20:15:11 -0300
Subject: [PATCH 247/281] Add underscore to unit test on special Chars

---
 .../src/diagrams/flowchart/parser/flow-singlenode.spec.js       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-singlenode.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-singlenode.spec.js
index 8489ca725..59336d8d4 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-singlenode.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-singlenode.spec.js
@@ -27,7 +27,7 @@ const keywords = [
   'subgraph',
 ];
 
-const specialChars = ['#', ':', '0', '&', ',', '*', '.', '\\', 'v', '-', '/'];
+const specialChars = ['#', ':', '0', '&', ',', '*', '.', '\\', 'v', '-', '/', '_'];
 
 describe('[Singlenodes] when parsing', () => {
   beforeEach(function () {

From 850513fa3daeba5259a2edb37b2b86633e2b7c75 Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Thu, 3 Aug 2023 20:56:01 -0300
Subject: [PATCH 248/281] Return Unicode Text to idStringToken definition

---
 packages/mermaid/src/diagram.spec.ts                      | 2 +-
 packages/mermaid/src/diagrams/flowchart/parser/flow.jison | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/src/diagram.spec.ts b/packages/mermaid/src/diagram.spec.ts
index ae93a121a..99ce4e2c6 100644
--- a/packages/mermaid/src/diagram.spec.ts
+++ b/packages/mermaid/src/diagram.spec.ts
@@ -49,7 +49,7 @@ describe('diagram detection', () => {
       "Parse error on line 2:
       graph TD; A-->
       --------------^
-      Expecting 'AMP', 'COLON', 'PIPE', 'TESTSTR', 'DOWN', 'DEFAULT', 'NUM', 'COMMA', 'NODE_STRING', 'BRKT', 'MINUS', 'MULT', got 'EOF'"
+      Expecting 'AMP', 'COLON', 'PIPE', 'TESTSTR', 'DOWN', 'DEFAULT', 'NUM', 'COMMA', 'NODE_STRING', 'BRKT', 'MINUS', 'MULT', 'UNICODE_TEXT', got 'EOF'"
     `);
     await expect(getDiagramFromText('sequenceDiagram; A-->B')).rejects
       .toThrowErrorMatchingInlineSnapshot(`
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
index 54d28b553..da5c3ef6f 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
@@ -572,7 +572,7 @@ style: styleComponent
 styleComponent: NUM | NODE_STRING| COLON | UNIT | SPACE | BRKT | STYLE | PCT ;
 
 /* Token lists */
-idStringToken  :  NUM | NODE_STRING | DOWN | MINUS | DEFAULT | COMMA | COLON | AMP | BRKT | MULT;
+idStringToken  :  NUM | NODE_STRING | DOWN | MINUS | DEFAULT | COMMA | COLON | AMP | BRKT | MULT | UNICODE_TEXT;
 
 textToken      :   TEXT | TAGSTART | TAGEND | UNICODE_TEXT;
 

From c9db0ee749264d50878781e96edf8b7012fd7e51 Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Thu, 3 Aug 2023 21:05:41 -0300
Subject: [PATCH 249/281] Add specialChars in textNoTagsToken, alphaNumToken

This will ensure that alphaNumToken does not lose any of
the previously used tokens in its definition. The same
tokens were added to textNoTagsToken explicitly, because it used to
have alphaNumToken in its definition before I removed it.

Previously, textNoTagsToken and alphaNumToken had many tokens in
common in their definition. To avoid grammar conflicts, the
alphaNumStatement grammar was created. However, I found this
unintuitive and was an extra step just to avoid repetition in
the definitions.

I opted to have repetition in the definitions of textNoTagsToken
and alphaNumToken and it be explicitly clear right away, rather than
have extra grammar statements like alphaNumStatement which don't look
like they do anything at first glance
---
 packages/mermaid/src/diagrams/flowchart/parser/flow.jison | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
index da5c3ef6f..8d746f808 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
@@ -576,11 +576,11 @@ idStringToken  :  NUM | NODE_STRING | DOWN | MINUS | DEFAULT | COMMA | COLON | A
 
 textToken      :   TEXT | TAGSTART | TAGEND | UNICODE_TEXT;
 
-textNoTagsToken: NUM | NODE_STRING | SPACE | MINUS | keywords |  START_LINK ;
+textNoTagsToken: NUM | NODE_STRING | SPACE | MINUS | AMP | UNICODE_TEXT | COLON | MULT | BRKT | keywords | START_LINK ;
 
 edgeTextToken  :  EDGE_TEXT | UNICODE_TEXT ;
 
-alphaNumToken   :  NUM | UNICODE_TEXT | NODE_STRING | DIR | DOWN | MINUS | COMMA;
+alphaNumToken  :  NUM | UNICODE_TEXT | NODE_STRING | DIR | DOWN | MINUS | COMMA | COLON | AMP | BRKT | MULT;
 
 idString
     :idStringToken

From 4845635f4824b7f1b804697ce4d0c6efba60f5c9 Mon Sep 17 00:00:00 2001
From: Reda Al Sulais <u.yokozuna@gmail.com>
Date: Sat, 5 Aug 2023 16:00:06 +0300
Subject: [PATCH 250/281] create `Group` type

---
 packages/mermaid/src/diagram-api/types.ts     |  2 ++
 .../mermaid/src/diagrams/info/infoRenderer.ts | 30 ++++++++-----------
 2 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/packages/mermaid/src/diagram-api/types.ts b/packages/mermaid/src/diagram-api/types.ts
index 4322b6789..860e965ac 100644
--- a/packages/mermaid/src/diagram-api/types.ts
+++ b/packages/mermaid/src/diagram-api/types.ts
@@ -83,4 +83,6 @@ export type HTML = d3.Selection<HTMLIFrameElement, unknown, Element | null, unkn
 
 export type SVG = d3.Selection<SVGSVGElement, unknown, Element | null, unknown>;
 
+export type Group = d3.Selection<SVGGElement, unknown, Element | null, unknown>;
+
 export type DiagramStylesProvider = (options?: any) => string;
diff --git a/packages/mermaid/src/diagrams/info/infoRenderer.ts b/packages/mermaid/src/diagrams/info/infoRenderer.ts
index 88f4e84f6..25ae72fce 100644
--- a/packages/mermaid/src/diagrams/info/infoRenderer.ts
+++ b/packages/mermaid/src/diagrams/info/infoRenderer.ts
@@ -1,6 +1,6 @@
 import { log } from '../../logger.js';
 import { configureSvgSize } from '../../setupGraphViewbox.js';
-import type { DrawDefinition, SVG } from '../../diagram-api/types.js';
+import type { DrawDefinition, Group, SVG } from '../../diagram-api/types.js';
 import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
 
 /**
@@ -11,24 +11,20 @@ import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
  * @param version - MermaidJS version.
  */
 const draw: DrawDefinition = (text, id, version) => {
-  try {
-    log.debug('rendering info diagram\n' + text);
+  log.debug('rendering info diagram\n' + text);
 
-    const svg: SVG = selectSvgElement(id);
-    configureSvgSize(svg, 100, 400, true);
+  const svg: SVG = selectSvgElement(id);
+  configureSvgSize(svg, 100, 400, true);
 
-    svg
-      .append('g')
-      .append('text')
-      .attr('x', 100)
-      .attr('y', 40)
-      .attr('class', 'version')
-      .attr('font-size', 32)
-      .style('text-anchor', 'middle')
-      .text(`v${version}`);
-  } catch (e) {
-    log.error('error while rendering info diagram', e);
-  }
+  const group: Group = svg.append('g');
+  group
+    .append('text')
+    .attr('x', 100)
+    .attr('y', 40)
+    .attr('class', 'version')
+    .attr('font-size', 32)
+    .style('text-anchor', 'middle')
+    .text(`v${version}`);
 };
 
 export const renderer = { draw };

From 1802f5d0c05be6725ba2a4fecba34581cee38298 Mon Sep 17 00:00:00 2001
From: Reda Al Sulais <u.yokozuna@gmail.com>
Date: Sat, 5 Aug 2023 20:45:23 +0300
Subject: [PATCH 251/281] Update selectSvgElement.ts

---
 packages/mermaid/src/rendering-util/selectSvgElement.ts | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/mermaid/src/rendering-util/selectSvgElement.ts b/packages/mermaid/src/rendering-util/selectSvgElement.ts
index 858d0a11c..ae106ef78 100644
--- a/packages/mermaid/src/rendering-util/selectSvgElement.ts
+++ b/packages/mermaid/src/rendering-util/selectSvgElement.ts
@@ -11,14 +11,12 @@ import type { HTML, SVG } from '../diagram-api/types.js';
 export const selectSvgElement = (id: string): SVG => {
   const { securityLevel } = getConfig();
   // handle root and document for when rendering in sandbox mode
-  let doc: Document = document;
+  let root: HTML = select('body');
   if (securityLevel === 'sandbox') {
     const sandboxElement: HTML = select(`#i${id}`);
-    doc = sandboxElement.node()?.contentDocument ?? doc;
+    const doc: Document = sandboxElement.node()?.contentDocument ?? document;
+    root = select(doc.body as HTMLIFrameElement);
   }
-  const root: HTML =
-    securityLevel === 'sandbox' ? select(doc.body as HTMLIFrameElement) : select('body');
-
   const svg: SVG = root.select(`#${id}`);
   return svg;
 };

From 6df76d93e556030f3b70bc78fdd843b735fe048a Mon Sep 17 00:00:00 2001
From: danshuitaihejie <474182370@qq.com>
Date: Mon, 7 Aug 2023 00:21:57 +0800
Subject: [PATCH 252/281] fix!(deps): fix zenuml style leakage. update
 @zenuml/core to ^3.0.6 to fix the style leakage.

---
 packages/mermaid-zenuml/package.json |  2 +-
 pnpm-lock.yaml                       | 16 ++++++++--------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/mermaid-zenuml/package.json b/packages/mermaid-zenuml/package.json
index d4186f05c..b907e2cba 100644
--- a/packages/mermaid-zenuml/package.json
+++ b/packages/mermaid-zenuml/package.json
@@ -33,7 +33,7 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@zenuml/core": "^3.0.3"
+    "@zenuml/core": "^3.0.6"
   },
   "devDependencies": {
     "mermaid": "workspace:^"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a68beacad..08487b802 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -413,8 +413,8 @@ importers:
   packages/mermaid-zenuml:
     dependencies:
       '@zenuml/core':
-        specifier: ^3.0.3
-        version: 3.0.3(ts-node@10.9.1)
+        specifier: ^3.0.6
+        version: 3.0.6(ts-node@10.9.1)
     devDependencies:
       mermaid:
         specifier: workspace:^
@@ -5738,14 +5738,14 @@ packages:
     resolution: {integrity: sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==}
     dev: true
 
-  /@zenuml/core@3.0.3(ts-node@10.9.1):
-    resolution: {integrity: sha512-Wp6yF5iERvGXrR3z/mNhQYP2uI54Bd7RQ2ZwA26Lca+tufj4X8pfqGVSORLqbUl4wjjdcwHc2RNT8AU+cz2NCg==}
+  /@zenuml/core@3.0.6(ts-node@10.9.1):
+    resolution: {integrity: sha512-azEBVrl+ClCPhII92TbzBUFcWhIjlOPdEHVzF6eZXs5Oy4JlrfldS5pAZBHCFL4riOBsjZ5sHHmQLQg9V07T4Q==}
     engines: {node: '>=12.0.0'}
     dependencies:
       '@types/assert': 1.5.6
       '@types/ramda': 0.28.25
       '@vue/compat': 3.3.4(vue@3.3.4)
-      antlr4: 4.13.0
+      antlr4: 4.11.0
       color-string: 1.9.1
       dom-to-image-more: 2.16.0
       file-saver: 2.0.5
@@ -6026,9 +6026,9 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
-  /antlr4@4.13.0:
-    resolution: {integrity: sha512-zooUbt+UscjnWyOrsuY/tVFL4rwrAGwOivpQmvmUDE22hy/lUA467Rc1rcixyRwcRUIXFYBwv7+dClDSHdmmew==}
-    engines: {node: '>=16'}
+  /antlr4@4.11.0:
+    resolution: {integrity: sha512-GUGlpE2JUjAN+G8G5vY+nOoeyNhHsXoIJwP1XF1oRw89vifA1K46T6SEkwLwr7drihN7I/lf0DIjKc4OZvBX8w==}
+    engines: {node: '>=14'}
     dev: false
 
   /any-promise@1.3.0:

From 646f7662d0d30a5505a3b8ec2cf21d90f10818b8 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Mon, 7 Aug 2023 15:12:37 +0530
Subject: [PATCH 253/281] chore: Remove comments, cleanup

Co-authored-by: Alois Klink <alois@aloisklink.com>
Co-authored-by: Nikolay Rozhkov <nironame@gmail.com>
Co-authored-by: Yokozuna59 <u.yokozuna@gmail.com>
---
 packages/mermaid/src/Diagram.ts                      | 12 +++++++-----
 .../src/diagrams/sequence/sequenceDiagram.spec.js    |  3 ---
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/packages/mermaid/src/Diagram.ts b/packages/mermaid/src/Diagram.ts
index f4b1e2c4f..4da0a3a66 100644
--- a/packages/mermaid/src/Diagram.ts
+++ b/packages/mermaid/src/Diagram.ts
@@ -7,6 +7,8 @@ import { UnknownDiagramError } from './errors.js';
 import { cleanupComments } from './diagram-api/comments.js';
 import type { DetailedError } from './utils.js';
 import type { MermaidConfig } from './config.type.js';
+import type { DiagramDefinition } from './diagram-api/types.js';
+import { D } from 'vitest/dist/types-198fd1d9.js';
 
 export type ParseErrorFunction = (err: string | DetailedError | unknown, hash?: any) => void;
 
@@ -16,10 +18,11 @@ export type ParseErrorFunction = (err: string | DetailedError | unknown, hash?:
  */
 export class Diagram {
   type = 'graph';
-  parser;
-  renderer;
-  db;
-  private init?: (config: MermaidConfig) => void;
+  parser: DiagramDefinition['parser'];
+  renderer: DiagramDefinition['renderer'];
+  db: DiagramDefinition['db'];
+  private init?: DiagramDefinition['init'];
+
   private detectError?: UnknownDiagramError;
   constructor(public text: string) {
     this.text += '\n';
@@ -62,7 +65,6 @@ export class Diagram {
     if (this.init) {
       const config = configApi.getConfig();
       this.init(config);
-      log.info('Initialized diagram ' + this.type, config);
     }
     this.parser.parse(this.text);
   }
diff --git a/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js b/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js
index 1b4c62e66..0b84fbe35 100644
--- a/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js
+++ b/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js
@@ -172,8 +172,6 @@ describe('more than one sequence diagram', () => {
 
 describe('when parsing a sequenceDiagram', function () {
   beforeEach(function () {
-    // diagram.db = sequenceDb;
-    //
     diagram = new Diagram(`
 sequenceDiagram
 Alice->Bob:Hello Bob, how are you?
@@ -2048,7 +2046,6 @@ describe('when rendering a sequenceDiagram with directives', () => {
 
   beforeEach(function () {
     mermaidAPI.reset();
-    // diagram.db = sequenceDb;
     diagram.renderer.bounds.init();
   });
 

From 4471001ef28159c3b05c81cd6f16054912de9cbb Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Tue, 8 Aug 2023 00:24:38 +0530
Subject: [PATCH 254/281] chore: remove comment

Co-authored-by: Alois Klink <alois@aloisklink.com>
---
 docs/config/setup/modules/mermaidAPI.md | 20 ++++++++++----------
 packages/mermaid/src/mermaidAPI.ts      |  1 -
 2 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/docs/config/setup/modules/mermaidAPI.md b/docs/config/setup/modules/mermaidAPI.md
index 72f18cace..6c8caf1ed 100644
--- a/docs/config/setup/modules/mermaidAPI.md
+++ b/docs/config/setup/modules/mermaidAPI.md
@@ -96,7 +96,7 @@ mermaid.initialize(config);
 
 #### Defined in
 
-[mermaidAPI.ts:667](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L667)
+[mermaidAPI.ts:666](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L666)
 
 ## Functions
 
@@ -127,7 +127,7 @@ Return the last node appended
 
 #### Defined in
 
-[mermaidAPI.ts:308](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L308)
+[mermaidAPI.ts:307](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L307)
 
 ---
 
@@ -153,7 +153,7 @@ the cleaned up svgCode
 
 #### Defined in
 
-[mermaidAPI.ts:256](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L256)
+[mermaidAPI.ts:255](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L255)
 
 ---
 
@@ -179,7 +179,7 @@ the string with all the user styles
 
 #### Defined in
 
-[mermaidAPI.ts:185](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L185)
+[mermaidAPI.ts:184](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L184)
 
 ---
 
@@ -202,7 +202,7 @@ the string with all the user styles
 
 #### Defined in
 
-[mermaidAPI.ts:233](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L233)
+[mermaidAPI.ts:232](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L232)
 
 ---
 
@@ -229,7 +229,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
 
 #### Defined in
 
-[mermaidAPI.ts:169](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L169)
+[mermaidAPI.ts:168](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L168)
 
 ---
 
@@ -249,7 +249,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
 
 #### Defined in
 
-[mermaidAPI.ts:155](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L155)
+[mermaidAPI.ts:154](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L154)
 
 ---
 
@@ -269,7 +269,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
 
 #### Defined in
 
-[mermaidAPI.ts:126](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L126)
+[mermaidAPI.ts:125](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L125)
 
 ---
 
@@ -295,7 +295,7 @@ Put the svgCode into an iFrame. Return the iFrame code
 
 #### Defined in
 
-[mermaidAPI.ts:287](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L287)
+[mermaidAPI.ts:286](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L286)
 
 ---
 
@@ -320,4 +320,4 @@ Remove any existing elements from the given document
 
 #### Defined in
 
-[mermaidAPI.ts:358](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L358)
+[mermaidAPI.ts:357](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L357)
diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts
index 5cbf0287e..807054e8a 100644
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -109,7 +109,6 @@ async function parse(text: string, parseOptions?: ParseOptions): Promise<boolean
   addDiagrams();
   try {
     await getDiagramFromText(text);
-    // diagram.parse();
   } catch (error) {
     if (parseOptions?.suppressErrors) {
       return false;

From 776b219c03d058313c7947f9adb788190d5e42e7 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Tue, 8 Aug 2023 00:31:17 +0530
Subject: [PATCH 255/281] chore: Minor cleanups

---
 packages/mermaid/src/Diagram.ts                | 7 +------
 packages/mermaid/src/diagram-api/diagramAPI.ts | 6 +++---
 2 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/packages/mermaid/src/Diagram.ts b/packages/mermaid/src/Diagram.ts
index 4da0a3a66..13fd3232b 100644
--- a/packages/mermaid/src/Diagram.ts
+++ b/packages/mermaid/src/Diagram.ts
@@ -6,9 +6,7 @@ import { extractFrontMatter } from './diagram-api/frontmatter.js';
 import { UnknownDiagramError } from './errors.js';
 import { cleanupComments } from './diagram-api/comments.js';
 import type { DetailedError } from './utils.js';
-import type { MermaidConfig } from './config.type.js';
 import type { DiagramDefinition } from './diagram-api/types.js';
-import { D } from 'vitest/dist/types-198fd1d9.js';
 
 export type ParseErrorFunction = (err: string | DetailedError | unknown, hash?: any) => void;
 
@@ -62,10 +60,7 @@ export class Diagram {
       throw this.detectError;
     }
     this.db.clear?.();
-    if (this.init) {
-      const config = configApi.getConfig();
-      this.init(config);
-    }
+    this.init?.(configApi.getConfig());
     this.parser.parse(this.text);
   }
 
diff --git a/packages/mermaid/src/diagram-api/diagramAPI.ts b/packages/mermaid/src/diagram-api/diagramAPI.ts
index 7e89d9cd7..3edd982bb 100644
--- a/packages/mermaid/src/diagram-api/diagramAPI.ts
+++ b/packages/mermaid/src/diagram-api/diagramAPI.ts
@@ -69,11 +69,11 @@ export const getDiagram = (name: string): DiagramDefinition => {
   if (name in diagrams) {
     return diagrams[name];
   }
-  throw new Error(`Diagram ${name} not found.`);
+  throw new DiagramNotFoundError(name);
 };
 
 export class DiagramNotFoundError extends Error {
-  constructor(message: string) {
-    super(`Diagram ${message} not found.`);
+  constructor(name: string) {
+    super(`Diagram ${name} not found.`);
   }
 }

From bae9a7c1b87aff6f2eef9720298267250b18ba37 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Tue, 8 Aug 2023 11:13:45 +0530
Subject: [PATCH 256/281] docs: Correct detectType filename

---
 docs/community/newDiagram.md                      | 4 ++--
 packages/mermaid/src/docs/community/newDiagram.md | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/community/newDiagram.md b/docs/community/newDiagram.md
index ba52999f4..5dd616e66 100644
--- a/docs/community/newDiagram.md
+++ b/docs/community/newDiagram.md
@@ -10,7 +10,7 @@
 
 #### Grammar
 
-This would be to define a jison grammar for the new diagram type. That should start with a way to identify that the text in the mermaid tag is a diagram of that type. Create a new folder under diagrams for your new diagram type and a parser folder in it. This leads us to step 2.
+This would be to define a JISON grammar for the new diagram type. That should start with a way to identify that the text in the mermaid tag is a diagram of that type. Create a new folder under diagrams for your new diagram type and a parser folder in it. This leads us to step 2.
 
 For instance:
 
@@ -60,7 +60,7 @@ 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 diagram to type to the detectType in utils.js. The detection should return a key for the new diagram type.
+The second thing to do is to add the capability to detect the new diagram to type to the detectType in `diagram-api/detectType.ts`. 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.
diff --git a/packages/mermaid/src/docs/community/newDiagram.md b/packages/mermaid/src/docs/community/newDiagram.md
index 3393396ee..7fb47dd30 100644
--- a/packages/mermaid/src/docs/community/newDiagram.md
+++ b/packages/mermaid/src/docs/community/newDiagram.md
@@ -4,7 +4,7 @@
 
 #### Grammar
 
-This would be to define a jison grammar for the new diagram type. That should start with a way to identify that the text in the mermaid tag is a diagram of that type. Create a new folder under diagrams for your new diagram type and a parser folder in it. This leads us to step 2.
+This would be to define a JISON grammar for the new diagram type. That should start with a way to identify that the text in the mermaid tag is a diagram of that type. Create a new folder under diagrams for your new diagram type and a parser folder in it. This leads us to step 2.
 
 For instance:
 
@@ -55,7 +55,7 @@ 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 diagram to type to the detectType in utils.js. The detection should return a key for the new diagram type.
+The second thing to do is to add the capability to detect the new diagram to type to the detectType in `diagram-api/detectType.ts`. 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.

From 776035553a661769055e2e5b4d3292e0a688a3ee Mon Sep 17 00:00:00 2001
From: Zaid Soomro <soomrozaid@gmail.com>
Date: Wed, 9 Aug 2023 01:04:04 -0600
Subject: [PATCH 257/281] Syntax Update CONTRIBUTING.md

---
 CONTRIBUTING.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index e8ac09325..307bd038b 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -64,7 +64,7 @@ eg: `feature/2945_state-diagram-new-arrow-florbs`, `bug/1123_fix_random_ugly_red
 
 Documentation is necessary for all non bugfix/refactoring changes.
 
-Only make changes to files are in [`/packages/mermaid/src/docs`](packages/mermaid/src/docs)
+Only make changes to files that are in [`/packages/mermaid/src/docs`](packages/mermaid/src/docs)
 
 **_DO NOT CHANGE FILES IN `/docs`_**
 

From 06e4a6398c9a987a774fe65863016dbacd5f1a30 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Wed, 9 Aug 2023 13:21:24 +0530
Subject: [PATCH 258/281] docs: Add development example page.

---
 .gitignore                                    |  3 ++
 CONTRIBUTING.md                               |  7 +++-
 demos/dev/example.html                        | 34 +++++++++++++++++++
 docs/community/development.md                 | 16 ++++++++-
 packages/mermaid/package.json                 |  1 +
 .../mermaid/src/docs/community/development.md | 16 ++++++++-
 6 files changed, 74 insertions(+), 3 deletions(-)
 create mode 100644 demos/dev/example.html

diff --git a/.gitignore b/.gitignore
index 009c6dfac..6a1cc85e5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -43,3 +43,6 @@ stats/
 **/contributor-names.json
 .pnpm-store
 .nyc_output
+
+demos/dev/**
+!/demos/dev/example.html
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index e8ac09325..ee27e3837 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -26,9 +26,14 @@ Install required packages:
 ```bash
 # npx is required for first install as volta support for pnpm is not added yet.
 npx pnpm install
-pnpm test
+pnpm test # run unit tests
+pnpm dev # starts a dev server
 ```
 
+Open <http://localhost:9000> in your browser after starting the dev server.
+You can also duplicate the `example.html` file in `demos/dev`, rename it and add your own mermaid code to it.
+That will be served at <http://localhost:9000/dev/your-file-name.html>.
+
 ### Docker
 
 If you are using docker and docker-compose, you have self-documented `run` bash script, which is a convenient alias for docker-compose commands:
diff --git a/demos/dev/example.html b/demos/dev/example.html
new file mode 100644
index 000000000..482343014
--- /dev/null
+++ b/demos/dev/example.html
@@ -0,0 +1,34 @@
+<!--Do not edit this file-->
+<!--Duplicate this file to any name you like, run `pnpm dev`, open http://localhost:9000/dev/name.html to view-->
+<html>
+  <head>
+    <title>Mermaid development page</title>
+  </head>
+  <body>
+    <pre id="diagram" class="mermaid">
+graph TB
+      a --> b
+      a --> c
+      b --> d
+      c --> d
+    </pre>
+
+    <div id="dynamicDiagram"></div>
+
+    <script type="module">
+      import mermaid from '/mermaid.esm.mjs';
+      mermaid.parseError = function (err, hash) {
+        console.error('Mermaid error: ', err);
+      };
+      mermaid.initialize({
+        startOnLoad: true,
+        logLevel: 0,
+      });
+      const value = `graph TD\nHello --> World`;
+      const el = document.getElementById('dynamicDiagram');
+      const { svg } = await mermaid.render('dd', value);
+      console.log(svg);
+      el.innerHTML = svg;
+    </script>
+  </body>
+</html>
diff --git a/docs/community/development.md b/docs/community/development.md
index 0634759f5..15461e728 100644
--- a/docs/community/development.md
+++ b/docs/community/development.md
@@ -70,7 +70,21 @@ pnpm test
 
 The `test` script and others are in the top-level `package.json` file.
 
-All tests should run successfully without any errors or failures. (You might see _lint_ or _formatting_ warnings; those are ok during this step.)
+All tests should run successfully without any errors or failures. (You might see _lint_ or _formatting_ "warnings"; those are ok during this step.)
+
+#### 4. Make your changes
+
+Now you are ready to make your changes!
+Edit whichever files in `src` as required.
+
+#### 4. See your changes
+
+Open <http://localhost:9000> in your browser, after starting the dev server.
+There is a list of demos that can be used to see and test your changes.
+
+If you need a specific diagram, you can duplicate the `example.html` file in `/demos/dev` and add your own mermaid code to your copy.
+That will be served at <http://localhost:9000/dev/your-file-name.html>.
+After making code changes, the dev server will rebuild the mermaid library. You will need to reload the browser page yourself to see the changes. (PRs for auto reload are welcome!)
 
 ### Docker
 
diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index 51c0b018c..286c7ad35 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -24,6 +24,7 @@
   ],
   "scripts": {
     "clean": "rimraf dist",
+    "dev": "pnpm -w dev",
     "docs:code": "typedoc src/defaultConfig.ts src/config.ts src/mermaidAPI.ts && prettier --write ./src/docs/config/setup",
     "docs:build": "rimraf ../../docs && pnpm docs:spellcheck && pnpm docs:code && ts-node-esm scripts/docs.cli.mts",
     "docs:verify": "pnpm docs:spellcheck && pnpm docs:code && ts-node-esm scripts/docs.cli.mts --verify",
diff --git a/packages/mermaid/src/docs/community/development.md b/packages/mermaid/src/docs/community/development.md
index 93146f0c3..bc274b448 100644
--- a/packages/mermaid/src/docs/community/development.md
+++ b/packages/mermaid/src/docs/community/development.md
@@ -64,7 +64,21 @@ pnpm test
 
 The `test` script and others are in the top-level `package.json` file.
 
-All tests should run successfully without any errors or failures. (You might see _lint_ or _formatting_ warnings; those are ok during this step.)
+All tests should run successfully without any errors or failures. (You might see _lint_ or _formatting_ "warnings"; those are ok during this step.)
+
+#### 4. Make your changes
+
+Now you are ready to make your changes!
+Edit whichever files in `src` as required.
+
+#### 4. See your changes
+
+Open <http://localhost:9000> in your browser, after starting the dev server.
+There is a list of demos that can be used to see and test your changes.
+
+If you need a specific diagram, you can duplicate the `example.html` file in `/demos/dev` and add your own mermaid code to your copy.
+That will be served at <http://localhost:9000/dev/your-file-name.html>.
+After making code changes, the dev server will rebuild the mermaid library. You will need to reload the browser page yourself to see the changes. (PRs for auto reload are welcome!)
 
 ### Docker
 

From e128a11f3bf74e8a6a41ea516a04e50339a667de Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Wed, 9 Aug 2023 17:44:24 +0530
Subject: [PATCH 259/281] Update docs/community/development.md

---
 docs/community/development.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/community/development.md b/docs/community/development.md
index 15461e728..f8c8b0638 100644
--- a/docs/community/development.md
+++ b/docs/community/development.md
@@ -77,7 +77,7 @@ All tests should run successfully without any errors or failures. (You might see
 Now you are ready to make your changes!
 Edit whichever files in `src` as required.
 
-#### 4. See your changes
+#### 5. See your changes
 
 Open <http://localhost:9000> in your browser, after starting the dev server.
 There is a list of demos that can be used to see and test your changes.

From fee6f459a84cb43c221ac2e2d43b6bfc7d808811 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Wed, 9 Aug 2023 17:44:49 +0530
Subject: [PATCH 260/281] Update
 packages/mermaid/src/docs/community/development.md

---
 packages/mermaid/src/docs/community/development.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mermaid/src/docs/community/development.md b/packages/mermaid/src/docs/community/development.md
index bc274b448..35a01e589 100644
--- a/packages/mermaid/src/docs/community/development.md
+++ b/packages/mermaid/src/docs/community/development.md
@@ -71,7 +71,7 @@ All tests should run successfully without any errors or failures. (You might see
 Now you are ready to make your changes!
 Edit whichever files in `src` as required.
 
-#### 4. See your changes
+#### 5. See your changes
 
 Open <http://localhost:9000> in your browser, after starting the dev server.
 There is a list of demos that can be used to see and test your changes.

From 6c1afb7a8d4da0c6c608bca1684a4c789a1a95c3 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Wed, 9 Aug 2023 18:59:55 +0530
Subject: [PATCH 261/281] chore: Ignore localhost

---
 .lycheeignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.lycheeignore b/.lycheeignore
index d22d3cb15..577a78d46 100644
--- a/.lycheeignore
+++ b/.lycheeignore
@@ -12,6 +12,7 @@ packages/mermaid/src/docs/config/setup/*
 
 # Ignore localhost
 http://localhost:3333/
+http://localhost:9000/
 
 # Ignore slack invite
 https://join.slack.com/

From 7742a6c485e1ceedd8dbe5de02d92d5df474e821 Mon Sep 17 00:00:00 2001
From: Alois Klink <alois@aloisklink.com>
Date: Wed, 9 Aug 2023 19:15:09 +0100
Subject: [PATCH 262/281] build(types): use prettier conf on config.types.ts

Currently, the `packages/mermaid/src/config.type.ts` types file
(auto-generated via `pnpm run --filter mermaid types:build-config`)
uses the default prettier config.

Instead, we should use the prettier config in the Mermaid repo, as it's
slightly different from the default prettier config.
---
 packages/mermaid/scripts/create-types-from-json-schema.mts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/mermaid/scripts/create-types-from-json-schema.mts b/packages/mermaid/scripts/create-types-from-json-schema.mts
index e81ea70ff..836aaa448 100644
--- a/packages/mermaid/scripts/create-types-from-json-schema.mts
+++ b/packages/mermaid/scripts/create-types-from-json-schema.mts
@@ -18,6 +18,7 @@ import { promisify } from 'node:util';
 
 import { load, JSON_SCHEMA } from 'js-yaml';
 import { compile, type JSONSchema } from 'json-schema-to-typescript';
+import prettier from 'prettier';
 
 import _Ajv2019, { type JSONSchemaType } from 'ajv/dist/2019.js';
 
@@ -207,6 +208,7 @@ async function generateTypescript(mermaidConfigSchema: JSONSchemaType<MermaidCon
     {
       additionalProperties: false, // in JSON Schema 2019-09, these are called `unevaluatedProperties`
       unreachableDefinitions: true, // definition for FontConfig is unreachable
+      style: (await prettier.resolveConfig('.')) ?? {},
     }
   );
 

From 0b9f6d1ff9cf2226e948e9371c11b15c6b09e3e6 Mon Sep 17 00:00:00 2001
From: Alois Klink <alois@aloisklink.com>
Date: Wed, 9 Aug 2023 19:22:30 +0100
Subject: [PATCH 263/281] style: format packages/mermaid/src/config.type.ts

Run `pnpm run --filter mermaid types:build-config` to format
the `packages/mermaid/src/config.type.ts` file with the new prettier
config.
---
 packages/mermaid/src/config.type.ts | 50 ++++++++++++++---------------
 1 file changed, 25 insertions(+), 25 deletions(-)

diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts
index df87e9c40..c378660ca 100644
--- a/packages/mermaid/src/config.type.ts
+++ b/packages/mermaid/src/config.type.ts
@@ -8,7 +8,7 @@
 /**
  * Configuration options to pass to the `dompurify` library.
  */
-export type DOMPurifyConfiguration = import("dompurify").Config;
+export type DOMPurifyConfiguration = import('dompurify').Config;
 /**
  * JavaScript function that returns a `FontConfig`.
  *
@@ -39,7 +39,7 @@ export type FontCalculator = () => Partial<FontConfig>;
  * This interface was referenced by `MermaidConfig`'s JSON-Schema
  * via the `definition` "SankeyLinkColor".
  */
-export type SankeyLinkColor = "source" | "target" | "gradient";
+export type SankeyLinkColor = 'source' | 'target' | 'gradient';
 /**
  * Controls the alignment of the Sankey diagrams.
  *
@@ -49,7 +49,7 @@ export type SankeyLinkColor = "source" | "target" | "gradient";
  * This interface was referenced by `MermaidConfig`'s JSON-Schema
  * via the `definition` "SankeyNodeAlignment".
  */
-export type SankeyNodeAlignment = "left" | "right" | "center" | "justify";
+export type SankeyNodeAlignment = 'left' | 'right' | 'center' | 'justify';
 /**
  * The font size to use
  */
@@ -61,7 +61,7 @@ export interface MermaidConfig {
    * You may also use `themeCSS` to override this value.
    *
    */
-  theme?: string | "default" | "forest" | "dark" | "neutral" | "null";
+  theme?: string | 'default' | 'forest' | 'dark' | 'neutral' | 'null';
   themeVariables?: any;
   themeCSS?: string;
   /**
@@ -88,12 +88,12 @@ export interface MermaidConfig {
     | 0
     | 2
     | 1
-    | "trace"
-    | "debug"
-    | "info"
-    | "warn"
-    | "error"
-    | "fatal"
+    | 'trace'
+    | 'debug'
+    | 'info'
+    | 'warn'
+    | 'error'
+    | 'fatal'
     | 3
     | 4
     | 5
@@ -101,7 +101,7 @@ export interface MermaidConfig {
   /**
    * Level of trust for parsed diagram
    */
-  securityLevel?: string | "strict" | "loose" | "antiscript" | "sandbox" | undefined;
+  securityLevel?: string | 'strict' | 'loose' | 'antiscript' | 'sandbox' | undefined;
   /**
    * Dictates whether mermaid starts on Page load
    */
@@ -689,11 +689,11 @@ export interface QuadrantChartConfig extends BaseDiagramConfig {
   /**
    * position of x-axis labels
    */
-  xAxisPosition?: "top" | "bottom";
+  xAxisPosition?: 'top' | 'bottom';
   /**
    * position of y-axis labels
    */
-  yAxisPosition?: "left" | "right";
+  yAxisPosition?: 'left' | 'right';
   /**
    * stroke width of edges of the box that are inside the quadrant
    */
@@ -723,7 +723,7 @@ export interface ErDiagramConfig extends BaseDiagramConfig {
   /**
    * Directional bias for layout of entities
    */
-  layoutDirection?: string | "TB" | "BT" | "LR" | "RL";
+  layoutDirection?: string | 'TB' | 'BT' | 'LR' | 'RL';
   /**
    * The minimum width of an entity box. Expressed in pixels.
    */
@@ -788,7 +788,7 @@ export interface StateDiagramConfig extends BaseDiagramConfig {
    * Decides which rendering engine that is to be used for the rendering.
    *
    */
-  defaultRenderer?: string | "dagre-d3" | "dagre-wrapper" | "elk";
+  defaultRenderer?: string | 'dagre-d3' | 'dagre-wrapper' | 'elk';
 }
 /**
  * This interface was referenced by `MermaidConfig`'s JSON-Schema
@@ -812,7 +812,7 @@ export interface ClassDiagramConfig extends BaseDiagramConfig {
    * Decides which rendering engine that is to be used for the rendering.
    *
    */
-  defaultRenderer?: string | "dagre-d3" | "dagre-wrapper" | "elk";
+  defaultRenderer?: string | 'dagre-d3' | 'dagre-wrapper' | 'elk';
   nodeSpacing?: number;
   rankSpacing?: number;
   /**
@@ -872,7 +872,7 @@ export interface JourneyDiagramConfig extends BaseDiagramConfig {
   /**
    * Multiline message alignment
    */
-  messageAlign?: string | "left" | "center" | "right";
+  messageAlign?: string | 'left' | 'center' | 'right';
   /**
    * Prolongs the edge of the diagram downwards.
    *
@@ -951,7 +951,7 @@ export interface TimelineDiagramConfig extends BaseDiagramConfig {
   /**
    * Multiline message alignment
    */
-  messageAlign?: string | "left" | "center" | "right";
+  messageAlign?: string | 'left' | 'center' | 'right';
   /**
    * Prolongs the edge of the diagram downwards.
    *
@@ -1062,12 +1062,12 @@ export interface GanttDiagramConfig extends BaseDiagramConfig {
    * Controls the display mode.
    *
    */
-  displayMode?: string | "compact";
+  displayMode?: string | 'compact';
   /**
    * On which day a week-based interval should start
    *
    */
-  weekday?: "monday" | "tuesday" | "wednesday" | "thursday" | "friday" | "saturday" | "sunday";
+  weekday?: 'monday' | 'tuesday' | 'wednesday' | 'thursday' | 'friday' | 'saturday' | 'sunday';
 }
 /**
  * The object containing configurations specific for sequence diagrams
@@ -1121,7 +1121,7 @@ export interface SequenceDiagramConfig extends BaseDiagramConfig {
   /**
    * Multiline message alignment
    */
-  messageAlign?: string | "left" | "center" | "right";
+  messageAlign?: string | 'left' | 'center' | 'right';
   /**
    * Mirror actors under diagram
    *
@@ -1178,7 +1178,7 @@ export interface SequenceDiagramConfig extends BaseDiagramConfig {
   /**
    * This sets the text alignment of actor-attached notes
    */
-  noteAlign?: string | "left" | "center" | "right";
+  noteAlign?: string | 'left' | 'center' | 'right';
   /**
    * This sets the font size of actor messages
    */
@@ -1254,7 +1254,7 @@ export interface FlowchartDiagramConfig extends BaseDiagramConfig {
    * Defines how mermaid renders curves for flowcharts.
    *
    */
-  curve?: string | "basis" | "linear" | "cardinal";
+  curve?: string | 'basis' | 'linear' | 'cardinal';
   /**
    * Represents the padding between the labels and the shape
    *
@@ -1266,7 +1266,7 @@ export interface FlowchartDiagramConfig extends BaseDiagramConfig {
    * Decides which rendering engine that is to be used for the rendering.
    *
    */
-  defaultRenderer?: string | "dagre-d3" | "dagre-wrapper" | "elk";
+  defaultRenderer?: string | 'dagre-d3' | 'dagre-wrapper' | 'elk';
   /**
    * Width of nodes where text is wrapped.
    *
@@ -1296,7 +1296,7 @@ export interface SankeyDiagramConfig extends BaseDiagramConfig {
    * See <https://github.com/d3/d3-sankey#alignments>.
    *
    */
-  nodeAlignment?: "left" | "right" | "center" | "justify";
+  nodeAlignment?: 'left' | 'right' | 'center' | 'justify';
   useMaxWidth?: boolean;
 }
 /**

From c55a0947be90ed966175a4d35428bf5b6ed515ba Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Thu, 10 Aug 2023 13:14:39 +0200
Subject: [PATCH 264/281] #2139 Applying user defined classes properly when
 calculating shape width

---
 cypress/platform/knsv2.html                   |  21 ++--
 packages/mermaid/src/dagre-wrapper/nodes.js   | 102 +++++++++++++++---
 .../mermaid/src/dagre-wrapper/shapes/util.js  |   2 +-
 3 files changed, 103 insertions(+), 22 deletions(-)

diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index 13de19ba0..f9a9f3756 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -58,12 +58,21 @@
   </head>
   <body>
     <pre id="diagram" class="mermaid">
----
-title: Simple flowchart with invisible edges
----
-flowchart TD
-A ~~~ B
-  </pre
+      flowchart
+        classDef mainCategories fill:#f9d5e5, stroke:#233d4d,stroke-width:2px, font-weight:bold;
+        CS(Customer Awareness Journey):::mainCategories
+      </pre
+    >
+    <pre id="diagram" class="mermaid">
+flowchart
+Node1:::class1 --> Node2:::class2
+Node1:::class1 --> Node3:::class2
+Node3 --> Node4((I am a circle)):::larger
+
+classDef class1 fill:lightblue
+classDef class2 fill:pink
+classDef larger font-size:30px,fill:yellow
+      </pre
     >
     <pre id="diagram" class="mermaid2">
 stateDiagram-v2
diff --git a/packages/mermaid/src/dagre-wrapper/nodes.js b/packages/mermaid/src/dagre-wrapper/nodes.js
index 6c6733358..e7988c8b5 100644
--- a/packages/mermaid/src/dagre-wrapper/nodes.js
+++ b/packages/mermaid/src/dagre-wrapper/nodes.js
@@ -8,8 +8,25 @@ import note from './shapes/note.js';
 import { parseMember } from '../diagrams/class/svgDraw.js';
 import { evaluate } from '../diagrams/common/common.js';
 
+const formatClass = (str) => {
+  if (str) {
+    return ' ' + str;
+  }
+  return '';
+};
+const getClassesFromNode = (node, otherClasses) => {
+  return `${otherClasses ? otherClasses : 'node default'}${formatClass(node.classes)} ${formatClass(
+    node.class
+  )}`;
+};
+
 const question = async (parent, node) => {
-  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
+  const { shapeSvg, bbox } = await labelHelper(
+    parent,
+    node,
+    getClassesFromNode(node, undefined),
+    true
+  );
 
   const w = bbox.width + node.padding;
   const h = bbox.height + node.padding;
@@ -70,7 +87,12 @@ const choice = (parent, node) => {
 };
 
 const hexagon = async (parent, node) => {
-  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
+  const { shapeSvg, bbox } = await labelHelper(
+    parent,
+    node,
+    getClassesFromNode(node, undefined),
+    true
+  );
 
   const f = 4;
   const h = bbox.height + node.padding;
@@ -97,7 +119,12 @@ const hexagon = async (parent, node) => {
 };
 
 const rect_left_inv_arrow = async (parent, node) => {
-  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
+  const { shapeSvg, bbox } = await labelHelper(
+    parent,
+    node,
+    getClassesFromNode(node, undefined),
+    true
+  );
 
   const w = bbox.width + node.padding;
   const h = bbox.height + node.padding;
@@ -123,7 +150,7 @@ const rect_left_inv_arrow = async (parent, node) => {
 };
 
 const lean_right = async (parent, node) => {
-  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
+  const { shapeSvg, bbox } = await labelHelper(parent, node, getClassesFromNode(node), true);
 
   const w = bbox.width + node.padding;
   const h = bbox.height + node.padding;
@@ -146,7 +173,12 @@ const lean_right = async (parent, node) => {
 };
 
 const lean_left = async (parent, node) => {
-  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
+  const { shapeSvg, bbox } = await labelHelper(
+    parent,
+    node,
+    getClassesFromNode(node, undefined),
+    true
+  );
 
   const w = bbox.width + node.padding;
   const h = bbox.height + node.padding;
@@ -169,7 +201,12 @@ const lean_left = async (parent, node) => {
 };
 
 const trapezoid = async (parent, node) => {
-  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
+  const { shapeSvg, bbox } = await labelHelper(
+    parent,
+    node,
+    getClassesFromNode(node, undefined),
+    true
+  );
 
   const w = bbox.width + node.padding;
   const h = bbox.height + node.padding;
@@ -192,7 +229,12 @@ const trapezoid = async (parent, node) => {
 };
 
 const inv_trapezoid = async (parent, node) => {
-  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
+  const { shapeSvg, bbox } = await labelHelper(
+    parent,
+    node,
+    getClassesFromNode(node, undefined),
+    true
+  );
 
   const w = bbox.width + node.padding;
   const h = bbox.height + node.padding;
@@ -215,7 +257,12 @@ const inv_trapezoid = async (parent, node) => {
 };
 
 const rect_right_inv_arrow = async (parent, node) => {
-  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
+  const { shapeSvg, bbox } = await labelHelper(
+    parent,
+    node,
+    getClassesFromNode(node, undefined),
+    true
+  );
 
   const w = bbox.width + node.padding;
   const h = bbox.height + node.padding;
@@ -239,7 +286,12 @@ const rect_right_inv_arrow = async (parent, node) => {
 };
 
 const cylinder = async (parent, node) => {
-  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
+  const { shapeSvg, bbox } = await labelHelper(
+    parent,
+    node,
+    getClassesFromNode(node, undefined),
+    true
+  );
 
   const w = bbox.width + node.padding;
   const rx = w / 2;
@@ -314,7 +366,7 @@ const rect = async (parent, node) => {
   const { shapeSvg, bbox, halfPadding } = await labelHelper(
     parent,
     node,
-    'node ' + node.classes,
+    'node ' + node.classes + ' ' + node.class,
     true
   );
 
@@ -360,7 +412,7 @@ const rect = async (parent, node) => {
 const labelRect = async (parent, node) => {
   const { shapeSvg } = await labelHelper(parent, node, 'label', true);
 
-  log.trace('Classes = ', node.classes);
+  log.trace('Classes = ', node.class);
   // add the rect
   const rect = shapeSvg.insert('rect', ':first-child');
 
@@ -545,7 +597,12 @@ const rectWithTitle = (parent, node) => {
 };
 
 const stadium = async (parent, node) => {
-  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
+  const { shapeSvg, bbox } = await labelHelper(
+    parent,
+    node,
+    getClassesFromNode(node, undefined),
+    true
+  );
 
   const h = bbox.height + node.padding;
   const w = bbox.width + h / 4 + node.padding;
@@ -571,7 +628,12 @@ const stadium = async (parent, node) => {
 };
 
 const circle = async (parent, node) => {
-  const { shapeSvg, bbox, halfPadding } = await labelHelper(parent, node, undefined, true);
+  const { shapeSvg, bbox, halfPadding } = await labelHelper(
+    parent,
+    node,
+    getClassesFromNode(node, undefined),
+    true
+  );
   const circle = shapeSvg.insert('circle', ':first-child');
 
   // center the circle around its coordinate
@@ -596,7 +658,12 @@ const circle = async (parent, node) => {
 };
 
 const doublecircle = async (parent, node) => {
-  const { shapeSvg, bbox, halfPadding } = await labelHelper(parent, node, undefined, true);
+  const { shapeSvg, bbox, halfPadding } = await labelHelper(
+    parent,
+    node,
+    getClassesFromNode(node, undefined),
+    true
+  );
   const gap = 5;
   const circleGroup = shapeSvg.insert('g', ':first-child');
   const outerCircle = circleGroup.insert('circle');
@@ -634,7 +701,12 @@ const doublecircle = async (parent, node) => {
 };
 
 const subroutine = async (parent, node) => {
-  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
+  const { shapeSvg, bbox } = await labelHelper(
+    parent,
+    node,
+    getClassesFromNode(node, undefined),
+    true
+  );
 
   const w = bbox.width + node.padding;
   const h = bbox.height + node.padding;
diff --git a/packages/mermaid/src/dagre-wrapper/shapes/util.js b/packages/mermaid/src/dagre-wrapper/shapes/util.js
index 3eaedb4b9..95b82ddc0 100644
--- a/packages/mermaid/src/dagre-wrapper/shapes/util.js
+++ b/packages/mermaid/src/dagre-wrapper/shapes/util.js
@@ -13,6 +13,7 @@ export const labelHelper = async (parent, node, _classes, isNode) => {
   } else {
     classes = _classes;
   }
+
   // Add outer g element
   const shapeSvg = parent
     .insert('g')
@@ -49,7 +50,6 @@ export const labelHelper = async (parent, node, _classes, isNode) => {
       )
     );
   }
-
   // Get the size of the label
   let bbox = text.getBBox();
   const halfPadding = node.padding / 2;

From 46de343785775928d308ee8a1176f985068622ad Mon Sep 17 00:00:00 2001
From: Reda Al Sulais <u.yokozuna@gmail.com>
Date: Thu, 10 Aug 2023 22:00:24 +0300
Subject: [PATCH 265/281] standardized `error` diagram'

* remove empty `styles.js`
* use named imports/exports instead of default
* remove unnecessary data in diagram definition
---
 .../src/diagram-api/diagram-orchestration.ts  |   2 +-
 .../src/diagrams/error/errorDiagram.ts        |  22 +--
 .../src/diagrams/error/errorRenderer.ts       | 143 ++++++++----------
 packages/mermaid/src/diagrams/error/styles.js |   3 -
 packages/mermaid/src/mermaidAPI.ts            |   2 +-
 packages/mermaid/src/styles.spec.ts           |   2 -
 6 files changed, 69 insertions(+), 105 deletions(-)
 delete mode 100644 packages/mermaid/src/diagrams/error/styles.js

diff --git a/packages/mermaid/src/diagram-api/diagram-orchestration.ts b/packages/mermaid/src/diagram-api/diagram-orchestration.ts
index 9c03e27f3..8bec8b700 100644
--- a/packages/mermaid/src/diagram-api/diagram-orchestration.ts
+++ b/packages/mermaid/src/diagram-api/diagram-orchestration.ts
@@ -14,7 +14,7 @@ import classDiagramV2 from '../diagrams/class/classDetector-V2.js';
 import state from '../diagrams/state/stateDetector.js';
 import stateV2 from '../diagrams/state/stateDetector-V2.js';
 import journey from '../diagrams/user-journey/journeyDetector.js';
-import errorDiagram from '../diagrams/error/errorDiagram.js';
+import { diagram as errorDiagram } from '../diagrams/error/errorDiagram.js';
 import flowchartElk from '../diagrams/flowchart/elk/detector.js';
 import timeline from '../diagrams/timeline/detector.js';
 import mindmap from '../diagrams/mindmap/detector.js';
diff --git a/packages/mermaid/src/diagrams/error/errorDiagram.ts b/packages/mermaid/src/diagrams/error/errorDiagram.ts
index 76efdb0ae..8f0fcdf28 100644
--- a/packages/mermaid/src/diagrams/error/errorDiagram.ts
+++ b/packages/mermaid/src/diagrams/error/errorDiagram.ts
@@ -1,23 +1,13 @@
-import { DiagramDefinition } from '../../diagram-api/types.js';
-import styles from './styles.js';
-import renderer from './errorRenderer.js';
+import type { DiagramDefinition } from '../../diagram-api/types.js';
+import { renderer } from './errorRenderer.js';
+
 export const diagram: DiagramDefinition = {
-  db: {
-    clear: () => {
-      // Quite ok, clear needs to be there for error to work as a regular diagram
-    },
-  },
-  styles,
+  db: {},
   renderer,
   parser: {
     parser: { yy: {} },
-    parse: () => {
-      // no op
+    parse: (): void => {
+      return;
     },
   },
-  init: () => {
-    // no op
-  },
 };
-
-export default diagram;
diff --git a/packages/mermaid/src/diagrams/error/errorRenderer.ts b/packages/mermaid/src/diagrams/error/errorRenderer.ts
index aa0e9e816..b7049d4b7 100644
--- a/packages/mermaid/src/diagrams/error/errorRenderer.ts
+++ b/packages/mermaid/src/diagrams/error/errorRenderer.ts
@@ -1,100 +1,79 @@
-/** Created by knut on 14-12-11. */
-// @ts-ignore TODO: Investigate D3 issue
-import { select } from 'd3';
 import { log } from '../../logger.js';
-import { getErrorMessage } from '../../utils.js';
-
-/**
- * Merges the value of `conf` with the passed `cnf`
- *
- * @param cnf - Config to merge
- */
-export const setConf = function () {
-  // no-op
-};
+import type { Group, SVG } from '../../diagram-api/types.js';
+import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
+import { configureSvgSize } from '../../setupGraphViewbox.js';
 
 /**
  * Draws a an info picture in the tag with id: id based on the graph definition in text.
  *
  * @param _text - Mermaid graph definition.
  * @param id - The text for the error
- * @param mermaidVersion - The version
+ * @param version - The version
  */
-export const draw = (_text: string, id: string, mermaidVersion: string) => {
-  try {
-    log.debug('Renering svg for syntax error\n');
+export const draw = (_text: string, id: string, version: string) => {
+  log.debug('renering svg for syntax error\n');
 
-    const svg = select('#' + id);
+  const svg: SVG = selectSvgElement(id);
+  svg.attr('viewBox', '768 0 912 512');
+  configureSvgSize(svg, 100, 500, true);
 
-    const g = svg.append('g');
+  const g: Group = svg.append('g');
+  g.append('path')
+    .attr('class', 'error-icon')
+    .attr(
+      'd',
+      'm411.313,123.313c6.25-6.25 6.25-16.375 0-22.625s-16.375-6.25-22.625,0l-32,32-9.375,9.375-20.688-20.688c-12.484-12.5-32.766-12.5-45.25,0l-16,16c-1.261,1.261-2.304,2.648-3.31,4.051-21.739-8.561-45.324-13.426-70.065-13.426-105.867,0-192,86.133-192,192s86.133,192 192,192 192-86.133 192-192c0-24.741-4.864-48.327-13.426-70.065 1.402-1.007 2.79-2.049 4.051-3.31l16-16c12.5-12.492 12.5-32.758 0-45.25l-20.688-20.688 9.375-9.375 32.001-31.999zm-219.313,100.687c-52.938,0-96,43.063-96,96 0,8.836-7.164,16-16,16s-16-7.164-16-16c0-70.578 57.422-128 128-128 8.836,0 16,7.164 16,16s-7.164,16-16,16z'
+    );
 
-    g.append('path')
-      .attr('class', 'error-icon')
-      .attr(
-        'd',
-        'm411.313,123.313c6.25-6.25 6.25-16.375 0-22.625s-16.375-6.25-22.625,0l-32,32-9.375,9.375-20.688-20.688c-12.484-12.5-32.766-12.5-45.25,0l-16,16c-1.261,1.261-2.304,2.648-3.31,4.051-21.739-8.561-45.324-13.426-70.065-13.426-105.867,0-192,86.133-192,192s86.133,192 192,192 192-86.133 192-192c0-24.741-4.864-48.327-13.426-70.065 1.402-1.007 2.79-2.049 4.051-3.31l16-16c12.5-12.492 12.5-32.758 0-45.25l-20.688-20.688 9.375-9.375 32.001-31.999zm-219.313,100.687c-52.938,0-96,43.063-96,96 0,8.836-7.164,16-16,16s-16-7.164-16-16c0-70.578 57.422-128 128-128 8.836,0 16,7.164 16,16s-7.164,16-16,16z'
-      );
+  g.append('path')
+    .attr('class', 'error-icon')
+    .attr(
+      'd',
+      'm459.02,148.98c-6.25-6.25-16.375-6.25-22.625,0s-6.25,16.375 0,22.625l16,16c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688 6.25-6.25 6.25-16.375 0-22.625l-16.001-16z'
+    );
 
-    g.append('path')
-      .attr('class', 'error-icon')
-      .attr(
-        'd',
-        'm459.02,148.98c-6.25-6.25-16.375-6.25-22.625,0s-6.25,16.375 0,22.625l16,16c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688 6.25-6.25 6.25-16.375 0-22.625l-16.001-16z'
-      );
+  g.append('path')
+    .attr('class', 'error-icon')
+    .attr(
+      'd',
+      'm340.395,75.605c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688 6.25-6.25 6.25-16.375 0-22.625l-16-16c-6.25-6.25-16.375-6.25-22.625,0s-6.25,16.375 0,22.625l15.999,16z'
+    );
 
-    g.append('path')
-      .attr('class', 'error-icon')
-      .attr(
-        'd',
-        'm340.395,75.605c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688 6.25-6.25 6.25-16.375 0-22.625l-16-16c-6.25-6.25-16.375-6.25-22.625,0s-6.25,16.375 0,22.625l15.999,16z'
-      );
+  g.append('path')
+    .attr('class', 'error-icon')
+    .attr(
+      'd',
+      'm400,64c8.844,0 16-7.164 16-16v-32c0-8.836-7.156-16-16-16-8.844,0-16,7.164-16,16v32c0,8.836 7.156,16 16,16z'
+    );
 
-    g.append('path')
-      .attr('class', 'error-icon')
-      .attr(
-        'd',
-        'm400,64c8.844,0 16-7.164 16-16v-32c0-8.836-7.156-16-16-16-8.844,0-16,7.164-16,16v32c0,8.836 7.156,16 16,16z'
-      );
+  g.append('path')
+    .attr('class', 'error-icon')
+    .attr(
+      'd',
+      'm496,96.586h-32c-8.844,0-16,7.164-16,16 0,8.836 7.156,16 16,16h32c8.844,0 16-7.164 16-16 0-8.836-7.156-16-16-16z'
+    );
 
-    g.append('path')
-      .attr('class', 'error-icon')
-      .attr(
-        'd',
-        'm496,96.586h-32c-8.844,0-16,7.164-16,16 0,8.836 7.156,16 16,16h32c8.844,0 16-7.164 16-16 0-8.836-7.156-16-16-16z'
-      );
+  g.append('path')
+    .attr('class', 'error-icon')
+    .attr(
+      'd',
+      'm436.98,75.605c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688l32-32c6.25-6.25 6.25-16.375 0-22.625s-16.375-6.25-22.625,0l-32,32c-6.251,6.25-6.251,16.375-0.001,22.625z'
+    );
 
-    g.append('path')
-      .attr('class', 'error-icon')
-      .attr(
-        'd',
-        'm436.98,75.605c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688l32-32c6.25-6.25 6.25-16.375 0-22.625s-16.375-6.25-22.625,0l-32,32c-6.251,6.25-6.251,16.375-0.001,22.625z'
-      );
-
-    g.append('text') // text label for the x axis
-      .attr('class', 'error-text')
-      .attr('x', 1440)
-      .attr('y', 250)
-      .attr('font-size', '150px')
-      .style('text-anchor', 'middle')
-      .text('Syntax error in text');
-    g.append('text') // text label for the x axis
-      .attr('class', 'error-text')
-      .attr('x', 1250)
-      .attr('y', 400)
-      .attr('font-size', '100px')
-      .style('text-anchor', 'middle')
-      .text('mermaid version ' + mermaidVersion);
-
-    svg.attr('height', 100);
-    svg.attr('width', 500);
-    svg.attr('viewBox', '768 0 912 512');
-  } catch (e) {
-    log.error('Error while rendering info diagram');
-    log.error(getErrorMessage(e));
-  }
+  g.append('text') // text label for the x axis
+    .attr('class', 'error-text')
+    .attr('x', 1440)
+    .attr('y', 250)
+    .attr('font-size', '150px')
+    .style('text-anchor', 'middle')
+    .text('Syntax error in text');
+  g.append('text') // text label for the x axis
+    .attr('class', 'error-text')
+    .attr('x', 1250)
+    .attr('y', 400)
+    .attr('font-size', '100px')
+    .style('text-anchor', 'middle')
+    .text(`mermaid version ${version}`);
 };
 
-export default {
-  setConf,
-  draw,
-};
+export const renderer = { draw };
diff --git a/packages/mermaid/src/diagrams/error/styles.js b/packages/mermaid/src/diagrams/error/styles.js
deleted file mode 100644
index 0b0729813..000000000
--- a/packages/mermaid/src/diagrams/error/styles.js
+++ /dev/null
@@ -1,3 +0,0 @@
-const getStyles = () => ``;
-
-export default getStyles;
diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts
index 70b314daa..e0c280f63 100644
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -18,7 +18,7 @@ import { version } from '../package.json';
 import * as configApi from './config.js';
 import { addDiagrams } from './diagram-api/diagram-orchestration.js';
 import { Diagram, getDiagramFromText } from './Diagram.js';
-import errorRenderer from './diagrams/error/errorRenderer.js';
+import { renderer as errorRenderer } from './diagrams/error/errorRenderer.js';
 import { attachFunctions } from './interactionDb.js';
 import { log, setLogLevel } from './logger.js';
 import getStyles from './styles.js';
diff --git a/packages/mermaid/src/styles.spec.ts b/packages/mermaid/src/styles.spec.ts
index 51951f190..935341641 100644
--- a/packages/mermaid/src/styles.spec.ts
+++ b/packages/mermaid/src/styles.spec.ts
@@ -19,7 +19,6 @@ import classDiagram from './diagrams/class/styles.js';
 import flowchart from './diagrams/flowchart/styles.js';
 import flowchartElk from './diagrams/flowchart/elk/styles.js';
 import er from './diagrams/er/styles.js';
-import error from './diagrams/error/styles.js';
 import git from './diagrams/git/styles.js';
 import gantt from './diagrams/gantt/styles.js';
 import pie from './diagrams/pie/styles.js';
@@ -86,7 +85,6 @@ describe('styles', () => {
         c4,
         classDiagram,
         er,
-        error,
         flowchart,
         flowchartElk,
         gantt,

From d5f11fc80a391969b175b58a02ba80e9c57946d1 Mon Sep 17 00:00:00 2001
From: Reda Al Sulais <u.yokozuna@gmail.com>
Date: Thu, 10 Aug 2023 22:07:31 +0300
Subject: [PATCH 266/281] convert `assignWithDepth` to TS

---
 ...{assignWithDepth.js => assignWithDepth.ts} | 40 ++++++++++---------
 1 file changed, 22 insertions(+), 18 deletions(-)
 rename packages/mermaid/src/{assignWithDepth.js => assignWithDepth.ts} (65%)

diff --git a/packages/mermaid/src/assignWithDepth.js b/packages/mermaid/src/assignWithDepth.ts
similarity index 65%
rename from packages/mermaid/src/assignWithDepth.js
rename to packages/mermaid/src/assignWithDepth.ts
index 6f2e706ab..22d0da192 100644
--- a/packages/mermaid/src/assignWithDepth.js
+++ b/packages/mermaid/src/assignWithDepth.ts
@@ -1,32 +1,36 @@
-'use strict';
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
 /**
- * @function assignWithDepth Extends the functionality of {@link ObjectConstructor.assign} with the
+ * assignWithDepth Extends the functionality of {@link ObjectConstructor.assign} with the
  *   ability to merge arbitrary-depth objects For each key in src with path `k` (recursively)
  *   performs an Object.assign(dst[`k`], src[`k`]) with a slight change from the typical handling of
- *   undefined for dst[`k`]: instead of raising an error, dst[`k`] is auto-initialized to {} and
+ *   undefined for dst[`k`]: instead of raising an error, dst[`k`] is auto-initialized to `{}` and
  *   effectively merged with src[`k`]<p> Additionally, dissimilar types will not clobber unless the
  *   config.clobber parameter === true. Example:
  *
- *   ```js
- *   let config_0 = { foo: { bar: 'bar' }, bar: 'foo' };
- *   let config_1 = { foo: 'foo', bar: 'bar' };
- *   let result = assignWithDepth(config_0, config_1);
- *   console.log(result);
- *   //-> result: { foo: { bar: 'bar' }, bar: 'bar' }
- *   ```
+ * ```
+ * const config_0 = { foo: { bar: 'bar' }, bar: 'foo' };
+ * const config_1 = { foo: 'foo', bar: 'bar' };
+ * const result = assignWithDepth(config_0, config_1);
+ * console.log(result);
+ * //-> result: { foo: { bar: 'bar' }, bar: 'bar' }
+ * ```
  *
  *   Traditional Object.assign would have clobbered foo in config_0 with foo in config_1. If src is a
  *   destructured array of objects and dst is not an array, assignWithDepth will apply each element
  *   of src to dst in order.
- * @param {any} dst - The destination of the merge
- * @param {any} src - The source object(s) to merge into destination
- * @param {{ depth: number; clobber: boolean }} [config] - Depth: depth
- *   to traverse within src and dst for merging - clobber: should dissimilar types clobber (default:
- *   { depth: 2, clobber: false }). Default is `{ depth: 2, clobber: false }`
- * @returns {any}
+ * @param dst - The destination of the merge
+ * @param src - The source object(s) to merge into destination
+ * @param config -
+ * * depth: depth to traverse within src and dst for merging
+ * * clobber: should dissimilar types clobber
  */
-const assignWithDepth = function (dst, src, config) {
-  const { depth, clobber } = Object.assign({ depth: 2, clobber: false }, config);
+const assignWithDepth = (
+  dst: any,
+  src: any,
+  config: { depth: number; clobber: boolean } = { depth: 2, clobber: false }
+): any => {
+  const { depth, clobber } = config;
   if (Array.isArray(src) && !Array.isArray(dst)) {
     src.forEach((s) => assignWithDepth(dst, s, config));
     return dst;

From 980a5ac8b54a0cb158bd980d1c8c88ee43de4f8e Mon Sep 17 00:00:00 2001
From: Reda Al Sulais <u.yokozuna@gmail.com>
Date: Thu, 10 Aug 2023 22:26:04 +0300
Subject: [PATCH 267/281] create `ParserDefinition` type

---
 packages/mermaid/src/diagram-api/diagramAPI.spec.ts |  7 ++++++-
 packages/mermaid/src/diagram-api/types.ts           |  9 +++++++--
 packages/mermaid/src/mermaid.spec.ts                | 10 +++++++---
 3 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/packages/mermaid/src/diagram-api/diagramAPI.spec.ts b/packages/mermaid/src/diagram-api/diagramAPI.spec.ts
index 49bde1a66..b437745cf 100644
--- a/packages/mermaid/src/diagram-api/diagramAPI.spec.ts
+++ b/packages/mermaid/src/diagram-api/diagramAPI.spec.ts
@@ -35,7 +35,12 @@ describe('DiagramAPI', () => {
       'loki',
       {
         db: {},
-        parser: {},
+        parser: {
+          parse: (_text) => {
+            return;
+          },
+          parser: { yy: {} },
+        },
         renderer: {},
         styles: {},
       },
diff --git a/packages/mermaid/src/diagram-api/types.ts b/packages/mermaid/src/diagram-api/types.ts
index 860e965ac..100b92e87 100644
--- a/packages/mermaid/src/diagram-api/types.ts
+++ b/packages/mermaid/src/diagram-api/types.ts
@@ -1,5 +1,5 @@
 import { Diagram } from '../Diagram.js';
-import { MermaidConfig } from '../config.type.js';
+import type { MermaidConfig } from '../config.type.js';
 import type * as d3 from 'd3';
 
 export interface InjectUtils {
@@ -27,7 +27,7 @@ export interface DiagramDB {
 export interface DiagramDefinition {
   db: DiagramDB;
   renderer: any;
-  parser: any;
+  parser: ParserDefinition;
   styles?: any;
   init?: (config: MermaidConfig) => void;
   injectUtils?: (
@@ -70,6 +70,11 @@ export type DrawDefinition = (
   diagramObject: Diagram
 ) => void;
 
+export interface ParserDefinition {
+  parse: (text: string) => void;
+  parser: { yy: DiagramDB };
+}
+
 /**
  * Type for function parse directive from diagram code.
  *
diff --git a/packages/mermaid/src/mermaid.spec.ts b/packages/mermaid/src/mermaid.spec.ts
index e27428545..0b4437d74 100644
--- a/packages/mermaid/src/mermaid.spec.ts
+++ b/packages/mermaid/src/mermaid.spec.ts
@@ -3,6 +3,7 @@ import { mermaidAPI } from './mermaidAPI.js';
 import './diagram-api/diagram-orchestration.js';
 import { addDiagrams } from './diagram-api/diagram-orchestration.js';
 import { beforeAll, describe, it, expect, vi } from 'vitest';
+import type { DiagramDefinition } from './diagram-api/types.js';
 
 beforeAll(async () => {
   addDiagrams();
@@ -92,13 +93,16 @@ describe('when using mermaid and ', () => {
 
     it('should defer diagram load based on parameter', async () => {
       let loaded = false;
-      const dummyDiagram = {
+      const dummyDiagram: DiagramDefinition = {
         db: {},
         renderer: () => {
           // do nothing
         },
-        parser: () => {
-          // do nothing
+        parser: {
+          parse: (_text) => {
+            return;
+          },
+          parser: { yy: {} },
         },
         styles: () => {
           // do nothing

From 9ab048c7e9e193080cf00aba531863a9cae92ae7 Mon Sep 17 00:00:00 2001
From: Reda Al Sulais <u.yokozuna@gmail.com>
Date: Fri, 11 Aug 2023 00:55:31 +0300
Subject: [PATCH 268/281] use default export in `error` diagram

---
 packages/mermaid/src/diagram-api/diagram-orchestration.ts | 2 +-
 packages/mermaid/src/diagrams/error/errorDiagram.ts       | 4 +++-
 packages/mermaid/src/diagrams/error/errorRenderer.ts      | 2 ++
 packages/mermaid/src/mermaidAPI.ts                        | 2 +-
 4 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/mermaid/src/diagram-api/diagram-orchestration.ts b/packages/mermaid/src/diagram-api/diagram-orchestration.ts
index 8bec8b700..9c03e27f3 100644
--- a/packages/mermaid/src/diagram-api/diagram-orchestration.ts
+++ b/packages/mermaid/src/diagram-api/diagram-orchestration.ts
@@ -14,7 +14,7 @@ import classDiagramV2 from '../diagrams/class/classDetector-V2.js';
 import state from '../diagrams/state/stateDetector.js';
 import stateV2 from '../diagrams/state/stateDetector-V2.js';
 import journey from '../diagrams/user-journey/journeyDetector.js';
-import { diagram as errorDiagram } from '../diagrams/error/errorDiagram.js';
+import errorDiagram from '../diagrams/error/errorDiagram.js';
 import flowchartElk from '../diagrams/flowchart/elk/detector.js';
 import timeline from '../diagrams/timeline/detector.js';
 import mindmap from '../diagrams/mindmap/detector.js';
diff --git a/packages/mermaid/src/diagrams/error/errorDiagram.ts b/packages/mermaid/src/diagrams/error/errorDiagram.ts
index 8f0fcdf28..284dfd744 100644
--- a/packages/mermaid/src/diagrams/error/errorDiagram.ts
+++ b/packages/mermaid/src/diagrams/error/errorDiagram.ts
@@ -1,7 +1,7 @@
 import type { DiagramDefinition } from '../../diagram-api/types.js';
 import { renderer } from './errorRenderer.js';
 
-export const diagram: DiagramDefinition = {
+const diagram: DiagramDefinition = {
   db: {},
   renderer,
   parser: {
@@ -11,3 +11,5 @@ export const diagram: DiagramDefinition = {
     },
   },
 };
+
+export default diagram;
diff --git a/packages/mermaid/src/diagrams/error/errorRenderer.ts b/packages/mermaid/src/diagrams/error/errorRenderer.ts
index b7049d4b7..ebe0d0d73 100644
--- a/packages/mermaid/src/diagrams/error/errorRenderer.ts
+++ b/packages/mermaid/src/diagrams/error/errorRenderer.ts
@@ -77,3 +77,5 @@ export const draw = (_text: string, id: string, version: string) => {
 };
 
 export const renderer = { draw };
+
+export default renderer;
diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts
index e0c280f63..70b314daa 100644
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -18,7 +18,7 @@ import { version } from '../package.json';
 import * as configApi from './config.js';
 import { addDiagrams } from './diagram-api/diagram-orchestration.js';
 import { Diagram, getDiagramFromText } from './Diagram.js';
-import { renderer as errorRenderer } from './diagrams/error/errorRenderer.js';
+import errorRenderer from './diagrams/error/errorRenderer.js';
 import { attachFunctions } from './interactionDb.js';
 import { log, setLogLevel } from './logger.js';
 import getStyles from './styles.js';

From d8dd68cad29d762e6523dd53475584c12f010a94 Mon Sep 17 00:00:00 2001
From: Reda Al Sulais <u.yokozuna@gmail.com>
Date: Fri, 11 Aug 2023 01:39:04 +0300
Subject: [PATCH 269/281] redeclare `config` parameter add default value for
 each variable

---
 packages/mermaid/src/assignWithDepth.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/src/assignWithDepth.ts b/packages/mermaid/src/assignWithDepth.ts
index 22d0da192..263b005bc 100644
--- a/packages/mermaid/src/assignWithDepth.ts
+++ b/packages/mermaid/src/assignWithDepth.ts
@@ -28,9 +28,9 @@
 const assignWithDepth = (
   dst: any,
   src: any,
-  config: { depth: number; clobber: boolean } = { depth: 2, clobber: false }
+  { depth = 2, clobber = false }: { depth: number; clobber: boolean } = { depth: 2, clobber: false }
 ): any => {
-  const { depth, clobber } = config;
+  const config = Object.assign({ depth, clobber });
   if (Array.isArray(src) && !Array.isArray(dst)) {
     src.forEach((s) => assignWithDepth(dst, s, config));
     return dst;

From c938c7a438589a16c2309d348cee4996ebac7202 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Fri, 11 Aug 2023 13:57:26 +0200
Subject: [PATCH 270/281] Fix for interim issue with classes in state diagrams

---
 packages/mermaid/src/diagrams/state/stateRenderer-v2.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/mermaid/src/diagrams/state/stateRenderer-v2.js b/packages/mermaid/src/diagrams/state/stateRenderer-v2.js
index 990048ec7..1c9b2d1d3 100644
--- a/packages/mermaid/src/diagrams/state/stateRenderer-v2.js
+++ b/packages/mermaid/src/diagrams/state/stateRenderer-v2.js
@@ -84,6 +84,7 @@ export const setConf = function (cnf) {
  * @returns {object} ClassDef styles (a Map with keys = strings, values = )
  */
 export const getClasses = function (text, diagramObj) {
+  diagramObj.db.extract(diagramObj.db.getRootDocV2());
   return diagramObj.db.getClasses();
 };
 

From c5e7e6040c78eab4e8c2043d3436bade17aefad3 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Fri, 11 Aug 2023 13:58:19 +0200
Subject: [PATCH 271/281] Adding new flowchart tests related to issue #2139

---
 .../rendering/flowchart-v2.spec.js            | 27 ++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js
index 0f4b079c9..aac4a31b1 100644
--- a/cypress/integration/rendering/flowchart-v2.spec.js
+++ b/cypress/integration/rendering/flowchart-v2.spec.js
@@ -449,7 +449,7 @@ flowchart TD
       { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
   });
-  it('65: text-color from classes', () => {
+  it('65-1: text-color from classes', () => {
     imgSnapshotTest(
       `
       flowchart LR
@@ -460,6 +460,31 @@ flowchart TD
       { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
   });
+  it('65-2: bold text from classes', () => {
+    imgSnapshotTest(
+      `
+      flowchart
+        classDef cat fill:#f9d5e5, stroke:#233d4d,stroke-width:2px, font-weight:bold;
+        CS(A long bold text to be viewed):::cat
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+  it('65-3: bigger font from classes', () => {
+    imgSnapshotTest(
+      `
+flowchart
+  Node1:::class1 --> Node2:::class2
+  Node1:::class1 --> Node3:::class2
+  Node3 --> Node4((I am a circle)):::larger
+
+  classDef class1 fill:lightblue
+  classDef class2 fill:pink
+  classDef larger font-size:30px,fill:yellow
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
   it('66: More nested subgraph cases (TB)', () => {
     imgSnapshotTest(
       `

From 493023118f6dea74e7d1a943852d17474219a71d Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Fri, 11 Aug 2023 13:59:16 +0200
Subject: [PATCH 272/281] Fix for broker error diagram related #4178

---
 packages/mermaid/src/diagrams/error/errorRenderer.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/src/diagrams/error/errorRenderer.ts b/packages/mermaid/src/diagrams/error/errorRenderer.ts
index ebe0d0d73..e3be13497 100644
--- a/packages/mermaid/src/diagrams/error/errorRenderer.ts
+++ b/packages/mermaid/src/diagrams/error/errorRenderer.ts
@@ -14,8 +14,8 @@ export const draw = (_text: string, id: string, version: string) => {
   log.debug('renering svg for syntax error\n');
 
   const svg: SVG = selectSvgElement(id);
-  svg.attr('viewBox', '768 0 912 512');
-  configureSvgSize(svg, 100, 500, true);
+  svg.attr('viewBox', '0 0 1912 512');
+  configureSvgSize(svg, 100, 512, true);
 
   const g: Group = svg.append('g');
   g.append('path')

From a0b80f5490f812ccbc74d6246f2ecc39b03db147 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Fri, 11 Aug 2023 14:03:56 +0200
Subject: [PATCH 273/281] Version update and adjusted error diagram

---
 packages/mermaid/package.json                        | 2 +-
 packages/mermaid/src/diagrams/error/errorRenderer.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index 21c0e4d12..1230c6d3c 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "10.3.0",
+  "version": "10.3.1",
   "description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "type": "module",
   "module": "./dist/mermaid.core.mjs",
diff --git a/packages/mermaid/src/diagrams/error/errorRenderer.ts b/packages/mermaid/src/diagrams/error/errorRenderer.ts
index e3be13497..a8e738e5f 100644
--- a/packages/mermaid/src/diagrams/error/errorRenderer.ts
+++ b/packages/mermaid/src/diagrams/error/errorRenderer.ts
@@ -14,7 +14,7 @@ export const draw = (_text: string, id: string, version: string) => {
   log.debug('renering svg for syntax error\n');
 
   const svg: SVG = selectSvgElement(id);
-  svg.attr('viewBox', '0 0 1912 512');
+  svg.attr('viewBox', '0 0 2412 512');
   configureSvgSize(svg, 100, 512, true);
 
   const g: Group = svg.append('g');

From c37c494a1ea53b45fd5810ab3076921a2eb126b9 Mon Sep 17 00:00:00 2001
From: Reda Al Sulais <u.yokozuna@gmail.com>
Date: Fri, 11 Aug 2023 19:54:37 +0300
Subject: [PATCH 274/281] Update assignWithDepth.ts

---
 packages/mermaid/src/assignWithDepth.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/src/assignWithDepth.ts b/packages/mermaid/src/assignWithDepth.ts
index 263b005bc..831825779 100644
--- a/packages/mermaid/src/assignWithDepth.ts
+++ b/packages/mermaid/src/assignWithDepth.ts
@@ -28,9 +28,9 @@
 const assignWithDepth = (
   dst: any,
   src: any,
-  { depth = 2, clobber = false }: { depth: number; clobber: boolean } = { depth: 2, clobber: false }
+  { depth = 2, clobber = false }: { depth?: number; clobber?: boolean } = {}
 ): any => {
-  const config = Object.assign({ depth, clobber });
+  const config: { depth: number; clobber: boolean } = { depth, clobber };
   if (Array.isArray(src) && !Array.isArray(dst)) {
     src.forEach((s) => assignWithDepth(dst, s, config));
     return dst;

From 92098e23eb881ab7ff132616b8cb5a7826820f78 Mon Sep 17 00:00:00 2001
From: Reda Al Sulais <u.yokozuna@gmail.com>
Date: Fri, 11 Aug 2023 20:54:39 +0300
Subject: [PATCH 275/281] convert `svgDrawCommon` to TS

---
 .../common/{common.spec.js => common.spec.ts} | 24 +++++++++----------
 .../{svgDrawCommon.js => svgDrawCommon.ts}    |  9 +++----
 2 files changed, 17 insertions(+), 16 deletions(-)
 rename packages/mermaid/src/diagrams/common/{common.spec.js => common.spec.ts} (76%)
 rename packages/mermaid/src/diagrams/common/{svgDrawCommon.js => svgDrawCommon.ts} (92%)

diff --git a/packages/mermaid/src/diagrams/common/common.spec.js b/packages/mermaid/src/diagrams/common/common.spec.ts
similarity index 76%
rename from packages/mermaid/src/diagrams/common/common.spec.js
rename to packages/mermaid/src/diagrams/common/common.spec.ts
index d1c68e892..cfef5d58d 100644
--- a/packages/mermaid/src/diagrams/common/common.spec.js
+++ b/packages/mermaid/src/diagrams/common/common.spec.ts
@@ -1,15 +1,15 @@
 import { sanitizeText, removeScript, parseGenericTypes } from './common.js';
 
-describe('when securityLevel is antiscript, all script must be removed', function () {
+describe('when securityLevel is antiscript, all script must be removed', () => {
   /**
-   * @param {string} original The original text
-   * @param {string} result The expected sanitized text
+   * @param original - The original text
+   * @param result - The expected sanitized text
    */
-  function compareRemoveScript(original, result) {
+  function compareRemoveScript(original: string, result: string) {
     expect(removeScript(original).trim()).toEqual(result);
   }
 
-  it('should remove all script block, script inline.', function () {
+  it('should remove all script block, script inline.', () => {
     const labelString = `1
 		Act1: Hello 1<script src="http://abc.com/script1.js"></script>1
 		<b>Act2</b>:
@@ -25,7 +25,7 @@ describe('when securityLevel is antiscript, all script must be removed', functio
     compareRemoveScript(labelString, exactlyString);
   });
 
-  it('should remove all javascript urls', function () {
+  it('should remove all javascript urls', () => {
     compareRemoveScript(
       `This is a <a href="javascript:runHijackingScript();">clean link</a> + <a href="javascript:runHijackingScript();">clean link</a>
   and <a href="javascript&colon;bipassedMining();">me too</a>`,
@@ -34,11 +34,11 @@ describe('when securityLevel is antiscript, all script must be removed', functio
     );
   });
 
-  it('should detect malicious images', function () {
+  it('should detect malicious images', () => {
     compareRemoveScript(`<img onerror="alert('hello');">`, `<img>`);
   });
 
-  it('should detect iframes', function () {
+  it('should detect iframes', () => {
     compareRemoveScript(
       `<iframe src="http://abc.com/script1.js"></iframe>
     <iframe src="http://example.com/iframeexample"></iframe>`,
@@ -47,8 +47,8 @@ describe('when securityLevel is antiscript, all script must be removed', functio
   });
 });
 
-describe('Sanitize text', function () {
-  it('should remove script tag', function () {
+describe('Sanitize text', () => {
+  it('should remove script tag', () => {
     const maliciousStr = 'javajavascript:script:alert(1)';
     const result = sanitizeText(maliciousStr, {
       securityLevel: 'strict',
@@ -58,8 +58,8 @@ describe('Sanitize text', function () {
   });
 });
 
-describe('generic parser', function () {
-  it('should parse generic types', function () {
+describe('generic parser', () => {
+  it('should parse generic types', () => {
     expect(parseGenericTypes('test~T~')).toEqual('test<T>');
     expect(parseGenericTypes('test~Array~Array~string~~~')).toEqual('test<Array<Array<string>>>');
     expect(parseGenericTypes('test~Array~Array~string[]~~~')).toEqual(
diff --git a/packages/mermaid/src/diagrams/common/svgDrawCommon.js b/packages/mermaid/src/diagrams/common/svgDrawCommon.ts
similarity index 92%
rename from packages/mermaid/src/diagrams/common/svgDrawCommon.js
rename to packages/mermaid/src/diagrams/common/svgDrawCommon.ts
index 9a4ce8aa2..7e89b7e7f 100644
--- a/packages/mermaid/src/diagrams/common/svgDrawCommon.js
+++ b/packages/mermaid/src/diagrams/common/svgDrawCommon.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck - ignore to convert to TS
 import { sanitizeUrl } from '@braintree/sanitize-url';
 
 export const drawRect = function (elem, rectData) {
@@ -12,7 +13,7 @@ export const drawRect = function (elem, rectData) {
   rectElem.attr('ry', rectData.ry);
 
   if (rectData.attrs !== 'undefined' && rectData.attrs !== null) {
-    for (let attrKey in rectData.attrs) {
+    for (const attrKey in rectData.attrs) {
       rectElem.attr(attrKey, rectData.attrs[attrKey]);
     }
   }
@@ -27,8 +28,8 @@ export const drawRect = function (elem, rectData) {
 /**
  * Draws a background rectangle
  *
- * @param {any} elem Diagram (reference for bounds)
- * @param {any} bounds Shape of the rectangle
+ * @param elem - Diagram (reference for bounds)
+ * @param bounds - Shape of the rectangle
  */
 export const drawBackgroundRect = function (elem, bounds) {
   const rectElem = drawRect(elem, {
@@ -69,7 +70,7 @@ export const drawImage = function (elem, x, y, link) {
   const imageElem = elem.append('image');
   imageElem.attr('x', x);
   imageElem.attr('y', y);
-  var sanitizedLink = sanitizeUrl(link);
+  const sanitizedLink = sanitizeUrl(link);
   imageElem.attr('xlink:href', sanitizedLink);
 };
 

From 22b172d873ac54256d409586e1d6ce401a6086ef Mon Sep 17 00:00:00 2001
From: Reda Al Sulais <u.yokozuna@gmail.com>
Date: Fri, 11 Aug 2023 20:56:00 +0300
Subject: [PATCH 276/281] add types to `svgDrawCommon.ts`

---
 .../src/diagrams/common/commonTypes.ts        |  58 +++++++++
 .../src/diagrams/common/svgDrawCommon.ts      | 110 ++++++++++--------
 2 files changed, 121 insertions(+), 47 deletions(-)
 create mode 100644 packages/mermaid/src/diagrams/common/commonTypes.ts

diff --git a/packages/mermaid/src/diagrams/common/commonTypes.ts b/packages/mermaid/src/diagrams/common/commonTypes.ts
new file mode 100644
index 000000000..6a728bd5d
--- /dev/null
+++ b/packages/mermaid/src/diagrams/common/commonTypes.ts
@@ -0,0 +1,58 @@
+export interface RectData {
+  x?: number;
+  y?: number;
+  fill?: string;
+  width?: number;
+  height?: number;
+  stroke?: string;
+  class?: string;
+  color?: string | number;
+  rx?: number;
+  ry?: number;
+  attrs?: Record<string, string | number>;
+  anchor?: string;
+}
+
+export interface Bound {
+  startx: number;
+  stopx: number;
+  starty: number;
+  stopy: number;
+  fill: string;
+  stroke: string;
+}
+
+export interface TextData {
+  x: number;
+  y: number;
+  anchor: string;
+  text: string;
+  textMargin: number;
+  class?: string;
+}
+
+export interface TextObject {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  fill?: string;
+  anchor?: string;
+  'text-anchor': string;
+  style: string;
+  textMargin: number;
+  rx: number;
+  ry: number;
+  tspan: boolean;
+  valign: unknown;
+}
+
+export type D3RectElement = d3.Selection<SVGRectElement, unknown, Element | null, unknown>;
+
+export type D3UseElement = d3.Selection<SVGUseElement, unknown, Element | null, unknown>;
+
+export type D3ImageElement = d3.Selection<SVGImageElement, unknown, Element | null, unknown>;
+
+export type D3TextElement = d3.Selection<SVGTextElement, unknown, Element | null, unknown>;
+
+export type D3TSpanElement = d3.Selection<SVGTSpanElement, unknown, Element | null, unknown>;
diff --git a/packages/mermaid/src/diagrams/common/svgDrawCommon.ts b/packages/mermaid/src/diagrams/common/svgDrawCommon.ts
index 7e89b7e7f..316a659fc 100644
--- a/packages/mermaid/src/diagrams/common/svgDrawCommon.ts
+++ b/packages/mermaid/src/diagrams/common/svgDrawCommon.ts
@@ -1,38 +1,49 @@
-// @ts-nocheck - ignore to convert to TS
 import { sanitizeUrl } from '@braintree/sanitize-url';
+import type { Group, SVG } from '../../diagram-api/types.js';
+import type {
+  Bound,
+  D3ImageElement,
+  D3RectElement,
+  D3TSpanElement,
+  D3TextElement,
+  D3UseElement,
+  RectData,
+  TextData,
+  TextObject,
+} from './commonTypes.js';
 
-export const drawRect = function (elem, rectData) {
-  const rectElem = elem.append('rect');
-  rectElem.attr('x', rectData.x);
-  rectElem.attr('y', rectData.y);
-  rectElem.attr('fill', rectData.fill);
-  rectElem.attr('stroke', rectData.stroke);
-  rectElem.attr('width', rectData.width);
-  rectElem.attr('height', rectData.height);
-  rectElem.attr('rx', rectData.rx);
-  rectElem.attr('ry', rectData.ry);
+export const drawRect = (element: SVG | Group, rectData: RectData): D3RectElement => {
+  const rectElement: D3RectElement = element.append('rect');
+  rectData.x !== undefined && rectElement.attr('x', rectData.x);
+  rectData.y !== undefined && rectElement.attr('y', rectData.y);
+  rectData.fill !== undefined && rectElement.attr('fill', rectData.fill);
+  rectData.stroke !== undefined && rectElement.attr('stroke', rectData.stroke);
+  rectData.width !== undefined && rectElement.attr('width', rectData.width);
+  rectData.height !== undefined && rectElement.attr('height', rectData.height);
+  rectData.rx !== undefined && rectElement.attr('rx', rectData.rx);
+  rectData.ry !== undefined && rectElement.attr('ry', rectData.ry);
 
-  if (rectData.attrs !== 'undefined' && rectData.attrs !== null) {
+  if (rectData.attrs !== undefined && rectData.attrs !== null) {
     for (const attrKey in rectData.attrs) {
-      rectElem.attr(attrKey, rectData.attrs[attrKey]);
+      rectElement.attr(attrKey, rectData.attrs[attrKey]);
     }
   }
 
-  if (rectData.class !== 'undefined') {
-    rectElem.attr('class', rectData.class);
+  if (rectData.class !== undefined) {
+    rectElement.attr('class', rectData.class);
   }
 
-  return rectElem;
+  return rectElement;
 };
 
 /**
  * Draws a background rectangle
  *
- * @param elem - Diagram (reference for bounds)
+ * @param element - Diagram (reference for bounds)
  * @param bounds - Shape of the rectangle
  */
-export const drawBackgroundRect = function (elem, bounds) {
-  const rectElem = drawRect(elem, {
+export const drawBackgroundRect = (element: SVG | Group, bounds: Bound): void => {
+  const rectData: RectData = {
     x: bounds.startx,
     y: bounds.starty,
     width: bounds.stopx - bounds.startx,
@@ -40,50 +51,53 @@ export const drawBackgroundRect = function (elem, bounds) {
     fill: bounds.fill,
     stroke: bounds.stroke,
     class: 'rect',
-  });
-  rectElem.lower();
+  };
+  const rectElement: D3RectElement = drawRect(element, rectData);
+  rectElement.lower();
 };
 
-export const drawText = function (elem, textData) {
+export const drawText = (element: SVG | Group, textData: TextData): D3TextElement => {
   // Remove and ignore br:s
-  const nText = textData.text.replace(/<br\s*\/?>/gi, ' ');
+  const nText: string = textData.text.replace(/<br\s*\/?>/gi, ' ');
 
-  const textElem = elem.append('text');
+  const textElem: D3TextElement = element.append('text');
   textElem.attr('x', textData.x);
   textElem.attr('y', textData.y);
   textElem.attr('class', 'legend');
 
   textElem.style('text-anchor', textData.anchor);
+  textData.class !== undefined && textElem.attr('class', textData.class);
 
-  if (textData.class !== undefined) {
-    textElem.attr('class', textData.class);
-  }
-
-  const span = textElem.append('tspan');
-  span.attr('x', textData.x + textData.textMargin * 2);
-  span.text(nText);
+  const tspan: D3TSpanElement = textElem.append('tspan');
+  tspan.attr('x', textData.x + textData.textMargin * 2);
+  tspan.text(nText);
 
   return textElem;
 };
 
-export const drawImage = function (elem, x, y, link) {
-  const imageElem = elem.append('image');
-  imageElem.attr('x', x);
-  imageElem.attr('y', y);
-  const sanitizedLink = sanitizeUrl(link);
-  imageElem.attr('xlink:href', sanitizedLink);
+export const drawImage = (elem: SVG | Group, x: number, y: number, link: string): void => {
+  const imageElement: D3ImageElement = elem.append('image');
+  imageElement.attr('x', x);
+  imageElement.attr('y', y);
+  const sanitizedLink: string = sanitizeUrl(link);
+  imageElement.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);
-  const sanitizedLink = sanitizeUrl(link);
-  imageElem.attr('xlink:href', '#' + sanitizedLink);
+export const drawEmbeddedImage = (
+  element: SVG | Group,
+  x: number,
+  y: number,
+  link: string
+): void => {
+  const imageElement: D3UseElement = element.append('use');
+  imageElement.attr('x', x);
+  imageElement.attr('y', y);
+  const sanitizedLink: string = sanitizeUrl(link);
+  imageElement.attr('xlink:href', `#${sanitizedLink}`);
 };
 
-export const getNoteRect = function () {
-  return {
+export const getNoteRect = (): RectData => {
+  const noteRectData: RectData = {
     x: 0,
     y: 0,
     width: 100,
@@ -94,10 +108,11 @@ export const getNoteRect = function () {
     rx: 0,
     ry: 0,
   };
+  return noteRectData;
 };
 
-export const getTextObj = function () {
-  return {
+export const getTextObj = (): TextObject => {
+  const testObject: TextObject = {
     x: 0,
     y: 0,
     width: 100,
@@ -112,4 +127,5 @@ export const getTextObj = function () {
     tspan: true,
     valign: undefined,
   };
+  return testObject;
 };

From 5a2ea7c297d7424207aa5e4f4a9b525a74c4a451 Mon Sep 17 00:00:00 2001
From: Reda Al Sulais <u.yokozuna@gmail.com>
Date: Fri, 11 Aug 2023 21:09:00 +0300
Subject: [PATCH 277/281] fix svgDrawCommon import by adding `.js`

---
 packages/mermaid/src/diagrams/c4/svgDraw.js                | 2 +-
 packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts | 2 +-
 packages/mermaid/src/diagrams/sequence/svgDraw.js          | 2 +-
 packages/mermaid/src/diagrams/user-journey/svgDraw.js      | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/mermaid/src/diagrams/c4/svgDraw.js b/packages/mermaid/src/diagrams/c4/svgDraw.js
index 5ca2f55f8..9ec742261 100644
--- a/packages/mermaid/src/diagrams/c4/svgDraw.js
+++ b/packages/mermaid/src/diagrams/c4/svgDraw.js
@@ -1,5 +1,5 @@
 import common from '../common/common.js';
-import * as svgDrawCommon from '../common/svgDrawCommon';
+import * as svgDrawCommon from '../common/svgDrawCommon.js';
 import { sanitizeUrl } from '@braintree/sanitize-url';
 
 export const drawRect = function (elem, rectData) {
diff --git a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
index f6fde5001..feee7157f 100644
--- a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
+++ b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
@@ -3,7 +3,7 @@ import { select, selectAll } from 'd3';
 import svgDraw, { ACTOR_TYPE_WIDTH, drawText, fixLifeLineHeights } from './svgDraw.js';
 import { log } from '../../logger.js';
 import common from '../common/common.js';
-import * as svgDrawCommon from '../common/svgDrawCommon';
+import * as svgDrawCommon from '../common/svgDrawCommon.js';
 import * as configApi from '../../config.js';
 import assignWithDepth from '../../assignWithDepth.js';
 import utils from '../../utils.js';
diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.js b/packages/mermaid/src/diagrams/sequence/svgDraw.js
index 0c7bc6421..e0aaa1eb9 100644
--- a/packages/mermaid/src/diagrams/sequence/svgDraw.js
+++ b/packages/mermaid/src/diagrams/sequence/svgDraw.js
@@ -1,5 +1,5 @@
 import common from '../common/common.js';
-import * as svgDrawCommon from '../common/svgDrawCommon';
+import * as svgDrawCommon from '../common/svgDrawCommon.js';
 import { addFunction } from '../../interactionDb.js';
 import { ZERO_WIDTH_SPACE, parseFontSize } from '../../utils.js';
 import { sanitizeUrl } from '@braintree/sanitize-url';
diff --git a/packages/mermaid/src/diagrams/user-journey/svgDraw.js b/packages/mermaid/src/diagrams/user-journey/svgDraw.js
index 108f4b2f9..7a8f791fa 100644
--- a/packages/mermaid/src/diagrams/user-journey/svgDraw.js
+++ b/packages/mermaid/src/diagrams/user-journey/svgDraw.js
@@ -1,5 +1,5 @@
 import { arc as d3arc } from 'd3';
-import * as svgDrawCommon from '../common/svgDrawCommon';
+import * as svgDrawCommon from '../common/svgDrawCommon.js';
 
 export const drawRect = function (elem, rectData) {
   return svgDrawCommon.drawRect(elem, rectData);

From 95382335739f2a3954c627f23843b493fe0a2d82 Mon Sep 17 00:00:00 2001
From: Reda Al Sulais <u.yokozuna@gmail.com>
Date: Fri, 11 Aug 2023 21:16:53 +0300
Subject: [PATCH 278/281] use lineBreakRegex in `svgDrawCommon`

---
 packages/mermaid/src/diagrams/common/common.ts        | 1 +
 packages/mermaid/src/diagrams/common/svgDrawCommon.ts | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/src/diagrams/common/common.ts b/packages/mermaid/src/diagrams/common/common.ts
index 243c0cbf2..24591642b 100644
--- a/packages/mermaid/src/diagrams/common/common.ts
+++ b/packages/mermaid/src/diagrams/common/common.ts
@@ -1,6 +1,7 @@
 import DOMPurify from 'dompurify';
 import { MermaidConfig } from '../../config.type.js';
 
+// Remove and ignore br:s
 export const lineBreakRegex = /<br\s*\/?>/gi;
 
 /**
diff --git a/packages/mermaid/src/diagrams/common/svgDrawCommon.ts b/packages/mermaid/src/diagrams/common/svgDrawCommon.ts
index 316a659fc..c2d9864b1 100644
--- a/packages/mermaid/src/diagrams/common/svgDrawCommon.ts
+++ b/packages/mermaid/src/diagrams/common/svgDrawCommon.ts
@@ -11,6 +11,7 @@ import type {
   TextData,
   TextObject,
 } from './commonTypes.js';
+import { lineBreakRegex } from './common.js';
 
 export const drawRect = (element: SVG | Group, rectData: RectData): D3RectElement => {
   const rectElement: D3RectElement = element.append('rect');
@@ -57,8 +58,7 @@ export const drawBackgroundRect = (element: SVG | Group, bounds: Bound): void =>
 };
 
 export const drawText = (element: SVG | Group, textData: TextData): D3TextElement => {
-  // Remove and ignore br:s
-  const nText: string = textData.text.replace(/<br\s*\/?>/gi, ' ');
+  const nText: string = textData.text.replace(lineBreakRegex, ' ');
 
   const textElem: D3TextElement = element.append('text');
   textElem.attr('x', textData.x);

From 99c1758490306cef3b5d038061891c132e029da6 Mon Sep 17 00:00:00 2001
From: Reda Al Sulais <u.yokozuna@gmail.com>
Date: Sat, 12 Aug 2023 20:25:10 +0300
Subject: [PATCH 279/281] make more `RectData` required and remove optional
 assignment

---
 .../src/diagrams/common/commonTypes.ts        | 16 +++++++-------
 .../src/diagrams/common/svgDrawCommon.ts      | 21 +++++++------------
 2 files changed, 16 insertions(+), 21 deletions(-)

diff --git a/packages/mermaid/src/diagrams/common/commonTypes.ts b/packages/mermaid/src/diagrams/common/commonTypes.ts
index 6a728bd5d..84c26db6e 100644
--- a/packages/mermaid/src/diagrams/common/commonTypes.ts
+++ b/packages/mermaid/src/diagrams/common/commonTypes.ts
@@ -1,12 +1,12 @@
 export interface RectData {
-  x?: number;
-  y?: number;
-  fill?: string;
-  width?: number;
-  height?: number;
-  stroke?: string;
+  x: number;
+  y: number;
+  fill: string;
+  width: number;
+  height: number;
+  stroke: string;
   class?: string;
-  color?: string | number;
+  color?: string;
   rx?: number;
   ry?: number;
   attrs?: Record<string, string | number>;
@@ -44,7 +44,7 @@ export interface TextObject {
   rx: number;
   ry: number;
   tspan: boolean;
-  valign: unknown;
+  valign?: string;
 }
 
 export type D3RectElement = d3.Selection<SVGRectElement, unknown, Element | null, unknown>;
diff --git a/packages/mermaid/src/diagrams/common/svgDrawCommon.ts b/packages/mermaid/src/diagrams/common/svgDrawCommon.ts
index c2d9864b1..706d43ab9 100644
--- a/packages/mermaid/src/diagrams/common/svgDrawCommon.ts
+++ b/packages/mermaid/src/diagrams/common/svgDrawCommon.ts
@@ -15,24 +15,22 @@ import { lineBreakRegex } from './common.js';
 
 export const drawRect = (element: SVG | Group, rectData: RectData): D3RectElement => {
   const rectElement: D3RectElement = element.append('rect');
-  rectData.x !== undefined && rectElement.attr('x', rectData.x);
-  rectData.y !== undefined && rectElement.attr('y', rectData.y);
-  rectData.fill !== undefined && rectElement.attr('fill', rectData.fill);
-  rectData.stroke !== undefined && rectElement.attr('stroke', rectData.stroke);
-  rectData.width !== undefined && rectElement.attr('width', rectData.width);
-  rectData.height !== undefined && rectElement.attr('height', rectData.height);
+  rectElement.attr('x', rectData.x);
+  rectElement.attr('y', rectData.y);
+  rectElement.attr('fill', rectData.fill);
+  rectElement.attr('stroke', rectData.stroke);
+  rectElement.attr('width', rectData.width);
+  rectElement.attr('height', rectData.height);
   rectData.rx !== undefined && rectElement.attr('rx', rectData.rx);
   rectData.ry !== undefined && rectElement.attr('ry', rectData.ry);
 
-  if (rectData.attrs !== undefined && rectData.attrs !== null) {
+  if (rectData.attrs !== undefined) {
     for (const attrKey in rectData.attrs) {
       rectElement.attr(attrKey, rectData.attrs[attrKey]);
     }
   }
 
-  if (rectData.class !== undefined) {
-    rectElement.attr('class', rectData.class);
-  }
+  rectData.class !== undefined && rectElement.attr('class', rectData.class);
 
   return rectElement;
 };
@@ -117,15 +115,12 @@ export const getTextObj = (): TextObject => {
     y: 0,
     width: 100,
     height: 100,
-    fill: undefined,
-    anchor: undefined,
     'text-anchor': 'start',
     style: '#666',
     textMargin: 0,
     rx: 0,
     ry: 0,
     tspan: true,
-    valign: undefined,
   };
   return testObject;
 };

From b60410161dbc45fa94fc4cb947a184faf4dd6752 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Mon, 14 Aug 2023 02:02:28 +0000
Subject: [PATCH 280/281] Update all patch dependencies

---
 docker-compose.yml                     |  4 +-
 package.json                           |  4 +-
 packages/mermaid/src/docs/package.json |  2 +-
 pnpm-lock.yaml                         | 90 +++++++++++++++++++-------
 4 files changed, 72 insertions(+), 28 deletions(-)

diff --git a/docker-compose.yml b/docker-compose.yml
index 05fc241ba..56a46e84c 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,7 +1,7 @@
 version: '3.9'
 services:
   mermaid:
-    image: node:18.17.0-alpine3.18
+    image: node:18.17.1-alpine3.18
     stdin_open: true
     tty: true
     working_dir: /mermaid
@@ -17,7 +17,7 @@ services:
       - 9000:9000
       - 3333:3333
   cypress:
-    image: cypress/included:12.17.2
+    image: cypress/included:12.17.3
     stdin_open: true
     tty: true
     working_dir: /mermaid
diff --git a/package.json b/package.json
index 03ab8c6ec..65230372b 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "version": "10.2.4",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "type": "module",
-  "packageManager": "pnpm@8.6.11",
+  "packageManager": "pnpm@8.6.12",
   "keywords": [
     "diagram",
     "markdown",
@@ -122,7 +122,7 @@
     "vitest": "^0.33.0"
   },
   "volta": {
-    "node": "18.17.0"
+    "node": "18.17.1"
   },
   "nyc": {
     "report-dir": "coverage/cypress"
diff --git a/packages/mermaid/src/docs/package.json b/packages/mermaid/src/docs/package.json
index 922d8fa32..001abd4c5 100644
--- a/packages/mermaid/src/docs/package.json
+++ b/packages/mermaid/src/docs/package.json
@@ -31,7 +31,7 @@
     "unplugin-vue-components": "^0.25.0",
     "vite": "^4.3.9",
     "vite-plugin-pwa": "^0.16.0",
-    "vitepress": "1.0.0-beta.7",
+    "vitepress": "1.0.0-rc.4",
     "workbox-window": "^7.0.0"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 08487b802..707ce4174 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -466,8 +466,8 @@ importers:
         specifier: ^0.16.0
         version: 0.16.0(vite@4.3.9)(workbox-build@7.0.0)(workbox-window@7.0.0)
       vitepress:
-        specifier: 1.0.0-beta.7
-        version: 1.0.0-beta.7(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0)
+        specifier: 1.0.0-rc.4
+        version: 1.0.0-rc.4(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0)
       workbox-window:
         specifier: ^7.0.0
         version: 7.0.0
@@ -5169,14 +5169,14 @@ packages:
       vue: 3.3.4
     dev: true
 
-  /@vitejs/plugin-vue@4.2.3(vite@4.4.7)(vue@3.3.4):
+  /@vitejs/plugin-vue@4.2.3(vite@4.4.9)(vue@3.3.4):
     resolution: {integrity: sha512-R6JDUfiZbJA9cMiguQ7jxALsgiprjBeHL5ikpXfJCH62pPHtI+JdJ5xWj6Ev73yXSlYl86+blXn1kZHQ7uElxw==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
       vite: ^4.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 4.4.7(@types/node@18.16.0)
+      vite: 4.4.9(@types/node@18.16.0)
       vue: 3.3.4
     dev: true
 
@@ -5438,20 +5438,20 @@ packages:
       - vue
     dev: true
 
-  /@vueuse/core@10.2.1(vue@3.3.4):
-    resolution: {integrity: sha512-c441bfMbkAwTNwVRHQ0zdYZNETK//P84rC01aP2Uy/aRFCiie9NE/k9KdIXbno0eDYP5NPUuWv0aA/I4Unr/7w==}
+  /@vueuse/core@10.3.0(vue@3.3.4):
+    resolution: {integrity: sha512-BEM5yxcFKb5btFjTSAFjTu5jmwoW66fyV9uJIP4wUXXU8aR5Hl44gndaaXp7dC5HSObmgbnR2RN+Un1p68Mf5Q==}
     dependencies:
       '@types/web-bluetooth': 0.0.17
-      '@vueuse/metadata': 10.2.1
-      '@vueuse/shared': 10.2.1(vue@3.3.4)
+      '@vueuse/metadata': 10.3.0
+      '@vueuse/shared': 10.3.0(vue@3.3.4)
       vue-demi: 0.14.5(vue@3.3.4)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
     dev: true
 
-  /@vueuse/integrations@10.2.1(focus-trap@7.5.2)(vue@3.3.4):
-    resolution: {integrity: sha512-FDP5lni+z9FjHE9H3xuvwSjoRV9U8jmDvJpmHPCBjUgPGYRynwb60eHWXCFJXLUtb4gSIHy0e+iaEbrKdalCkQ==}
+  /@vueuse/integrations@10.3.0(focus-trap@7.5.2)(vue@3.3.4):
+    resolution: {integrity: sha512-Jgiv7oFyIgC6BxmDtiyG/fxyGysIds00YaY7sefwbhCZ2/tjEx1W/1WcsISSJPNI30in28+HC2J4uuU8184ekg==}
     peerDependencies:
       async-validator: '*'
       axios: '*'
@@ -5491,8 +5491,8 @@ packages:
       universal-cookie:
         optional: true
     dependencies:
-      '@vueuse/core': 10.2.1(vue@3.3.4)
-      '@vueuse/shared': 10.2.1(vue@3.3.4)
+      '@vueuse/core': 10.3.0(vue@3.3.4)
+      '@vueuse/shared': 10.3.0(vue@3.3.4)
       focus-trap: 7.5.2
       vue-demi: 0.14.5(vue@3.3.4)
     transitivePeerDependencies:
@@ -5508,8 +5508,8 @@ packages:
     resolution: {integrity: sha512-3mc5BqN9aU2SqBeBuWE7ne4OtXHoHKggNgxZR2K+zIW4YLsy6xoZ4/9vErQs6tvoKDX6QAqm3lvsrv0mczAwIQ==}
     dev: true
 
-  /@vueuse/metadata@10.2.1:
-    resolution: {integrity: sha512-3Gt68mY/i6bQvFqx7cuGBzrCCQu17OBaGWS5JdwISpMsHnMKKjC2FeB5OAfMcCQ0oINfADP3i9A4PPRo0peHdQ==}
+  /@vueuse/metadata@10.3.0:
+    resolution: {integrity: sha512-Ema3YhNOa4swDsV0V7CEY5JXvK19JI/o1szFO1iWxdFg3vhdFtCtSTP26PCvbUpnUtNHBY2wx5y3WDXND5Pvnw==}
     dev: true
 
   /@vueuse/shared@10.1.0(vue@3.2.47):
@@ -5530,8 +5530,8 @@ packages:
       - vue
     dev: true
 
-  /@vueuse/shared@10.2.1(vue@3.3.4):
-    resolution: {integrity: sha512-QWHq2bSuGptkcxx4f4M/fBYC3Y8d3M2UYyLsyzoPgEoVzJURQ0oJeWXu79OiLlBb8gTKkqe4mO85T/sf39mmiw==}
+  /@vueuse/shared@10.3.0(vue@3.3.4):
+    resolution: {integrity: sha512-kGqCTEuFPMK4+fNWy6dUOiYmxGcUbtznMwBZLC1PubidF4VZY05B+Oht7Jh7/6x4VOWGpvu3R37WHi81cKpiqg==}
     dependencies:
       vue-demi: 0.14.5(vue@3.3.4)
     transitivePeerDependencies:
@@ -13561,6 +13561,14 @@ packages:
       fsevents: 2.3.2
     dev: true
 
+  /rollup@3.28.0:
+    resolution: {integrity: sha512-d7zhvo1OUY2SXSM6pfNjgD5+d0Nz87CUp4mt8l/GgVP3oBsPwzNvSzyu1me6BSG9JIgWNTVcafIXBIyM8yQ3yw==}
+    engines: {node: '>=14.18.0', npm: '>=8.0.0'}
+    hasBin: true
+    optionalDependencies:
+      fsevents: 2.3.2
+    dev: true
+
   /rrweb-cssom@0.6.0:
     resolution: {integrity: sha512-APM0Gt1KoXBz0iIkkdB/kfvGOwC4UuJFeG/c+yV7wSc7q96cG/kJ0HiYCnzivD9SB53cLV1MlHFNfOuPaadYSw==}
     dev: true
@@ -15233,7 +15241,7 @@ packages:
       mlly: 1.4.0
       pathe: 1.1.1
       picocolors: 1.0.0
-      vite: 4.4.6(@types/node@18.16.0)
+      vite: 4.4.7(@types/node@18.16.0)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -15415,6 +15423,42 @@ packages:
       fsevents: 2.3.2
     dev: true
 
+  /vite@4.4.9(@types/node@18.16.0):
+    resolution: {integrity: sha512-2mbUn2LlUmNASWwSCNSJ/EG2HuSRTnVNaydp6vMCm5VIqJsjMfbIWtbH2kDuwUVW5mMUKKZvGPX/rqeqVvv1XA==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': '>= 14'
+      less: '*'
+      lightningcss: ^1.21.0
+      sass: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.4.0
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+    dependencies:
+      '@types/node': 18.16.0
+      esbuild: 0.18.11
+      postcss: 8.4.27
+      rollup: 3.28.0
+    optionalDependencies:
+      fsevents: 2.3.2
+    dev: true
+
   /vitepress-plugin-search@1.0.4-alpha.20(flexsearch@0.7.31)(vitepress@1.0.0-alpha.72)(vue@3.3.4):
     resolution: {integrity: sha512-zG+ev9pw1Mg7htABlFCNXb8XwnKN+qfTKw+vU0Ers6RIrABx+45EAAFBoaL1mEpl1FRFn1o/dQ7F4b8GP6HdGQ==}
     engines: {node: ^14.13.1 || ^16.7.0 || >=18}
@@ -15461,22 +15505,22 @@ packages:
       - terser
     dev: true
 
-  /vitepress@1.0.0-beta.7(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0):
-    resolution: {integrity: sha512-P9Rw+FXatKIU4fVdtKxqwHl6fby8E/8zE3FIfep6meNgN4BxbWqoKJ6yfuuQQR9IrpQqwnyaBh4LSabyll6tWg==}
+  /vitepress@1.0.0-rc.4(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0):
+    resolution: {integrity: sha512-JCQ89Bm6ECUTnyzyas3JENo00UDJeK8q1SUQyJYou+4Yz5BKEc/F3O21cu++DnUT2zXc0kvQ2Aj4BZCc/nioXQ==}
     hasBin: true
     dependencies:
       '@docsearch/css': 3.5.1
       '@docsearch/js': 3.5.1(@algolia/client-search@4.14.2)(search-insights@2.6.0)
-      '@vitejs/plugin-vue': 4.2.3(vite@4.4.7)(vue@3.3.4)
+      '@vitejs/plugin-vue': 4.2.3(vite@4.4.9)(vue@3.3.4)
       '@vue/devtools-api': 6.5.0
-      '@vueuse/core': 10.2.1(vue@3.3.4)
-      '@vueuse/integrations': 10.2.1(focus-trap@7.5.2)(vue@3.3.4)
+      '@vueuse/core': 10.3.0(vue@3.3.4)
+      '@vueuse/integrations': 10.3.0(focus-trap@7.5.2)(vue@3.3.4)
       body-scroll-lock: 4.0.0-beta.0
       focus-trap: 7.5.2
       mark.js: 8.11.1
       minisearch: 6.1.0
       shiki: 0.14.3
-      vite: 4.4.7(@types/node@18.16.0)
+      vite: 4.4.9(@types/node@18.16.0)
       vue: 3.3.4
     transitivePeerDependencies:
       - '@algolia/client-search'

From 2a8374312f7d18804f9212b32f56f931e257ffae Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Mon, 14 Aug 2023 03:07:45 +0000
Subject: [PATCH 281/281] Update all minor dependencies

---
 package.json                           |  10 +-
 packages/mermaid/src/docs/package.json |   4 +-
 pnpm-lock.yaml                         | 695 +++++++++++++------------
 3 files changed, 363 insertions(+), 346 deletions(-)

diff --git a/package.json b/package.json
index 03ab8c6ec..76e3420c2 100644
--- a/package.json
+++ b/package.json
@@ -78,15 +78,15 @@
     "@types/rollup-plugin-visualizer": "^4.2.1",
     "@typescript-eslint/eslint-plugin": "^5.59.0",
     "@typescript-eslint/parser": "^5.59.0",
-    "@vitest/coverage-v8": "^0.33.0",
-    "@vitest/spy": "^0.33.0",
-    "@vitest/ui": "^0.33.0",
+    "@vitest/coverage-v8": "^0.34.0",
+    "@vitest/spy": "^0.34.0",
+    "@vitest/ui": "^0.34.0",
     "ajv": "^8.12.0",
     "concurrently": "^8.0.1",
     "cors": "^2.8.5",
     "cypress": "^12.10.0",
     "cypress-image-snapshot": "^4.0.1",
-    "esbuild": "^0.18.0",
+    "esbuild": "^0.19.0",
     "eslint": "^8.39.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-cypress": "^2.13.2",
@@ -119,7 +119,7 @@
     "typescript": "^5.1.3",
     "vite": "^4.3.9",
     "vite-plugin-istanbul": "^4.1.0",
-    "vitest": "^0.33.0"
+    "vitest": "^0.34.0"
   },
   "volta": {
     "node": "18.17.0"
diff --git a/packages/mermaid/src/docs/package.json b/packages/mermaid/src/docs/package.json
index 922d8fa32..2ce557622 100644
--- a/packages/mermaid/src/docs/package.json
+++ b/packages/mermaid/src/docs/package.json
@@ -21,13 +21,13 @@
   },
   "devDependencies": {
     "@iconify-json/carbon": "^1.1.16",
-    "@unocss/reset": "^0.54.0",
+    "@unocss/reset": "^0.55.0",
     "@vite-pwa/vitepress": "^0.2.0",
     "@vitejs/plugin-vue": "^4.2.1",
     "fast-glob": "^3.2.12",
     "https-localhost": "^4.7.1",
     "pathe": "^1.1.0",
-    "unocss": "^0.54.0",
+    "unocss": "^0.55.0",
     "unplugin-vue-components": "^0.25.0",
     "vite": "^4.3.9",
     "vite-plugin-pwa": "^0.16.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 08487b802..caff7de51 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -63,14 +63,14 @@ importers:
         specifier: ^5.59.0
         version: 5.59.0(eslint@8.39.0)(typescript@5.1.3)
       '@vitest/coverage-v8':
-        specifier: ^0.33.0
-        version: 0.33.0(vitest@0.33.0)
+        specifier: ^0.34.0
+        version: 0.34.0(vitest@0.34.0)
       '@vitest/spy':
-        specifier: ^0.33.0
-        version: 0.33.0
+        specifier: ^0.34.0
+        version: 0.34.0
       '@vitest/ui':
-        specifier: ^0.33.0
-        version: 0.33.0(vitest@0.33.0)
+        specifier: ^0.34.0
+        version: 0.34.0(vitest@0.34.0)
       ajv:
         specifier: ^8.12.0
         version: 8.12.0
@@ -87,8 +87,8 @@ importers:
         specifier: ^4.0.1
         version: 4.0.1(cypress@12.10.0)(jest@29.5.0)
       esbuild:
-        specifier: ^0.18.0
-        version: 0.18.0
+        specifier: ^0.19.0
+        version: 0.19.0
       eslint:
         specifier: ^8.39.0
         version: 8.39.0
@@ -186,8 +186,8 @@ importers:
         specifier: ^4.1.0
         version: 4.1.0(vite@4.3.9)
       vitest:
-        specifier: ^0.33.0
-        version: 0.33.0(@vitest/ui@0.33.0)(jsdom@22.0.0)
+        specifier: ^0.34.0
+        version: 0.34.0(@vitest/ui@0.34.0)(jsdom@22.0.0)
 
   packages/mermaid:
     dependencies:
@@ -436,8 +436,8 @@ importers:
         specifier: ^1.1.16
         version: 1.1.16
       '@unocss/reset':
-        specifier: ^0.54.0
-        version: 0.54.0
+        specifier: ^0.55.0
+        version: 0.55.0
       '@vite-pwa/vitepress':
         specifier: ^0.2.0
         version: 0.2.0(vite-plugin-pwa@0.16.0)
@@ -454,8 +454,8 @@ importers:
         specifier: ^1.1.0
         version: 1.1.0
       unocss:
-        specifier: ^0.54.0
-        version: 0.54.0(postcss@8.4.27)(rollup@2.79.1)(vite@4.3.9)
+        specifier: ^0.55.0
+        version: 0.55.0(postcss@8.4.27)(rollup@2.79.1)(vite@4.3.9)
       unplugin-vue-components:
         specifier: ^0.25.0
         version: 0.25.0(rollup@2.79.1)(vue@3.2.47)
@@ -483,7 +483,7 @@ importers:
     devDependencies:
       webpack:
         specifier: ^5.74.0
-        version: 5.75.0(esbuild@0.18.0)(webpack-cli@4.10.0)
+        version: 5.75.0(esbuild@0.19.0)(webpack-cli@4.10.0)
       webpack-cli:
         specifier: ^4.10.0
         version: 4.10.0(webpack-dev-server@4.11.1)(webpack@5.75.0)
@@ -709,6 +709,10 @@ packages:
     resolution: {integrity: sha512-qe8Nmh9rYI/HIspLSTwtbMFPj6dISG6+dJnOguTlPNXtCvS2uezdxscVBb7/3DrmNbQK49TDqpkSQ1chbRGdpQ==}
     dev: true
 
+  /@antfu/utils@0.7.5:
+    resolution: {integrity: sha512-dlR6LdS+0SzOAPx/TPRhnoi7hE251OVeT2Snw0RguNbBSbjUHdWr0l3vcUUDg26rEysT89kCbtw1lVorBXLLCg==}
+    dev: true
+
   /@apideck/better-ajv-errors@0.3.6(ajv@8.12.0):
     resolution: {integrity: sha512-P+ZygBLZtkp0qqOAJJVX4oX/sFo5JR3eBWwwuqHHhK0GIgQOKWrAfiAaWX0aArHkRWHMuggFEgAZNxVPwPZYaA==}
     engines: {node: '>=10'}
@@ -2791,7 +2795,7 @@ packages:
       bluebird: 3.7.1
       debug: 4.3.4(supports-color@8.1.1)
       lodash: 4.17.21
-      webpack: 5.75.0(esbuild@0.18.0)(webpack-cli@4.10.0)
+      webpack: 5.75.0(esbuild@0.19.0)(webpack-cli@4.10.0)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -2910,8 +2914,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/android-arm64@0.18.0:
-    resolution: {integrity: sha512-nAwRCs5+jxi3gBMVkOqmRvsITB/UtfpvkbMwAwJUIbp66NnPbV2KGCFnjNn7IEqabJQXfBLe/QLdjCGpHU+yEw==}
+  /@esbuild/android-arm64@0.18.11:
+    resolution: {integrity: sha512-snieiq75Z1z5LJX9cduSAjUr7vEI1OdlzFPMw0HH5YI7qQHDd3qs+WZoMrWYDsfRJSq36lIA6mfZBkvL46KoIw==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [android]
@@ -2919,8 +2923,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/android-arm64@0.18.11:
-    resolution: {integrity: sha512-snieiq75Z1z5LJX9cduSAjUr7vEI1OdlzFPMw0HH5YI7qQHDd3qs+WZoMrWYDsfRJSq36lIA6mfZBkvL46KoIw==}
+  /@esbuild/android-arm64@0.19.0:
+    resolution: {integrity: sha512-AzsozJnB+RNaDncBCs3Ys5g3kqhPFUueItfEaCpp89JH2naFNX2mYDIvUgPYMqqjm8hiFoo+jklb3QHZyR3ubw==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [android]
@@ -2937,8 +2941,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/android-arm@0.18.0:
-    resolution: {integrity: sha512-+uLHSiWK3qOeyDYCf/nuvIgCnQsYjXWNa3TlGYLW1pPG7OYMawllU+VyBgHQPjF2aIUVFpfrvz5aAfxGk/0qNg==}
+  /@esbuild/android-arm@0.18.11:
+    resolution: {integrity: sha512-q4qlUf5ucwbUJZXF5tEQ8LF7y0Nk4P58hOsGk3ucY0oCwgQqAnqXVbUuahCddVHfrxmpyewRpiTHwVHIETYu7Q==}
     engines: {node: '>=12'}
     cpu: [arm]
     os: [android]
@@ -2946,8 +2950,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/android-arm@0.18.11:
-    resolution: {integrity: sha512-q4qlUf5ucwbUJZXF5tEQ8LF7y0Nk4P58hOsGk3ucY0oCwgQqAnqXVbUuahCddVHfrxmpyewRpiTHwVHIETYu7Q==}
+  /@esbuild/android-arm@0.19.0:
+    resolution: {integrity: sha512-GAkjUyHgWTYuex3evPd5V7uV/XS4LMKr1PWHRPW1xNyy/Jx08x3uTrDFRefBYLKT/KpaWM8/YMQcwbp5a3yIDA==}
     engines: {node: '>=12'}
     cpu: [arm]
     os: [android]
@@ -2964,8 +2968,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/android-x64@0.18.0:
-    resolution: {integrity: sha512-TiOJmHQ8bXCGlYLpBd3Qy7N8dxi4n6q+nOmTzPr5Hb/bUr+PKuP4e5lWaOlpkaKc1Q9wsFt+sHfQpFCrM7SMow==}
+  /@esbuild/android-x64@0.18.11:
+    resolution: {integrity: sha512-iPuoxQEV34+hTF6FT7om+Qwziv1U519lEOvekXO9zaMMlT9+XneAhKL32DW3H7okrCOBQ44BMihE8dclbZtTuw==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [android]
@@ -2973,8 +2977,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/android-x64@0.18.11:
-    resolution: {integrity: sha512-iPuoxQEV34+hTF6FT7om+Qwziv1U519lEOvekXO9zaMMlT9+XneAhKL32DW3H7okrCOBQ44BMihE8dclbZtTuw==}
+  /@esbuild/android-x64@0.19.0:
+    resolution: {integrity: sha512-SUG8/qiVhljBDpdkHQ9DvOWbp7hFFIP0OzxOTptbmVsgBgzY6JWowmMd6yJuOhapfxmj/DrvwKmjRLvVSIAKZg==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [android]
@@ -2991,8 +2995,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/darwin-arm64@0.18.0:
-    resolution: {integrity: sha512-5GsFovtGyjMIXJrcCzmI1hX3TneCrmFncFIlo0WrRvWcVU6H094P854ZaP8qoLgevXhggO2dhlEGYY0Zv6/S9Q==}
+  /@esbuild/darwin-arm64@0.18.11:
+    resolution: {integrity: sha512-Gm0QkI3k402OpfMKyQEEMG0RuW2LQsSmI6OeO4El2ojJMoF5NLYb3qMIjvbG/lbMeLOGiW6ooU8xqc+S0fgz2w==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [darwin]
@@ -3000,8 +3004,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/darwin-arm64@0.18.11:
-    resolution: {integrity: sha512-Gm0QkI3k402OpfMKyQEEMG0RuW2LQsSmI6OeO4El2ojJMoF5NLYb3qMIjvbG/lbMeLOGiW6ooU8xqc+S0fgz2w==}
+  /@esbuild/darwin-arm64@0.19.0:
+    resolution: {integrity: sha512-HkxZ8k3Jvcw0FORPNTavA8BMgQjLOB6AajT+iXmil7BwY3gU1hWvJJAyWyEogCmA4LdbGvKF8vEykdmJ4xNJJQ==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [darwin]
@@ -3018,8 +3022,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/darwin-x64@0.18.0:
-    resolution: {integrity: sha512-4K/QCksQ8F58rvC1D62Xi4q4E7YWpiyc3zy2H/n1W7y0hjQpOBBxciLn0qycMskP/m/I5h9HNbRlu1aK821sHg==}
+  /@esbuild/darwin-x64@0.18.11:
+    resolution: {integrity: sha512-N15Vzy0YNHu6cfyDOjiyfJlRJCB/ngKOAvoBf1qybG3eOq0SL2Lutzz9N7DYUbb7Q23XtHPn6lMDF6uWbGv9Fw==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [darwin]
@@ -3027,8 +3031,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/darwin-x64@0.18.11:
-    resolution: {integrity: sha512-N15Vzy0YNHu6cfyDOjiyfJlRJCB/ngKOAvoBf1qybG3eOq0SL2Lutzz9N7DYUbb7Q23XtHPn6lMDF6uWbGv9Fw==}
+  /@esbuild/darwin-x64@0.19.0:
+    resolution: {integrity: sha512-9IRWJjqpWFHM9a5Qs3r3bK834NCFuDY5ZaLrmTjqE+10B6w65UMQzeZjh794JcxpHolsAHqwsN/33crUXNCM2Q==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [darwin]
@@ -3045,8 +3049,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/freebsd-arm64@0.18.0:
-    resolution: {integrity: sha512-DMazN0UGzipD0Fi1O9pRX0xfp+JC3gSnFWxTWq88Dr/odWhZzm8Jqy44LN2veYeipb1fBMxhoEp7eCr902SWqg==}
+  /@esbuild/freebsd-arm64@0.18.11:
+    resolution: {integrity: sha512-atEyuq6a3omEY5qAh5jIORWk8MzFnCpSTUruBgeyN9jZq1K/QI9uke0ATi3MHu4L8c59CnIi4+1jDKMuqmR71A==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [freebsd]
@@ -3054,8 +3058,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/freebsd-arm64@0.18.11:
-    resolution: {integrity: sha512-atEyuq6a3omEY5qAh5jIORWk8MzFnCpSTUruBgeyN9jZq1K/QI9uke0ATi3MHu4L8c59CnIi4+1jDKMuqmR71A==}
+  /@esbuild/freebsd-arm64@0.19.0:
+    resolution: {integrity: sha512-s7i2WcXcK0V1PJHVBe7NsGddsL62a9Vhpz2U7zapPrwKoFuxPP9jybwX8SXnropR/AOj3ppt2ern4ItblU6UQQ==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [freebsd]
@@ -3072,8 +3076,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/freebsd-x64@0.18.0:
-    resolution: {integrity: sha512-GdkJAB3ZBiYnie9iFO9v/CM4ko0dm5SYkUs97lBKNLHw9mo4H9IXwGNKtUztisEsmUP0IWfEi4YTWOJF3DIO4w==}
+  /@esbuild/freebsd-x64@0.18.11:
+    resolution: {integrity: sha512-XtuPrEfBj/YYYnAAB7KcorzzpGTvOr/dTtXPGesRfmflqhA4LMF0Gh/n5+a9JBzPuJ+CGk17CA++Hmr1F/gI0Q==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [freebsd]
@@ -3081,8 +3085,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/freebsd-x64@0.18.11:
-    resolution: {integrity: sha512-XtuPrEfBj/YYYnAAB7KcorzzpGTvOr/dTtXPGesRfmflqhA4LMF0Gh/n5+a9JBzPuJ+CGk17CA++Hmr1F/gI0Q==}
+  /@esbuild/freebsd-x64@0.19.0:
+    resolution: {integrity: sha512-NMdBSSdgwHCqCsucU5k1xflIIRU0qi1QZnM6+vdGy5fvxm1c8rKh50VzsWsIVTFUG3l91AtRxVwoz3Lcvy3I5w==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [freebsd]
@@ -3099,8 +3103,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-arm64@0.18.0:
-    resolution: {integrity: sha512-Mb3yCN9PXA6G5qf84UF0IEuXP22eyNlquF17Zs2F1vVBM0CtyWLYosC5JaxBxfK6EzWwB2IkPBIjMeK3ek+ItA==}
+  /@esbuild/linux-arm64@0.18.11:
+    resolution: {integrity: sha512-c6Vh2WS9VFKxKZ2TvJdA7gdy0n6eSy+yunBvv4aqNCEhSWVor1TU43wNRp2YLO9Vng2G+W94aRz+ILDSwAiYog==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [linux]
@@ -3108,8 +3112,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-arm64@0.18.11:
-    resolution: {integrity: sha512-c6Vh2WS9VFKxKZ2TvJdA7gdy0n6eSy+yunBvv4aqNCEhSWVor1TU43wNRp2YLO9Vng2G+W94aRz+ILDSwAiYog==}
+  /@esbuild/linux-arm64@0.19.0:
+    resolution: {integrity: sha512-I4zvE2srSZxRPapFnNqj+NL3sDJ1wkvEZqt903OZUlBBgigrQMvzUowvP/TTTu2OGYe1oweg5MFilfyrElIFag==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [linux]
@@ -3126,8 +3130,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-arm@0.18.0:
-    resolution: {integrity: sha512-A3Ue/oZdb43znNpeY71FrAjZF20MtnBKCGb1vXLIVg5qg8rRM1gRgn6X2ixYwATiw5dE04JnP+aV4OBf8c5ZvQ==}
+  /@esbuild/linux-arm@0.18.11:
+    resolution: {integrity: sha512-Idipz+Taso/toi2ETugShXjQ3S59b6m62KmLHkJlSq/cBejixmIydqrtM2XTvNCywFl3VC7SreSf6NV0i6sRyg==}
     engines: {node: '>=12'}
     cpu: [arm]
     os: [linux]
@@ -3135,8 +3139,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-arm@0.18.11:
-    resolution: {integrity: sha512-Idipz+Taso/toi2ETugShXjQ3S59b6m62KmLHkJlSq/cBejixmIydqrtM2XTvNCywFl3VC7SreSf6NV0i6sRyg==}
+  /@esbuild/linux-arm@0.19.0:
+    resolution: {integrity: sha512-2F1+lH7ZBcCcgxiSs8EXQV0PPJJdTNiNcXxDb61vzxTRJJkXX1I/ye9mAhfHyScXzHaEibEXg1Jq9SW586zz7w==}
     engines: {node: '>=12'}
     cpu: [arm]
     os: [linux]
@@ -3153,8 +3157,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-ia32@0.18.0:
-    resolution: {integrity: sha512-WNDXgJdfDhN6ZxHU7HgR2BRDVx9iGN8SpmebUUGdENg4MZJndGcaQuf2kCJjMwoK0+es1g61TeJzAMxfgDcmcA==}
+  /@esbuild/linux-ia32@0.18.11:
+    resolution: {integrity: sha512-S3hkIF6KUqRh9n1Q0dSyYcWmcVa9Cg+mSoZEfFuzoYXXsk6196qndrM+ZiHNwpZKi3XOXpShZZ+9dfN5ykqjjw==}
     engines: {node: '>=12'}
     cpu: [ia32]
     os: [linux]
@@ -3162,8 +3166,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-ia32@0.18.11:
-    resolution: {integrity: sha512-S3hkIF6KUqRh9n1Q0dSyYcWmcVa9Cg+mSoZEfFuzoYXXsk6196qndrM+ZiHNwpZKi3XOXpShZZ+9dfN5ykqjjw==}
+  /@esbuild/linux-ia32@0.19.0:
+    resolution: {integrity: sha512-dz2Q7+P92r1Evc8kEN+cQnB3qqPjmCrOZ+EdBTn8lEc1yN8WDgaDORQQiX+mxaijbH8npXBT9GxUqE52Gt6Y+g==}
     engines: {node: '>=12'}
     cpu: [ia32]
     os: [linux]
@@ -3180,8 +3184,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-loong64@0.18.0:
-    resolution: {integrity: sha512-PBr8Lf+L8amvheTGFVNK/0qionszkOKMq2WyfFlVz8D41v0+uSth6fYYHwtASkMk4xf+oh0vW8NYuav3/3RHuQ==}
+  /@esbuild/linux-loong64@0.18.11:
+    resolution: {integrity: sha512-MRESANOoObQINBA+RMZW+Z0TJWpibtE7cPFnahzyQHDCA9X9LOmGh68MVimZlM9J8n5Ia8lU773te6O3ILW8kw==}
     engines: {node: '>=12'}
     cpu: [loong64]
     os: [linux]
@@ -3189,8 +3193,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-loong64@0.18.11:
-    resolution: {integrity: sha512-MRESANOoObQINBA+RMZW+Z0TJWpibtE7cPFnahzyQHDCA9X9LOmGh68MVimZlM9J8n5Ia8lU773te6O3ILW8kw==}
+  /@esbuild/linux-loong64@0.19.0:
+    resolution: {integrity: sha512-IcVJovJVflih4oFahhUw+N7YgNbuMSVFNr38awb0LNzfaiIfdqIh518nOfYaNQU3aVfiJnOIRVJDSAP4k35WxA==}
     engines: {node: '>=12'}
     cpu: [loong64]
     os: [linux]
@@ -3207,8 +3211,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-mips64el@0.18.0:
-    resolution: {integrity: sha512-Lg4ygah5bwfDDCOMFsBJjSVbD1UzNwWt4f7DhpaSIFOrJqoECX1VTByKw3iSDAVRlwl1cljlfy7wlysrRZcdiQ==}
+  /@esbuild/linux-mips64el@0.18.11:
+    resolution: {integrity: sha512-qVyPIZrXNMOLYegtD1u8EBccCrBVshxMrn5MkuFc3mEVsw7CCQHaqZ4jm9hbn4gWY95XFnb7i4SsT3eflxZsUg==}
     engines: {node: '>=12'}
     cpu: [mips64el]
     os: [linux]
@@ -3216,8 +3220,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-mips64el@0.18.11:
-    resolution: {integrity: sha512-qVyPIZrXNMOLYegtD1u8EBccCrBVshxMrn5MkuFc3mEVsw7CCQHaqZ4jm9hbn4gWY95XFnb7i4SsT3eflxZsUg==}
+  /@esbuild/linux-mips64el@0.19.0:
+    resolution: {integrity: sha512-bZGRAGySMquWsKw0gIdsClwfvgbsSq/7oq5KVu1H1r9Il+WzOcfkV1hguntIuBjRVL8agI95i4AukjdAV2YpUw==}
     engines: {node: '>=12'}
     cpu: [mips64el]
     os: [linux]
@@ -3234,8 +3238,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-ppc64@0.18.0:
-    resolution: {integrity: sha512-obz/firdtou244DIjHzdKmJChwGseqA3tWGa6xPMfuq54Ca4Pp1a4ANMrqy2IZ67rfpRHcJTlb2h3rSfW6tvAA==}
+  /@esbuild/linux-ppc64@0.18.11:
+    resolution: {integrity: sha512-T3yd8vJXfPirZaUOoA9D2ZjxZX4Gr3QuC3GztBJA6PklLotc/7sXTOuuRkhE9W/5JvJP/K9b99ayPNAD+R+4qQ==}
     engines: {node: '>=12'}
     cpu: [ppc64]
     os: [linux]
@@ -3243,8 +3247,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-ppc64@0.18.11:
-    resolution: {integrity: sha512-T3yd8vJXfPirZaUOoA9D2ZjxZX4Gr3QuC3GztBJA6PklLotc/7sXTOuuRkhE9W/5JvJP/K9b99ayPNAD+R+4qQ==}
+  /@esbuild/linux-ppc64@0.19.0:
+    resolution: {integrity: sha512-3LC6H5/gCDorxoRBUdpLV/m7UthYSdar0XcCu+ypycQxMS08MabZ06y1D1yZlDzL/BvOYliRNRWVG/YJJvQdbg==}
     engines: {node: '>=12'}
     cpu: [ppc64]
     os: [linux]
@@ -3261,8 +3265,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-riscv64@0.18.0:
-    resolution: {integrity: sha512-UkuBdxQsxi39wWrRLMOkJl//82/hpQw79TD+OBLw3IBYyVQ4Wfvpe56RfEGK/j439sIm79ccnD5RUNQceHvZdQ==}
+  /@esbuild/linux-riscv64@0.18.11:
+    resolution: {integrity: sha512-evUoRPWiwuFk++snjH9e2cAjF5VVSTj+Dnf+rkO/Q20tRqv+644279TZlPK8nUGunjPAtQRCj1jQkDAvL6rm2w==}
     engines: {node: '>=12'}
     cpu: [riscv64]
     os: [linux]
@@ -3270,8 +3274,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-riscv64@0.18.11:
-    resolution: {integrity: sha512-evUoRPWiwuFk++snjH9e2cAjF5VVSTj+Dnf+rkO/Q20tRqv+644279TZlPK8nUGunjPAtQRCj1jQkDAvL6rm2w==}
+  /@esbuild/linux-riscv64@0.19.0:
+    resolution: {integrity: sha512-jfvdKjWk+Cp2sgLtEEdSHXO7qckrw2B2eFBaoRdmfhThqZs29GMMg7q/LsQpybA7BxCLLEs4di5ucsWzZC5XPA==}
     engines: {node: '>=12'}
     cpu: [riscv64]
     os: [linux]
@@ -3288,8 +3292,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-s390x@0.18.0:
-    resolution: {integrity: sha512-MgyuC30oYB465hyAqsb3EH6Y4zTeqqgixRAOpsDNMCelyDiW9ZDPXvMPfBgCZGJlDZFGKDm2I9ou8E3VI+v7pg==}
+  /@esbuild/linux-s390x@0.18.11:
+    resolution: {integrity: sha512-/SlRJ15XR6i93gRWquRxYCfhTeC5PdqEapKoLbX63PLCmAkXZHY2uQm2l9bN0oPHBsOw2IswRZctMYS0MijFcg==}
     engines: {node: '>=12'}
     cpu: [s390x]
     os: [linux]
@@ -3297,8 +3301,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-s390x@0.18.11:
-    resolution: {integrity: sha512-/SlRJ15XR6i93gRWquRxYCfhTeC5PdqEapKoLbX63PLCmAkXZHY2uQm2l9bN0oPHBsOw2IswRZctMYS0MijFcg==}
+  /@esbuild/linux-s390x@0.19.0:
+    resolution: {integrity: sha512-ofcucfNLkoXmcnJaw9ugdEOf40AWKGt09WBFCkpor+vFJVvmk/8OPjl/qRtks2Z7BuZbG3ztJuK1zS9z5Cgx9A==}
     engines: {node: '>=12'}
     cpu: [s390x]
     os: [linux]
@@ -3315,8 +3319,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-x64@0.18.0:
-    resolution: {integrity: sha512-oLLKU3F4pKWAsNmfi7Rd4qkj0qvg1S923ZjlcISA2IMgHsODA9xzwerqWayI5nOhLGgKXviDofn9exTeA4EUQQ==}
+  /@esbuild/linux-x64@0.18.11:
+    resolution: {integrity: sha512-xcncej+wF16WEmIwPtCHi0qmx1FweBqgsRtEL1mSHLFR6/mb3GEZfLQnx+pUDfRDEM4DQF8dpXIW7eDOZl1IbA==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [linux]
@@ -3324,8 +3328,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-x64@0.18.11:
-    resolution: {integrity: sha512-xcncej+wF16WEmIwPtCHi0qmx1FweBqgsRtEL1mSHLFR6/mb3GEZfLQnx+pUDfRDEM4DQF8dpXIW7eDOZl1IbA==}
+  /@esbuild/linux-x64@0.19.0:
+    resolution: {integrity: sha512-Fpf7zNDBti3xrQKQKLdXT0hTyOxgFdRJIMtNy8x1az9ATR9/GJ1brYbB/GLWoXhKiHsoWs+2DLkFVNNMTCLEwA==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [linux]
@@ -3342,8 +3346,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/netbsd-x64@0.18.0:
-    resolution: {integrity: sha512-BEfJrZsZ/gMtpS2vC+2YoFGxmfLKiYQvj8lZrBfjKzQrwyMpH53CzQJj9ypOx9ldjM/MVxf9i9wi/rS4BWV7WA==}
+  /@esbuild/netbsd-x64@0.18.11:
+    resolution: {integrity: sha512-aSjMHj/F7BuS1CptSXNg6S3M4F3bLp5wfFPIJM+Km2NfIVfFKhdmfHF9frhiCLIGVzDziggqWll0B+9AUbud/Q==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [netbsd]
@@ -3351,8 +3355,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/netbsd-x64@0.18.11:
-    resolution: {integrity: sha512-aSjMHj/F7BuS1CptSXNg6S3M4F3bLp5wfFPIJM+Km2NfIVfFKhdmfHF9frhiCLIGVzDziggqWll0B+9AUbud/Q==}
+  /@esbuild/netbsd-x64@0.19.0:
+    resolution: {integrity: sha512-AMQAp/5oENgDOvVhvOlbhVe1pWii7oFAMRHlmTjSEMcpjTpIHtFXhv9uAFgUERHm3eYtNvS9Vf+gT55cwuI6Aw==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [netbsd]
@@ -3369,8 +3373,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/openbsd-x64@0.18.0:
-    resolution: {integrity: sha512-eDolHeG3REnEIgwl7Lw2S0znUMY4PFVtCAzLKqdRO0HD+iPKJR8n2MEJJyhPdUjcobo8SEQ2AG6gtYfft9VFHg==}
+  /@esbuild/openbsd-x64@0.18.11:
+    resolution: {integrity: sha512-tNBq+6XIBZtht0xJGv7IBB5XaSyvYPCm1PxJ33zLQONdZoLVM0bgGqUrXnJyiEguD9LU4AHiu+GCXy/Hm9LsdQ==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [openbsd]
@@ -3378,8 +3382,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/openbsd-x64@0.18.11:
-    resolution: {integrity: sha512-tNBq+6XIBZtht0xJGv7IBB5XaSyvYPCm1PxJ33zLQONdZoLVM0bgGqUrXnJyiEguD9LU4AHiu+GCXy/Hm9LsdQ==}
+  /@esbuild/openbsd-x64@0.19.0:
+    resolution: {integrity: sha512-fDztEve1QUs3h/Dw2AUmBlWGkNQbhDoD05ppm5jKvzQv+HVuV13so7m5RYeiSMIC2XQy7PAjZh+afkxAnCRZxA==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [openbsd]
@@ -3396,8 +3400,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/sunos-x64@0.18.0:
-    resolution: {integrity: sha512-kl7vONem2wmRQke015rSrknmc6TYXKVNs2quiVTdvkSufscrjegpNqKyP7v6EHqXtvkzrB92ySjpfzazKG627g==}
+  /@esbuild/sunos-x64@0.18.11:
+    resolution: {integrity: sha512-kxfbDOrH4dHuAAOhr7D7EqaYf+W45LsAOOhAet99EyuxxQmjbk8M9N4ezHcEiCYPaiW8Dj3K26Z2V17Gt6p3ng==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [sunos]
@@ -3405,8 +3409,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/sunos-x64@0.18.11:
-    resolution: {integrity: sha512-kxfbDOrH4dHuAAOhr7D7EqaYf+W45LsAOOhAet99EyuxxQmjbk8M9N4ezHcEiCYPaiW8Dj3K26Z2V17Gt6p3ng==}
+  /@esbuild/sunos-x64@0.19.0:
+    resolution: {integrity: sha512-bKZzJ2/rvUjDzA5Ddyva2tMk89WzNJEibZEaq+wY6SiqPlwgFbqyQLimouxLHiHh1itb5P3SNCIF1bc2bw5H9w==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [sunos]
@@ -3423,8 +3427,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/win32-arm64@0.18.0:
-    resolution: {integrity: sha512-WohArFQ3HStBu9MAsx3JUk2wfC2v8QoadnMoNfx3Y26ac54tD/wQhPzw4QOzQbSqOFqzIMLKWbxindTsko+9OA==}
+  /@esbuild/win32-arm64@0.18.11:
+    resolution: {integrity: sha512-Sh0dDRyk1Xi348idbal7lZyfSkjhJsdFeuC13zqdipsvMetlGiFQNdO+Yfp6f6B4FbyQm7qsk16yaZk25LChzg==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [win32]
@@ -3432,8 +3436,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/win32-arm64@0.18.11:
-    resolution: {integrity: sha512-Sh0dDRyk1Xi348idbal7lZyfSkjhJsdFeuC13zqdipsvMetlGiFQNdO+Yfp6f6B4FbyQm7qsk16yaZk25LChzg==}
+  /@esbuild/win32-arm64@0.19.0:
+    resolution: {integrity: sha512-NQJ+4jmnA79saI+sE+QzcEls19uZkoEmdxo7r//PDOjIpX8pmoWtTnWg6XcbnO7o4fieyAwb5U2LvgWynF4diA==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [win32]
@@ -3450,8 +3454,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/win32-ia32@0.18.0:
-    resolution: {integrity: sha512-SdnpSOxpeoewYCurmfLVepLuhOAphWkGTxWHifFjp37DaUHwF1fpGzyxhZoXMt5MKGuAO5aE3c5668YYtno+9Q==}
+  /@esbuild/win32-ia32@0.18.11:
+    resolution: {integrity: sha512-o9JUIKF1j0rqJTFbIoF4bXj6rvrTZYOrfRcGyL0Vm5uJ/j5CkBD/51tpdxe9lXEDouhRgdr/BYzUrDOvrWwJpg==}
     engines: {node: '>=12'}
     cpu: [ia32]
     os: [win32]
@@ -3459,8 +3463,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/win32-ia32@0.18.11:
-    resolution: {integrity: sha512-o9JUIKF1j0rqJTFbIoF4bXj6rvrTZYOrfRcGyL0Vm5uJ/j5CkBD/51tpdxe9lXEDouhRgdr/BYzUrDOvrWwJpg==}
+  /@esbuild/win32-ia32@0.19.0:
+    resolution: {integrity: sha512-uyxiZAnsfu9diHm9/rIH2soecF/HWLXYUhJKW4q1+/LLmNQ+55lRjvSUDhUmsgJtSUscRJB/3S4RNiTb9o9mCg==}
     engines: {node: '>=12'}
     cpu: [ia32]
     os: [win32]
@@ -3477,8 +3481,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/win32-x64@0.18.0:
-    resolution: {integrity: sha512-WJxImv0Pehpbo+pgg7Xrn88/b6ZzSweNHTw/2LW95JjeQUIS6ToJeQmjAdud9H3yiHJmhLOmEAOvUdNLhptD0w==}
+  /@esbuild/win32-x64@0.18.11:
+    resolution: {integrity: sha512-rQI4cjLHd2hGsM1LqgDI7oOCYbQ6IBOVsX9ejuRMSze0GqXUG2ekwiKkiBU1pRGSeCqFFHxTrcEydB2Hyoz9CA==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [win32]
@@ -3486,8 +3490,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/win32-x64@0.18.11:
-    resolution: {integrity: sha512-rQI4cjLHd2hGsM1LqgDI7oOCYbQ6IBOVsX9ejuRMSze0GqXUG2ekwiKkiBU1pRGSeCqFFHxTrcEydB2Hyoz9CA==}
+  /@esbuild/win32-x64@0.19.0:
+    resolution: {integrity: sha512-jl+NXUjK2StMgqnZnqgNjZuerFG8zQqWXMBZdMMv4W/aO1ZKQaYWZBxTrtWKphkCBVEMh0wMVfGgOd2BjOZqUQ==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [win32]
@@ -4916,7 +4920,7 @@ packages:
       '@typescript-eslint/typescript-estree': 5.59.0(typescript@5.0.4)
       eslint: 8.39.0
       eslint-scope: 5.1.1
-      semver: 7.5.0
+      semver: 7.5.3
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -4936,7 +4940,7 @@ packages:
       '@typescript-eslint/typescript-estree': 5.59.0(typescript@5.1.3)
       eslint: 8.39.0
       eslint-scope: 5.1.1
-      semver: 7.5.0
+      semver: 7.5.3
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -4950,190 +4954,195 @@ packages:
       eslint-visitor-keys: 3.4.0
     dev: true
 
-  /@unocss/astro@0.54.0(rollup@2.79.1)(vite@4.3.9):
-    resolution: {integrity: sha512-Zq4GGRiXbWCipN9lUKlu3fmlrqIYu3rFoGwjL+v7VJulP8tVhiqzfbLXFKQePOVvCmiSvCKr6leuqgFA7PlPBg==}
+  /@unocss/astro@0.55.0(rollup@2.79.1)(vite@4.3.9):
+    resolution: {integrity: sha512-Qqk8zONPBBigEcUOGhEwBPIQmWnQGpjpQrSdpjs86BphKbQcqWHES1fQA83Fk2tpZ08zo0zAPDJ8VhfR+c+yqg==}
+    peerDependencies:
+      vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0
+    peerDependenciesMeta:
+      vite:
+        optional: true
     dependencies:
-      '@unocss/core': 0.54.0
-      '@unocss/reset': 0.54.0
-      '@unocss/vite': 0.54.0(rollup@2.79.1)(vite@4.3.9)
+      '@unocss/core': 0.55.0
+      '@unocss/reset': 0.55.0
+      '@unocss/vite': 0.55.0(rollup@2.79.1)(vite@4.3.9)
+      vite: 4.3.9(@types/node@18.16.0)
     transitivePeerDependencies:
       - rollup
-      - vite
     dev: true
 
-  /@unocss/cli@0.54.0(rollup@2.79.1):
-    resolution: {integrity: sha512-SuQkqJxuvC9JHUpHbFQY5r+6/FoF0j4zTwY25POlr9SIz3CFrdn4tDndxvhClap9d6wVHKSbHBP9EY0fA2SQzw==}
+  /@unocss/cli@0.55.0(rollup@2.79.1):
+    resolution: {integrity: sha512-K8PR4UydtTfT8rMynDcNQKk1WWI97312kZYjBLHUlrJkNbSgcmpU3wfREIqvCSgPg61ttZAgE5uI6omf8FudtA==}
     engines: {node: '>=14'}
     hasBin: true
     dependencies:
       '@ampproject/remapping': 2.2.1
       '@rollup/pluginutils': 5.0.2(rollup@2.79.1)
-      '@unocss/config': 0.54.0
-      '@unocss/core': 0.54.0
-      '@unocss/preset-uno': 0.54.0
+      '@unocss/config': 0.55.0
+      '@unocss/core': 0.55.0
+      '@unocss/preset-uno': 0.55.0
       cac: 6.7.14
       chokidar: 3.5.3
       colorette: 2.0.20
       consola: 3.2.3
-      fast-glob: 3.3.0
-      magic-string: 0.30.1
+      fast-glob: 3.3.1
+      magic-string: 0.30.2
       pathe: 1.1.1
       perfect-debounce: 1.0.0
     transitivePeerDependencies:
       - rollup
     dev: true
 
-  /@unocss/config@0.54.0:
-    resolution: {integrity: sha512-FT0zOJCR2qr5P08msNovsJ4Qx+P4rXoYlK2zt/hgLKiFRIUKxnwSBDvapqmW6vo3vzOsdmBBO0YKpaZJ877F8A==}
+  /@unocss/config@0.55.0:
+    resolution: {integrity: sha512-N1o49aqqMP8UTmFZKsqN+CZFxoiUbatTYdPixCGErI5H6jA0VByVU7RI3Dr+Lk3PTOxbmZUunaDaWZP3iT4X5w==}
     engines: {node: '>=14'}
     dependencies:
-      '@unocss/core': 0.54.0
-      unconfig: 0.3.9
+      '@unocss/core': 0.55.0
+      unconfig: 0.3.10
     dev: true
 
-  /@unocss/core@0.54.0:
-    resolution: {integrity: sha512-iHfJJ8U+pVhMrbVpzMb0GImZUJu3Xmp165Q5Qr44hGOEzcMdvdBxbMSSl2VBKjRsEuNudNVhh7XJAyUcKxnSWg==}
+  /@unocss/core@0.55.0:
+    resolution: {integrity: sha512-TcTugpuhsv6OwMsP3iFIG8FVc9N5JzkojIGNAKF8I2WBftZ//3QcpEHiHc1mH3MlPYfJgUvCcT6/Gad55qmHzg==}
     dev: true
 
-  /@unocss/extractor-arbitrary-variants@0.54.0:
-    resolution: {integrity: sha512-luJTF3TnXFbMZ2Gau56p0uRsR+yIUbvHbT6ag6mvv0TvUsnhEFsMUdkXVJ1arp0duIl/dg0r1drL/Ax75RszNw==}
+  /@unocss/extractor-arbitrary-variants@0.55.0:
+    resolution: {integrity: sha512-FCel+gJ3N8C/361yQ3gYTmbCjX3DXQ+LdxBiAawapbtTA4eXw55/f7cpiiWcHoouCRrWIEMOQN5DskAJvmMaTw==}
     dependencies:
-      '@unocss/core': 0.54.0
+      '@unocss/core': 0.55.0
     dev: true
 
-  /@unocss/inspector@0.54.0:
-    resolution: {integrity: sha512-D3yVO7zE4NY/sARiNCUXQC7HPQZhEy7U1mSZEPc+vsVKx3nJJuRMqK9qo60SV4AZuxnd8WhL0T00W7cjVldzRw==}
+  /@unocss/inspector@0.55.0:
+    resolution: {integrity: sha512-wIkypLsBUA76A9cpyf/VtbVU7TLJO9HETEVMZytxEyVpq4KVNJBwNLUGWQ07IOc0oRTX+HJKiQK9/bLnIYMCHA==}
     dependencies:
       gzip-size: 6.0.0
       sirv: 2.0.3
     dev: true
 
-  /@unocss/postcss@0.54.0(postcss@8.4.27):
-    resolution: {integrity: sha512-t1PmIkp2Qa9F/9swfCVCXMuheQxd1ddrcvf0+d4fOckpFF8YhvOi+WfMoZW4YFwoCmG5pvDg4VYgKbDunGHhRg==}
+  /@unocss/postcss@0.55.0(postcss@8.4.27):
+    resolution: {integrity: sha512-qytqO8riNLpy1m6qVfISVHw3dwNRHgpxcUaufSN7P8lgsbOimwh2nRE35f/HoKS1VV+5JVsVaHmUFQVxwiW6cw==}
     engines: {node: '>=14'}
     peerDependencies:
       postcss: ^8.4.21
     dependencies:
-      '@unocss/config': 0.54.0
-      '@unocss/core': 0.54.0
+      '@unocss/config': 0.55.0
+      '@unocss/core': 0.55.0
       css-tree: 2.3.1
-      fast-glob: 3.3.0
-      magic-string: 0.30.1
+      fast-glob: 3.3.1
+      magic-string: 0.30.2
       postcss: 8.4.27
     dev: true
 
-  /@unocss/preset-attributify@0.54.0:
-    resolution: {integrity: sha512-5Ar1n7LHKF6z1BF9N5CR8jjl9TXrVktTDd+Ldyia69jDLi+stVhM9AOGEDE8wbDkLKwv9CK5XhvyPCazGHrG+A==}
+  /@unocss/preset-attributify@0.55.0:
+    resolution: {integrity: sha512-AbqoamJLsFqJih1MMyxEslLScWSpOdlTbF9R+gSnrWwkGZDuZszcyTDbXrhCPWPUkihR7NY9XQSKxUkTb6MJJg==}
     dependencies:
-      '@unocss/core': 0.54.0
+      '@unocss/core': 0.55.0
     dev: true
 
-  /@unocss/preset-icons@0.54.0:
-    resolution: {integrity: sha512-WHdkpMzj6tohIkCc/+mEOzn0Yppqoz3y5zbI3WsDqA2/QFNSXx4haWcjV5iJI42uGcLXRp4K3l9JV3EL+oAxbg==}
+  /@unocss/preset-icons@0.55.0:
+    resolution: {integrity: sha512-BeseXUz2WFRztLtfblGhpFBJkgKi8k7tKPyEx/QX2I/xhQNsXqfWqeiCEVLxrEI3HxXOZPV1G4idCCbBiZQ3ww==}
     dependencies:
       '@iconify/utils': 2.1.7
-      '@unocss/core': 0.54.0
+      '@unocss/core': 0.55.0
       ofetch: 1.1.1
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@unocss/preset-mini@0.54.0:
-    resolution: {integrity: sha512-y+BnGpQAGC3ZWWZfXnsvUuTTO2rNnakHx4jIyf1cv7rw5oo7jL+ONb8stKqlmLGCzlQUKjG1xp+DGuKSVnRXBw==}
+  /@unocss/preset-mini@0.55.0:
+    resolution: {integrity: sha512-zAMLmpCBXE36CDCrMtvxNp7lN9mk5QpArPpLekR3lPZ7NTAYSxHkieCJ0TryeOYWlt1sBdrOFE8X0cQCyG96Zg==}
     dependencies:
-      '@unocss/core': 0.54.0
-      '@unocss/extractor-arbitrary-variants': 0.54.0
+      '@unocss/core': 0.55.0
+      '@unocss/extractor-arbitrary-variants': 0.55.0
     dev: true
 
-  /@unocss/preset-tagify@0.54.0:
-    resolution: {integrity: sha512-FTIZc0vMoX9+fcjPYMWALpCQp3cZQCFzR05CVJapvymxb6zl5eZq7e+tpvrmU9ZPSOdG+eHTd3SxhjeJSwh15g==}
+  /@unocss/preset-tagify@0.55.0:
+    resolution: {integrity: sha512-crvJAZpG2ge9Lq51vpWANiB3BKv8Vs8sjplwRfUVRCYMiN7ZNzq9bNzUwTXhJXmRJ4LVjTSFciKPQR7fCjUScA==}
     dependencies:
-      '@unocss/core': 0.54.0
+      '@unocss/core': 0.55.0
     dev: true
 
-  /@unocss/preset-typography@0.54.0:
-    resolution: {integrity: sha512-QqHmC49nDgYeoOCMZp1OPn6R7ISIb2LMpSq81iuuFDeYO8J+JTBWe+Z1TZhVRAXwc9rsVZeUWW6PqoBGP9QCOw==}
+  /@unocss/preset-typography@0.55.0:
+    resolution: {integrity: sha512-M4fJUEzkBqjxEUIDbwoWb00hjPbpwZKDOcB81S0F+xE3SVu1pQj8KgymhxaJvz+FxGZRajnJJ9esaGPIrzG2gQ==}
     dependencies:
-      '@unocss/core': 0.54.0
-      '@unocss/preset-mini': 0.54.0
+      '@unocss/core': 0.55.0
+      '@unocss/preset-mini': 0.55.0
     dev: true
 
-  /@unocss/preset-uno@0.54.0:
-    resolution: {integrity: sha512-09/sthjGLDNMr/Cayu0Gy9jTMSxUuTfetWnM3jkByNidhfuzMW26eaMhxTrbUd28H8Titt6M+WgbJ7Gi0lQtZA==}
+  /@unocss/preset-uno@0.55.0:
+    resolution: {integrity: sha512-iYGdE/MQLAvpQkyQ8f3aolC9NK9NtrG87LfQmiKu/RpzjghDlTY8VTuWIDcdIk80zTtOxRtitLqGEsoDl8WnuA==}
     dependencies:
-      '@unocss/core': 0.54.0
-      '@unocss/preset-mini': 0.54.0
-      '@unocss/preset-wind': 0.54.0
+      '@unocss/core': 0.55.0
+      '@unocss/preset-mini': 0.55.0
+      '@unocss/preset-wind': 0.55.0
     dev: true
 
-  /@unocss/preset-web-fonts@0.54.0:
-    resolution: {integrity: sha512-3x1SDbJ2omwNNc3eK19zOdNU6moJg4SEr09GkeV4MMHrMXM6BHW2mEJYFSVgmTVD1RN4LZuoy/gTHMWpJhTuzw==}
+  /@unocss/preset-web-fonts@0.55.0:
+    resolution: {integrity: sha512-nFA5q0WinD/z7Iqv3uJQ8sTK7mQf18qbcFKmgWZ+QZXdI/wACOfExd6futsXj5EdACJwsEixYJe4DURTsD5XtA==}
     dependencies:
-      '@unocss/core': 0.54.0
+      '@unocss/core': 0.55.0
       ofetch: 1.1.1
     dev: true
 
-  /@unocss/preset-wind@0.54.0:
-    resolution: {integrity: sha512-SO971KQOYzM5IKwGDBve+EWBKevU1T0mK20g17BHxPI++ubHPWRRQIh/xxHyew592taBFWK6Q75fcbOgIodx4w==}
+  /@unocss/preset-wind@0.55.0:
+    resolution: {integrity: sha512-H9vNXdEJVQx1UO367V3RInAUj4qrsPCXm914RNC4D7qojOuPQlipW0YD5WFklcXeI/k0f1B30VjDYGZhV0jykg==}
     dependencies:
-      '@unocss/core': 0.54.0
-      '@unocss/preset-mini': 0.54.0
+      '@unocss/core': 0.55.0
+      '@unocss/preset-mini': 0.55.0
     dev: true
 
-  /@unocss/reset@0.54.0:
-    resolution: {integrity: sha512-zxvr96hVsmvJtxCLatLSCc67RBEgqvVDhEtkIFxIz5oCJzxvipJTGdKxM4F6Akyzx1A+q7zM8dimqvmC6D5Idw==}
+  /@unocss/reset@0.55.0:
+    resolution: {integrity: sha512-TzpcOCIr16IbFxQ4vrSfEV+A8k0N4mJkhl7J3SZfAxBpNDBKAWDB6VBW9iEQY5aBYDLN3wRx1LskgEoubqBCPQ==}
     dev: true
 
-  /@unocss/scope@0.54.0:
-    resolution: {integrity: sha512-47M3y3sl512BWZL5/aLrGPglQIRUjQrIW+WVVh3uzwIGVnDNHlxIhcHQUXXJuf8SLduXoIvcZQTfJt+jSXeuhA==}
+  /@unocss/scope@0.55.0:
+    resolution: {integrity: sha512-44xgHoklh2BWWuOkA0ZL1qgr4t/DGnynj3UI8K8YP+PClFFMZ/T+kfhsLBDOrS2a4ytzgh17cTGhjAc3cTwiEA==}
     dev: true
 
-  /@unocss/transformer-attributify-jsx-babel@0.54.0:
-    resolution: {integrity: sha512-+YWhyReh6JZvGiYFZ61tyqkKOc/Tn+hyYaO7VP+G2IvJqtjTwzAuyxANHimCle7O4GLodouiHPe3lKscVFt0vg==}
+  /@unocss/transformer-attributify-jsx-babel@0.55.0:
+    resolution: {integrity: sha512-gsPuD56gNw47AFgOmdpqT9+gdisLXKnPccF4ozZoqGOv3Hy2MPOc+Dkwk7qkDzzSdC39G5Aq09z8X9R2vU64XQ==}
     dependencies:
-      '@unocss/core': 0.54.0
+      '@unocss/core': 0.55.0
     dev: true
 
-  /@unocss/transformer-attributify-jsx@0.54.0:
-    resolution: {integrity: sha512-in5IglhFqY/3GFe7IZA7g5Q9fskjiWAZiKtCTp5vFExagq1d3Tr9VIOA98SEXBrpXXIh3lKbTiY0NusJRU3K2Q==}
+  /@unocss/transformer-attributify-jsx@0.55.0:
+    resolution: {integrity: sha512-17/4I2Uqj44JJ4iv3e/mBH1DsWvyVbbbA9JivS/iBPferdFTPtt4Buddhm7bkx1tE86KYZcokVZ8N5RA2zu2UQ==}
     dependencies:
-      '@unocss/core': 0.54.0
+      '@unocss/core': 0.55.0
     dev: true
 
-  /@unocss/transformer-compile-class@0.54.0:
-    resolution: {integrity: sha512-WK1fC+iDOl7Z7fO2ids6nWiMXMPHEfwMOs5dbv5lBz9UTrY1kpObToBsm3EfzhR6vwOTgld1UzpKAs3zCqZoKg==}
+  /@unocss/transformer-compile-class@0.55.0:
+    resolution: {integrity: sha512-aH2SWXqOGJAEuNS1S/fIfs0gFwnakxgG83PCS40uNbEiLv/iG0HuALaQbVvyWHo3O7xLoMa7os9p72Q2amaVQw==}
     dependencies:
-      '@unocss/core': 0.54.0
+      '@unocss/core': 0.55.0
     dev: true
 
-  /@unocss/transformer-directives@0.54.0:
-    resolution: {integrity: sha512-DJ9B5TSxScoj4B1C8H3qeUIfNGjUPuM42Lvl2exDEk4RhA/IwVePnCAjTl8UsHTDI9z+6H37v4p8j8srPrzEmQ==}
+  /@unocss/transformer-directives@0.55.0:
+    resolution: {integrity: sha512-bWfAOqQxzy5vIul/jgXN2b0APAk9tWKeTN9Rh4FWvz+dI0P7cBc3rHVEC5qM3i9xwYObtjQcNZjEfJpyeapnzg==}
     dependencies:
-      '@unocss/core': 0.54.0
+      '@unocss/core': 0.55.0
       css-tree: 2.3.1
     dev: true
 
-  /@unocss/transformer-variant-group@0.54.0:
-    resolution: {integrity: sha512-qwviBwjBKhbXYK0T1wNuM3weY+RJbmrWmKqWTldXAuZDf0q06KAa4jQC8FF1YXhq5/Z6tn2MW2GFPVWd/8nPHQ==}
+  /@unocss/transformer-variant-group@0.55.0:
+    resolution: {integrity: sha512-0VSvQpEmN8/Y+CfVMhL1+u1+FjmDFtviqKz8aaLFBapC/hnxbkAQTZRVv7mFNvBhBVUHXZOz7LASR4q9RtIeVA==}
     dependencies:
-      '@unocss/core': 0.54.0
+      '@unocss/core': 0.55.0
     dev: true
 
-  /@unocss/vite@0.54.0(rollup@2.79.1)(vite@4.3.9):
-    resolution: {integrity: sha512-lABmJKYs/yNfZZSs3xwVhBZwNhfLaYcdKxPAopJ8MKiUqECdWvHqLvklKQvLttZpN3dQUmGTQLblM+55IodKEw==}
+  /@unocss/vite@0.55.0(rollup@2.79.1)(vite@4.3.9):
+    resolution: {integrity: sha512-qUOqJzSnztCQFXOCNOCqpwwziVMmygXmdbuaqNAmkAg2EzoMSacQKzmLIj49UU0l+iykf2mDh8DmQxpnEU2JSQ==}
     peerDependencies:
       vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0
     dependencies:
       '@ampproject/remapping': 2.2.1
       '@rollup/pluginutils': 5.0.2(rollup@2.79.1)
-      '@unocss/config': 0.54.0
-      '@unocss/core': 0.54.0
-      '@unocss/inspector': 0.54.0
-      '@unocss/scope': 0.54.0
-      '@unocss/transformer-directives': 0.54.0
+      '@unocss/config': 0.55.0
+      '@unocss/core': 0.55.0
+      '@unocss/inspector': 0.55.0
+      '@unocss/scope': 0.55.0
+      '@unocss/transformer-directives': 0.55.0
       chokidar: 3.5.3
-      fast-glob: 3.3.0
-      magic-string: 0.30.1
+      fast-glob: 3.3.1
+      magic-string: 0.30.2
       vite: 4.3.9(@types/node@18.16.0)
     transitivePeerDependencies:
       - rollup
@@ -5180,15 +5189,15 @@ packages:
       vue: 3.3.4
     dev: true
 
-  /@vitest/coverage-v8@0.33.0(vitest@0.33.0):
-    resolution: {integrity: sha512-Rj5IzoLF7FLj6yR7TmqsfRDSeaFki6NAJ/cQexqhbWkHEV2htlVGrmuOde3xzvFsCbLCagf4omhcIaVmfU8Okg==}
+  /@vitest/coverage-v8@0.34.0(vitest@0.34.0):
+    resolution: {integrity: sha512-rUFY9xX6nnrFvVfTDjlEaOFzfHqolUoA+Unz356T38W100QA+NiaekCFq/3XB/LXBISaFreCsVjAbPV3hjV7Jg==}
     peerDependencies:
       vitest: '>=0.32.0 <1'
     dependencies:
       '@ampproject/remapping': 2.2.1
       '@bcoe/v8-coverage': 0.2.3
       istanbul-lib-coverage: 3.2.0
-      istanbul-lib-report: 3.0.0
+      istanbul-lib-report: 3.0.1
       istanbul-lib-source-maps: 4.0.1
       istanbul-reports: 3.1.5
       magic-string: 0.30.1
@@ -5196,58 +5205,58 @@ packages:
       std-env: 3.3.3
       test-exclude: 6.0.0
       v8-to-istanbul: 9.1.0
-      vitest: 0.33.0(@vitest/ui@0.33.0)(jsdom@22.0.0)
+      vitest: 0.34.0(@vitest/ui@0.34.0)(jsdom@22.0.0)
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@vitest/expect@0.33.0:
-    resolution: {integrity: sha512-sVNf+Gla3mhTCxNJx+wJLDPp/WcstOe0Ksqz4Vec51MmgMth/ia0MGFEkIZmVGeTL5HtjYR4Wl/ZxBxBXZJTzQ==}
+  /@vitest/expect@0.34.0:
+    resolution: {integrity: sha512-d1ZU0XomWFAFyYIc6uNuY0N8NJIWESyO/6ZmwLvlHZw0GevH4AEEpq178KjXIvSCrbHN0GnzYzitd0yjfy7+Ow==}
     dependencies:
-      '@vitest/spy': 0.33.0
-      '@vitest/utils': 0.33.0
+      '@vitest/spy': 0.34.0
+      '@vitest/utils': 0.34.0
       chai: 4.3.7
     dev: true
 
-  /@vitest/runner@0.33.0:
-    resolution: {integrity: sha512-UPfACnmCB6HKRHTlcgCoBh6ppl6fDn+J/xR8dTufWiKt/74Y9bHci5CKB8tESSV82zKYtkBJo9whU3mNvfaisg==}
+  /@vitest/runner@0.34.0:
+    resolution: {integrity: sha512-xaqM+oArJothtYXzy/dwu/iHe93Khq5QkvnYbzTxiLA0enD2peft1cask3yE6cJpwMkr7C2D1uMJwnTt4mquDw==}
     dependencies:
-      '@vitest/utils': 0.33.0
+      '@vitest/utils': 0.34.0
       p-limit: 4.0.0
       pathe: 1.1.1
     dev: true
 
-  /@vitest/snapshot@0.33.0:
-    resolution: {integrity: sha512-tJjrl//qAHbyHajpFvr8Wsk8DIOODEebTu7pgBrP07iOepR5jYkLFiqLq2Ltxv+r0uptUb4izv1J8XBOwKkVYA==}
+  /@vitest/snapshot@0.34.0:
+    resolution: {integrity: sha512-eGN5XBZHYOghxCOQbf8dcn6/3g7IW77GOOOC/mNFYwRXsPeoQgcgWnhj+6wgJ04pVv25wpxWL9jUkzaQ7LoFtg==}
     dependencies:
       magic-string: 0.30.1
       pathe: 1.1.1
       pretty-format: 29.5.0
     dev: true
 
-  /@vitest/spy@0.33.0:
-    resolution: {integrity: sha512-Kv+yZ4hnH1WdiAkPUQTpRxW8kGtH8VRTnus7ZTGovFYM1ZezJpvGtb9nPIjPnptHbsyIAxYZsEpVPYgtpjGnrg==}
+  /@vitest/spy@0.34.0:
+    resolution: {integrity: sha512-0SZaWrQvL9ZiF/uJvyWSvsKjfuMvD1M6dE5BbE4Dmt8Vh3k4htwCV8g3ce8YOYmJSxkbh6TNOpippD6NVsxW6w==}
     dependencies:
       tinyspy: 2.1.1
     dev: true
 
-  /@vitest/ui@0.33.0(vitest@0.33.0):
-    resolution: {integrity: sha512-7gbAjLqt30R4bodkJAutdpy4ncv+u5IKTHYTow1c2q+FOxZUC9cKOSqMUxjwaaTwLN+EnDnmXYPtg3CoahaUzQ==}
+  /@vitest/ui@0.34.0(vitest@0.34.0):
+    resolution: {integrity: sha512-+MPvbOiKrOWm1JL8hfROybzTB0Y6gWbMCQZlEI67M1+a1iTjaowXTeYSN4pGu0SubeGJw0JTrZ/Z/sRLmb9wLw==}
     peerDependencies:
       vitest: '>=0.30.1 <1'
     dependencies:
-      '@vitest/utils': 0.33.0
+      '@vitest/utils': 0.34.0
       fast-glob: 3.3.0
       fflate: 0.8.0
       flatted: 3.2.7
       pathe: 1.1.1
       picocolors: 1.0.0
       sirv: 2.0.3
-      vitest: 0.33.0(@vitest/ui@0.33.0)(jsdom@22.0.0)
+      vitest: 0.34.0(@vitest/ui@0.34.0)(jsdom@22.0.0)
     dev: true
 
-  /@vitest/utils@0.33.0:
-    resolution: {integrity: sha512-pF1w22ic965sv+EN6uoePkAOTkAPWM03Ri/jXNyMIKBb/XHLDPfhLvf/Fa9g0YECevAIz56oVYXhodLvLQ/awA==}
+  /@vitest/utils@0.34.0:
+    resolution: {integrity: sha512-IktrDLhBKf3dEUUxH+lcHiPnaw952+GdGvoxg99liMscgP6IePf6LuMY7B9dEIHkFunB1R8VMR/wmI/4UGg1aw==}
     dependencies:
       diff-sequences: 29.4.3
       loupe: 2.3.6
@@ -5704,7 +5713,7 @@ packages:
       webpack: 4.x.x || 5.x.x
       webpack-cli: 4.x.x
     dependencies:
-      webpack: 5.75.0(esbuild@0.18.0)(webpack-cli@4.10.0)
+      webpack: 5.75.0(esbuild@0.19.0)(webpack-cli@4.10.0)
       webpack-cli: 4.10.0(webpack-dev-server@4.11.1)(webpack@5.75.0)
     dev: true
 
@@ -5817,12 +5826,12 @@ packages:
       acorn: 8.8.0
     dev: true
 
-  /acorn-jsx@5.3.2(acorn@8.8.2):
+  /acorn-jsx@5.3.2(acorn@8.10.0):
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
       acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
     dependencies:
-      acorn: 8.8.2
+      acorn: 8.10.0
     dev: true
 
   /acorn-walk@7.2.0:
@@ -6217,7 +6226,7 @@ packages:
       '@babel/core': 7.12.3
       find-cache-dir: 3.3.2
       schema-utils: 4.0.0
-      webpack: 5.75.0(esbuild@0.18.0)(webpack-cli@4.10.0)
+      webpack: 5.75.0(esbuild@0.19.0)(webpack-cli@4.10.0)
     dev: true
 
   /babel-plugin-istanbul@6.1.1:
@@ -8325,36 +8334,6 @@ packages:
       '@esbuild/win32-x64': 0.17.18
     dev: true
 
-  /esbuild@0.18.0:
-    resolution: {integrity: sha512-/2sQaWHNX2jkglLu85EjmEAR2ANpKOa1kp2rAE3wjKcuYjEHFlB+D60tn6W9BRgHiAQEKYtl4hEygKWothfDEA==}
-    engines: {node: '>=12'}
-    hasBin: true
-    requiresBuild: true
-    optionalDependencies:
-      '@esbuild/android-arm': 0.18.0
-      '@esbuild/android-arm64': 0.18.0
-      '@esbuild/android-x64': 0.18.0
-      '@esbuild/darwin-arm64': 0.18.0
-      '@esbuild/darwin-x64': 0.18.0
-      '@esbuild/freebsd-arm64': 0.18.0
-      '@esbuild/freebsd-x64': 0.18.0
-      '@esbuild/linux-arm': 0.18.0
-      '@esbuild/linux-arm64': 0.18.0
-      '@esbuild/linux-ia32': 0.18.0
-      '@esbuild/linux-loong64': 0.18.0
-      '@esbuild/linux-mips64el': 0.18.0
-      '@esbuild/linux-ppc64': 0.18.0
-      '@esbuild/linux-riscv64': 0.18.0
-      '@esbuild/linux-s390x': 0.18.0
-      '@esbuild/linux-x64': 0.18.0
-      '@esbuild/netbsd-x64': 0.18.0
-      '@esbuild/openbsd-x64': 0.18.0
-      '@esbuild/sunos-x64': 0.18.0
-      '@esbuild/win32-arm64': 0.18.0
-      '@esbuild/win32-ia32': 0.18.0
-      '@esbuild/win32-x64': 0.18.0
-    dev: true
-
   /esbuild@0.18.11:
     resolution: {integrity: sha512-i8u6mQF0JKJUlGR3OdFLKldJQMMs8OqM9Cc3UCi9XXziJ9WERM5bfkHaEAy0YAvPRMgqSW55W7xYn84XtEFTtA==}
     engines: {node: '>=12'}
@@ -8385,6 +8364,36 @@ packages:
       '@esbuild/win32-x64': 0.18.11
     dev: true
 
+  /esbuild@0.19.0:
+    resolution: {integrity: sha512-i7i8TP4vuG55bKeLyqqk5sTPu1ZjPH3wkcLvAj/0X/222iWFo3AJUYRKjbOoY6BWFMH3teizxHEdV9Su5ESl0w==}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    optionalDependencies:
+      '@esbuild/android-arm': 0.19.0
+      '@esbuild/android-arm64': 0.19.0
+      '@esbuild/android-x64': 0.19.0
+      '@esbuild/darwin-arm64': 0.19.0
+      '@esbuild/darwin-x64': 0.19.0
+      '@esbuild/freebsd-arm64': 0.19.0
+      '@esbuild/freebsd-x64': 0.19.0
+      '@esbuild/linux-arm': 0.19.0
+      '@esbuild/linux-arm64': 0.19.0
+      '@esbuild/linux-ia32': 0.19.0
+      '@esbuild/linux-loong64': 0.19.0
+      '@esbuild/linux-mips64el': 0.19.0
+      '@esbuild/linux-ppc64': 0.19.0
+      '@esbuild/linux-riscv64': 0.19.0
+      '@esbuild/linux-s390x': 0.19.0
+      '@esbuild/linux-x64': 0.19.0
+      '@esbuild/netbsd-x64': 0.19.0
+      '@esbuild/openbsd-x64': 0.19.0
+      '@esbuild/sunos-x64': 0.19.0
+      '@esbuild/win32-arm64': 0.19.0
+      '@esbuild/win32-ia32': 0.19.0
+      '@esbuild/win32-x64': 0.19.0
+    dev: true
+
   /escalade@3.1.1:
     resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
     engines: {node: '>=6'}
@@ -8645,8 +8654,8 @@ packages:
     resolution: {integrity: sha512-5yxtHSZXRSW5pvv3hAlXM5+/Oswi1AUFqBmbibKb5s6bp3rGIDkyXU6xCoyuuLhijr4SFwPrXRoZjz0AZDN9tg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
-      acorn: 8.8.2
-      acorn-jsx: 5.3.2(acorn@8.8.2)
+      acorn: 8.10.0
+      acorn-jsx: 5.3.2(acorn@8.10.0)
       eslint-visitor-keys: 3.4.0
     dev: true
 
@@ -8940,6 +8949,17 @@ packages:
       merge2: 1.4.1
       micromatch: 4.0.5
 
+  /fast-glob@3.3.1:
+    resolution: {integrity: sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==}
+    engines: {node: '>=8.6.0'}
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      '@nodelib/fs.walk': 1.2.8
+      glob-parent: 5.1.2
+      merge2: 1.4.1
+      micromatch: 4.0.5
+    dev: true
+
   /fast-json-stable-stringify@2.1.0:
     resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
     dev: true
@@ -10409,6 +10429,15 @@ packages:
       supports-color: 7.2.0
     dev: true
 
+  /istanbul-lib-report@3.0.1:
+    resolution: {integrity: sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==}
+    engines: {node: '>=10'}
+    dependencies:
+      istanbul-lib-coverage: 3.2.0
+      make-dir: 4.0.0
+      supports-color: 7.2.0
+    dev: true
+
   /istanbul-lib-source-maps@4.0.1:
     resolution: {integrity: sha512-n3s8EwkdFIJCG3BPKBYvskgXGoy88ARzvegkitk60NxRdwltLOTaH7CUiMRXvwYorl0Q712iEjcWB+fK/MrWVw==}
     engines: {node: '>=10'}
@@ -10929,6 +10958,12 @@ packages:
   /jiti@1.18.2:
     resolution: {integrity: sha512-QAdOptna2NYiSSpv0O/BwoHBSmz4YhpzJHyi+fnMRTXFjp7B8i/YG5Z8IfusxB1ufjcD2Sre1F3R+nX3fvy7gg==}
     hasBin: true
+    dev: false
+
+  /jiti@1.19.1:
+    resolution: {integrity: sha512-oVhqoRDaBXf7sjkll95LHVS6Myyyb1zaunVwk4Z0+WPSW4gjS0pl01zYKHScTuyEhQsFxV5L4DR5r+YqSyqyyg==}
+    hasBin: true
+    dev: true
 
   /jju@1.4.0:
     resolution: {integrity: sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA==}
@@ -11477,6 +11512,13 @@ packages:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.4.15
 
+  /magic-string@0.30.2:
+    resolution: {integrity: sha512-lNZdu7pewtq/ZvWUp9Wpf/x7WzMTsR26TWV03BRZrXFsv+BI6dy8RAiKgm1uM/kyR0rCfUcqvOlXKG66KhIGug==}
+    engines: {node: '>=12'}
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.4.15
+    dev: true
+
   /make-dir@3.1.0:
     resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==}
     engines: {node: '>=8'}
@@ -11484,6 +11526,13 @@ packages:
       semver: 6.3.0
     dev: true
 
+  /make-dir@4.0.0:
+    resolution: {integrity: sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==}
+    engines: {node: '>=10'}
+    dependencies:
+      semver: 7.5.3
+    dev: true
+
   /make-error@1.3.6:
     resolution: {integrity: sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==}
 
@@ -14444,7 +14493,7 @@ packages:
       iterm2-version: 4.2.0
     dev: true
 
-  /terser-webpack-plugin@5.3.6(esbuild@0.18.0)(webpack@5.75.0):
+  /terser-webpack-plugin@5.3.6(esbuild@0.19.0)(webpack@5.75.0):
     resolution: {integrity: sha512-kfLFk+PoLUQIbLmB1+PZDMRSZS99Mp+/MHqDNmMA6tOItzRt+Npe3E+fsMs5mfcM0wCtrrdU387UnV+vnSffXQ==}
     engines: {node: '>= 10.13.0'}
     peerDependencies:
@@ -14461,12 +14510,12 @@ packages:
         optional: true
     dependencies:
       '@jridgewell/trace-mapping': 0.3.17
-      esbuild: 0.18.0
+      esbuild: 0.19.0
       jest-worker: 27.5.1
       schema-utils: 3.1.1
       serialize-javascript: 6.0.0
       terser: 5.15.1
-      webpack: 5.75.0(esbuild@0.18.0)(webpack-cli@4.10.0)
+      webpack: 5.75.0(esbuild@0.19.0)(webpack-cli@4.10.0)
     dev: true
 
   /terser@5.15.1:
@@ -14475,7 +14524,7 @@ packages:
     hasBin: true
     dependencies:
       '@jridgewell/source-map': 0.3.2
-      acorn: 8.8.2
+      acorn: 8.10.0
       commander: 2.20.3
       source-map-support: 0.5.21
     dev: true
@@ -14564,8 +14613,8 @@ packages:
     resolution: {integrity: sha512-kRwSG8Zx4tjF9ZiyH4bhaebu+EDz1BOx9hOigYHlUW4xxI/wKIUQUqo018UlU4ar6ATPBsaMrdbKZ+tmPdohFA==}
     dev: true
 
-  /tinypool@0.6.0:
-    resolution: {integrity: sha512-FdswUUo5SxRizcBc6b1GSuLpLjisa8N8qMyYoP3rl+bym+QauhtJP5bvZY1ytt8krKGmMLYIRl36HBZfeAoqhQ==}
+  /tinypool@0.7.0:
+    resolution: {integrity: sha512-zSYNUlYSMhJ6Zdou4cJwo/p7w5nmAH17GRfU/ui3ctvjXFErXXkruT4MWW6poDeXgCaIBlGLrfU6TbTXxyGMww==}
     engines: {node: '>=14.0.0'}
     dev: true
 
@@ -14913,12 +14962,13 @@ packages:
       which-boxed-primitive: 1.0.2
     dev: true
 
-  /unconfig@0.3.9:
-    resolution: {integrity: sha512-8yhetFd48M641mxrkWA+C/lZU4N0rCOdlo3dFsyFPnBHBjMJfjT/3eAZBRT2RxCRqeBMAKBVgikejdS6yeBjMw==}
+  /unconfig@0.3.10:
+    resolution: {integrity: sha512-tj317lhIq2iZF/NXrJnU1t2UaGUKKz1eL1sK2t63Oq66V9BxqvZV12m55fp/fpQJ+DDmVlLgo7cnLVOZkhlO/A==}
     dependencies:
-      '@antfu/utils': 0.7.4
+      '@antfu/utils': 0.7.5
       defu: 6.1.2
-      jiti: 1.18.2
+      jiti: 1.19.1
+      mlly: 1.4.0
     dev: true
 
   /underscore@1.1.7:
@@ -15022,40 +15072,43 @@ packages:
     engines: {node: '>= 10.0.0'}
     dev: true
 
-  /unocss@0.54.0(postcss@8.4.27)(rollup@2.79.1)(vite@4.3.9):
-    resolution: {integrity: sha512-SXjyQqt/MP1uW8mjEmQaSa0zd+QB3FwaGD/ityNlu+zNRx1D03BPP9ACbJDB1zZKx4aodMVSsHZ3TV5wsu+VRQ==}
+  /unocss@0.55.0(postcss@8.4.27)(rollup@2.79.1)(vite@4.3.9):
+    resolution: {integrity: sha512-mjtN/2Dr495swOA/u/UaA0keCtv8/vFc114pd0D4XzpbK2/nKNB9Got/lmhJp8fxblV+oNtLkD0PaHtpAvSpsw==}
     engines: {node: '>=14'}
     peerDependencies:
-      '@unocss/webpack': 0.54.0
+      '@unocss/webpack': 0.55.0
+      vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0
     peerDependenciesMeta:
       '@unocss/webpack':
         optional: true
+      vite:
+        optional: true
     dependencies:
-      '@unocss/astro': 0.54.0(rollup@2.79.1)(vite@4.3.9)
-      '@unocss/cli': 0.54.0(rollup@2.79.1)
-      '@unocss/core': 0.54.0
-      '@unocss/extractor-arbitrary-variants': 0.54.0
-      '@unocss/postcss': 0.54.0(postcss@8.4.27)
-      '@unocss/preset-attributify': 0.54.0
-      '@unocss/preset-icons': 0.54.0
-      '@unocss/preset-mini': 0.54.0
-      '@unocss/preset-tagify': 0.54.0
-      '@unocss/preset-typography': 0.54.0
-      '@unocss/preset-uno': 0.54.0
-      '@unocss/preset-web-fonts': 0.54.0
-      '@unocss/preset-wind': 0.54.0
-      '@unocss/reset': 0.54.0
-      '@unocss/transformer-attributify-jsx': 0.54.0
-      '@unocss/transformer-attributify-jsx-babel': 0.54.0
-      '@unocss/transformer-compile-class': 0.54.0
-      '@unocss/transformer-directives': 0.54.0
-      '@unocss/transformer-variant-group': 0.54.0
-      '@unocss/vite': 0.54.0(rollup@2.79.1)(vite@4.3.9)
+      '@unocss/astro': 0.55.0(rollup@2.79.1)(vite@4.3.9)
+      '@unocss/cli': 0.55.0(rollup@2.79.1)
+      '@unocss/core': 0.55.0
+      '@unocss/extractor-arbitrary-variants': 0.55.0
+      '@unocss/postcss': 0.55.0(postcss@8.4.27)
+      '@unocss/preset-attributify': 0.55.0
+      '@unocss/preset-icons': 0.55.0
+      '@unocss/preset-mini': 0.55.0
+      '@unocss/preset-tagify': 0.55.0
+      '@unocss/preset-typography': 0.55.0
+      '@unocss/preset-uno': 0.55.0
+      '@unocss/preset-web-fonts': 0.55.0
+      '@unocss/preset-wind': 0.55.0
+      '@unocss/reset': 0.55.0
+      '@unocss/transformer-attributify-jsx': 0.55.0
+      '@unocss/transformer-attributify-jsx-babel': 0.55.0
+      '@unocss/transformer-compile-class': 0.55.0
+      '@unocss/transformer-directives': 0.55.0
+      '@unocss/transformer-variant-group': 0.55.0
+      '@unocss/vite': 0.55.0(rollup@2.79.1)(vite@4.3.9)
+      vite: 4.3.9(@types/node@18.16.0)
     transitivePeerDependencies:
       - postcss
       - rollup
       - supports-color
-      - vite
     dev: true
 
   /unpipe@1.0.0:
@@ -15223,8 +15276,8 @@ packages:
       vfile-message: 3.1.2
     dev: true
 
-  /vite-node@0.33.0(@types/node@18.16.0):
-    resolution: {integrity: sha512-19FpHYbwWWxDr73ruNahC+vtEdza52kA90Qb3La98yZ0xULqV8A5JLNPUff0f5zID4984tW7l3DH2przTJUZSw==}
+  /vite-node@0.34.0(@types/node@18.16.0):
+    resolution: {integrity: sha512-rGZMvpb052rjUwJA/a17xMfOibzNF7byMdRSTcN2Lw8uxX08s5EfjWW5mBkm3MSFTPctMSVtT2yC+8ShrZbT5g==}
     engines: {node: '>=v14.18.0'}
     hasBin: true
     dependencies:
@@ -15233,7 +15286,7 @@ packages:
       mlly: 1.4.0
       pathe: 1.1.1
       picocolors: 1.0.0
-      vite: 4.4.6(@types/node@18.16.0)
+      vite: 4.4.7(@types/node@18.16.0)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -15343,42 +15396,6 @@ packages:
       fsevents: 2.3.2
     dev: true
 
-  /vite@4.4.6(@types/node@18.16.0):
-    resolution: {integrity: sha512-EY6Mm8vJ++S3D4tNAckaZfw3JwG3wa794Vt70M6cNJ6NxT87yhq7EC8Rcap3ahyHdo8AhCmV9PTk+vG1HiYn1A==}
-    engines: {node: ^14.18.0 || >=16.0.0}
-    hasBin: true
-    peerDependencies:
-      '@types/node': '>= 14'
-      less: '*'
-      lightningcss: ^1.21.0
-      sass: '*'
-      stylus: '*'
-      sugarss: '*'
-      terser: ^5.4.0
-    peerDependenciesMeta:
-      '@types/node':
-        optional: true
-      less:
-        optional: true
-      lightningcss:
-        optional: true
-      sass:
-        optional: true
-      stylus:
-        optional: true
-      sugarss:
-        optional: true
-      terser:
-        optional: true
-    dependencies:
-      '@types/node': 18.16.0
-      esbuild: 0.18.11
-      postcss: 8.4.27
-      rollup: 3.26.0
-    optionalDependencies:
-      fsevents: 2.3.2
-    dev: true
-
   /vite@4.4.7(@types/node@18.16.0):
     resolution: {integrity: sha512-6pYf9QJ1mHylfVh39HpuSfMPojPSKVxZvnclX1K1FyZ1PXDOcLBibdq5t1qxJSnL63ca8Wf4zts6mD8u8oc9Fw==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -15505,8 +15522,8 @@ packages:
       - universal-cookie
     dev: true
 
-  /vitest@0.33.0(@vitest/ui@0.33.0)(jsdom@22.0.0):
-    resolution: {integrity: sha512-1CxaugJ50xskkQ0e969R/hW47za4YXDUfWJDxip1hwbnhUjYolpfUn2AMOulqG/Dtd9WYAtkHmM/m3yKVrEejQ==}
+  /vitest@0.34.0(@vitest/ui@0.34.0)(jsdom@22.0.0):
+    resolution: {integrity: sha512-8Pnc1fVt1P6uBncdUZ++hgiJGgxIRKuz4bmS/PQziaEcUj0D1g9cGiR1MbLrcsvFTC6fgrqDhYoTAdBG356WMA==}
     engines: {node: '>=v14.18.0'}
     hasBin: true
     peerDependencies:
@@ -15539,12 +15556,12 @@ packages:
       '@types/chai': 4.3.5
       '@types/chai-subset': 1.3.3
       '@types/node': 18.16.0
-      '@vitest/expect': 0.33.0
-      '@vitest/runner': 0.33.0
-      '@vitest/snapshot': 0.33.0
-      '@vitest/spy': 0.33.0
-      '@vitest/ui': 0.33.0(vitest@0.33.0)
-      '@vitest/utils': 0.33.0
+      '@vitest/expect': 0.34.0
+      '@vitest/runner': 0.34.0
+      '@vitest/snapshot': 0.34.0
+      '@vitest/spy': 0.34.0
+      '@vitest/ui': 0.34.0(vitest@0.34.0)
+      '@vitest/utils': 0.34.0
       acorn: 8.10.0
       acorn-walk: 8.2.0
       cac: 6.7.14
@@ -15558,9 +15575,9 @@ packages:
       std-env: 3.3.3
       strip-literal: 1.0.1
       tinybench: 2.5.0
-      tinypool: 0.6.0
-      vite: 4.4.6(@types/node@18.16.0)
-      vite-node: 0.33.0(@types/node@18.16.0)
+      tinypool: 0.7.0
+      vite: 4.4.7(@types/node@18.16.0)
+      vite-node: 0.34.0(@types/node@18.16.0)
       why-is-node-running: 2.2.2
     transitivePeerDependencies:
       - less
@@ -15796,7 +15813,7 @@ packages:
       import-local: 3.1.0
       interpret: 2.2.0
       rechoir: 0.7.1
-      webpack: 5.75.0(esbuild@0.18.0)(webpack-cli@4.10.0)
+      webpack: 5.75.0(esbuild@0.19.0)(webpack-cli@4.10.0)
       webpack-dev-server: 4.11.1(webpack-cli@4.10.0)(webpack@5.75.0)
       webpack-merge: 5.8.0
     dev: true
@@ -15812,7 +15829,7 @@ packages:
       mime-types: 2.1.35
       range-parser: 1.2.1
       schema-utils: 4.0.0
-      webpack: 5.75.0(esbuild@0.18.0)(webpack-cli@4.10.0)
+      webpack: 5.75.0(esbuild@0.19.0)(webpack-cli@4.10.0)
     dev: true
 
   /webpack-dev-server@4.11.1(webpack-cli@4.10.0)(webpack@5.75.0):
@@ -15853,7 +15870,7 @@ packages:
       serve-index: 1.9.1
       sockjs: 0.3.24
       spdy: 4.0.2
-      webpack: 5.75.0(esbuild@0.18.0)(webpack-cli@4.10.0)
+      webpack: 5.75.0(esbuild@0.19.0)(webpack-cli@4.10.0)
       webpack-cli: 4.10.0(webpack-dev-server@4.11.1)(webpack@5.75.0)
       webpack-dev-middleware: 5.3.3(webpack@5.75.0)
       ws: 8.9.0
@@ -15881,7 +15898,7 @@ packages:
     resolution: {integrity: sha512-kyDivFZ7ZM0BVOUteVbDFhlRt7Ah/CSPwJdi8hBpkK7QLumUqdLtVfm/PX/hkcnrvr0i77fO5+TjZ94Pe+C9iw==}
     dev: true
 
-  /webpack@5.75.0(esbuild@0.18.0)(webpack-cli@4.10.0):
+  /webpack@5.75.0(esbuild@0.19.0)(webpack-cli@4.10.0):
     resolution: {integrity: sha512-piaIaoVJlqMsPtX/+3KTTO6jfvrSYgauFVdt8cr9LTHKmcq/AMd4mhzsiP7ZF/PGRNPGA8336jldh9l2Kt2ogQ==}
     engines: {node: '>=10.13.0'}
     hasBin: true
@@ -15912,7 +15929,7 @@ packages:
       neo-async: 2.6.2
       schema-utils: 3.1.1
       tapable: 2.2.1
-      terser-webpack-plugin: 5.3.6(esbuild@0.18.0)(webpack@5.75.0)
+      terser-webpack-plugin: 5.3.6(esbuild@0.19.0)(webpack@5.75.0)
       watchpack: 2.4.0
       webpack-cli: 4.10.0(webpack-dev-server@4.11.1)(webpack@5.75.0)
       webpack-sources: 3.2.3