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 001/134] 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 002/134] 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 003/134] 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 004/134] 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 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 005/134] 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 006/134] 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 007/134] 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 008/134] 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 0cab66c9d81ea2f48485a2c4bf2c187c06a01fbf Mon Sep 17 00:00:00 2001
From: Lishid <lishid@gmail.com>
Date: Thu, 29 Jun 2023 15:33:35 -0400
Subject: [PATCH 009/134] 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 010/134] 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 011/134] 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 012/134] 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 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 013/134] 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 014/134] 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 015/134] 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 016/134] 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 017/134] 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 018/134] 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 019/134] 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 020/134] 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 021/134] 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 022/134] 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 023/134] 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 024/134] 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 025/134] 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 026/134] 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 027/134] 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 028/134] 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 029/134] 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 030/134] 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 031/134] 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 032/134] 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 033/134] 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 034/134] 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 035/134] 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 036/134] 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 037/134] 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 038/134] 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 039/134] 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 040/134] 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 041/134] 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 042/134] 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 043/134] 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 044/134] 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 045/134] 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 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 046/134] 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 047/134] 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 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 048/134] 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 049/134] 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 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 050/134] 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 051/134] 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 052/134] 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 053/134] 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 054/134] 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 055/134] 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 056/134] 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 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 057/134] 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 058/134] 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 059/134] 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 060/134] 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 061/134] 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 062/134] 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 063/134] 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 064/134] 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 065/134] 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 066/134] 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 067/134] 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 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 068/134] 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 069/134] 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 070/134] 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 071/134] 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 072/134] 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 073/134] 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 074/134] 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 075/134] 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 076/134] 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 077/134] 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 078/134] 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 079/134] 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 080/134] 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 081/134] 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 082/134] 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 083/134] 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 084/134] 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 085/134] 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 086/134] 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 087/134] 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 088/134] 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 089/134] 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 090/134] 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 091/134] 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 092/134] 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 093/134] 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 094/134] 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 095/134] 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 096/134] 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 097/134] 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 098/134] 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 099/134] 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 100/134] 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 101/134] 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 102/134] 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 103/134] 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 104/134] 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 105/134] 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 106/134] 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 107/134] 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 108/134] 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 109/134] 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 110/134] 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 111/134] 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 112/134] 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 113/134] 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 114/134] 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 115/134] 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 116/134] 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 117/134] 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 118/134] 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 119/134] 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 120/134] 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 121/134] 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 122/134] 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 123/134] 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 124/134] 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 125/134] 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 126/134] 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 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 127/134] 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 128/134] 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 129/134] 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 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 130/134] 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 131/134] 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 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 132/134] 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 133/134] 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 3e3e784fd90e807d32ae10cb0d9e472e26cb22c6 Mon Sep 17 00:00:00 2001
From: kgilbert78 <kgilbert78@gmail.com>
Date: Mon, 24 Jul 2023 13:24:33 -0400
Subject: [PATCH 134/134] 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