From d06bb05c5fe7544ec2b34cfa71c788e15f27499d Mon Sep 17 00:00:00 2001
From: Laura Valentine Tscharner <laura.tscharner@tecnico.ulisboa.pt>
Date: Thu, 8 Jun 2023 16:25:06 +0100
Subject: [PATCH 001/187] feat(sequence): actor creation and destruction #1838

---
 .../rendering/sequencediagram.spec.js         |  75 +++++++
 .../sequence/parser/sequenceDiagram.jison     |  12 +-
 .../src/diagrams/sequence/sequenceDb.js       |  52 ++++-
 .../diagrams/sequence/sequenceDiagram.spec.js |  64 +++++-
 .../src/diagrams/sequence/sequenceRenderer.ts | 192 ++++++++++++++----
 .../mermaid/src/diagrams/sequence/svgDraw.js  |  63 +++---
 6 files changed, 388 insertions(+), 70 deletions(-)

diff --git a/cypress/integration/rendering/sequencediagram.spec.js b/cypress/integration/rendering/sequencediagram.spec.js
index 185cc4133..7d36c1ff1 100644
--- a/cypress/integration/rendering/sequencediagram.spec.js
+++ b/cypress/integration/rendering/sequencediagram.spec.js
@@ -156,6 +156,81 @@ context('Sequence diagram', () => {
       `
     );
   });
+  it('should render a sequence diagram with basic actor creation and destruction', () => {
+    imgSnapshotTest(
+      `
+      sequenceDiagram
+      Alice ->> Bob: Hello Bob, how are you ?
+      Bob ->> Alice: Fine, thank you. And you?
+      create participant Polo
+      Alice ->> Polo: Hi Polo!
+      create actor Ola1 as Ola
+      Polo ->> Ola1: Hiii
+      Ola1 ->> Alice: Hi too
+      destroy Ola1
+      Alice --x Ola1: Bye!
+      Alice ->> Bob: And now?
+      create participant Ola2 as Ola
+      Alice ->> Ola2: Hello again
+      destroy Alice
+      Alice --x Ola2: Bye for me!
+      destroy Bob
+      Ola2 --> Bob: The end
+      `
+    );
+  });
+  it('should render a sequence diagram with actor creation and destruction coupled with backgrounds, loops and notes', () => {
+    imgSnapshotTest(
+      `
+      sequenceDiagram
+			accTitle: test the accTitle
+			accDescr: Test a description
+
+			participant Alice
+      participant Bob
+			autonumber 10 10
+			rect rgb(200, 220, 100)
+			rect rgb(200, 255, 200)
+
+			Alice ->> Bob: Hello Bob, how are you?
+      create participant John as John<br />Second Line
+			Bob-->>John: How about you John?
+			end
+
+			Bob--x Alice: I am good thanks!
+			Bob-x John: I am good thanks!
+			Note right of John: John thinks a long<br />long time, so long<br />that the text does<br />not fit on a row.
+
+			Bob-->Alice: Checking with John...
+			Note over John:wrap: John looks like he's still thinking, so Bob prods him a bit.
+			Bob-x John: Hey John - we're still waiting to know<br />how you're doing
+			Note over John:nowrap: John's trying hard not to break his train of thought.
+      destroy John
+			Bob-x John: John! Cmon!
+			Note over John: After a few more moments, John<br />finally snaps out of it.
+			end
+
+			autonumber off
+			alt either this
+      create actor Lola
+			Alice->>+Lola: Yes
+			Lola-->>-Alice: OK
+			else or this
+			autonumber
+			Alice->>Lola: No
+			else or this will happen
+			Alice->Lola: Maybe
+			end
+			autonumber 200
+			par this happens in parallel
+      destroy Bob
+			Alice -->> Bob: Parallel message 1
+			and
+			Alice -->> Lola: Parallel message 2
+			end
+      `
+    );
+  });
   context('font settings', () => {
     it('should render different note fonts when configured', () => {
       imgSnapshotTest(
diff --git a/packages/mermaid/src/diagrams/sequence/parser/sequenceDiagram.jison b/packages/mermaid/src/diagrams/sequence/parser/sequenceDiagram.jison
index 074cd5975..04f0de20e 100644
--- a/packages/mermaid/src/diagrams/sequence/parser/sequenceDiagram.jison
+++ b/packages/mermaid/src/diagrams/sequence/parser/sequenceDiagram.jison
@@ -38,6 +38,8 @@
 "box"															{ this.begin('LINE'); return 'box'; }
 "participant"                                                   { this.begin('ID'); return 'participant'; }
 "actor"                                                   		{ this.begin('ID'); return 'participant_actor'; }
+"create"                                                        return 'create';
+"destroy"                                                       { this.begin('ID'); return 'destroy'; }
 <ID>[^\->:\n,;]+?([\-]*[^\->:\n,;]+?)*?(?=((?!\n)\s)+"as"(?!\n)\s|[#\n;]|$)     { yytext = yytext.trim(); this.begin('ALIAS'); return 'ACTOR'; }
 <ALIAS>"as"                                                     { this.popState(); this.popState(); this.begin('LINE'); return 'AS'; }
 <ALIAS>(?:)                                                     { this.popState(); this.popState(); return 'NEWLINE'; }
@@ -138,6 +140,7 @@ directive
 
 statement
 	: participant_statement
+	| 'create' participant_statement {$2.type='createParticipant'; $$=$2;}
 	| 'box' restOfLine box_section end
 	{
 		$3.unshift({type: 'boxStart', boxData:yy.parseBoxData($2) });
@@ -234,10 +237,11 @@ else_sections
 	;
 
 participant_statement
-	: 'participant' actor 'AS' restOfLine 'NEWLINE' {$2.type='addParticipant';$2.description=yy.parseMessage($4); $$=$2;}
-	| 'participant' actor 'NEWLINE' {$2.type='addParticipant';$$=$2;}
-	| 'participant_actor' actor 'AS' restOfLine 'NEWLINE' {$2.type='addActor';$2.description=yy.parseMessage($4); $$=$2;}
-	| 'participant_actor' actor 'NEWLINE' {$2.type='addActor'; $$=$2;}
+	: 'participant' actor 'AS' restOfLine 'NEWLINE' {$2.draw='participant'; $2.type='addParticipant';$2.description=yy.parseMessage($4); $$=$2;}
+	| 'participant' actor 'NEWLINE' {$2.draw='participant'; $2.type='addParticipant';$$=$2;}
+	| 'participant_actor' actor 'AS' restOfLine 'NEWLINE' {$2.draw='actor'; $2.type='addParticipant';$2.description=yy.parseMessage($4); $$=$2;}
+	| 'participant_actor' actor 'NEWLINE' {$2.draw='actor'; $2.type='addParticipant'; $$=$2;}
+	| 'destroy' actor 'NEWLINE' {$2.type='destroyParticipant'; $$=$2;}
 	;
 
 note_statement
diff --git a/packages/mermaid/src/diagrams/sequence/sequenceDb.js b/packages/mermaid/src/diagrams/sequence/sequenceDb.js
index 89869b64f..b5d68fb9f 100644
--- a/packages/mermaid/src/diagrams/sequence/sequenceDb.js
+++ b/packages/mermaid/src/diagrams/sequence/sequenceDb.js
@@ -14,12 +14,16 @@ import {
 
 let prevActor = undefined;
 let actors = {};
+let createdActors = {};
+let destroyedActors = {};
 let boxes = [];
 let messages = [];
 const notes = [];
 let sequenceNumbersEnabled = false;
 let wrapEnabled;
 let currentBox = undefined;
+let lastCreated = undefined;
+let lastDestroyed = undefined;
 
 export const parseDirective = function (statement, context, type) {
   mermaidAPI.parseDirective(this, statement, context, type);
@@ -165,6 +169,12 @@ export const getBoxes = function () {
 export const getActors = function () {
   return actors;
 };
+export const getCreatedActors = function () {
+  return createdActors;
+};
+export const getDestroyedActors = function () {
+  return destroyedActors;
+};
 export const getActor = function (id) {
   return actors[id];
 };
@@ -194,6 +204,8 @@ export const autoWrap = () => {
 
 export const clear = function () {
   actors = {};
+  createdActors = {};
+  destroyedActors = {};
   boxes = [];
   messages = [];
   sequenceNumbersEnabled = false;
@@ -459,10 +471,21 @@ export const apply = function (param) {
         });
         break;
       case 'addParticipant':
-        addActor(param.actor, param.actor, param.description, 'participant');
+        addActor(param.actor, param.actor, param.description, param.draw);
         break;
-      case 'addActor':
-        addActor(param.actor, param.actor, param.description, 'actor');
+      case 'createParticipant':
+        if (actors[param.actor]) {
+          throw new Error(
+            "It is not possible to have actors with the same id, even if one is destroyed before the next is created. Use 'AS' aliases to simulate the behavior"
+          );
+        }
+        lastCreated = param.actor;
+        addActor(param.actor, param.actor, param.description, param.draw);
+        createdActors[param.actor] = messages.length;
+        break;
+      case 'destroyParticipant':
+        lastDestroyed = param.actor;
+        destroyedActors[param.actor] = messages.length;
         break;
       case 'activeStart':
         addSignal(param.actor, undefined, undefined, param.signalType);
@@ -486,6 +509,27 @@ export const apply = function (param) {
         addDetails(param.actor, param.text);
         break;
       case 'addMessage':
+        if (lastCreated) {
+          if (param.to !== lastCreated) {
+            throw new Error(
+              'The created participant ' +
+                lastCreated +
+                ' does not have an associated creating message after its declaration. Please check the sequence diagram.'
+            );
+          } else {
+            lastCreated = undefined;
+          }
+        } else if (lastDestroyed) {
+          if (param.to !== lastDestroyed && param.from !== lastDestroyed) {
+            throw new Error(
+              'The destroyed participant ' +
+                lastDestroyed +
+                ' does not have an associated destroying message after its declaration. Please check the sequence diagram.'
+            );
+          } else {
+            lastDestroyed = undefined;
+          }
+        }
         addSignal(param.from, param.to, param.msg, param.signalType);
         break;
       case 'boxStart':
@@ -566,6 +610,8 @@ export default {
   showSequenceNumbers,
   getMessages,
   getActors,
+  getCreatedActors,
+  getDestroyedActors,
   getActor,
   getActorKeys,
   getActorProperty,
diff --git a/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js b/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js
index baa5d2fcf..8b7d6f8d0 100644
--- a/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js
+++ b/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js
@@ -1404,6 +1404,62 @@ link a: Tests @ https://tests.contoso.com/?svc=alice@contoso.com
     expect(boxes[0].actorKeys).toEqual(['a', 'b']);
     expect(boxes[0].fill).toEqual('Aqua');
   });
+
+  it('should handle simple actor creation', async () => {
+    const str = `
+  sequenceDiagram
+  participant a as Alice
+  a ->>b: Hello Bob?
+  create participant c
+  b-->>c: Hello c!
+  c ->> b: Hello b?
+  create actor d as Donald
+  a ->> d: Hello Donald?
+  `;
+    await mermaidAPI.parse(str);
+    const actors = diagram.db.getActors();
+    const createdActors = diagram.db.getCreatedActors();
+    expect(actors['c'].name).toEqual('c');
+    expect(actors['c'].description).toEqual('c');
+    expect(actors['c'].type).toEqual('participant');
+    expect(createdActors['c']).toEqual(1);
+    expect(actors['d'].name).toEqual('d');
+    expect(actors['d'].description).toEqual('Donald');
+    expect(actors['d'].type).toEqual('actor');
+    expect(createdActors['d']).toEqual(3);
+  });
+  it('should handle simple actor destruction', async () => {
+    const str = `
+  sequenceDiagram
+  participant a as Alice
+  a ->>b: Hello Bob?
+  destroy a
+  b-->>a: Hello Alice!
+  b ->> c: Where is Alice?
+  destroy c
+  b ->> c: Where are you?
+  `;
+    await mermaidAPI.parse(str);
+    const destroyedActors = diagram.db.getDestroyedActors();
+    expect(destroyedActors['a']).toEqual(1);
+    expect(destroyedActors['c']).toEqual(3);
+  });
+  it('should handle the creation and destruction of the same actor', async () => {
+    const str = `
+  sequenceDiagram
+  a ->>b: Hello Bob?
+  create participant c
+  b ->>c: Hello c!
+  c ->> b: Hello b?
+  destroy c
+  b ->> c : Bye c !
+  `;
+    await mermaidAPI.parse(str);
+    const createdActors = diagram.db.getCreatedActors();
+    const destroyedActors = diagram.db.getDestroyedActors();
+    expect(createdActors['c']).toEqual(1);
+    expect(destroyedActors['c']).toEqual(3);
+  });
 });
 describe('when checking the bounds in a sequenceDiagram', function () {
   beforeAll(() => {
@@ -1973,7 +2029,9 @@ participant Alice`;
       expect(bounds.startx).toBe(0);
       expect(bounds.starty).toBe(0);
       expect(bounds.stopx).toBe(conf.width);
-      expect(bounds.stopy).toBe(models.lastActor().y + models.lastActor().height + conf.boxMargin);
+      expect(bounds.stopy).toBe(
+        models.lastActor().stopy + models.lastActor().height + conf.boxMargin
+      );
     });
   });
 });
@@ -2025,7 +2083,7 @@ participant Alice
     expect(bounds.startx).toBe(0);
     expect(bounds.starty).toBe(0);
     expect(bounds.stopy).toBe(
-      models.lastActor().y + models.lastActor().height + mermaid.sequence.boxMargin
+      models.lastActor().stopy + models.lastActor().height + mermaid.sequence.boxMargin
     );
   });
   it('should handle one actor, when logLevel is 3 (dfg0)', async () => {
@@ -2045,7 +2103,7 @@ participant Alice
     expect(bounds.startx).toBe(0);
     expect(bounds.starty).toBe(0);
     expect(bounds.stopy).toBe(
-      models.lastActor().y + models.lastActor().height + mermaid.sequence.boxMargin
+      models.lastActor().stopy + models.lastActor().height + mermaid.sequence.boxMargin
     );
   });
   it('should hide sequence numbers when autonumber is removed when autonumber is enabled', async () => {
diff --git a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
index 16a3d21fc..4f8b1889b 100644
--- a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
+++ b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
@@ -1,6 +1,6 @@
 // @ts-nocheck TODO: fix file
 import { select, selectAll } from 'd3';
-import svgDraw, { drawText, fixLifeLineHeights } from './svgDraw.js';
+import svgDraw, { ACTOR_TYPE_WIDTH, drawText, fixLifeLineHeights } from './svgDraw.js';
 import { log } from '../../logger.js';
 import common from '../common/common.js';
 import * as svgDrawCommon from '../common/svgDrawCommon';
@@ -478,29 +478,19 @@ const drawMessage = function (diagram, msgModel, lineStartY: number, diagObj: Di
   }
 };
 
-export const drawActors = function (
+const addActorRenderingData = function (
   diagram,
   actors,
+  createdActors,
   actorKeys,
   verticalPos,
-  configuration,
   messages,
   isFooter
 ) {
-  if (configuration.hideUnusedParticipants === true) {
-    const newActors = new Set();
-    messages.forEach((message) => {
-      newActors.add(message.from);
-      newActors.add(message.to);
-    });
-    actorKeys = actorKeys.filter((actorKey) => newActors.has(actorKey));
-  }
-
-  // Draw the actors
   let prevWidth = 0;
   let prevMargin = 0;
-  let maxHeight = 0;
   let prevBox = undefined;
+  let maxHeight = 0;
 
   for (const actorKey of actorKeys) {
     const actor = actors[actorKey];
@@ -528,12 +518,16 @@ export const drawActors = function (
     actor.height = common.getMax(actor.height || conf.height, conf.height);
     actor.margin = actor.margin || conf.actorMargin;
 
-    actor.x = prevWidth + prevMargin;
-    actor.y = bounds.getVerticalPos();
+    maxHeight = common.getMax(maxHeight, actor.height);
+
+    // if the actor is created by a message, widen margin
+    if (createdActors[actor.name]) {
+      prevMargin += actor.width / 2;
+    }
+
+    actor.x = prevWidth + prevMargin;
+    actor.starty = bounds.getVerticalPos();
 
-    // Draw the box with the attached line
-    const height = svgDraw.drawActor(diagram, actor, conf, isFooter);
-    maxHeight = common.getMax(maxHeight, height);
     bounds.insert(actor.x, verticalPos, actor.x + actor.width, actor.height);
 
     prevWidth += actor.width + prevMargin;
@@ -554,6 +548,28 @@ export const drawActors = function (
   bounds.bumpVerticalPos(maxHeight);
 };
 
+export const drawActors = function (diagram, actors, actorKeys, isFooter) {
+  if (!isFooter) {
+    for (const actorKey of actorKeys) {
+      const actor = actors[actorKey];
+      // Draw the box with the attached line
+      svgDraw.drawActor(diagram, actor, conf, false);
+    }
+  } else {
+    let maxHeight = 0;
+    bounds.bumpVerticalPos(conf.boxMargin * 2);
+    for (const actorKey of actorKeys) {
+      const actor = actors[actorKey];
+      if (!actor.stopy) {
+        actor.stopy = bounds.getVerticalPos();
+      }
+      const height = svgDraw.drawActor(diagram, actor, conf, true);
+      maxHeight = common.getMax(maxHeight, height);
+    }
+    bounds.bumpVerticalPos(maxHeight + conf.boxMargin);
+  }
+};
+
 export const drawActorsPopup = function (diagram, actors, actorKeys, doc) {
   let maxHeight = 0;
   let maxWidth = 0;
@@ -633,6 +649,95 @@ function adjustLoopHeightForWrap(loopWidths, msg, preMargin, postMargin, addLoop
   bounds.bumpVerticalPos(heightAdjust);
 }
 
+/**
+ * Adjust the msgModel and the actor for the rendering in case the latter is created or destroyed by the msg
+ * @param msg - the potentially creating or destroying message
+ * @param msgModel - the model associated with the message
+ * @param lineStartY - the y position of the message line
+ * @param index - the index of the current actor under consideration
+ * @param actors - the array of all actors
+ * @param createdActors - the array of actors created in the diagram
+ * @param destroyedActors - the array of actors destroyed in the diagram
+ */
+function adjustCreatedDestroyedData(
+  msg,
+  msgModel,
+  lineStartY,
+  index,
+  actors,
+  createdActors,
+  destroyedActors
+) {
+  function receiverAdjustment(actor, adjustment) {
+    if (actor.x < actors[msg.from].x) {
+      bounds.insert(
+        msgModel.stopx - adjustment,
+        msgModel.starty,
+        msgModel.startx,
+        msgModel.stopy + actor.height / 2 + conf.noteMargin
+      );
+      msgModel.stopx = msgModel.stopx + adjustment;
+    } else {
+      bounds.insert(
+        msgModel.startx,
+        msgModel.starty,
+        msgModel.stopx + adjustment,
+        msgModel.stopy + actor.height / 2 + conf.noteMargin
+      );
+      msgModel.stopx = msgModel.stopx - adjustment;
+    }
+  }
+
+  function senderAdjustment(actor, adjustment) {
+    if (actor.x < actors[msg.to].x) {
+      bounds.insert(
+        msgModel.startx - adjustment,
+        msgModel.starty,
+        msgModel.stopx,
+        msgModel.stopy + actor.height / 2 + conf.noteMargin
+      );
+      msgModel.startx = msgModel.startx + adjustment;
+    } else {
+      bounds.insert(
+        msgModel.stopx,
+        msgModel.starty,
+        msgModel.startx + adjustment,
+        msgModel.stopy + actor.height / 2 + conf.noteMargin
+      );
+      msgModel.startx = msgModel.startx - adjustment;
+    }
+  }
+
+  // if it is a create message
+  if (createdActors[msg.to] == index) {
+    const actor = actors[msg.to];
+    const adjustment = actor.type == 'actor' ? ACTOR_TYPE_WIDTH / 2 + 3 : actor.width / 2 + 3;
+    receiverAdjustment(actor, adjustment);
+    actor.starty = lineStartY - actor.height / 2;
+    bounds.bumpVerticalPos(actor.height / 2);
+  }
+  // if it is a destroy sender message
+  else if (destroyedActors[msg.from] == index) {
+    const actor = actors[msg.from];
+    if (conf.mirrorActors) {
+      const adjustment = actor.type == 'actor' ? ACTOR_TYPE_WIDTH / 2 : actor.width / 2;
+      senderAdjustment(actor, adjustment);
+    }
+    actor.stopy = lineStartY - actor.height / 2;
+    bounds.bumpVerticalPos(actor.height / 2);
+  }
+  // if it is a destroy receiver message
+  else if (destroyedActors[msg.to] == index) {
+    const actor = actors[msg.to];
+    if (conf.mirrorActors) {
+      const adjustment = actor.type == 'actor' ? ACTOR_TYPE_WIDTH / 2 + 3 : actor.width / 2 + 3;
+      receiverAdjustment(actor, adjustment);
+    }
+    actor.stopy = lineStartY - actor.height / 2;
+    bounds.bumpVerticalPos(actor.height / 2);
+  }
+}
+
 /**
  * Draws a sequenceDiagram in the tag with id: id based on the graph definition in text.
  *
@@ -666,8 +771,10 @@ export const draw = function (_text: string, id: string, _version: string, diagO
 
   // Fetch data from the parsing
   const actors = diagObj.db.getActors();
+  const createdActors = diagObj.db.getCreatedActors();
+  const destroyedActors = diagObj.db.getDestroyedActors();
   const boxes = diagObj.db.getBoxes();
-  const actorKeys = diagObj.db.getActorKeys();
+  let actorKeys = diagObj.db.getActorKeys();
   const messages = diagObj.db.getMessages();
   const title = diagObj.db.getDiagramTitle();
   const hasBoxes = diagObj.db.hasAtLeastOneBox();
@@ -686,7 +793,16 @@ export const draw = function (_text: string, id: string, _version: string, diagO
     }
   }
 
-  drawActors(diagram, actors, actorKeys, 0, conf, messages, false);
+  if (conf.hideUnusedParticipants === true) {
+    const newActors = new Set();
+    messages.forEach((message) => {
+      newActors.add(message.from);
+      newActors.add(message.to);
+    });
+    actorKeys = actorKeys.filter((actorKey) => newActors.has(actorKey));
+  }
+
+  addActorRenderingData(diagram, actors, createdActors, actorKeys, 0, messages, false);
   const loopWidths = calculateLoopBounds(messages, actors, maxMessageWidthPerActor, diagObj);
 
   // The arrow head definition is attached to the svg once
@@ -720,7 +836,8 @@ export const draw = function (_text: string, id: string, _version: string, diagO
   let sequenceIndex = 1;
   let sequenceIndexStep = 1;
   const messagesToDraw = [];
-  messages.forEach(function (msg) {
+  const backgrounds = [];
+  messages.forEach(function (msg, index) {
     let loopModel, noteModel, msgModel;
 
     switch (msg.type) {
@@ -757,7 +874,7 @@ export const draw = function (_text: string, id: string, _version: string, diagO
         break;
       case diagObj.db.LINETYPE.RECT_END:
         loopModel = bounds.endLoop();
-        svgDraw.drawBackgroundRect(diagram, loopModel);
+        backgrounds.push(loopModel);
         bounds.models.addLoop(loopModel);
         bounds.bumpVerticalPos(loopModel.stopy - bounds.getVerticalPos());
         break;
@@ -876,13 +993,20 @@ export const draw = function (_text: string, id: string, _version: string, diagO
         break;
       default:
         try {
-          // lastMsg = msg
-          bounds.resetVerticalPos();
           msgModel = msg.msgModel;
           msgModel.starty = bounds.getVerticalPos();
           msgModel.sequenceIndex = sequenceIndex;
           msgModel.sequenceVisible = diagObj.db.showSequenceNumbers();
           const lineStartY = boundMessage(diagram, msgModel);
+          adjustCreatedDestroyedData(
+            msg,
+            msgModel,
+            lineStartY,
+            index,
+            actors,
+            createdActors,
+            destroyedActors
+          );
           messagesToDraw.push({ messageModel: msgModel, lineStartY: lineStartY });
           bounds.models.addMessage(msgModel);
         } catch (e) {
@@ -907,15 +1031,16 @@ export const draw = function (_text: string, id: string, _version: string, diagO
     }
   });
 
-  messagesToDraw.forEach((e) => drawMessage(diagram, e.messageModel, e.lineStartY, diagObj));
+  log.debug('createdActors', createdActors);
+  log.debug('destroyedActors', destroyedActors);
 
+  drawActors(diagram, actors, actorKeys, false);
+  messagesToDraw.forEach((e) => drawMessage(diagram, e.messageModel, e.lineStartY, diagObj));
   if (conf.mirrorActors) {
-    // Draw actors below diagram
-    bounds.bumpVerticalPos(conf.boxMargin * 2);
-    drawActors(diagram, actors, actorKeys, bounds.getVerticalPos(), conf, messages, true);
-    bounds.bumpVerticalPos(conf.boxMargin);
-    fixLifeLineHeights(diagram, bounds.getVerticalPos());
+    drawActors(diagram, actors, actorKeys, true);
   }
+  backgrounds.forEach((e) => svgDraw.drawBackgroundRect(diagram, e));
+  fixLifeLineHeights(diagram, actors, actorKeys, conf);
 
   bounds.models.boxes.forEach(function (box) {
     box.height = bounds.getVerticalPos() - box.y;
@@ -937,11 +1062,6 @@ export const draw = function (_text: string, id: string, _version: string, diagO
 
   const { bounds: box } = bounds.getBounds();
 
-  // Adjust line height of actor lines now that the height of the diagram is known
-  log.debug('For line height fix Querying: #' + id + ' .actor-line');
-  const actorLines = selectAll('#' + id + ' .actor-line');
-  actorLines.attr('y2', box.stopy);
-
   // Make sure the height of the diagram supports long menus.
   let boxHeight = box.stopy - box.starty;
   if (boxHeight < requiredBoxSize.maxHeight) {
diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.js b/packages/mermaid/src/diagrams/sequence/svgDraw.js
index a3f7514f6..0c7bc6421 100644
--- a/packages/mermaid/src/diagrams/sequence/svgDraw.js
+++ b/packages/mermaid/src/diagrams/sequence/svgDraw.js
@@ -4,6 +4,8 @@ import { addFunction } from '../../interactionDb.js';
 import { ZERO_WIDTH_SPACE, parseFontSize } from '../../utils.js';
 import { sanitizeUrl } from '@braintree/sanitize-url';
 
+export const ACTOR_TYPE_WIDTH = 18 * 2;
+
 export const drawRect = function (elem, rectData) {
   return svgDrawCommon.drawRect(elem, rectData);
 };
@@ -294,14 +296,19 @@ export const drawLabel = function (elem, txtObject) {
 
 let actorCnt = -1;
 
-export const fixLifeLineHeights = (diagram, bounds) => {
-  if (!diagram.selectAll) {
+export const fixLifeLineHeights = (diagram, actors, actorKeys, conf) => {
+  if (!diagram.select) {
     return;
   }
-  diagram
-    .selectAll('.actor-line')
-    .attr('class', '200')
-    .attr('y2', bounds - 55);
+  actorKeys.forEach((actorKey) => {
+    const actor = actors[actorKey];
+    const actorDOM = diagram.select('#actor' + actor.actorCnt);
+    if (!conf.mirrorActors && actor.stopy) {
+      actorDOM.attr('y2', actor.stopy + actor.height / 2);
+    } else if (conf.mirrorActors) {
+      actorDOM.attr('y2', actor.stopy);
+    }
+  });
 };
 
 /**
@@ -313,10 +320,11 @@ export const fixLifeLineHeights = (diagram, bounds) => {
  * @param {boolean} isFooter - If the actor is the footer one
  */
 const drawActorTypeParticipant = function (elem, actor, conf, isFooter) {
+  const actorY = isFooter ? actor.stopy : actor.starty;
   const center = actor.x + actor.width / 2;
-  const centerY = actor.y + 5;
+  const centerY = actorY + 5;
 
-  const boxpluslineGroup = elem.append('g');
+  const boxpluslineGroup = elem.append('g').lower();
   var g = boxpluslineGroup;
 
   if (!isFooter) {
@@ -328,6 +336,7 @@ const drawActorTypeParticipant = function (elem, actor, conf, isFooter) {
       .attr('x2', center)
       .attr('y2', 2000)
       .attr('class', 'actor-line')
+      .attr('class', '200')
       .attr('stroke-width', '0.5px')
       .attr('stroke', '#999');
 
@@ -348,7 +357,7 @@ const drawActorTypeParticipant = function (elem, actor, conf, isFooter) {
     rect.fill = '#eaeaea';
   }
   rect.x = actor.x;
-  rect.y = actor.y;
+  rect.y = actorY;
   rect.width = actor.width;
   rect.height = actor.height;
   rect.class = cssclass;
@@ -388,8 +397,11 @@ const drawActorTypeParticipant = function (elem, actor, conf, isFooter) {
 };
 
 const drawActorTypeActor = function (elem, actor, conf, isFooter) {
+  const actorY = isFooter ? actor.stopy : actor.starty;
   const center = actor.x + actor.width / 2;
-  const centerY = actor.y + 80;
+  const centerY = actorY + 80;
+
+  elem.lower();
 
   if (!isFooter) {
     actorCnt++;
@@ -401,15 +413,18 @@ const drawActorTypeActor = function (elem, actor, conf, isFooter) {
       .attr('x2', center)
       .attr('y2', 2000)
       .attr('class', 'actor-line')
+      .attr('class', '200')
       .attr('stroke-width', '0.5px')
       .attr('stroke', '#999');
+
+    actor.actorCnt = actorCnt;
   }
   const actElem = elem.append('g');
   actElem.attr('class', 'actor-man');
 
   const rect = svgDrawCommon.getNoteRect();
   rect.x = actor.x;
-  rect.y = actor.y;
+  rect.y = actorY;
   rect.fill = '#eaeaea';
   rect.width = actor.width;
   rect.height = actor.height;
@@ -421,33 +436,33 @@ const drawActorTypeActor = function (elem, actor, conf, isFooter) {
     .append('line')
     .attr('id', 'actor-man-torso' + actorCnt)
     .attr('x1', center)
-    .attr('y1', actor.y + 25)
+    .attr('y1', actorY + 25)
     .attr('x2', center)
-    .attr('y2', actor.y + 45);
+    .attr('y2', actorY + 45);
 
   actElem
     .append('line')
     .attr('id', 'actor-man-arms' + actorCnt)
-    .attr('x1', center - 18)
-    .attr('y1', actor.y + 33)
-    .attr('x2', center + 18)
-    .attr('y2', actor.y + 33);
+    .attr('x1', center - ACTOR_TYPE_WIDTH / 2)
+    .attr('y1', actorY + 33)
+    .attr('x2', center + ACTOR_TYPE_WIDTH / 2)
+    .attr('y2', actorY + 33);
   actElem
     .append('line')
-    .attr('x1', center - 18)
-    .attr('y1', actor.y + 60)
+    .attr('x1', center - ACTOR_TYPE_WIDTH / 2)
+    .attr('y1', actorY + 60)
     .attr('x2', center)
-    .attr('y2', actor.y + 45);
+    .attr('y2', actorY + 45);
   actElem
     .append('line')
     .attr('x1', center)
-    .attr('y1', actor.y + 45)
-    .attr('x2', center + 16)
-    .attr('y2', actor.y + 60);
+    .attr('y1', actorY + 45)
+    .attr('x2', center + ACTOR_TYPE_WIDTH / 2 - 2)
+    .attr('y2', actorY + 60);
 
   const circle = actElem.append('circle');
   circle.attr('cx', actor.x + actor.width / 2);
-  circle.attr('cy', actor.y + 10);
+  circle.attr('cy', actorY + 10);
   circle.attr('r', 15);
   circle.attr('width', actor.width);
   circle.attr('height', actor.height);

From b79f9bdcedf5c5f772ad37dcf282dfb5a8c7132e Mon Sep 17 00:00:00 2001
From: Laura Valentine Tscharner <laura.tscharner@tecnico.ulisboa.pt>
Date: Thu, 8 Jun 2023 17:44:36 +0100
Subject: [PATCH 002/187] docs(sequence): actor creation and destruction #1838

---
 docs/syntax/sequenceDiagram.md                | 37 +++++++++++++++++++
 .../src/docs/syntax/sequenceDiagram.md        | 25 +++++++++++++
 2 files changed, 62 insertions(+)

diff --git a/docs/syntax/sequenceDiagram.md b/docs/syntax/sequenceDiagram.md
index 26f81452d..89c232ea6 100644
--- a/docs/syntax/sequenceDiagram.md
+++ b/docs/syntax/sequenceDiagram.md
@@ -94,6 +94,43 @@ sequenceDiagram
     J->>A: Great!
 ```
 
+### Actor Creation and Destruction
+
+It is possible to create and destroy actors by messages. To do so, add a create or destroy directive before the message.
+
+    create participant B
+    A --> B: Hello
+
+Create directives support actor/participant distinction and aliases. The sender or the recipient of a message can be destroyed but only the recipient can be created.
+
+```mermaid-example
+sequenceDiagram
+    Alice->>Bob: Hello Bob, how are you ?
+    Bob->>Alice: Fine, thank you. And you?
+    create participant Carl
+    Alice->>Carl: Hi Carl!
+    create actor D as Donald
+    Carl->>D: Hi!
+    destroy Carl
+    Alice-xCarl: We are too many
+    destroy Bob
+    Bob->>Alice: I agree
+```
+
+```mermaid
+sequenceDiagram
+    Alice->>Bob: Hello Bob, how are you ?
+    Bob->>Alice: Fine, thank you. And you?
+    create participant Carl
+    Alice->>Carl: Hi Carl!
+    create actor D as Donald
+    Carl->>D: Hi!
+    destroy Carl
+    Alice-xCarl: We are too many
+    destroy Bob
+    Bob->>Alice: I agree
+```
+
 ### Grouping / Box
 
 The actor(s) can be grouped in vertical boxes. You can define a color (if not, it will be transparent) and/or a descriptive label using the following notation:
diff --git a/packages/mermaid/src/docs/syntax/sequenceDiagram.md b/packages/mermaid/src/docs/syntax/sequenceDiagram.md
index 0d5442129..e061a192e 100644
--- a/packages/mermaid/src/docs/syntax/sequenceDiagram.md
+++ b/packages/mermaid/src/docs/syntax/sequenceDiagram.md
@@ -58,6 +58,31 @@ sequenceDiagram
     J->>A: Great!
 ```
 
+### Actor Creation and Destruction
+
+It is possible to create and destroy actors by messages. To do so, add a create or destroy directive before the message.
+
+```
+create participant B
+A --> B: Hello
+```
+
+Create directives support actor/participant distinction and aliases. The sender or the recipient of a message can be destroyed but only the recipient can be created.
+
+```mermaid-example
+sequenceDiagram
+    Alice->>Bob: Hello Bob, how are you ?
+    Bob->>Alice: Fine, thank you. And you?
+    create participant Carl
+    Alice->>Carl: Hi Carl!
+    create actor D as Donald
+    Carl->>D: Hi!
+    destroy Carl
+    Alice-xCarl: We are too many
+    destroy Bob
+    Bob->>Alice: I agree
+```
+
 ### Grouping / Box
 
 The actor(s) can be grouped in vertical boxes. You can define a color (if not, it will be transparent) and/or a descriptive label using the following notation:

From 9a692b343717001b090ad253566caa054f104525 Mon Sep 17 00:00:00 2001
From: steph <steph@huynhicode.dev>
Date: Thu, 15 Jun 2023 16:11:57 -0700
Subject: [PATCH 003/187] update latest news section

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

diff --git a/docs/news/announcements.md b/docs/news/announcements.md
index a843ae419..1837b33db 100644
--- a/docs/news/announcements.md
+++ b/docs/news/announcements.md
@@ -6,8 +6,8 @@
 
 # Announcements
 
-## [subhash-halder contributed quadrant charts so you can show your manager what to select - just like the strategy consultants at BCG do](https://www.mermaidchart.com/blog/posts/subhash-halder-contributed-quadrant-charts-so-you-can-show-your-manager-what-to-select-just-like-the-strategy-consultants-at-bcg-do/)
+## [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/)
 
-8 June 2023 · 7 mins
+15 June 2023 · 12 mins
 
-A quadrant chart is a useful diagram that helps users visualize data and identify patterns in a data set.
+Sequence diagrams really shine when you’re documenting different parts of a system and the various ways these parts interact with each other.
diff --git a/docs/news/blog.md b/docs/news/blog.md
index 48b669d79..eb9ec6c47 100644
--- a/docs/news/blog.md
+++ b/docs/news/blog.md
@@ -6,6 +6,12 @@
 
 # Blog
 
+## [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
+
+Sequence diagrams really shine when you’re documenting different parts of a system and the various ways these parts interact with each other.
+
 ## [subhash-halder contributed quadrant charts so you can show your manager what to select - just like the strategy consultants at BCG do](https://www.mermaidchart.com/blog/posts/subhash-halder-contributed-quadrant-charts-so-you-can-show-your-manager-what-to-select-just-like-the-strategy-consultants-at-bcg-do/)
 
 8 June 2023 · 7 mins
diff --git a/packages/mermaid/src/docs/news/announcements.md b/packages/mermaid/src/docs/news/announcements.md
index b752d3d57..83dafaab6 100644
--- a/packages/mermaid/src/docs/news/announcements.md
+++ b/packages/mermaid/src/docs/news/announcements.md
@@ -1,7 +1,7 @@
 # Announcements
 
-## [subhash-halder contributed quadrant charts so you can show your manager what to select - just like the strategy consultants at BCG do](https://www.mermaidchart.com/blog/posts/subhash-halder-contributed-quadrant-charts-so-you-can-show-your-manager-what-to-select-just-like-the-strategy-consultants-at-bcg-do/)
+## [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/)
 
-8 June 2023 · 7 mins
+15 June 2023 · 12 mins
 
-A quadrant chart is a useful diagram that helps users visualize data and identify patterns in a data set.
+Sequence diagrams really shine when you’re documenting different parts of a system and the various ways these parts interact with each other.
diff --git a/packages/mermaid/src/docs/news/blog.md b/packages/mermaid/src/docs/news/blog.md
index e62a327b4..61d53656d 100644
--- a/packages/mermaid/src/docs/news/blog.md
+++ b/packages/mermaid/src/docs/news/blog.md
@@ -1,5 +1,11 @@
 # Blog
 
+## [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
+
+Sequence diagrams really shine when you’re documenting different parts of a system and the various ways these parts interact with each other.
+
 ## [subhash-halder contributed quadrant charts so you can show your manager what to select - just like the strategy consultants at BCG do](https://www.mermaidchart.com/blog/posts/subhash-halder-contributed-quadrant-charts-so-you-can-show-your-manager-what-to-select-just-like-the-strategy-consultants-at-bcg-do/)
 
 8 June 2023 · 7 mins

From 4018fad4167227087f447de112c221770ff8168a Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Sun, 18 Jun 2023 01:32:45 +0300
Subject: [PATCH 004/187] Ideas about sankey diagram syntax

---
 .../mermaid/src/sankey/parser/desired syntax  | 37 +++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 packages/mermaid/src/sankey/parser/desired syntax

diff --git a/packages/mermaid/src/sankey/parser/desired syntax b/packages/mermaid/src/sankey/parser/desired syntax
new file mode 100644
index 000000000..b2b998748
--- /dev/null
+++ b/packages/mermaid/src/sankey/parser/desired syntax	
@@ -0,0 +1,37 @@
+This is example of data for Sakey diagrams from d3 author:
+circular graph not supported
+
+Berlin,Job Applications,102
+Barcelona,Job Applications,39
+Madrid,Job Applications,35
+Amsterdam,Job Applications,15
+Paris,Job Applications,14
+London,Job Applications,6
+Munich,Job Applications,5
+Brussels,Job Applications,4
+Dubai,Job Applications,3
+Dublin,Job Applications,3
+Other Cities,Job Applications,12
+Job Applications,No Response,189
+Job Applications,Responded,49,orange
+Responded,Rejected,38
+Responded,Interviewed,11,orange
+Interviewed,No Offer,8
+Interviewed,Declined Offer,2
+Interviewed,Accepted Offer,1,orange
+
+Attributes for
+
+.nodeSort(null)
+.linkSort(null)
+.nodeWidth(4)
+.nodePadding(20)
+.extent([[0, 5], [width, height - 5]]) // margin?
+
+berlin [label="asdf" color="red"] #node
+
+
+Berlin,Job,
+JobApplications[label="Job Applications"]
+
+madrid=35 ->
\ No newline at end of file

From 7f19e50403cd0d7453dca2ee435b6cb4fce5c19c Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Sun, 18 Jun 2023 01:32:45 +0300
Subject: [PATCH 005/187] Desired sankey syntax

---
 .../{desired syntax => desired_syntax.md}     | 51 ++++++++++++++++---
 1 file changed, 44 insertions(+), 7 deletions(-)
 rename packages/mermaid/src/sankey/parser/{desired syntax => desired_syntax.md} (52%)

diff --git a/packages/mermaid/src/sankey/parser/desired syntax b/packages/mermaid/src/sankey/parser/desired_syntax.md
similarity index 52%
rename from packages/mermaid/src/sankey/parser/desired syntax
rename to packages/mermaid/src/sankey/parser/desired_syntax.md
index b2b998748..61543c266 100644
--- a/packages/mermaid/src/sankey/parser/desired syntax	
+++ b/packages/mermaid/src/sankey/parser/desired_syntax.md
@@ -1,6 +1,9 @@
-This is example of data for Sakey diagrams from d3 author:
-circular graph not supported
+# Sankey diagrams syntax proposal
 
+Circular graphs are not supported by d3. There are some alternatives for that.
+This is example of data for Sakey diagrams from d3 author (simple csv):
+
+```csv
 Berlin,Job Applications,102
 Barcelona,Job Applications,39
 Madrid,Job Applications,35
@@ -19,19 +22,53 @@ Responded,Interviewed,11,orange
 Interviewed,No Offer,8
 Interviewed,Declined Offer,2
 Interviewed,Accepted Offer,1,orange
+```
 
-Attributes for
+We also need graph and node attributes like this:
 
+```
 .nodeSort(null)
 .linkSort(null)
 .nodeWidth(4)
 .nodePadding(20)
 .extent([[0, 5], [width, height - 5]]) // margin?
+```
 
-berlin [label="asdf" color="red"] #node
+Also needed:
+* coloring strategy (source, target, transition)
+* graph alignment (left, right, width)
+
+Proposed syntax:
+```
+a -> 30 -> b
+a -> 40 -> c
+
+a -> {
+    30 -> b
+    40 -> c
+}
+
+{
+    a -> 30
+    b -> 40
+} -> c
 
 
-Berlin,Job,
-JobApplications[label="Job Applications"]
+a -> {
+    30
+    40
+} -> b
 
-madrid=35 ->
\ No newline at end of file
+a -> 30 -> {
+    b
+    c
+}
+
+a -> {
+    30
+    40
+} -> {
+    b
+    c
+}
+```

From 116453d2a748462d67c318dbeb90bc5f60f1e45d Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Sun, 18 Jun 2023 01:32:45 +0300
Subject: [PATCH 006/187] Desired syntax sankey

---
 .../src/sankey/parser/desired_syntax.md       | 85 ++++++++++++++++---
 1 file changed, 72 insertions(+), 13 deletions(-)

diff --git a/packages/mermaid/src/sankey/parser/desired_syntax.md b/packages/mermaid/src/sankey/parser/desired_syntax.md
index 61543c266..1f0e58b41 100644
--- a/packages/mermaid/src/sankey/parser/desired_syntax.md
+++ b/packages/mermaid/src/sankey/parser/desired_syntax.md
@@ -1,6 +1,10 @@
 # Sankey diagrams syntax proposal
 
-Circular graphs are not supported by d3. There are some alternatives for that.
+## What is used now
+
+**Circular graphs are not supported by d3. There are some alternatives for that.**
+**Dropped flows are not supported by d3**
+
 This is example of data for Sakey diagrams from d3 author (simple csv):
 
 ```csv
@@ -24,46 +28,85 @@ Interviewed,Declined Offer,2
 Interviewed,Accepted Offer,1,orange
 ```
 
+GoJS uses similar approach
+```json
+{
+"nodeDataArray": [
+{"key":"Coal reserves", "text":"Coal reserves", "color":"#9d75c2"},
+{"key":"Coal imports", "text":"Coal imports", "color":"#9d75c2"},
+{"key":"Oil reserves", "text":"Oil\nreserves", "color":"#9d75c2"},
+{"key":"Oil imports", "text":"Oil imports", "color":"#9d75c2"}
+],
+"linkDataArray": [
+{"from":"Coal reserves", "to":"Coal", "width":31},
+{"from":"Coal imports", "to":"Coal", "width":86},
+{"from":"Oil reserves", "to":"Oil", "width":244}
+}
+```
+
+## What do we need
+
+Mainly we need:
+* collection of nodes
+* collection of links
+
 We also need graph and node attributes like this:
-
-```
-.nodeSort(null)
-.linkSort(null)
-.nodeWidth(4)
-.nodePadding(20)
-.extent([[0, 5], [width, height - 5]]) // margin?
-```
-
-Also needed:
-* coloring strategy (source, target, transition)
+* link sort
+* node sort
+* coloring strategy for links (source, target, transition)
 * graph alignment (left, right, width)
+* node color
+* node title
+* node width
+* node padding
+* graph margin
 
-Proposed syntax:
+## Desired syntax
+
+Graph is a list of flows (or links).
+Flow is a sequence `node -> value -> node -> value...`
 ```
 a -> 30 -> b
 a -> 40 -> c
+```
 
+All outflows from the node can be grouped:
+```
 a -> {
     30 -> b
     40 -> c
 }
+```
 
+All inflows to the node can be grouped too:
+```
 {
     a -> 30
     b -> 40
 } -> c
+```
 
+2 separate streams between 2 nodes they can be grouped as well:
 
+```
 a -> {
     30
     40
 } -> b
+```
 
+**Probably ambiguous!**
+
+Does the sample below mean that total outflow from "a" is 60?
+```
 a -> 30 -> {
     b
     c
 }
+```
 
+Or does this one mean that total outflow must be 140 (70 to "b" and "c" respectively)?
+```
 a -> {
     30
     40
@@ -72,3 +115,19 @@ a -> {
     c
 }
 ```
+
+**Overcomplicated**
+
+Nested:
+```
+{
+    {
+        a -> 30
+        b -> 40
+    } -> c -> 12
+    {
+        d -> 10
+        e -> 20
+    } -> f -> 43
+} -> g
+```

From c2417de5f1cb4a523034c94fe5c4a9bcd31fa9d3 Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Sun, 18 Jun 2023 01:32:45 +0300
Subject: [PATCH 007/187] Stated sankey backbone

---
 .../src/diagram-api/diagram-orchestration.ts  |  4 +-
 packages/mermaid/src/diagrams/sankey/db.js    | 69 +++++++++++++++++++
 .../mermaid/src/diagrams/sankey/detector.ts   | 20 ++++++
 .../sankey/parser/desired_syntax.md           | 18 +++--
 .../src/diagrams/sankey/parser/sankey.jison   | 13 ++++
 .../mermaid/src/diagrams/sankey/renderer.ts   | 27 ++++++++
 .../src/diagrams/sankey/sankeyDiagram.ts      | 13 ++++
 .../mermaid/src/diagrams/sankey/styles.js     |  5 ++
 8 files changed, 164 insertions(+), 5 deletions(-)
 create mode 100644 packages/mermaid/src/diagrams/sankey/db.js
 create mode 100644 packages/mermaid/src/diagrams/sankey/detector.ts
 rename packages/mermaid/src/{ => diagrams}/sankey/parser/desired_syntax.md (96%)
 create mode 100644 packages/mermaid/src/diagrams/sankey/parser/sankey.jison
 create mode 100644 packages/mermaid/src/diagrams/sankey/renderer.ts
 create mode 100644 packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts
 create mode 100644 packages/mermaid/src/diagrams/sankey/styles.js

diff --git a/packages/mermaid/src/diagram-api/diagram-orchestration.ts b/packages/mermaid/src/diagram-api/diagram-orchestration.ts
index 0253be45d..6c9cc4a03 100644
--- a/packages/mermaid/src/diagram-api/diagram-orchestration.ts
+++ b/packages/mermaid/src/diagram-api/diagram-orchestration.ts
@@ -18,6 +18,7 @@ import errorDiagram from '../diagrams/error/errorDiagram.js';
 import flowchartElk from '../diagrams/flowchart/elk/detector.js';
 import timeline from '../diagrams/timeline/detector.js';
 import mindmap from '../diagrams/mindmap/detector.js';
+import sankey from '../diagrams/sankey/detector.js';
 import { registerLazyLoadedDiagrams } from './detectType.js';
 import { registerDiagram } from './diagramAPI.js';
 
@@ -79,6 +80,7 @@ export const addDiagrams = () => {
     stateV2,
     state,
     journey,
-    quadrantChart
+    quadrantChart,
+    sankey,
   );
 };
diff --git a/packages/mermaid/src/diagrams/sankey/db.js b/packages/mermaid/src/diagrams/sankey/db.js
new file mode 100644
index 000000000..2c86752c6
--- /dev/null
+++ b/packages/mermaid/src/diagrams/sankey/db.js
@@ -0,0 +1,69 @@
+import { log } from '../../logger.js';
+import mermaidAPI from '../../mermaidAPI.js';
+import * as configApi from '../../config.js';
+import common from '../common/common.js';
+import {
+  setAccTitle,
+  getAccTitle,
+  setDiagramTitle,
+  getDiagramTitle,
+  getAccDescription,
+  setAccDescription,
+  clear as commonClear,
+} from '../../commonDb.js';
+
+let sections = {};
+let showData = false;
+
+export const parseDirective = function (statement, context, type) {
+  mermaidAPI.parseDirective(this, statement, context, type);
+};
+
+const addSection = function (id, value) {
+  id = common.sanitizeText(id, configApi.getConfig());
+  if (sections[id] === undefined) {
+    sections[id] = value;
+    log.debug('Added new section :', id);
+  }
+};
+const getSections = () => sections;
+
+const setShowData = function (toggle) {
+  showData = toggle;
+};
+
+const getShowData = function () {
+  return showData;
+};
+
+const cleanupValue = function (value) {
+  if (value.substring(0, 1) === ':') {
+    value = value.substring(1).trim();
+    return Number(value.trim());
+  } else {
+    return Number(value.trim());
+  }
+};
+
+const clear = function () {
+  sections = {};
+  showData = false;
+  commonClear();
+};
+
+export default {
+  parseDirective,
+  getConfig: () => configApi.getConfig().pie,
+  addSection,
+  getSections,
+  cleanupValue,
+  clear,
+  setAccTitle,
+  getAccTitle,
+  setDiagramTitle,
+  getDiagramTitle,
+  setShowData,
+  getShowData,
+  getAccDescription,
+  setAccDescription,
+};
diff --git a/packages/mermaid/src/diagrams/sankey/detector.ts b/packages/mermaid/src/diagrams/sankey/detector.ts
new file mode 100644
index 000000000..6c0bcdae8
--- /dev/null
+++ b/packages/mermaid/src/diagrams/sankey/detector.ts
@@ -0,0 +1,20 @@
+import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types.js';
+
+const id = 'sankey';
+
+const detector: DiagramDetector = (txt) => {
+  return txt.match(/^\s*sankey/) !== null;
+};
+
+const loader = async () => {
+  const { diagram } = await import('./sankeyDiagram.js');
+  return { id, diagram };
+};
+
+const plugin: ExternalDiagramDefinition = {
+  id,
+  detector,
+  loader,
+};
+
+export default plugin;
diff --git a/packages/mermaid/src/sankey/parser/desired_syntax.md b/packages/mermaid/src/diagrams/sankey/parser/desired_syntax.md
similarity index 96%
rename from packages/mermaid/src/sankey/parser/desired_syntax.md
rename to packages/mermaid/src/diagrams/sankey/parser/desired_syntax.md
index 1f0e58b41..52057fce9 100644
--- a/packages/mermaid/src/sankey/parser/desired_syntax.md
+++ b/packages/mermaid/src/diagrams/sankey/parser/desired_syntax.md
@@ -67,7 +67,15 @@ Graph is a list of flows (or links).
 Flow is a sequence `node -> value -> node -> value...`
 ```
 a -> 30 -> b
-a -> 40 -> c
+a -> 40 -> b
+```
+
+2 separate streams between 2 nodes they can be grouped as well:
+```
+a -> {
+    30
+    40
+} -> b
 ```
 
 All outflows from the node can be grouped:
@@ -86,13 +94,15 @@ All inflows to the node can be grouped too:
 } -> c
 ```
 
-2 separate streams between 2 nodes they can be grouped as well:
-
+Chaining example:
 ```
 a -> {
     30
     40
-} -> b
+} -> b -> {
+    20 -> d
+    50 -> e
+}
 ```
 
 **Probably ambiguous!**
diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
new file mode 100644
index 000000000..394994927
--- /dev/null
+++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
@@ -0,0 +1,13 @@
+%lex
+%options case-insensitive
+
+%%
+
+/lex
+
+%start graph
+
+%%
+
+graph
+  : node -> 
\ No newline at end of file
diff --git a/packages/mermaid/src/diagrams/sankey/renderer.ts b/packages/mermaid/src/diagrams/sankey/renderer.ts
new file mode 100644
index 000000000..cb1e2d33c
--- /dev/null
+++ b/packages/mermaid/src/diagrams/sankey/renderer.ts
@@ -0,0 +1,27 @@
+// import { select, scaleOrdinal, pie as d3pie, arc } from 'd3';
+
+// import { select, selectAll } from 'd3';
+// import { log } from '../../logger.js';
+// import common from '../common/common.js';
+// import * as svgDrawCommon from '../common/svgDrawCommon';
+import * as configApi from '../../config.js';
+// import assignWithDepth from '../../assignWithDepth.js';
+// import utils from '../../utils.js';
+// import { configureSvgSize } from '../../setupGraphViewbox.js';
+import { Diagram } from '../../Diagram.js';
+
+// import { parseFontSize } from '../../utils.js';
+
+const conf = configApi.getConfig();
+
+/**
+ * Draws a Sankey Diagram with the data given in text.
+ *
+ * @param text
+ * @param id
+ */
+export const draw = function (_text: string, id: string, _version: string, _diagObj: Diagram) {}
+
+export default {
+  draw,
+};
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts b/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts
new file mode 100644
index 000000000..e6b502227
--- /dev/null
+++ b/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts
@@ -0,0 +1,13 @@
+import { DiagramDefinition } from '../../diagram-api/types.js';
+// @ts-ignore: TODO Fix ts errors
+import parser from './parser/sankey.jison';
+import db from './db.js';
+import styles from './styles.js';
+import renderer from './renderer.js';
+
+export const diagram: DiagramDefinition = {
+  parser,
+  db,
+  renderer,
+  styles,
+};
diff --git a/packages/mermaid/src/diagrams/sankey/styles.js b/packages/mermaid/src/diagrams/sankey/styles.js
new file mode 100644
index 000000000..54881fe6f
--- /dev/null
+++ b/packages/mermaid/src/diagrams/sankey/styles.js
@@ -0,0 +1,5 @@
+const getStyles = (options) =>
+  `
+`;
+
+export default getStyles;

From 6b40b394c8b6c35e7c9f57493059561fd492b4f1 Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Sun, 18 Jun 2023 01:32:45 +0300
Subject: [PATCH 008/187] Picked state diagram as a sample for sankey

---
 __mocks__/sankeyRenderer.js                   |   13 +
 .../src/diagram-api/diagram-orchestration.ts  |    2 +-
 .../src/diagrams/sankey/parser/sankey.jison   |  345 +++-
 .../mermaid/src/diagrams/sankey/renderer.ts   |   27 -
 .../diagrams/sankey/{db.js => sankeyDB.js}    |    0
 .../sankey/{detector.ts => sankeyDetector.ts} |    0
 .../src/diagrams/sankey/sankeyDiagram.spec.js |   24 +
 .../src/diagrams/sankey/sankeyDiagram.ts      |    4 +-
 .../src/diagrams/sankey/sankeyRenderer.ts     | 1446 +++++++++++++++++
 packages/mermaid/src/styles.spec.ts           |    2 +
 10 files changed, 1829 insertions(+), 34 deletions(-)
 create mode 100644 __mocks__/sankeyRenderer.js
 delete mode 100644 packages/mermaid/src/diagrams/sankey/renderer.ts
 rename packages/mermaid/src/diagrams/sankey/{db.js => sankeyDB.js} (100%)
 rename packages/mermaid/src/diagrams/sankey/{detector.ts => sankeyDetector.ts} (100%)
 create mode 100644 packages/mermaid/src/diagrams/sankey/sankeyDiagram.spec.js
 create mode 100644 packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts

diff --git a/__mocks__/sankeyRenderer.js b/__mocks__/sankeyRenderer.js
new file mode 100644
index 000000000..76324c93f
--- /dev/null
+++ b/__mocks__/sankeyRenderer.js
@@ -0,0 +1,13 @@
+/**
+ * Mocked Sankey diagram renderer
+ */
+
+import { vi } from 'vitest';
+
+export const draw = vi.fn().mockImplementation(() => {
+  return '';
+});
+
+export default {
+  draw,
+};
diff --git a/packages/mermaid/src/diagram-api/diagram-orchestration.ts b/packages/mermaid/src/diagram-api/diagram-orchestration.ts
index 6c9cc4a03..afebaf1ae 100644
--- a/packages/mermaid/src/diagram-api/diagram-orchestration.ts
+++ b/packages/mermaid/src/diagram-api/diagram-orchestration.ts
@@ -18,7 +18,7 @@ import errorDiagram from '../diagrams/error/errorDiagram.js';
 import flowchartElk from '../diagrams/flowchart/elk/detector.js';
 import timeline from '../diagrams/timeline/detector.js';
 import mindmap from '../diagrams/mindmap/detector.js';
-import sankey from '../diagrams/sankey/detector.js';
+import sankey from '../diagrams/sankey/sankeyDetector.js';
 import { registerLazyLoadedDiagrams } from './detectType.js';
 import { registerDiagram } from './diagramAPI.js';
 
diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
index 394994927..074cd5975 100644
--- a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
+++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
@@ -1,13 +1,350 @@
+/** mermaid
+ *  https://mermaidjs.github.io/
+ *  (c) 2014-2015 Knut Sveidqvist
+ *  MIT license.
+ *
+ *  Based on js sequence diagrams jison grammr
+ *  https://bramp.github.io/js-sequence-diagrams/
+ *  (c) 2012-2013 Andrew Brampton (bramp.net)
+ *  Simplified BSD license.
+ */
 %lex
+
 %options case-insensitive
 
+// Special states for recognizing aliases
+// A special state for grabbing text up to the first comment/newline
+%x ID ALIAS LINE
+
+// Directive states
+%x open_directive type_directive arg_directive
+%x acc_title
+%x acc_descr
+%x acc_descr_multiline
 %%
 
+\%\%\{                                                          { this.begin('open_directive'); return 'open_directive'; }
+<open_directive>((?:(?!\}\%\%)[^:.])*)                          { this.begin('type_directive'); return 'type_directive'; }
+<type_directive>":"                                             { this.popState(); this.begin('arg_directive'); return ':'; }
+<type_directive,arg_directive>\}\%\%                            { this.popState(); this.popState(); return 'close_directive'; }
+<arg_directive>((?:(?!\}\%\%).|\n)*)                            return 'arg_directive';
+[\n]+                                                           return 'NEWLINE';
+\s+                                                             /* skip all whitespace */
+<ID,ALIAS,LINE>((?!\n)\s)+                                      /* skip same-line whitespace */
+<INITIAL,ID,ALIAS,LINE,arg_directive,type_directive,open_directive>\#[^\n]*   /* skip comments */
+\%%(?!\{)[^\n]*                                                 /* skip comments */
+[^\}]\%\%[^\n]*                                                 /* skip comments */
+[0-9]+(?=[ \n]+)       											return 'NUM';
+"box"															{ this.begin('LINE'); return 'box'; }
+"participant"                                                   { this.begin('ID'); return 'participant'; }
+"actor"                                                   		{ this.begin('ID'); return 'participant_actor'; }
+<ID>[^\->:\n,;]+?([\-]*[^\->:\n,;]+?)*?(?=((?!\n)\s)+"as"(?!\n)\s|[#\n;]|$)     { yytext = yytext.trim(); this.begin('ALIAS'); return 'ACTOR'; }
+<ALIAS>"as"                                                     { this.popState(); this.popState(); this.begin('LINE'); return 'AS'; }
+<ALIAS>(?:)                                                     { this.popState(); this.popState(); return 'NEWLINE'; }
+"loop"                                                          { this.begin('LINE'); return 'loop'; }
+"rect"                                                          { this.begin('LINE'); return 'rect'; }
+"opt"                                                           { this.begin('LINE'); return 'opt'; }
+"alt"                                                           { this.begin('LINE'); return 'alt'; }
+"else"                                                          { this.begin('LINE'); return 'else'; }
+"par"                                                           { this.begin('LINE'); return 'par'; }
+"par_over" 														{ this.begin('LINE'); return 'par_over'; }
+"and"                                                           { this.begin('LINE'); return 'and'; }
+"critical"                                                      { this.begin('LINE'); return 'critical'; }
+"option"                                                        { this.begin('LINE'); return 'option'; }
+"break"                                                         { this.begin('LINE'); return 'break'; }
+<LINE>(?:[:]?(?:no)?wrap:)?[^#\n;]*                             { this.popState(); return 'restOfLine'; }
+"end"                                                           return 'end';
+"left of"                                                       return 'left_of';
+"right of"                                                      return 'right_of';
+"links"                                                         return 'links';
+"link"                                                          return 'link';
+"properties"                                                    return 'properties';
+"details"                                                       return 'details';
+"over"                                                          return 'over';
+"note"                                                          return 'note';
+"activate"                                                      { this.begin('ID'); return 'activate'; }
+"deactivate"                                                    { this.begin('ID'); return 'deactivate'; }
+"title"\s[^#\n;]+                                               return 'title';
+"title:"\s[^#\n;]+                                              return 'legacy_title';
+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";
+"sequenceDiagram"                                               return 'SD';
+"autonumber"                                                    return 'autonumber';
+"off"															return 'off';
+","                                                             return ',';
+";"                                                             return 'NEWLINE';
+[^\+\->:\n,;]+((?!(\-x|\-\-x|\-\)|\-\-\)))[\-]*[^\+\->:\n,;]+)*             { yytext = yytext.trim(); return 'ACTOR'; }
+"->>"                                                           return 'SOLID_ARROW';
+"-->>"                                                          return 'DOTTED_ARROW';
+"->"                                                            return 'SOLID_OPEN_ARROW';
+"-->"                                                           return 'DOTTED_OPEN_ARROW';
+\-[x]                                                           return 'SOLID_CROSS';
+\-\-[x]                                                         return 'DOTTED_CROSS';
+\-[\)]                                                          return 'SOLID_POINT';
+\-\-[\)]                                                        return 'DOTTED_POINT';
+":"(?:(?:no)?wrap:)?[^#\n;]+                                    return 'TXT';
+"+"                                                             return '+';
+"-"                                                             return '-';
+<<EOF>>                                                         return 'NEWLINE';
+.                                                               return 'INVALID';
+
 /lex
 
-%start graph
+%left '^'
+
+%start start
+
+%% /* language grammar */
+
+start
+	: SPACE start
+	| NEWLINE start
+	| directive start
+	| SD document { yy.apply($2);return $2; }
+	;
+
+document
+	: /* empty */ { $$ = [] }
+	| document line {$1.push($2);$$ = $1}
+	;
+
+line
+	: SPACE statement { $$ = $2 }
+	| statement { $$ = $1 }
+	| NEWLINE { $$=[]; }
+	;
+
+box_section
+	: /* empty */ { $$ = [] }
+	| box_section box_line {$1.push($2);$$ = $1}
+	;
+
+box_line
+	: SPACE participant_statement { $$ = $2 }
+	| participant_statement { $$ = $1 }
+	| NEWLINE { $$=[]; }
+	;
+
+
+directive
+  : openDirective typeDirective closeDirective 'NEWLINE'
+  | openDirective typeDirective ':' argDirective closeDirective 'NEWLINE'
+  ;
+
+statement
+	: participant_statement
+	| 'box' restOfLine box_section end
+	{
+		$3.unshift({type: 'boxStart', boxData:yy.parseBoxData($2) });
+		$3.push({type: 'boxEnd', boxText:$2});
+		$$=$3;}
+	| signal 'NEWLINE'
+	| autonumber NUM NUM 'NEWLINE' { $$= {type:'sequenceIndex',sequenceIndex: Number($2), sequenceIndexStep:Number($3), sequenceVisible:true, signalType:yy.LINETYPE.AUTONUMBER};}
+	| autonumber NUM 'NEWLINE' { $$ = {type:'sequenceIndex',sequenceIndex: Number($2), sequenceIndexStep:1, sequenceVisible:true, signalType:yy.LINETYPE.AUTONUMBER};}
+	| autonumber off 'NEWLINE' { $$ = {type:'sequenceIndex', sequenceVisible:false, signalType:yy.LINETYPE.AUTONUMBER};}
+	| autonumber 'NEWLINE'  {$$ = {type:'sequenceIndex', sequenceVisible:true, signalType:yy.LINETYPE.AUTONUMBER}; }
+	| 'activate' actor 'NEWLINE' {$$={type: 'activeStart', signalType: yy.LINETYPE.ACTIVE_START, actor: $2};}
+	| 'deactivate' actor 'NEWLINE' {$$={type: 'activeEnd', signalType: yy.LINETYPE.ACTIVE_END, actor: $2};}
+	| note_statement 'NEWLINE'
+	| links_statement 'NEWLINE'
+	| link_statement 'NEWLINE'
+	| properties_statement 'NEWLINE'
+	| details_statement 'NEWLINE'
+	| title {yy.setDiagramTitle($1.substring(6));$$=$1.substring(6);}
+	| legacy_title {yy.setDiagramTitle($1.substring(7));$$=$1.substring(7);}
+  | acc_title acc_title_value  { $$=$2.trim();yy.setAccTitle($$); }
+  | acc_descr acc_descr_value  { $$=$2.trim();yy.setAccDescription($$); }
+  | acc_descr_multiline_value { $$=$1.trim();yy.setAccDescription($$); }
+	| 'loop' restOfLine document end
+	{
+		$3.unshift({type: 'loopStart', loopText:yy.parseMessage($2), signalType: yy.LINETYPE.LOOP_START});
+		$3.push({type: 'loopEnd', loopText:$2, signalType: yy.LINETYPE.LOOP_END});
+		$$=$3;}
+	| 'rect' restOfLine document end
+	{
+		$3.unshift({type: 'rectStart', color:yy.parseMessage($2), signalType: yy.LINETYPE.RECT_START });
+		$3.push({type: 'rectEnd', color:yy.parseMessage($2), signalType: yy.LINETYPE.RECT_END });
+		$$=$3;}
+	| opt restOfLine document end
+	{
+		$3.unshift({type: 'optStart', optText:yy.parseMessage($2), signalType: yy.LINETYPE.OPT_START});
+		$3.push({type: 'optEnd', optText:yy.parseMessage($2), signalType: yy.LINETYPE.OPT_END});
+		$$=$3;}
+	| alt restOfLine else_sections end
+	{
+		// Alt start
+		$3.unshift({type: 'altStart', altText:yy.parseMessage($2), signalType: yy.LINETYPE.ALT_START});
+		// Content in alt is already in $3
+		// End
+		$3.push({type: 'altEnd', signalType: yy.LINETYPE.ALT_END});
+		$$=$3;}
+	| par restOfLine par_sections end
+	{
+		// Parallel start
+		$3.unshift({type: 'parStart', parText:yy.parseMessage($2), signalType: yy.LINETYPE.PAR_START});
+		// Content in par is already in $3
+		// End
+		$3.push({type: 'parEnd', signalType: yy.LINETYPE.PAR_END});
+		$$=$3;}
+	| par_over restOfLine par_sections end
+	{
+		// Parallel (overlapped) start
+		$3.unshift({type: 'parStart', parText:yy.parseMessage($2), signalType: yy.LINETYPE.PAR_OVER_START});
+		// Content in par is already in $3
+		// End
+		$3.push({type: 'parEnd', signalType: yy.LINETYPE.PAR_END});
+		$$=$3;}
+	| critical restOfLine option_sections end
+	{
+		// critical start
+		$3.unshift({type: 'criticalStart', criticalText:yy.parseMessage($2), signalType: yy.LINETYPE.CRITICAL_START});
+		// Content in critical is already in $3
+		// critical end
+		$3.push({type: 'criticalEnd', signalType: yy.LINETYPE.CRITICAL_END});
+		$$=$3;}
+	| break restOfLine document end
+	{
+		$3.unshift({type: 'breakStart', breakText:yy.parseMessage($2), signalType: yy.LINETYPE.BREAK_START});
+		$3.push({type: 'breakEnd', optText:yy.parseMessage($2), signalType: yy.LINETYPE.BREAK_END});
+		$$=$3;}
+  | directive
+	;
+
+option_sections
+	: document
+	| document option restOfLine option_sections
+	{ $$ = $1.concat([{type: 'option', optionText:yy.parseMessage($3), signalType: yy.LINETYPE.CRITICAL_OPTION}, $4]); }
+	;
+
+par_sections
+	: document
+	| document and restOfLine par_sections
+	{ $$ = $1.concat([{type: 'and', parText:yy.parseMessage($3), signalType: yy.LINETYPE.PAR_AND}, $4]); }
+	;
+
+else_sections
+	: document
+	| document else restOfLine else_sections
+	{ $$ = $1.concat([{type: 'else', altText:yy.parseMessage($3), signalType: yy.LINETYPE.ALT_ELSE}, $4]); }
+	;
+
+participant_statement
+	: 'participant' actor 'AS' restOfLine 'NEWLINE' {$2.type='addParticipant';$2.description=yy.parseMessage($4); $$=$2;}
+	| 'participant' actor 'NEWLINE' {$2.type='addParticipant';$$=$2;}
+	| 'participant_actor' actor 'AS' restOfLine 'NEWLINE' {$2.type='addActor';$2.description=yy.parseMessage($4); $$=$2;}
+	| 'participant_actor' actor 'NEWLINE' {$2.type='addActor'; $$=$2;}
+	;
+
+note_statement
+	: 'note' placement actor text2
+	{
+		$$ = [$3, {type:'addNote', placement:$2, actor:$3.actor, text:$4}];}
+	| 'note' 'over' actor_pair text2
+	{
+		// Coerce actor_pair into a [to, from, ...] array
+		$2 = [].concat($3, $3).slice(0, 2);
+		$2[0] = $2[0].actor;
+		$2[1] = $2[1].actor;
+		$$ = [$3, {type:'addNote', placement:yy.PLACEMENT.OVER, actor:$2.slice(0, 2), text:$4}];}
+	;
+
+links_statement
+	: 'links' actor text2
+	{
+		$$ = [$2, {type:'addLinks', actor:$2.actor, text:$3}];
+  }
+	;
+
+link_statement
+	: 'link' actor text2
+	{
+		$$ = [$2, {type:'addALink', actor:$2.actor, text:$3}];
+  }
+	;
+
+properties_statement
+	: 'properties' actor text2
+	{
+		$$ = [$2, {type:'addProperties', actor:$2.actor, text:$3}];
+  }
+	;
+
+details_statement
+	: 'details' actor text2
+	{
+		$$ = [$2, {type:'addDetails', actor:$2.actor, text:$3}];
+  }
+	;
+
+spaceList
+    : SPACE spaceList
+    | SPACE
+    ;
+actor_pair
+	: actor ',' actor   { $$ = [$1, $3]; }
+	| actor             { $$ = $1; }
+	;
+
+placement
+	: 'left_of'   { $$ = yy.PLACEMENT.LEFTOF; }
+	| 'right_of'  { $$ = yy.PLACEMENT.RIGHTOF; }
+	;
+
+signal
+	: actor signaltype '+' actor text2
+	{ $$ = [$1,$4,{type: 'addMessage', from:$1.actor, to:$4.actor, signalType:$2, msg:$5},
+	              {type: 'activeStart', signalType: yy.LINETYPE.ACTIVE_START, actor: $4}
+	             ]}
+	| actor signaltype '-' actor text2
+	{ $$ = [$1,$4,{type: 'addMessage', from:$1.actor, to:$4.actor, signalType:$2, msg:$5},
+	             {type: 'activeEnd', signalType: yy.LINETYPE.ACTIVE_END, actor: $1}
+	             ]}
+	| actor signaltype actor text2
+	{ $$ = [$1,$3,{type: 'addMessage', from:$1.actor, to:$3.actor, signalType:$2, msg:$4}]}
+	;
+
+// actor
+// 	: actor_participant
+// 	| actor_actor
+// 	;
+
+actor: ACTOR {$$={ type: 'addParticipant', actor:$1}};
+// actor_actor: ACTOR {$$={type: 'addActor', actor:$1}};
+
+signaltype
+	: SOLID_OPEN_ARROW  { $$ = yy.LINETYPE.SOLID_OPEN; }
+	| DOTTED_OPEN_ARROW { $$ = yy.LINETYPE.DOTTED_OPEN; }
+	| SOLID_ARROW       { $$ = yy.LINETYPE.SOLID; }
+	| DOTTED_ARROW      { $$ = yy.LINETYPE.DOTTED; }
+	| SOLID_CROSS       { $$ = yy.LINETYPE.SOLID_CROSS; }
+	| DOTTED_CROSS      { $$ = yy.LINETYPE.DOTTED_CROSS; }
+	| SOLID_POINT { $$ = yy.LINETYPE.SOLID_POINT; }
+	| DOTTED_POINT { $$ = yy.LINETYPE.DOTTED_POINT; }
+	;
+
+text2
+  : TXT {$$ = yy.parseMessage($1.trim().substring(1)) }
+  ;
+
+openDirective
+  : open_directive { yy.parseDirective('%%{', 'open_directive'); }
+  ;
+
+typeDirective
+  : type_directive { yy.parseDirective($1, 'type_directive'); }
+  ;
+
+argDirective
+  : arg_directive { $1 = $1.trim().replace(/'/g, '"'); yy.parseDirective($1, 'arg_directive'); }
+  ;
+
+closeDirective
+  : close_directive { yy.parseDirective('}%%', 'close_directive', 'sequence'); }
+  ;
 
 %%
-
-graph
-  : node -> 
\ No newline at end of file
diff --git a/packages/mermaid/src/diagrams/sankey/renderer.ts b/packages/mermaid/src/diagrams/sankey/renderer.ts
deleted file mode 100644
index cb1e2d33c..000000000
--- a/packages/mermaid/src/diagrams/sankey/renderer.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-// import { select, scaleOrdinal, pie as d3pie, arc } from 'd3';
-
-// import { select, selectAll } from 'd3';
-// import { log } from '../../logger.js';
-// import common from '../common/common.js';
-// import * as svgDrawCommon from '../common/svgDrawCommon';
-import * as configApi from '../../config.js';
-// import assignWithDepth from '../../assignWithDepth.js';
-// import utils from '../../utils.js';
-// import { configureSvgSize } from '../../setupGraphViewbox.js';
-import { Diagram } from '../../Diagram.js';
-
-// import { parseFontSize } from '../../utils.js';
-
-const conf = configApi.getConfig();
-
-/**
- * Draws a Sankey Diagram with the data given in text.
- *
- * @param text
- * @param id
- */
-export const draw = function (_text: string, id: string, _version: string, _diagObj: Diagram) {}
-
-export default {
-  draw,
-};
diff --git a/packages/mermaid/src/diagrams/sankey/db.js b/packages/mermaid/src/diagrams/sankey/sankeyDB.js
similarity index 100%
rename from packages/mermaid/src/diagrams/sankey/db.js
rename to packages/mermaid/src/diagrams/sankey/sankeyDB.js
diff --git a/packages/mermaid/src/diagrams/sankey/detector.ts b/packages/mermaid/src/diagrams/sankey/sankeyDetector.ts
similarity index 100%
rename from packages/mermaid/src/diagrams/sankey/detector.ts
rename to packages/mermaid/src/diagrams/sankey/sankeyDetector.ts
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyDiagram.spec.js b/packages/mermaid/src/diagrams/sankey/sankeyDiagram.spec.js
new file mode 100644
index 000000000..ee9d0e23e
--- /dev/null
+++ b/packages/mermaid/src/diagrams/sankey/sankeyDiagram.spec.js
@@ -0,0 +1,24 @@
+import diagram from './parser/sankey.jison';
+import { parser } from './parser/sankey.jison';
+import db from './sankeyDB.js';
+
+describe('state diagram V2, ', function () {
+  // TODO - these examples should be put into ./parser/stateDiagram.spec.js
+  describe('when parsing an info graph it', function () {
+    beforeEach(function () {
+      parser.yy = stateDb;
+      diagram.parser.yy = db;
+      diagram.parser.yy.clear();
+    });
+
+    it('super simple', function () {
+      const str = `
+      stateDiagram-v2
+      [*] --> State1
+      State1 --> [*]
+      `;
+
+      parser.parse(str);
+    });
+  });
+});
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts b/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts
index e6b502227..e7a46d8bc 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts
@@ -1,9 +1,9 @@
 import { DiagramDefinition } from '../../diagram-api/types.js';
 // @ts-ignore: TODO Fix ts errors
 import parser from './parser/sankey.jison';
-import db from './db.js';
+import db from './sankeyDB.js';
 import styles from './styles.js';
-import renderer from './renderer.js';
+import renderer from './sankeyRenderer.js';
 
 export const diagram: DiagramDefinition = {
   parser,
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
new file mode 100644
index 000000000..243fbddad
--- /dev/null
+++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
@@ -0,0 +1,1446 @@
+// @ts-nocheck TODO: fix file
+import { select, selectAll } from 'd3';
+import svgDraw, { drawText, fixLifeLineHeights } from './svgDraw.js';
+import { log } from '../../logger.js';
+import common from '../common/common.js';
+import * as svgDrawCommon from '../common/svgDrawCommon.js';
+import * as configApi from '../../config.js';
+import assignWithDepth from '../../assignWithDepth.js';
+import utils from '../../utils.js';
+import { configureSvgSize } from '../../setupGraphViewbox.js';
+import { Diagram } from '../../Diagram.js';
+
+let conf = {};
+
+export const bounds = {
+  data: {
+    startx: undefined,
+    stopx: undefined,
+    starty: undefined,
+    stopy: undefined,
+  },
+  verticalPos: 0,
+  sequenceItems: [],
+  activations: [],
+  models: {
+    getHeight: function () {
+      return (
+        Math.max.apply(
+          null,
+          this.actors.length === 0 ? [0] : this.actors.map((actor) => actor.height || 0)
+        ) +
+        (this.loops.length === 0
+          ? 0
+          : this.loops.map((it) => it.height || 0).reduce((acc, h) => acc + h)) +
+        (this.messages.length === 0
+          ? 0
+          : this.messages.map((it) => it.height || 0).reduce((acc, h) => acc + h)) +
+        (this.notes.length === 0
+          ? 0
+          : this.notes.map((it) => it.height || 0).reduce((acc, h) => acc + h))
+      );
+    },
+    clear: function () {
+      this.actors = [];
+      this.boxes = [];
+      this.loops = [];
+      this.messages = [];
+      this.notes = [];
+    },
+    addBox: function (boxModel) {
+      this.boxes.push(boxModel);
+    },
+    addActor: function (actorModel) {
+      this.actors.push(actorModel);
+    },
+    addLoop: function (loopModel) {
+      this.loops.push(loopModel);
+    },
+    addMessage: function (msgModel) {
+      this.messages.push(msgModel);
+    },
+    addNote: function (noteModel) {
+      this.notes.push(noteModel);
+    },
+    lastActor: function () {
+      return this.actors[this.actors.length - 1];
+    },
+    lastLoop: function () {
+      return this.loops[this.loops.length - 1];
+    },
+    lastMessage: function () {
+      return this.messages[this.messages.length - 1];
+    },
+    lastNote: function () {
+      return this.notes[this.notes.length - 1];
+    },
+    actors: [],
+    boxes: [],
+    loops: [],
+    messages: [],
+    notes: [],
+  },
+  init: function () {
+    this.sequenceItems = [];
+    this.activations = [];
+    this.models.clear();
+    this.data = {
+      startx: undefined,
+      stopx: undefined,
+      starty: undefined,
+      stopy: undefined,
+    };
+    this.verticalPos = 0;
+    setConf(configApi.getConfig());
+  },
+  updateVal: function (obj, key, val, fun) {
+    if (obj[key] === undefined) {
+      obj[key] = val;
+    } else {
+      obj[key] = fun(val, obj[key]);
+    }
+  },
+  updateBounds: function (startx, starty, stopx, stopy) {
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    const _self = this;
+    let cnt = 0;
+    /** @param type - Either `activation` or `undefined` */
+    function updateFn(type?: 'activation') {
+      return function updateItemBounds(item) {
+        cnt++;
+        // The loop sequenceItems is a stack so the biggest margins in the beginning of the sequenceItems
+        const n = _self.sequenceItems.length - cnt + 1;
+
+        _self.updateVal(item, 'starty', starty - n * conf.boxMargin, Math.min);
+        _self.updateVal(item, 'stopy', stopy + n * conf.boxMargin, Math.max);
+
+        _self.updateVal(bounds.data, 'startx', startx - n * conf.boxMargin, Math.min);
+        _self.updateVal(bounds.data, 'stopx', stopx + n * conf.boxMargin, Math.max);
+
+        if (!(type === 'activation')) {
+          _self.updateVal(item, 'startx', startx - n * conf.boxMargin, Math.min);
+          _self.updateVal(item, 'stopx', stopx + n * conf.boxMargin, Math.max);
+
+          _self.updateVal(bounds.data, 'starty', starty - n * conf.boxMargin, Math.min);
+          _self.updateVal(bounds.data, 'stopy', stopy + n * conf.boxMargin, Math.max);
+        }
+      };
+    }
+
+    this.sequenceItems.forEach(updateFn());
+    this.activations.forEach(updateFn('activation'));
+  },
+  insert: function (startx, starty, stopx, stopy) {
+    const _startx = common.getMin(startx, stopx);
+    const _stopx = common.getMax(startx, stopx);
+    const _starty = common.getMin(starty, stopy);
+    const _stopy = common.getMax(starty, stopy);
+
+    this.updateVal(bounds.data, 'startx', _startx, Math.min);
+    this.updateVal(bounds.data, 'starty', _starty, Math.min);
+    this.updateVal(bounds.data, 'stopx', _stopx, Math.max);
+    this.updateVal(bounds.data, 'stopy', _stopy, Math.max);
+
+    this.updateBounds(_startx, _starty, _stopx, _stopy);
+  },
+  newActivation: function (message, diagram, actors) {
+    const actorRect = actors[message.from.actor];
+    const stackedSize = actorActivations(message.from.actor).length || 0;
+    const x = actorRect.x + actorRect.width / 2 + ((stackedSize - 1) * conf.activationWidth) / 2;
+    this.activations.push({
+      startx: x,
+      starty: this.verticalPos + 2,
+      stopx: x + conf.activationWidth,
+      stopy: undefined,
+      actor: message.from.actor,
+      anchored: svgDraw.anchorElement(diagram),
+    });
+  },
+  endActivation: function (message) {
+    // find most recent activation for given actor
+    const lastActorActivationIdx = this.activations
+      .map(function (activation) {
+        return activation.actor;
+      })
+      .lastIndexOf(message.from.actor);
+    return this.activations.splice(lastActorActivationIdx, 1)[0];
+  },
+  createLoop: function (title = { message: undefined, wrap: false, width: undefined }, fill) {
+    return {
+      startx: undefined,
+      starty: this.verticalPos,
+      stopx: undefined,
+      stopy: undefined,
+      title: title.message,
+      wrap: title.wrap,
+      width: title.width,
+      height: 0,
+      fill: fill,
+    };
+  },
+  newLoop: function (title = { message: undefined, wrap: false, width: undefined }, fill) {
+    this.sequenceItems.push(this.createLoop(title, fill));
+  },
+  endLoop: function () {
+    return this.sequenceItems.pop();
+  },
+  isLoopOverlap: function () {
+    return this.sequenceItems.length
+      ? this.sequenceItems[this.sequenceItems.length - 1].overlap
+      : false;
+  },
+  addSectionToLoop: function (message) {
+    const loop = this.sequenceItems.pop();
+    loop.sections = loop.sections || [];
+    loop.sectionTitles = loop.sectionTitles || [];
+    loop.sections.push({ y: bounds.getVerticalPos(), height: 0 });
+    loop.sectionTitles.push(message);
+    this.sequenceItems.push(loop);
+  },
+  saveVerticalPos: function () {
+    if (this.isLoopOverlap()) {
+      this.savedVerticalPos = this.verticalPos;
+    }
+  },
+  resetVerticalPos: function () {
+    if (this.isLoopOverlap()) {
+      this.verticalPos = this.savedVerticalPos;
+    }
+  },
+  bumpVerticalPos: function (bump) {
+    this.verticalPos = this.verticalPos + bump;
+    this.data.stopy = common.getMax(this.data.stopy, this.verticalPos);
+  },
+  getVerticalPos: function () {
+    return this.verticalPos;
+  },
+  getBounds: function () {
+    return { bounds: this.data, models: this.models };
+  },
+};
+
+/** Options for drawing a note in {@link drawNote} */
+interface NoteModel {
+  /** x axis start position */
+  startx: number;
+  /** y axis position */
+  starty: number;
+  /** the message to be shown */
+  message: string;
+  /** Set this with a custom width to override the default configured width. */
+  width: number;
+}
+
+/**
+ * Draws an note in the diagram with the attached line
+ *
+ * @param elem - The diagram to draw to.
+ * @param noteModel - Note model options.
+ */
+const drawNote = function (elem: any, noteModel: NoteModel) {
+  bounds.bumpVerticalPos(conf.boxMargin);
+  noteModel.height = conf.boxMargin;
+  noteModel.starty = bounds.getVerticalPos();
+  const rect = svgDrawCommon.getNoteRect();
+  rect.x = noteModel.startx;
+  rect.y = noteModel.starty;
+  rect.width = noteModel.width || conf.width;
+  rect.class = 'note';
+
+  const g = elem.append('g');
+  const rectElem = svgDraw.drawRect(g, rect);
+  const textObj = svgDrawCommon.getTextObj();
+  textObj.x = noteModel.startx;
+  textObj.y = noteModel.starty;
+  textObj.width = rect.width;
+  textObj.dy = '1em';
+  textObj.text = noteModel.message;
+  textObj.class = 'noteText';
+  textObj.fontFamily = conf.noteFontFamily;
+  textObj.fontSize = conf.noteFontSize;
+  textObj.fontWeight = conf.noteFontWeight;
+  textObj.anchor = conf.noteAlign;
+  textObj.textMargin = conf.noteMargin;
+  textObj.valign = 'center';
+
+  const textElem = drawText(g, textObj);
+
+  const textHeight = Math.round(
+    textElem
+      .map((te) => (te._groups || te)[0][0].getBBox().height)
+      .reduce((acc, curr) => acc + curr)
+  );
+
+  rectElem.attr('height', textHeight + 2 * conf.noteMargin);
+  noteModel.height += textHeight + 2 * conf.noteMargin;
+  bounds.bumpVerticalPos(textHeight + 2 * conf.noteMargin);
+  noteModel.stopy = noteModel.starty + textHeight + 2 * conf.noteMargin;
+  noteModel.stopx = noteModel.startx + rect.width;
+  bounds.insert(noteModel.startx, noteModel.starty, noteModel.stopx, noteModel.stopy);
+  bounds.models.addNote(noteModel);
+};
+
+const messageFont = (cnf) => {
+  return {
+    fontFamily: cnf.messageFontFamily,
+    fontSize: cnf.messageFontSize,
+    fontWeight: cnf.messageFontWeight,
+  };
+};
+const noteFont = (cnf) => {
+  return {
+    fontFamily: cnf.noteFontFamily,
+    fontSize: cnf.noteFontSize,
+    fontWeight: cnf.noteFontWeight,
+  };
+};
+const actorFont = (cnf) => {
+  return {
+    fontFamily: cnf.actorFontFamily,
+    fontSize: cnf.actorFontSize,
+    fontWeight: cnf.actorFontWeight,
+  };
+};
+
+/**
+ * Process a message by adding its dimensions to the bound. It returns the Y coordinate of the
+ * message so it can be drawn later. We do not draw the message at this point so the arrowhead can
+ * be on top of the activation box.
+ *
+ * @param _diagram - The parent of the message element.
+ * @param msgModel - The model containing fields describing a message
+ * @returns `lineStartY` - The Y coordinate at which the message line starts
+ */
+function boundMessage(_diagram, msgModel): number {
+  bounds.bumpVerticalPos(10);
+  const { startx, stopx, message } = msgModel;
+  const lines = common.splitBreaks(message).length;
+  const textDims = utils.calculateTextDimensions(message, messageFont(conf));
+  const lineHeight = textDims.height / lines;
+  msgModel.height += lineHeight;
+
+  bounds.bumpVerticalPos(lineHeight);
+
+  let lineStartY;
+  let totalOffset = textDims.height - 10;
+  const textWidth = textDims.width;
+
+  if (startx === stopx) {
+    lineStartY = bounds.getVerticalPos() + totalOffset;
+    if (!conf.rightAngles) {
+      totalOffset += conf.boxMargin;
+      lineStartY = bounds.getVerticalPos() + totalOffset;
+    }
+    totalOffset += 30;
+    const dx = common.getMax(textWidth / 2, conf.width / 2);
+    bounds.insert(
+      startx - dx,
+      bounds.getVerticalPos() - 10 + totalOffset,
+      stopx + dx,
+      bounds.getVerticalPos() + 30 + totalOffset
+    );
+  } else {
+    totalOffset += conf.boxMargin;
+    lineStartY = bounds.getVerticalPos() + totalOffset;
+    bounds.insert(startx, lineStartY - 10, stopx, lineStartY);
+  }
+  bounds.bumpVerticalPos(totalOffset);
+  msgModel.height += totalOffset;
+  msgModel.stopy = msgModel.starty + msgModel.height;
+  bounds.insert(msgModel.fromBounds, msgModel.starty, msgModel.toBounds, msgModel.stopy);
+
+  return lineStartY;
+}
+
+/**
+ * Draws a message. Note that the bounds have previously been updated by boundMessage.
+ *
+ * @param diagram - The parent of the message element
+ * @param msgModel - The model containing fields describing a message
+ * @param lineStartY - The Y coordinate at which the message line starts
+ * @param diagObj - The diagram object.
+ */
+const drawMessage = function (diagram, msgModel, lineStartY: number, diagObj: Diagram) {
+  const { startx, stopx, starty, message, type, sequenceIndex, sequenceVisible } = msgModel;
+  const textDims = utils.calculateTextDimensions(message, messageFont(conf));
+  const textObj = svgDrawCommon.getTextObj();
+  textObj.x = startx;
+  textObj.y = starty + 10;
+  textObj.width = stopx - startx;
+  textObj.class = 'messageText';
+  textObj.dy = '1em';
+  textObj.text = message;
+  textObj.fontFamily = conf.messageFontFamily;
+  textObj.fontSize = conf.messageFontSize;
+  textObj.fontWeight = conf.messageFontWeight;
+  textObj.anchor = conf.messageAlign;
+  textObj.valign = 'center';
+  textObj.textMargin = conf.wrapPadding;
+  textObj.tspan = false;
+
+  drawText(diagram, textObj);
+
+  const textWidth = textDims.width;
+
+  let line;
+  if (startx === stopx) {
+    if (conf.rightAngles) {
+      line = diagram
+        .append('path')
+        .attr(
+          'd',
+          `M  ${startx},${lineStartY} H ${
+            startx + common.getMax(conf.width / 2, textWidth / 2)
+          } V ${lineStartY + 25} H ${startx}`
+        );
+    } else {
+      line = diagram
+        .append('path')
+        .attr(
+          'd',
+          'M ' +
+            startx +
+            ',' +
+            lineStartY +
+            ' C ' +
+            (startx + 60) +
+            ',' +
+            (lineStartY - 10) +
+            ' ' +
+            (startx + 60) +
+            ',' +
+            (lineStartY + 30) +
+            ' ' +
+            startx +
+            ',' +
+            (lineStartY + 20)
+        );
+    }
+  } else {
+    line = diagram.append('line');
+    line.attr('x1', startx);
+    line.attr('y1', lineStartY);
+    line.attr('x2', stopx);
+    line.attr('y2', lineStartY);
+  }
+  // Make an SVG Container
+  // Draw the line
+  if (
+    type === diagObj.db.LINETYPE.DOTTED ||
+    type === diagObj.db.LINETYPE.DOTTED_CROSS ||
+    type === diagObj.db.LINETYPE.DOTTED_POINT ||
+    type === diagObj.db.LINETYPE.DOTTED_OPEN
+  ) {
+    line.style('stroke-dasharray', '3, 3');
+    line.attr('class', 'messageLine1');
+  } else {
+    line.attr('class', 'messageLine0');
+  }
+
+  let url = '';
+  if (conf.arrowMarkerAbsolute) {
+    url =
+      window.location.protocol +
+      '//' +
+      window.location.host +
+      window.location.pathname +
+      window.location.search;
+    url = url.replace(/\(/g, '\\(');
+    url = url.replace(/\)/g, '\\)');
+  }
+
+  line.attr('stroke-width', 2);
+  line.attr('stroke', 'none'); // handled by theme/css anyway
+  line.style('fill', 'none'); // remove any fill colour
+  if (type === diagObj.db.LINETYPE.SOLID || type === diagObj.db.LINETYPE.DOTTED) {
+    line.attr('marker-end', 'url(' + url + '#arrowhead)');
+  }
+  if (type === diagObj.db.LINETYPE.SOLID_POINT || type === diagObj.db.LINETYPE.DOTTED_POINT) {
+    line.attr('marker-end', 'url(' + url + '#filled-head)');
+  }
+
+  if (type === diagObj.db.LINETYPE.SOLID_CROSS || type === diagObj.db.LINETYPE.DOTTED_CROSS) {
+    line.attr('marker-end', 'url(' + url + '#crosshead)');
+  }
+
+  // add node number
+  if (sequenceVisible || conf.showSequenceNumbers) {
+    line.attr('marker-start', 'url(' + url + '#sequencenumber)');
+    diagram
+      .append('text')
+      .attr('x', startx)
+      .attr('y', lineStartY + 4)
+      .attr('font-family', 'sans-serif')
+      .attr('font-size', '12px')
+      .attr('text-anchor', 'middle')
+      .attr('class', 'sequenceNumber')
+      .text(sequenceIndex);
+  }
+};
+
+export const drawActors = function (
+  diagram,
+  actors,
+  actorKeys,
+  verticalPos,
+  configuration,
+  messages,
+  isFooter
+) {
+  if (configuration.hideUnusedParticipants === true) {
+    const newActors = new Set();
+    messages.forEach((message) => {
+      newActors.add(message.from);
+      newActors.add(message.to);
+    });
+    actorKeys = actorKeys.filter((actorKey) => newActors.has(actorKey));
+  }
+
+  // Draw the actors
+  let prevWidth = 0;
+  let prevMargin = 0;
+  let maxHeight = 0;
+  let prevBox = undefined;
+
+  for (const actorKey of actorKeys) {
+    const actor = actors[actorKey];
+    const box = actor.box;
+
+    // end of box
+    if (prevBox && prevBox != box) {
+      if (!isFooter) {
+        bounds.models.addBox(prevBox);
+      }
+      prevMargin += conf.boxMargin + prevBox.margin;
+    }
+
+    // new box
+    if (box && box != prevBox) {
+      if (!isFooter) {
+        box.x = prevWidth + prevMargin;
+        box.y = verticalPos;
+      }
+      prevMargin += box.margin;
+    }
+
+    // Add some rendering data to the object
+    actor.width = actor.width || conf.width;
+    actor.height = common.getMax(actor.height || conf.height, conf.height);
+    actor.margin = actor.margin || conf.actorMargin;
+
+    actor.x = prevWidth + prevMargin;
+    actor.y = bounds.getVerticalPos();
+
+    // Draw the box with the attached line
+    const height = svgDraw.drawActor(diagram, actor, conf, isFooter);
+    maxHeight = common.getMax(maxHeight, height);
+    bounds.insert(actor.x, verticalPos, actor.x + actor.width, actor.height);
+
+    prevWidth += actor.width + prevMargin;
+    if (actor.box) {
+      actor.box.width = prevWidth + box.margin - actor.box.x;
+    }
+    prevMargin = actor.margin;
+    prevBox = actor.box;
+    bounds.models.addActor(actor);
+  }
+
+  // end of box
+  if (prevBox && !isFooter) {
+    bounds.models.addBox(prevBox);
+  }
+
+  // Add a margin between the actor boxes and the first arrow
+  bounds.bumpVerticalPos(maxHeight);
+};
+
+export const drawActorsPopup = function (diagram, actors, actorKeys, doc) {
+  let maxHeight = 0;
+  let maxWidth = 0;
+  for (const actorKey of actorKeys) {
+    const actor = actors[actorKey];
+    const minMenuWidth = getRequiredPopupWidth(actor);
+    const menuDimensions = svgDraw.drawPopup(
+      diagram,
+      actor,
+      minMenuWidth,
+      conf,
+      conf.forceMenus,
+      doc
+    );
+    if (menuDimensions.height > maxHeight) {
+      maxHeight = menuDimensions.height;
+    }
+    if (menuDimensions.width + actor.x > maxWidth) {
+      maxWidth = menuDimensions.width + actor.x;
+    }
+  }
+
+  return { maxHeight: maxHeight, maxWidth: maxWidth };
+};
+
+export const setConf = function (cnf) {
+  assignWithDepth(conf, cnf);
+
+  if (cnf.fontFamily) {
+    conf.actorFontFamily = conf.noteFontFamily = conf.messageFontFamily = cnf.fontFamily;
+  }
+  if (cnf.fontSize) {
+    conf.actorFontSize = conf.noteFontSize = conf.messageFontSize = cnf.fontSize;
+  }
+  if (cnf.fontWeight) {
+    conf.actorFontWeight = conf.noteFontWeight = conf.messageFontWeight = cnf.fontWeight;
+  }
+};
+
+const actorActivations = function (actor) {
+  return bounds.activations.filter(function (activation) {
+    return activation.actor === actor;
+  });
+};
+
+const activationBounds = function (actor, actors) {
+  // handle multiple stacked activations for same actor
+  const actorObj = actors[actor];
+  const activations = actorActivations(actor);
+
+  const left = activations.reduce(function (acc, activation) {
+    return common.getMin(acc, activation.startx);
+  }, actorObj.x + actorObj.width / 2);
+  const right = activations.reduce(function (acc, activation) {
+    return common.getMax(acc, activation.stopx);
+  }, actorObj.x + actorObj.width / 2);
+  return [left, right];
+};
+
+function adjustLoopHeightForWrap(loopWidths, msg, preMargin, postMargin, addLoopFn) {
+  bounds.bumpVerticalPos(preMargin);
+  let heightAdjust = postMargin;
+  if (msg.id && msg.message && loopWidths[msg.id]) {
+    const loopWidth = loopWidths[msg.id].width;
+    const textConf = messageFont(conf);
+    msg.message = utils.wrapLabel(`[${msg.message}]`, loopWidth - 2 * conf.wrapPadding, textConf);
+    msg.width = loopWidth;
+    msg.wrap = true;
+
+    // const lines = common.splitBreaks(msg.message).length;
+    const textDims = utils.calculateTextDimensions(msg.message, textConf);
+    const totalOffset = common.getMax(textDims.height, conf.labelBoxHeight);
+    heightAdjust = postMargin + totalOffset;
+    log.debug(`${totalOffset} - ${msg.message}`);
+  }
+  addLoopFn(msg);
+  bounds.bumpVerticalPos(heightAdjust);
+}
+
+/**
+ * Draws a sequenceDiagram in the tag with id: id based on the graph definition in text.
+ *
+ * @param _text - The text of the diagram
+ * @param id - The id of the diagram which will be used as a DOM element id¨
+ * @param _version - Mermaid version from package.json
+ * @param diagObj - A standard diagram containing the db and the text and type etc of the diagram
+ */
+export const draw = function (_text: string, id: string, _version: string, diagObj: Diagram) {
+  const { securityLevel, sequence } = configApi.getConfig();
+  conf = sequence;
+  diagObj.db.clear();
+  // Parse the graph definition
+  diagObj.parser.parse(_text);
+  // Handle root and Document for when rendering in sandbox mode
+  let sandboxElement;
+  if (securityLevel === 'sandbox') {
+    sandboxElement = select('#i' + id);
+  }
+
+  const root =
+    securityLevel === 'sandbox'
+      ? select(sandboxElement.nodes()[0].contentDocument.body)
+      : select('body');
+  const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
+  bounds.init();
+  log.debug(diagObj.db);
+
+  const diagram =
+    securityLevel === 'sandbox' ? root.select(`[id="${id}"]`) : select(`[id="${id}"]`);
+
+  // Fetch data from the parsing
+  const actors = diagObj.db.getActors();
+  const boxes = diagObj.db.getBoxes();
+  const actorKeys = diagObj.db.getActorKeys();
+  const messages = diagObj.db.getMessages();
+  const title = diagObj.db.getDiagramTitle();
+  const hasBoxes = diagObj.db.hasAtLeastOneBox();
+  const hasBoxTitles = diagObj.db.hasAtLeastOneBoxWithTitle();
+  const maxMessageWidthPerActor = getMaxMessageWidthPerActor(actors, messages, diagObj);
+  conf.height = calculateActorMargins(actors, maxMessageWidthPerActor, boxes);
+
+  svgDraw.insertComputerIcon(diagram);
+  svgDraw.insertDatabaseIcon(diagram);
+  svgDraw.insertClockIcon(diagram);
+
+  if (hasBoxes) {
+    bounds.bumpVerticalPos(conf.boxMargin);
+    if (hasBoxTitles) {
+      bounds.bumpVerticalPos(boxes[0].textMaxHeight);
+    }
+  }
+
+  drawActors(diagram, actors, actorKeys, 0, conf, messages, false);
+  const loopWidths = calculateLoopBounds(messages, actors, maxMessageWidthPerActor, diagObj);
+
+  // The arrow head definition is attached to the svg once
+  svgDraw.insertArrowHead(diagram);
+  svgDraw.insertArrowCrossHead(diagram);
+  svgDraw.insertArrowFilledHead(diagram);
+  svgDraw.insertSequenceNumber(diagram);
+
+  /**
+   * @param msg - The message to draw.
+   * @param verticalPos - The vertical position of the message.
+   */
+  function activeEnd(msg: any, verticalPos: number) {
+    const activationData = bounds.endActivation(msg);
+    if (activationData.starty + 18 > verticalPos) {
+      activationData.starty = verticalPos - 6;
+      verticalPos += 12;
+    }
+    svgDraw.drawActivation(
+      diagram,
+      activationData,
+      verticalPos,
+      conf,
+      actorActivations(msg.from.actor).length
+    );
+
+    bounds.insert(activationData.startx, verticalPos - 10, activationData.stopx, verticalPos);
+  }
+
+  // Draw the messages/signals
+  let sequenceIndex = 1;
+  let sequenceIndexStep = 1;
+  const messagesToDraw = [];
+  messages.forEach(function (msg) {
+    let loopModel, noteModel, msgModel;
+
+    switch (msg.type) {
+      case diagObj.db.LINETYPE.NOTE:
+        bounds.resetVerticalPos();
+        noteModel = msg.noteModel;
+        drawNote(diagram, noteModel);
+        break;
+      case diagObj.db.LINETYPE.ACTIVE_START:
+        bounds.newActivation(msg, diagram, actors);
+        break;
+      case diagObj.db.LINETYPE.ACTIVE_END:
+        activeEnd(msg, bounds.getVerticalPos());
+        break;
+      case diagObj.db.LINETYPE.LOOP_START:
+        adjustLoopHeightForWrap(
+          loopWidths,
+          msg,
+          conf.boxMargin,
+          conf.boxMargin + conf.boxTextMargin,
+          (message) => bounds.newLoop(message)
+        );
+        break;
+      case diagObj.db.LINETYPE.LOOP_END:
+        loopModel = bounds.endLoop();
+        svgDraw.drawLoop(diagram, loopModel, 'loop', conf);
+        bounds.bumpVerticalPos(loopModel.stopy - bounds.getVerticalPos());
+        bounds.models.addLoop(loopModel);
+        break;
+      case diagObj.db.LINETYPE.RECT_START:
+        adjustLoopHeightForWrap(loopWidths, msg, conf.boxMargin, conf.boxMargin, (message) =>
+          bounds.newLoop(undefined, message.message)
+        );
+        break;
+      case diagObj.db.LINETYPE.RECT_END:
+        loopModel = bounds.endLoop();
+        svgDraw.drawBackgroundRect(diagram, loopModel);
+        bounds.models.addLoop(loopModel);
+        bounds.bumpVerticalPos(loopModel.stopy - bounds.getVerticalPos());
+        break;
+      case diagObj.db.LINETYPE.OPT_START:
+        adjustLoopHeightForWrap(
+          loopWidths,
+          msg,
+          conf.boxMargin,
+          conf.boxMargin + conf.boxTextMargin,
+          (message) => bounds.newLoop(message)
+        );
+        break;
+      case diagObj.db.LINETYPE.OPT_END:
+        loopModel = bounds.endLoop();
+        svgDraw.drawLoop(diagram, loopModel, 'opt', conf);
+        bounds.bumpVerticalPos(loopModel.stopy - bounds.getVerticalPos());
+        bounds.models.addLoop(loopModel);
+        break;
+      case diagObj.db.LINETYPE.ALT_START:
+        adjustLoopHeightForWrap(
+          loopWidths,
+          msg,
+          conf.boxMargin,
+          conf.boxMargin + conf.boxTextMargin,
+          (message) => bounds.newLoop(message)
+        );
+        break;
+      case diagObj.db.LINETYPE.ALT_ELSE:
+        adjustLoopHeightForWrap(
+          loopWidths,
+          msg,
+          conf.boxMargin + conf.boxTextMargin,
+          conf.boxMargin,
+          (message) => bounds.addSectionToLoop(message)
+        );
+        break;
+      case diagObj.db.LINETYPE.ALT_END:
+        loopModel = bounds.endLoop();
+        svgDraw.drawLoop(diagram, loopModel, 'alt', conf);
+        bounds.bumpVerticalPos(loopModel.stopy - bounds.getVerticalPos());
+        bounds.models.addLoop(loopModel);
+        break;
+      case diagObj.db.LINETYPE.PAR_START:
+      case diagObj.db.LINETYPE.PAR_OVER_START:
+        adjustLoopHeightForWrap(
+          loopWidths,
+          msg,
+          conf.boxMargin,
+          conf.boxMargin + conf.boxTextMargin,
+          (message) => bounds.newLoop(message)
+        );
+        bounds.saveVerticalPos();
+        break;
+      case diagObj.db.LINETYPE.PAR_AND:
+        adjustLoopHeightForWrap(
+          loopWidths,
+          msg,
+          conf.boxMargin + conf.boxTextMargin,
+          conf.boxMargin,
+          (message) => bounds.addSectionToLoop(message)
+        );
+        break;
+      case diagObj.db.LINETYPE.PAR_END:
+        loopModel = bounds.endLoop();
+        svgDraw.drawLoop(diagram, loopModel, 'par', conf);
+        bounds.bumpVerticalPos(loopModel.stopy - bounds.getVerticalPos());
+        bounds.models.addLoop(loopModel);
+        break;
+      case diagObj.db.LINETYPE.AUTONUMBER:
+        sequenceIndex = msg.message.start || sequenceIndex;
+        sequenceIndexStep = msg.message.step || sequenceIndexStep;
+        if (msg.message.visible) {
+          diagObj.db.enableSequenceNumbers();
+        } else {
+          diagObj.db.disableSequenceNumbers();
+        }
+        break;
+      case diagObj.db.LINETYPE.CRITICAL_START:
+        adjustLoopHeightForWrap(
+          loopWidths,
+          msg,
+          conf.boxMargin,
+          conf.boxMargin + conf.boxTextMargin,
+          (message) => bounds.newLoop(message)
+        );
+        break;
+      case diagObj.db.LINETYPE.CRITICAL_OPTION:
+        adjustLoopHeightForWrap(
+          loopWidths,
+          msg,
+          conf.boxMargin + conf.boxTextMargin,
+          conf.boxMargin,
+          (message) => bounds.addSectionToLoop(message)
+        );
+        break;
+      case diagObj.db.LINETYPE.CRITICAL_END:
+        loopModel = bounds.endLoop();
+        svgDraw.drawLoop(diagram, loopModel, 'critical', conf);
+        bounds.bumpVerticalPos(loopModel.stopy - bounds.getVerticalPos());
+        bounds.models.addLoop(loopModel);
+        break;
+      case diagObj.db.LINETYPE.BREAK_START:
+        adjustLoopHeightForWrap(
+          loopWidths,
+          msg,
+          conf.boxMargin,
+          conf.boxMargin + conf.boxTextMargin,
+          (message) => bounds.newLoop(message)
+        );
+        break;
+      case diagObj.db.LINETYPE.BREAK_END:
+        loopModel = bounds.endLoop();
+        svgDraw.drawLoop(diagram, loopModel, 'break', conf);
+        bounds.bumpVerticalPos(loopModel.stopy - bounds.getVerticalPos());
+        bounds.models.addLoop(loopModel);
+        break;
+      default:
+        try {
+          // lastMsg = msg
+          bounds.resetVerticalPos();
+          msgModel = msg.msgModel;
+          msgModel.starty = bounds.getVerticalPos();
+          msgModel.sequenceIndex = sequenceIndex;
+          msgModel.sequenceVisible = diagObj.db.showSequenceNumbers();
+          const lineStartY = boundMessage(diagram, msgModel);
+          messagesToDraw.push({ messageModel: msgModel, lineStartY: lineStartY });
+          bounds.models.addMessage(msgModel);
+        } catch (e) {
+          log.error('error while drawing message', e);
+        }
+    }
+
+    // Increment sequence counter if msg.type is a line (and not another event like activation or note, etc)
+    if (
+      [
+        diagObj.db.LINETYPE.SOLID_OPEN,
+        diagObj.db.LINETYPE.DOTTED_OPEN,
+        diagObj.db.LINETYPE.SOLID,
+        diagObj.db.LINETYPE.DOTTED,
+        diagObj.db.LINETYPE.SOLID_CROSS,
+        diagObj.db.LINETYPE.DOTTED_CROSS,
+        diagObj.db.LINETYPE.SOLID_POINT,
+        diagObj.db.LINETYPE.DOTTED_POINT,
+      ].includes(msg.type)
+    ) {
+      sequenceIndex = sequenceIndex + sequenceIndexStep;
+    }
+  });
+
+  messagesToDraw.forEach((e) => drawMessage(diagram, e.messageModel, e.lineStartY, diagObj));
+
+  if (conf.mirrorActors) {
+    // Draw actors below diagram
+    bounds.bumpVerticalPos(conf.boxMargin * 2);
+    drawActors(diagram, actors, actorKeys, bounds.getVerticalPos(), conf, messages, true);
+    bounds.bumpVerticalPos(conf.boxMargin);
+    fixLifeLineHeights(diagram, bounds.getVerticalPos());
+  }
+
+  bounds.models.boxes.forEach(function (box) {
+    box.height = bounds.getVerticalPos() - box.y;
+    bounds.insert(box.x, box.y, box.x + box.width, box.height);
+    box.startx = box.x;
+    box.starty = box.y;
+    box.stopx = box.startx + box.width;
+    box.stopy = box.starty + box.height;
+    box.stroke = 'rgb(0,0,0, 0.5)';
+    svgDraw.drawBox(diagram, box, conf);
+  });
+
+  if (hasBoxes) {
+    bounds.bumpVerticalPos(conf.boxMargin);
+  }
+
+  // only draw popups for the top row of actors.
+  const requiredBoxSize = drawActorsPopup(diagram, actors, actorKeys, doc);
+
+  const { bounds: box } = bounds.getBounds();
+
+  // Adjust line height of actor lines now that the height of the diagram is known
+  log.debug('For line height fix Querying: #' + id + ' .actor-line');
+  const actorLines = selectAll('#' + id + ' .actor-line');
+  actorLines.attr('y2', box.stopy);
+
+  // Make sure the height of the diagram supports long menus.
+  let boxHeight = box.stopy - box.starty;
+  if (boxHeight < requiredBoxSize.maxHeight) {
+    boxHeight = requiredBoxSize.maxHeight;
+  }
+
+  let height = boxHeight + 2 * conf.diagramMarginY;
+  if (conf.mirrorActors) {
+    height = height - conf.boxMargin + conf.bottomMarginAdj;
+  }
+
+  // Make sure the width of the diagram supports wide menus.
+  let boxWidth = box.stopx - box.startx;
+  if (boxWidth < requiredBoxSize.maxWidth) {
+    boxWidth = requiredBoxSize.maxWidth;
+  }
+  const width = boxWidth + 2 * conf.diagramMarginX;
+
+  if (title) {
+    diagram
+      .append('text')
+      .text(title)
+      .attr('x', (box.stopx - box.startx) / 2 - 2 * conf.diagramMarginX)
+      .attr('y', -25);
+  }
+
+  configureSvgSize(diagram, height, width, conf.useMaxWidth);
+
+  const extraVertForTitle = title ? 40 : 0;
+  diagram.attr(
+    'viewBox',
+    box.startx -
+      conf.diagramMarginX +
+      ' -' +
+      (conf.diagramMarginY + extraVertForTitle) +
+      ' ' +
+      width +
+      ' ' +
+      (height + extraVertForTitle)
+  );
+
+  log.debug(`models:`, bounds.models);
+};
+
+/**
+ * Retrieves the max message width of each actor, supports signals (messages, loops) and notes.
+ *
+ * It will enumerate each given message, and will determine its text width, in relation to the actor
+ * it originates from, and destined to.
+ *
+ * @param actors - The actors map
+ * @param messages - A list of message objects to iterate
+ * @param diagObj - The diagram object.
+ * @returns The max message width of each actor.
+ */
+function getMaxMessageWidthPerActor(
+  actors: { [id: string]: any },
+  messages: any[],
+  diagObj: Diagram
+): { [id: string]: number } {
+  const maxMessageWidthPerActor = {};
+
+  messages.forEach(function (msg) {
+    if (actors[msg.to] && actors[msg.from]) {
+      const actor = actors[msg.to];
+
+      // If this is the first actor, and the message is left of it, no need to calculate the margin
+      if (msg.placement === diagObj.db.PLACEMENT.LEFTOF && !actor.prevActor) {
+        return;
+      }
+
+      // If this is the last actor, and the message is right of it, no need to calculate the margin
+      if (msg.placement === diagObj.db.PLACEMENT.RIGHTOF && !actor.nextActor) {
+        return;
+      }
+
+      const isNote = msg.placement !== undefined;
+      const isMessage = !isNote;
+
+      const textFont = isNote ? noteFont(conf) : messageFont(conf);
+      const wrappedMessage = msg.wrap
+        ? utils.wrapLabel(msg.message, conf.width - 2 * conf.wrapPadding, textFont)
+        : msg.message;
+      const messageDimensions = utils.calculateTextDimensions(wrappedMessage, textFont);
+      const messageWidth = messageDimensions.width + 2 * conf.wrapPadding;
+
+      /*
+       * The following scenarios should be supported:
+       *
+       * - There's a message (non-note) between fromActor and toActor
+       *   - If fromActor is on the right and toActor is on the left, we should
+       *     define the toActor's margin
+       *   - If fromActor is on the left and toActor is on the right, we should
+       *     define the fromActor's margin
+       * - There's a note, in which case fromActor == toActor
+       *   - If the note is to the left of the actor, we should define the previous actor
+       *     margin
+       *   - If the note is on the actor, we should define both the previous and next actor
+       *     margins, each being the half of the note size
+       *   - If the note is on the right of the actor, we should define the current actor
+       *     margin
+       */
+      if (isMessage && msg.from === actor.nextActor) {
+        maxMessageWidthPerActor[msg.to] = common.getMax(
+          maxMessageWidthPerActor[msg.to] || 0,
+          messageWidth
+        );
+      } else if (isMessage && msg.from === actor.prevActor) {
+        maxMessageWidthPerActor[msg.from] = common.getMax(
+          maxMessageWidthPerActor[msg.from] || 0,
+          messageWidth
+        );
+      } else if (isMessage && msg.from === msg.to) {
+        maxMessageWidthPerActor[msg.from] = common.getMax(
+          maxMessageWidthPerActor[msg.from] || 0,
+          messageWidth / 2
+        );
+
+        maxMessageWidthPerActor[msg.to] = common.getMax(
+          maxMessageWidthPerActor[msg.to] || 0,
+          messageWidth / 2
+        );
+      } else if (msg.placement === diagObj.db.PLACEMENT.RIGHTOF) {
+        maxMessageWidthPerActor[msg.from] = common.getMax(
+          maxMessageWidthPerActor[msg.from] || 0,
+          messageWidth
+        );
+      } else if (msg.placement === diagObj.db.PLACEMENT.LEFTOF) {
+        maxMessageWidthPerActor[actor.prevActor] = common.getMax(
+          maxMessageWidthPerActor[actor.prevActor] || 0,
+          messageWidth
+        );
+      } else if (msg.placement === diagObj.db.PLACEMENT.OVER) {
+        if (actor.prevActor) {
+          maxMessageWidthPerActor[actor.prevActor] = common.getMax(
+            maxMessageWidthPerActor[actor.prevActor] || 0,
+            messageWidth / 2
+          );
+        }
+
+        if (actor.nextActor) {
+          maxMessageWidthPerActor[msg.from] = common.getMax(
+            maxMessageWidthPerActor[msg.from] || 0,
+            messageWidth / 2
+          );
+        }
+      }
+    }
+  });
+
+  log.debug('maxMessageWidthPerActor:', maxMessageWidthPerActor);
+  return maxMessageWidthPerActor;
+}
+
+const getRequiredPopupWidth = function (actor) {
+  let requiredPopupWidth = 0;
+  const textFont = actorFont(conf);
+  for (const key in actor.links) {
+    const labelDimensions = utils.calculateTextDimensions(key, textFont);
+    const labelWidth = labelDimensions.width + 2 * conf.wrapPadding + 2 * conf.boxMargin;
+    if (requiredPopupWidth < labelWidth) {
+      requiredPopupWidth = labelWidth;
+    }
+  }
+
+  return requiredPopupWidth;
+};
+
+/**
+ * This will calculate the optimal margin for each given actor,
+ * for a given actor → messageWidth map.
+ *
+ * An actor's margin is determined by the width of the actor, the width of the largest message that
+ * originates from it, and the configured conf.actorMargin.
+ *
+ * @param actors - The actors map to calculate margins for
+ * @param actorToMessageWidth - A map of actor key → max message width it holds
+ * @param boxes - The boxes around the actors if any
+ */
+function calculateActorMargins(
+  actors: { [id: string]: any },
+  actorToMessageWidth: ReturnType<typeof getMaxMessageWidthPerActor>,
+  boxes
+) {
+  let maxHeight = 0;
+  Object.keys(actors).forEach((prop) => {
+    const actor = actors[prop];
+    if (actor.wrap) {
+      actor.description = utils.wrapLabel(
+        actor.description,
+        conf.width - 2 * conf.wrapPadding,
+        actorFont(conf)
+      );
+    }
+    const actDims = utils.calculateTextDimensions(actor.description, actorFont(conf));
+    actor.width = actor.wrap
+      ? conf.width
+      : common.getMax(conf.width, actDims.width + 2 * conf.wrapPadding);
+
+    actor.height = actor.wrap ? common.getMax(actDims.height, conf.height) : conf.height;
+    maxHeight = common.getMax(maxHeight, actor.height);
+  });
+
+  for (const actorKey in actorToMessageWidth) {
+    const actor = actors[actorKey];
+
+    if (!actor) {
+      continue;
+    }
+
+    const nextActor = actors[actor.nextActor];
+
+    // No need to space out an actor that doesn't have a next link
+    if (!nextActor) {
+      const messageWidth = actorToMessageWidth[actorKey];
+      const actorWidth = messageWidth + conf.actorMargin - actor.width / 2;
+      actor.margin = common.getMax(actorWidth, conf.actorMargin);
+      continue;
+    }
+
+    const messageWidth = actorToMessageWidth[actorKey];
+    const actorWidth = messageWidth + conf.actorMargin - actor.width / 2 - nextActor.width / 2;
+
+    actor.margin = common.getMax(actorWidth, conf.actorMargin);
+  }
+
+  let maxBoxHeight = 0;
+  boxes.forEach((box) => {
+    const textFont = messageFont(conf);
+    let totalWidth = box.actorKeys.reduce((total, aKey) => {
+      return (total += actors[aKey].width + (actors[aKey].margin || 0));
+    }, 0);
+
+    totalWidth -= 2 * conf.boxTextMargin;
+    if (box.wrap) {
+      box.name = utils.wrapLabel(box.name, totalWidth - 2 * conf.wrapPadding, textFont);
+    }
+
+    const boxMsgDimensions = utils.calculateTextDimensions(box.name, textFont);
+    maxBoxHeight = common.getMax(boxMsgDimensions.height, maxBoxHeight);
+    const minWidth = common.getMax(totalWidth, boxMsgDimensions.width + 2 * conf.wrapPadding);
+    box.margin = conf.boxTextMargin;
+    if (totalWidth < minWidth) {
+      const missing = (minWidth - totalWidth) / 2;
+      box.margin += missing;
+    }
+  });
+  boxes.forEach((box) => (box.textMaxHeight = maxBoxHeight));
+
+  return common.getMax(maxHeight, conf.height);
+}
+
+const buildNoteModel = function (msg, actors, diagObj) {
+  const startx = actors[msg.from].x;
+  const stopx = actors[msg.to].x;
+  const shouldWrap = msg.wrap && msg.message;
+
+  let textDimensions = utils.calculateTextDimensions(
+    shouldWrap ? utils.wrapLabel(msg.message, conf.width, noteFont(conf)) : msg.message,
+    noteFont(conf)
+  );
+  const noteModel = {
+    width: shouldWrap
+      ? conf.width
+      : common.getMax(conf.width, textDimensions.width + 2 * conf.noteMargin),
+    height: 0,
+    startx: actors[msg.from].x,
+    stopx: 0,
+    starty: 0,
+    stopy: 0,
+    message: msg.message,
+  };
+  if (msg.placement === diagObj.db.PLACEMENT.RIGHTOF) {
+    noteModel.width = shouldWrap
+      ? common.getMax(conf.width, textDimensions.width)
+      : common.getMax(
+          actors[msg.from].width / 2 + actors[msg.to].width / 2,
+          textDimensions.width + 2 * conf.noteMargin
+        );
+    noteModel.startx = startx + (actors[msg.from].width + conf.actorMargin) / 2;
+  } else if (msg.placement === diagObj.db.PLACEMENT.LEFTOF) {
+    noteModel.width = shouldWrap
+      ? common.getMax(conf.width, textDimensions.width + 2 * conf.noteMargin)
+      : common.getMax(
+          actors[msg.from].width / 2 + actors[msg.to].width / 2,
+          textDimensions.width + 2 * conf.noteMargin
+        );
+    noteModel.startx = startx - noteModel.width + (actors[msg.from].width - conf.actorMargin) / 2;
+  } else if (msg.to === msg.from) {
+    textDimensions = utils.calculateTextDimensions(
+      shouldWrap
+        ? utils.wrapLabel(
+            msg.message,
+            common.getMax(conf.width, actors[msg.from].width),
+            noteFont(conf)
+          )
+        : msg.message,
+      noteFont(conf)
+    );
+    noteModel.width = shouldWrap
+      ? common.getMax(conf.width, actors[msg.from].width)
+      : common.getMax(
+          actors[msg.from].width,
+          conf.width,
+          textDimensions.width + 2 * conf.noteMargin
+        );
+    noteModel.startx = startx + (actors[msg.from].width - noteModel.width) / 2;
+  } else {
+    noteModel.width =
+      Math.abs(startx + actors[msg.from].width / 2 - (stopx + actors[msg.to].width / 2)) +
+      conf.actorMargin;
+    noteModel.startx =
+      startx < stopx
+        ? startx + actors[msg.from].width / 2 - conf.actorMargin / 2
+        : stopx + actors[msg.to].width / 2 - conf.actorMargin / 2;
+  }
+  if (shouldWrap) {
+    noteModel.message = utils.wrapLabel(
+      msg.message,
+      noteModel.width - 2 * conf.wrapPadding,
+      noteFont(conf)
+    );
+  }
+  log.debug(
+    `NM:[${noteModel.startx},${noteModel.stopx},${noteModel.starty},${noteModel.stopy}:${noteModel.width},${noteModel.height}=${msg.message}]`
+  );
+  return noteModel;
+};
+
+const buildMessageModel = function (msg, actors, diagObj) {
+  let process = false;
+  if (
+    [
+      diagObj.db.LINETYPE.SOLID_OPEN,
+      diagObj.db.LINETYPE.DOTTED_OPEN,
+      diagObj.db.LINETYPE.SOLID,
+      diagObj.db.LINETYPE.DOTTED,
+      diagObj.db.LINETYPE.SOLID_CROSS,
+      diagObj.db.LINETYPE.DOTTED_CROSS,
+      diagObj.db.LINETYPE.SOLID_POINT,
+      diagObj.db.LINETYPE.DOTTED_POINT,
+    ].includes(msg.type)
+  ) {
+    process = true;
+  }
+  if (!process) {
+    return {};
+  }
+  const fromBounds = activationBounds(msg.from, actors);
+  const toBounds = activationBounds(msg.to, actors);
+  const fromIdx = fromBounds[0] <= toBounds[0] ? 1 : 0;
+  const toIdx = fromBounds[0] < toBounds[0] ? 0 : 1;
+  const allBounds = [...fromBounds, ...toBounds];
+  const boundedWidth = Math.abs(toBounds[toIdx] - fromBounds[fromIdx]);
+  if (msg.wrap && msg.message) {
+    msg.message = utils.wrapLabel(
+      msg.message,
+      common.getMax(boundedWidth + 2 * conf.wrapPadding, conf.width),
+      messageFont(conf)
+    );
+  }
+  const msgDims = utils.calculateTextDimensions(msg.message, messageFont(conf));
+
+  return {
+    width: common.getMax(
+      msg.wrap ? 0 : msgDims.width + 2 * conf.wrapPadding,
+      boundedWidth + 2 * conf.wrapPadding,
+      conf.width
+    ),
+    height: 0,
+    startx: fromBounds[fromIdx],
+    stopx: toBounds[toIdx],
+    starty: 0,
+    stopy: 0,
+    message: msg.message,
+    type: msg.type,
+    wrap: msg.wrap,
+    fromBounds: Math.min.apply(null, allBounds),
+    toBounds: Math.max.apply(null, allBounds),
+  };
+};
+
+const calculateLoopBounds = function (messages, actors, _maxWidthPerActor, diagObj) {
+  const loops = {};
+  const stack = [];
+  let current, noteModel, msgModel;
+
+  messages.forEach(function (msg) {
+    msg.id = utils.random({ length: 10 });
+    switch (msg.type) {
+      case diagObj.db.LINETYPE.LOOP_START:
+      case diagObj.db.LINETYPE.ALT_START:
+      case diagObj.db.LINETYPE.OPT_START:
+      case diagObj.db.LINETYPE.PAR_START:
+      case diagObj.db.LINETYPE.PAR_OVER_START:
+      case diagObj.db.LINETYPE.CRITICAL_START:
+      case diagObj.db.LINETYPE.BREAK_START:
+        stack.push({
+          id: msg.id,
+          msg: msg.message,
+          from: Number.MAX_SAFE_INTEGER,
+          to: Number.MIN_SAFE_INTEGER,
+          width: 0,
+        });
+        break;
+      case diagObj.db.LINETYPE.ALT_ELSE:
+      case diagObj.db.LINETYPE.PAR_AND:
+      case diagObj.db.LINETYPE.CRITICAL_OPTION:
+        if (msg.message) {
+          current = stack.pop();
+          loops[current.id] = current;
+          loops[msg.id] = current;
+          stack.push(current);
+        }
+        break;
+      case diagObj.db.LINETYPE.LOOP_END:
+      case diagObj.db.LINETYPE.ALT_END:
+      case diagObj.db.LINETYPE.OPT_END:
+      case diagObj.db.LINETYPE.PAR_END:
+      case diagObj.db.LINETYPE.CRITICAL_END:
+      case diagObj.db.LINETYPE.BREAK_END:
+        current = stack.pop();
+        loops[current.id] = current;
+        break;
+      case diagObj.db.LINETYPE.ACTIVE_START:
+        {
+          const actorRect = actors[msg.from ? msg.from.actor : msg.to.actor];
+          const stackedSize = actorActivations(msg.from ? msg.from.actor : msg.to.actor).length;
+          const x =
+            actorRect.x + actorRect.width / 2 + ((stackedSize - 1) * conf.activationWidth) / 2;
+          const toAdd = {
+            startx: x,
+            stopx: x + conf.activationWidth,
+            actor: msg.from.actor,
+            enabled: true,
+          };
+          bounds.activations.push(toAdd);
+        }
+        break;
+      case diagObj.db.LINETYPE.ACTIVE_END:
+        {
+          const lastActorActivationIdx = bounds.activations
+            .map((a) => a.actor)
+            .lastIndexOf(msg.from.actor);
+          delete bounds.activations.splice(lastActorActivationIdx, 1)[0];
+        }
+        break;
+    }
+    const isNote = msg.placement !== undefined;
+    if (isNote) {
+      noteModel = buildNoteModel(msg, actors, diagObj);
+      msg.noteModel = noteModel;
+      stack.forEach((stk) => {
+        current = stk;
+        current.from = common.getMin(current.from, noteModel.startx);
+        current.to = common.getMax(current.to, noteModel.startx + noteModel.width);
+        current.width =
+          common.getMax(current.width, Math.abs(current.from - current.to)) - conf.labelBoxWidth;
+      });
+    } else {
+      msgModel = buildMessageModel(msg, actors, diagObj);
+      msg.msgModel = msgModel;
+      if (msgModel.startx && msgModel.stopx && stack.length > 0) {
+        stack.forEach((stk) => {
+          current = stk;
+          if (msgModel.startx === msgModel.stopx) {
+            const from = actors[msg.from];
+            const to = actors[msg.to];
+            current.from = common.getMin(
+              from.x - msgModel.width / 2,
+              from.x - from.width / 2,
+              current.from
+            );
+            current.to = common.getMax(
+              to.x + msgModel.width / 2,
+              to.x + from.width / 2,
+              current.to
+            );
+            current.width =
+              common.getMax(current.width, Math.abs(current.to - current.from)) -
+              conf.labelBoxWidth;
+          } else {
+            current.from = common.getMin(msgModel.startx, current.from);
+            current.to = common.getMax(msgModel.stopx, current.to);
+            current.width = common.getMax(current.width, msgModel.width) - conf.labelBoxWidth;
+          }
+        });
+      }
+    }
+  });
+  bounds.activations = [];
+  log.debug('Loop type widths:', loops);
+  return loops;
+};
+
+export default {
+  bounds,
+  drawActors,
+  drawActorsPopup,
+  setConf,
+  draw,
+};
diff --git a/packages/mermaid/src/styles.spec.ts b/packages/mermaid/src/styles.spec.ts
index 51951f190..d1edf4111 100644
--- a/packages/mermaid/src/styles.spec.ts
+++ b/packages/mermaid/src/styles.spec.ts
@@ -29,6 +29,7 @@ import state from './diagrams/state/styles.js';
 import journey from './diagrams/user-journey/styles.js';
 import timeline from './diagrams/timeline/styles.js';
 import mindmap from './diagrams/mindmap/styles.js';
+import sankey from './diagrams/sankey/styles.js';
 import themes from './themes/index.js';
 
 async function checkValidStylisCSSStyleSheet(stylisString: string) {
@@ -98,6 +99,7 @@ describe('styles', () => {
         sequence,
         state,
         timeline,
+        sankey,
       })) {
         test(`should return a valid style for diagram ${diagramId} and theme ${themeId}`, async () => {
           const { default: getStyles, addStylesForDiagram } = await import('./styles.js');

From 8e001b92f2005f3ffdc4166b3c5d7b9315d15a29 Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Sun, 18 Jun 2023 01:32:45 +0300
Subject: [PATCH 009/187] Cleared sankey renderer

---
 cypress/integration/rendering/sankey.spec.js  |   14 +
 .../diagrams/sankey/parser/desired_syntax.md  |    2 +-
 .../src/diagrams/sankey/parser/sankey.spec.js |   44 +
 .../src/diagrams/sankey/sankeyDiagram.spec.js |   24 -
 .../src/diagrams/sankey/sankeyDiagram.ts      |    1 +
 .../src/diagrams/sankey/sankeyRenderer.ts     | 1431 +----------------
 6 files changed, 61 insertions(+), 1455 deletions(-)
 create mode 100644 cypress/integration/rendering/sankey.spec.js
 create mode 100644 packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js
 delete mode 100644 packages/mermaid/src/diagrams/sankey/sankeyDiagram.spec.js

diff --git a/cypress/integration/rendering/sankey.spec.js b/cypress/integration/rendering/sankey.spec.js
new file mode 100644
index 000000000..5b9bcf870
--- /dev/null
+++ b/cypress/integration/rendering/sankey.spec.js
@@ -0,0 +1,14 @@
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
+
+describe('Sankey Diagram', () => {
+  it('should render a simple sankey diagram', () => {
+    imgSnapshotTest(
+      `
+      sankey
+        a -> 30 -> b
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+});
diff --git a/packages/mermaid/src/diagrams/sankey/parser/desired_syntax.md b/packages/mermaid/src/diagrams/sankey/parser/desired_syntax.md
index 52057fce9..d0cbd4e8a 100644
--- a/packages/mermaid/src/diagrams/sankey/parser/desired_syntax.md
+++ b/packages/mermaid/src/diagrams/sankey/parser/desired_syntax.md
@@ -28,7 +28,7 @@ Interviewed,Declined Offer,2
 Interviewed,Accepted Offer,1,orange
 ```
 
-GoJS uses similar approach
+GoJS uses similar approach:
 ```json
 {
 "nodeDataArray": [
diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js
new file mode 100644
index 000000000..995c92478
--- /dev/null
+++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js
@@ -0,0 +1,44 @@
+import diagram from './sankey.jison';
+import { parser } from './sankey.jison';
+import db from '../sankeyDB.js';
+
+describe('Sankey diagram', function () {
+  // TODO - these examples should be put into ./parser/stateDiagram.spec.js
+  describe('when parsing an info graph it', function () {
+    beforeEach(function () {
+      parser.yy = db;
+      diagram.parser.yy = db;
+      diagram.parser.yy.clear();
+    });
+
+    it('one simple flow', function () {
+      const str = `
+      sankey
+      a -> 30 -> b
+      `;
+
+      parser.parse(str);
+    });
+
+    it('multiple flows', function () {
+      const str = `
+      sankey
+      a -> 30 -> b
+      c -> 30 -> d
+      c -> 40 -> e
+      `;
+
+      parser.parse(str);
+    });
+
+    it('multiple flows', function () {
+      const str = `
+      sankey
+      a -> 30 -> b
+      c -> 30 -> d
+      `;
+
+      parser.parse(str);
+    });
+  });
+});
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyDiagram.spec.js b/packages/mermaid/src/diagrams/sankey/sankeyDiagram.spec.js
deleted file mode 100644
index ee9d0e23e..000000000
--- a/packages/mermaid/src/diagrams/sankey/sankeyDiagram.spec.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import diagram from './parser/sankey.jison';
-import { parser } from './parser/sankey.jison';
-import db from './sankeyDB.js';
-
-describe('state diagram V2, ', function () {
-  // TODO - these examples should be put into ./parser/stateDiagram.spec.js
-  describe('when parsing an info graph it', function () {
-    beforeEach(function () {
-      parser.yy = stateDb;
-      diagram.parser.yy = db;
-      diagram.parser.yy.clear();
-    });
-
-    it('super simple', function () {
-      const str = `
-      stateDiagram-v2
-      [*] --> State1
-      State1 --> [*]
-      `;
-
-      parser.parse(str);
-    });
-  });
-});
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts b/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts
index e7a46d8bc..482a75a48 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts
@@ -11,3 +11,4 @@ export const diagram: DiagramDefinition = {
   renderer,
   styles,
 };
+
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
index 243fbddad..f1482210e 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
@@ -1,638 +1,5 @@
-// @ts-nocheck TODO: fix file
-import { select, selectAll } from 'd3';
-import svgDraw, { drawText, fixLifeLineHeights } from './svgDraw.js';
-import { log } from '../../logger.js';
-import common from '../common/common.js';
-import * as svgDrawCommon from '../common/svgDrawCommon.js';
-import * as configApi from '../../config.js';
-import assignWithDepth from '../../assignWithDepth.js';
-import utils from '../../utils.js';
-import { configureSvgSize } from '../../setupGraphViewbox.js';
 import { Diagram } from '../../Diagram.js';
 
-let conf = {};
-
-export const bounds = {
-  data: {
-    startx: undefined,
-    stopx: undefined,
-    starty: undefined,
-    stopy: undefined,
-  },
-  verticalPos: 0,
-  sequenceItems: [],
-  activations: [],
-  models: {
-    getHeight: function () {
-      return (
-        Math.max.apply(
-          null,
-          this.actors.length === 0 ? [0] : this.actors.map((actor) => actor.height || 0)
-        ) +
-        (this.loops.length === 0
-          ? 0
-          : this.loops.map((it) => it.height || 0).reduce((acc, h) => acc + h)) +
-        (this.messages.length === 0
-          ? 0
-          : this.messages.map((it) => it.height || 0).reduce((acc, h) => acc + h)) +
-        (this.notes.length === 0
-          ? 0
-          : this.notes.map((it) => it.height || 0).reduce((acc, h) => acc + h))
-      );
-    },
-    clear: function () {
-      this.actors = [];
-      this.boxes = [];
-      this.loops = [];
-      this.messages = [];
-      this.notes = [];
-    },
-    addBox: function (boxModel) {
-      this.boxes.push(boxModel);
-    },
-    addActor: function (actorModel) {
-      this.actors.push(actorModel);
-    },
-    addLoop: function (loopModel) {
-      this.loops.push(loopModel);
-    },
-    addMessage: function (msgModel) {
-      this.messages.push(msgModel);
-    },
-    addNote: function (noteModel) {
-      this.notes.push(noteModel);
-    },
-    lastActor: function () {
-      return this.actors[this.actors.length - 1];
-    },
-    lastLoop: function () {
-      return this.loops[this.loops.length - 1];
-    },
-    lastMessage: function () {
-      return this.messages[this.messages.length - 1];
-    },
-    lastNote: function () {
-      return this.notes[this.notes.length - 1];
-    },
-    actors: [],
-    boxes: [],
-    loops: [],
-    messages: [],
-    notes: [],
-  },
-  init: function () {
-    this.sequenceItems = [];
-    this.activations = [];
-    this.models.clear();
-    this.data = {
-      startx: undefined,
-      stopx: undefined,
-      starty: undefined,
-      stopy: undefined,
-    };
-    this.verticalPos = 0;
-    setConf(configApi.getConfig());
-  },
-  updateVal: function (obj, key, val, fun) {
-    if (obj[key] === undefined) {
-      obj[key] = val;
-    } else {
-      obj[key] = fun(val, obj[key]);
-    }
-  },
-  updateBounds: function (startx, starty, stopx, stopy) {
-    // eslint-disable-next-line @typescript-eslint/no-this-alias
-    const _self = this;
-    let cnt = 0;
-    /** @param type - Either `activation` or `undefined` */
-    function updateFn(type?: 'activation') {
-      return function updateItemBounds(item) {
-        cnt++;
-        // The loop sequenceItems is a stack so the biggest margins in the beginning of the sequenceItems
-        const n = _self.sequenceItems.length - cnt + 1;
-
-        _self.updateVal(item, 'starty', starty - n * conf.boxMargin, Math.min);
-        _self.updateVal(item, 'stopy', stopy + n * conf.boxMargin, Math.max);
-
-        _self.updateVal(bounds.data, 'startx', startx - n * conf.boxMargin, Math.min);
-        _self.updateVal(bounds.data, 'stopx', stopx + n * conf.boxMargin, Math.max);
-
-        if (!(type === 'activation')) {
-          _self.updateVal(item, 'startx', startx - n * conf.boxMargin, Math.min);
-          _self.updateVal(item, 'stopx', stopx + n * conf.boxMargin, Math.max);
-
-          _self.updateVal(bounds.data, 'starty', starty - n * conf.boxMargin, Math.min);
-          _self.updateVal(bounds.data, 'stopy', stopy + n * conf.boxMargin, Math.max);
-        }
-      };
-    }
-
-    this.sequenceItems.forEach(updateFn());
-    this.activations.forEach(updateFn('activation'));
-  },
-  insert: function (startx, starty, stopx, stopy) {
-    const _startx = common.getMin(startx, stopx);
-    const _stopx = common.getMax(startx, stopx);
-    const _starty = common.getMin(starty, stopy);
-    const _stopy = common.getMax(starty, stopy);
-
-    this.updateVal(bounds.data, 'startx', _startx, Math.min);
-    this.updateVal(bounds.data, 'starty', _starty, Math.min);
-    this.updateVal(bounds.data, 'stopx', _stopx, Math.max);
-    this.updateVal(bounds.data, 'stopy', _stopy, Math.max);
-
-    this.updateBounds(_startx, _starty, _stopx, _stopy);
-  },
-  newActivation: function (message, diagram, actors) {
-    const actorRect = actors[message.from.actor];
-    const stackedSize = actorActivations(message.from.actor).length || 0;
-    const x = actorRect.x + actorRect.width / 2 + ((stackedSize - 1) * conf.activationWidth) / 2;
-    this.activations.push({
-      startx: x,
-      starty: this.verticalPos + 2,
-      stopx: x + conf.activationWidth,
-      stopy: undefined,
-      actor: message.from.actor,
-      anchored: svgDraw.anchorElement(diagram),
-    });
-  },
-  endActivation: function (message) {
-    // find most recent activation for given actor
-    const lastActorActivationIdx = this.activations
-      .map(function (activation) {
-        return activation.actor;
-      })
-      .lastIndexOf(message.from.actor);
-    return this.activations.splice(lastActorActivationIdx, 1)[0];
-  },
-  createLoop: function (title = { message: undefined, wrap: false, width: undefined }, fill) {
-    return {
-      startx: undefined,
-      starty: this.verticalPos,
-      stopx: undefined,
-      stopy: undefined,
-      title: title.message,
-      wrap: title.wrap,
-      width: title.width,
-      height: 0,
-      fill: fill,
-    };
-  },
-  newLoop: function (title = { message: undefined, wrap: false, width: undefined }, fill) {
-    this.sequenceItems.push(this.createLoop(title, fill));
-  },
-  endLoop: function () {
-    return this.sequenceItems.pop();
-  },
-  isLoopOverlap: function () {
-    return this.sequenceItems.length
-      ? this.sequenceItems[this.sequenceItems.length - 1].overlap
-      : false;
-  },
-  addSectionToLoop: function (message) {
-    const loop = this.sequenceItems.pop();
-    loop.sections = loop.sections || [];
-    loop.sectionTitles = loop.sectionTitles || [];
-    loop.sections.push({ y: bounds.getVerticalPos(), height: 0 });
-    loop.sectionTitles.push(message);
-    this.sequenceItems.push(loop);
-  },
-  saveVerticalPos: function () {
-    if (this.isLoopOverlap()) {
-      this.savedVerticalPos = this.verticalPos;
-    }
-  },
-  resetVerticalPos: function () {
-    if (this.isLoopOverlap()) {
-      this.verticalPos = this.savedVerticalPos;
-    }
-  },
-  bumpVerticalPos: function (bump) {
-    this.verticalPos = this.verticalPos + bump;
-    this.data.stopy = common.getMax(this.data.stopy, this.verticalPos);
-  },
-  getVerticalPos: function () {
-    return this.verticalPos;
-  },
-  getBounds: function () {
-    return { bounds: this.data, models: this.models };
-  },
-};
-
-/** Options for drawing a note in {@link drawNote} */
-interface NoteModel {
-  /** x axis start position */
-  startx: number;
-  /** y axis position */
-  starty: number;
-  /** the message to be shown */
-  message: string;
-  /** Set this with a custom width to override the default configured width. */
-  width: number;
-}
-
-/**
- * Draws an note in the diagram with the attached line
- *
- * @param elem - The diagram to draw to.
- * @param noteModel - Note model options.
- */
-const drawNote = function (elem: any, noteModel: NoteModel) {
-  bounds.bumpVerticalPos(conf.boxMargin);
-  noteModel.height = conf.boxMargin;
-  noteModel.starty = bounds.getVerticalPos();
-  const rect = svgDrawCommon.getNoteRect();
-  rect.x = noteModel.startx;
-  rect.y = noteModel.starty;
-  rect.width = noteModel.width || conf.width;
-  rect.class = 'note';
-
-  const g = elem.append('g');
-  const rectElem = svgDraw.drawRect(g, rect);
-  const textObj = svgDrawCommon.getTextObj();
-  textObj.x = noteModel.startx;
-  textObj.y = noteModel.starty;
-  textObj.width = rect.width;
-  textObj.dy = '1em';
-  textObj.text = noteModel.message;
-  textObj.class = 'noteText';
-  textObj.fontFamily = conf.noteFontFamily;
-  textObj.fontSize = conf.noteFontSize;
-  textObj.fontWeight = conf.noteFontWeight;
-  textObj.anchor = conf.noteAlign;
-  textObj.textMargin = conf.noteMargin;
-  textObj.valign = 'center';
-
-  const textElem = drawText(g, textObj);
-
-  const textHeight = Math.round(
-    textElem
-      .map((te) => (te._groups || te)[0][0].getBBox().height)
-      .reduce((acc, curr) => acc + curr)
-  );
-
-  rectElem.attr('height', textHeight + 2 * conf.noteMargin);
-  noteModel.height += textHeight + 2 * conf.noteMargin;
-  bounds.bumpVerticalPos(textHeight + 2 * conf.noteMargin);
-  noteModel.stopy = noteModel.starty + textHeight + 2 * conf.noteMargin;
-  noteModel.stopx = noteModel.startx + rect.width;
-  bounds.insert(noteModel.startx, noteModel.starty, noteModel.stopx, noteModel.stopy);
-  bounds.models.addNote(noteModel);
-};
-
-const messageFont = (cnf) => {
-  return {
-    fontFamily: cnf.messageFontFamily,
-    fontSize: cnf.messageFontSize,
-    fontWeight: cnf.messageFontWeight,
-  };
-};
-const noteFont = (cnf) => {
-  return {
-    fontFamily: cnf.noteFontFamily,
-    fontSize: cnf.noteFontSize,
-    fontWeight: cnf.noteFontWeight,
-  };
-};
-const actorFont = (cnf) => {
-  return {
-    fontFamily: cnf.actorFontFamily,
-    fontSize: cnf.actorFontSize,
-    fontWeight: cnf.actorFontWeight,
-  };
-};
-
-/**
- * Process a message by adding its dimensions to the bound. It returns the Y coordinate of the
- * message so it can be drawn later. We do not draw the message at this point so the arrowhead can
- * be on top of the activation box.
- *
- * @param _diagram - The parent of the message element.
- * @param msgModel - The model containing fields describing a message
- * @returns `lineStartY` - The Y coordinate at which the message line starts
- */
-function boundMessage(_diagram, msgModel): number {
-  bounds.bumpVerticalPos(10);
-  const { startx, stopx, message } = msgModel;
-  const lines = common.splitBreaks(message).length;
-  const textDims = utils.calculateTextDimensions(message, messageFont(conf));
-  const lineHeight = textDims.height / lines;
-  msgModel.height += lineHeight;
-
-  bounds.bumpVerticalPos(lineHeight);
-
-  let lineStartY;
-  let totalOffset = textDims.height - 10;
-  const textWidth = textDims.width;
-
-  if (startx === stopx) {
-    lineStartY = bounds.getVerticalPos() + totalOffset;
-    if (!conf.rightAngles) {
-      totalOffset += conf.boxMargin;
-      lineStartY = bounds.getVerticalPos() + totalOffset;
-    }
-    totalOffset += 30;
-    const dx = common.getMax(textWidth / 2, conf.width / 2);
-    bounds.insert(
-      startx - dx,
-      bounds.getVerticalPos() - 10 + totalOffset,
-      stopx + dx,
-      bounds.getVerticalPos() + 30 + totalOffset
-    );
-  } else {
-    totalOffset += conf.boxMargin;
-    lineStartY = bounds.getVerticalPos() + totalOffset;
-    bounds.insert(startx, lineStartY - 10, stopx, lineStartY);
-  }
-  bounds.bumpVerticalPos(totalOffset);
-  msgModel.height += totalOffset;
-  msgModel.stopy = msgModel.starty + msgModel.height;
-  bounds.insert(msgModel.fromBounds, msgModel.starty, msgModel.toBounds, msgModel.stopy);
-
-  return lineStartY;
-}
-
-/**
- * Draws a message. Note that the bounds have previously been updated by boundMessage.
- *
- * @param diagram - The parent of the message element
- * @param msgModel - The model containing fields describing a message
- * @param lineStartY - The Y coordinate at which the message line starts
- * @param diagObj - The diagram object.
- */
-const drawMessage = function (diagram, msgModel, lineStartY: number, diagObj: Diagram) {
-  const { startx, stopx, starty, message, type, sequenceIndex, sequenceVisible } = msgModel;
-  const textDims = utils.calculateTextDimensions(message, messageFont(conf));
-  const textObj = svgDrawCommon.getTextObj();
-  textObj.x = startx;
-  textObj.y = starty + 10;
-  textObj.width = stopx - startx;
-  textObj.class = 'messageText';
-  textObj.dy = '1em';
-  textObj.text = message;
-  textObj.fontFamily = conf.messageFontFamily;
-  textObj.fontSize = conf.messageFontSize;
-  textObj.fontWeight = conf.messageFontWeight;
-  textObj.anchor = conf.messageAlign;
-  textObj.valign = 'center';
-  textObj.textMargin = conf.wrapPadding;
-  textObj.tspan = false;
-
-  drawText(diagram, textObj);
-
-  const textWidth = textDims.width;
-
-  let line;
-  if (startx === stopx) {
-    if (conf.rightAngles) {
-      line = diagram
-        .append('path')
-        .attr(
-          'd',
-          `M  ${startx},${lineStartY} H ${
-            startx + common.getMax(conf.width / 2, textWidth / 2)
-          } V ${lineStartY + 25} H ${startx}`
-        );
-    } else {
-      line = diagram
-        .append('path')
-        .attr(
-          'd',
-          'M ' +
-            startx +
-            ',' +
-            lineStartY +
-            ' C ' +
-            (startx + 60) +
-            ',' +
-            (lineStartY - 10) +
-            ' ' +
-            (startx + 60) +
-            ',' +
-            (lineStartY + 30) +
-            ' ' +
-            startx +
-            ',' +
-            (lineStartY + 20)
-        );
-    }
-  } else {
-    line = diagram.append('line');
-    line.attr('x1', startx);
-    line.attr('y1', lineStartY);
-    line.attr('x2', stopx);
-    line.attr('y2', lineStartY);
-  }
-  // Make an SVG Container
-  // Draw the line
-  if (
-    type === diagObj.db.LINETYPE.DOTTED ||
-    type === diagObj.db.LINETYPE.DOTTED_CROSS ||
-    type === diagObj.db.LINETYPE.DOTTED_POINT ||
-    type === diagObj.db.LINETYPE.DOTTED_OPEN
-  ) {
-    line.style('stroke-dasharray', '3, 3');
-    line.attr('class', 'messageLine1');
-  } else {
-    line.attr('class', 'messageLine0');
-  }
-
-  let url = '';
-  if (conf.arrowMarkerAbsolute) {
-    url =
-      window.location.protocol +
-      '//' +
-      window.location.host +
-      window.location.pathname +
-      window.location.search;
-    url = url.replace(/\(/g, '\\(');
-    url = url.replace(/\)/g, '\\)');
-  }
-
-  line.attr('stroke-width', 2);
-  line.attr('stroke', 'none'); // handled by theme/css anyway
-  line.style('fill', 'none'); // remove any fill colour
-  if (type === diagObj.db.LINETYPE.SOLID || type === diagObj.db.LINETYPE.DOTTED) {
-    line.attr('marker-end', 'url(' + url + '#arrowhead)');
-  }
-  if (type === diagObj.db.LINETYPE.SOLID_POINT || type === diagObj.db.LINETYPE.DOTTED_POINT) {
-    line.attr('marker-end', 'url(' + url + '#filled-head)');
-  }
-
-  if (type === diagObj.db.LINETYPE.SOLID_CROSS || type === diagObj.db.LINETYPE.DOTTED_CROSS) {
-    line.attr('marker-end', 'url(' + url + '#crosshead)');
-  }
-
-  // add node number
-  if (sequenceVisible || conf.showSequenceNumbers) {
-    line.attr('marker-start', 'url(' + url + '#sequencenumber)');
-    diagram
-      .append('text')
-      .attr('x', startx)
-      .attr('y', lineStartY + 4)
-      .attr('font-family', 'sans-serif')
-      .attr('font-size', '12px')
-      .attr('text-anchor', 'middle')
-      .attr('class', 'sequenceNumber')
-      .text(sequenceIndex);
-  }
-};
-
-export const drawActors = function (
-  diagram,
-  actors,
-  actorKeys,
-  verticalPos,
-  configuration,
-  messages,
-  isFooter
-) {
-  if (configuration.hideUnusedParticipants === true) {
-    const newActors = new Set();
-    messages.forEach((message) => {
-      newActors.add(message.from);
-      newActors.add(message.to);
-    });
-    actorKeys = actorKeys.filter((actorKey) => newActors.has(actorKey));
-  }
-
-  // Draw the actors
-  let prevWidth = 0;
-  let prevMargin = 0;
-  let maxHeight = 0;
-  let prevBox = undefined;
-
-  for (const actorKey of actorKeys) {
-    const actor = actors[actorKey];
-    const box = actor.box;
-
-    // end of box
-    if (prevBox && prevBox != box) {
-      if (!isFooter) {
-        bounds.models.addBox(prevBox);
-      }
-      prevMargin += conf.boxMargin + prevBox.margin;
-    }
-
-    // new box
-    if (box && box != prevBox) {
-      if (!isFooter) {
-        box.x = prevWidth + prevMargin;
-        box.y = verticalPos;
-      }
-      prevMargin += box.margin;
-    }
-
-    // Add some rendering data to the object
-    actor.width = actor.width || conf.width;
-    actor.height = common.getMax(actor.height || conf.height, conf.height);
-    actor.margin = actor.margin || conf.actorMargin;
-
-    actor.x = prevWidth + prevMargin;
-    actor.y = bounds.getVerticalPos();
-
-    // Draw the box with the attached line
-    const height = svgDraw.drawActor(diagram, actor, conf, isFooter);
-    maxHeight = common.getMax(maxHeight, height);
-    bounds.insert(actor.x, verticalPos, actor.x + actor.width, actor.height);
-
-    prevWidth += actor.width + prevMargin;
-    if (actor.box) {
-      actor.box.width = prevWidth + box.margin - actor.box.x;
-    }
-    prevMargin = actor.margin;
-    prevBox = actor.box;
-    bounds.models.addActor(actor);
-  }
-
-  // end of box
-  if (prevBox && !isFooter) {
-    bounds.models.addBox(prevBox);
-  }
-
-  // Add a margin between the actor boxes and the first arrow
-  bounds.bumpVerticalPos(maxHeight);
-};
-
-export const drawActorsPopup = function (diagram, actors, actorKeys, doc) {
-  let maxHeight = 0;
-  let maxWidth = 0;
-  for (const actorKey of actorKeys) {
-    const actor = actors[actorKey];
-    const minMenuWidth = getRequiredPopupWidth(actor);
-    const menuDimensions = svgDraw.drawPopup(
-      diagram,
-      actor,
-      minMenuWidth,
-      conf,
-      conf.forceMenus,
-      doc
-    );
-    if (menuDimensions.height > maxHeight) {
-      maxHeight = menuDimensions.height;
-    }
-    if (menuDimensions.width + actor.x > maxWidth) {
-      maxWidth = menuDimensions.width + actor.x;
-    }
-  }
-
-  return { maxHeight: maxHeight, maxWidth: maxWidth };
-};
-
-export const setConf = function (cnf) {
-  assignWithDepth(conf, cnf);
-
-  if (cnf.fontFamily) {
-    conf.actorFontFamily = conf.noteFontFamily = conf.messageFontFamily = cnf.fontFamily;
-  }
-  if (cnf.fontSize) {
-    conf.actorFontSize = conf.noteFontSize = conf.messageFontSize = cnf.fontSize;
-  }
-  if (cnf.fontWeight) {
-    conf.actorFontWeight = conf.noteFontWeight = conf.messageFontWeight = cnf.fontWeight;
-  }
-};
-
-const actorActivations = function (actor) {
-  return bounds.activations.filter(function (activation) {
-    return activation.actor === actor;
-  });
-};
-
-const activationBounds = function (actor, actors) {
-  // handle multiple stacked activations for same actor
-  const actorObj = actors[actor];
-  const activations = actorActivations(actor);
-
-  const left = activations.reduce(function (acc, activation) {
-    return common.getMin(acc, activation.startx);
-  }, actorObj.x + actorObj.width / 2);
-  const right = activations.reduce(function (acc, activation) {
-    return common.getMax(acc, activation.stopx);
-  }, actorObj.x + actorObj.width / 2);
-  return [left, right];
-};
-
-function adjustLoopHeightForWrap(loopWidths, msg, preMargin, postMargin, addLoopFn) {
-  bounds.bumpVerticalPos(preMargin);
-  let heightAdjust = postMargin;
-  if (msg.id && msg.message && loopWidths[msg.id]) {
-    const loopWidth = loopWidths[msg.id].width;
-    const textConf = messageFont(conf);
-    msg.message = utils.wrapLabel(`[${msg.message}]`, loopWidth - 2 * conf.wrapPadding, textConf);
-    msg.width = loopWidth;
-    msg.wrap = true;
-
-    // const lines = common.splitBreaks(msg.message).length;
-    const textDims = utils.calculateTextDimensions(msg.message, textConf);
-    const totalOffset = common.getMax(textDims.height, conf.labelBoxHeight);
-    heightAdjust = postMargin + totalOffset;
-    log.debug(`${totalOffset} - ${msg.message}`);
-  }
-  addLoopFn(msg);
-  bounds.bumpVerticalPos(heightAdjust);
-}
-
 /**
  * Draws a sequenceDiagram in the tag with id: id based on the graph definition in text.
  *
@@ -642,805 +9,9 @@ function adjustLoopHeightForWrap(loopWidths, msg, preMargin, postMargin, addLoop
  * @param diagObj - A standard diagram containing the db and the text and type etc of the diagram
  */
 export const draw = function (_text: string, id: string, _version: string, diagObj: Diagram) {
-  const { securityLevel, sequence } = configApi.getConfig();
-  conf = sequence;
-  diagObj.db.clear();
-  // Parse the graph definition
-  diagObj.parser.parse(_text);
-  // Handle root and Document for when rendering in sandbox mode
-  let sandboxElement;
-  if (securityLevel === 'sandbox') {
-    sandboxElement = select('#i' + id);
-  }
-
-  const root =
-    securityLevel === 'sandbox'
-      ? select(sandboxElement.nodes()[0].contentDocument.body)
-      : select('body');
-  const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
-  bounds.init();
-  log.debug(diagObj.db);
-
-  const diagram =
-    securityLevel === 'sandbox' ? root.select(`[id="${id}"]`) : select(`[id="${id}"]`);
-
-  // Fetch data from the parsing
-  const actors = diagObj.db.getActors();
-  const boxes = diagObj.db.getBoxes();
-  const actorKeys = diagObj.db.getActorKeys();
-  const messages = diagObj.db.getMessages();
-  const title = diagObj.db.getDiagramTitle();
-  const hasBoxes = diagObj.db.hasAtLeastOneBox();
-  const hasBoxTitles = diagObj.db.hasAtLeastOneBoxWithTitle();
-  const maxMessageWidthPerActor = getMaxMessageWidthPerActor(actors, messages, diagObj);
-  conf.height = calculateActorMargins(actors, maxMessageWidthPerActor, boxes);
-
-  svgDraw.insertComputerIcon(diagram);
-  svgDraw.insertDatabaseIcon(diagram);
-  svgDraw.insertClockIcon(diagram);
-
-  if (hasBoxes) {
-    bounds.bumpVerticalPos(conf.boxMargin);
-    if (hasBoxTitles) {
-      bounds.bumpVerticalPos(boxes[0].textMaxHeight);
-    }
-  }
-
-  drawActors(diagram, actors, actorKeys, 0, conf, messages, false);
-  const loopWidths = calculateLoopBounds(messages, actors, maxMessageWidthPerActor, diagObj);
-
-  // The arrow head definition is attached to the svg once
-  svgDraw.insertArrowHead(diagram);
-  svgDraw.insertArrowCrossHead(diagram);
-  svgDraw.insertArrowFilledHead(diagram);
-  svgDraw.insertSequenceNumber(diagram);
-
-  /**
-   * @param msg - The message to draw.
-   * @param verticalPos - The vertical position of the message.
-   */
-  function activeEnd(msg: any, verticalPos: number) {
-    const activationData = bounds.endActivation(msg);
-    if (activationData.starty + 18 > verticalPos) {
-      activationData.starty = verticalPos - 6;
-      verticalPos += 12;
-    }
-    svgDraw.drawActivation(
-      diagram,
-      activationData,
-      verticalPos,
-      conf,
-      actorActivations(msg.from.actor).length
-    );
-
-    bounds.insert(activationData.startx, verticalPos - 10, activationData.stopx, verticalPos);
-  }
-
-  // Draw the messages/signals
-  let sequenceIndex = 1;
-  let sequenceIndexStep = 1;
-  const messagesToDraw = [];
-  messages.forEach(function (msg) {
-    let loopModel, noteModel, msgModel;
-
-    switch (msg.type) {
-      case diagObj.db.LINETYPE.NOTE:
-        bounds.resetVerticalPos();
-        noteModel = msg.noteModel;
-        drawNote(diagram, noteModel);
-        break;
-      case diagObj.db.LINETYPE.ACTIVE_START:
-        bounds.newActivation(msg, diagram, actors);
-        break;
-      case diagObj.db.LINETYPE.ACTIVE_END:
-        activeEnd(msg, bounds.getVerticalPos());
-        break;
-      case diagObj.db.LINETYPE.LOOP_START:
-        adjustLoopHeightForWrap(
-          loopWidths,
-          msg,
-          conf.boxMargin,
-          conf.boxMargin + conf.boxTextMargin,
-          (message) => bounds.newLoop(message)
-        );
-        break;
-      case diagObj.db.LINETYPE.LOOP_END:
-        loopModel = bounds.endLoop();
-        svgDraw.drawLoop(diagram, loopModel, 'loop', conf);
-        bounds.bumpVerticalPos(loopModel.stopy - bounds.getVerticalPos());
-        bounds.models.addLoop(loopModel);
-        break;
-      case diagObj.db.LINETYPE.RECT_START:
-        adjustLoopHeightForWrap(loopWidths, msg, conf.boxMargin, conf.boxMargin, (message) =>
-          bounds.newLoop(undefined, message.message)
-        );
-        break;
-      case diagObj.db.LINETYPE.RECT_END:
-        loopModel = bounds.endLoop();
-        svgDraw.drawBackgroundRect(diagram, loopModel);
-        bounds.models.addLoop(loopModel);
-        bounds.bumpVerticalPos(loopModel.stopy - bounds.getVerticalPos());
-        break;
-      case diagObj.db.LINETYPE.OPT_START:
-        adjustLoopHeightForWrap(
-          loopWidths,
-          msg,
-          conf.boxMargin,
-          conf.boxMargin + conf.boxTextMargin,
-          (message) => bounds.newLoop(message)
-        );
-        break;
-      case diagObj.db.LINETYPE.OPT_END:
-        loopModel = bounds.endLoop();
-        svgDraw.drawLoop(diagram, loopModel, 'opt', conf);
-        bounds.bumpVerticalPos(loopModel.stopy - bounds.getVerticalPos());
-        bounds.models.addLoop(loopModel);
-        break;
-      case diagObj.db.LINETYPE.ALT_START:
-        adjustLoopHeightForWrap(
-          loopWidths,
-          msg,
-          conf.boxMargin,
-          conf.boxMargin + conf.boxTextMargin,
-          (message) => bounds.newLoop(message)
-        );
-        break;
-      case diagObj.db.LINETYPE.ALT_ELSE:
-        adjustLoopHeightForWrap(
-          loopWidths,
-          msg,
-          conf.boxMargin + conf.boxTextMargin,
-          conf.boxMargin,
-          (message) => bounds.addSectionToLoop(message)
-        );
-        break;
-      case diagObj.db.LINETYPE.ALT_END:
-        loopModel = bounds.endLoop();
-        svgDraw.drawLoop(diagram, loopModel, 'alt', conf);
-        bounds.bumpVerticalPos(loopModel.stopy - bounds.getVerticalPos());
-        bounds.models.addLoop(loopModel);
-        break;
-      case diagObj.db.LINETYPE.PAR_START:
-      case diagObj.db.LINETYPE.PAR_OVER_START:
-        adjustLoopHeightForWrap(
-          loopWidths,
-          msg,
-          conf.boxMargin,
-          conf.boxMargin + conf.boxTextMargin,
-          (message) => bounds.newLoop(message)
-        );
-        bounds.saveVerticalPos();
-        break;
-      case diagObj.db.LINETYPE.PAR_AND:
-        adjustLoopHeightForWrap(
-          loopWidths,
-          msg,
-          conf.boxMargin + conf.boxTextMargin,
-          conf.boxMargin,
-          (message) => bounds.addSectionToLoop(message)
-        );
-        break;
-      case diagObj.db.LINETYPE.PAR_END:
-        loopModel = bounds.endLoop();
-        svgDraw.drawLoop(diagram, loopModel, 'par', conf);
-        bounds.bumpVerticalPos(loopModel.stopy - bounds.getVerticalPos());
-        bounds.models.addLoop(loopModel);
-        break;
-      case diagObj.db.LINETYPE.AUTONUMBER:
-        sequenceIndex = msg.message.start || sequenceIndex;
-        sequenceIndexStep = msg.message.step || sequenceIndexStep;
-        if (msg.message.visible) {
-          diagObj.db.enableSequenceNumbers();
-        } else {
-          diagObj.db.disableSequenceNumbers();
-        }
-        break;
-      case diagObj.db.LINETYPE.CRITICAL_START:
-        adjustLoopHeightForWrap(
-          loopWidths,
-          msg,
-          conf.boxMargin,
-          conf.boxMargin + conf.boxTextMargin,
-          (message) => bounds.newLoop(message)
-        );
-        break;
-      case diagObj.db.LINETYPE.CRITICAL_OPTION:
-        adjustLoopHeightForWrap(
-          loopWidths,
-          msg,
-          conf.boxMargin + conf.boxTextMargin,
-          conf.boxMargin,
-          (message) => bounds.addSectionToLoop(message)
-        );
-        break;
-      case diagObj.db.LINETYPE.CRITICAL_END:
-        loopModel = bounds.endLoop();
-        svgDraw.drawLoop(diagram, loopModel, 'critical', conf);
-        bounds.bumpVerticalPos(loopModel.stopy - bounds.getVerticalPos());
-        bounds.models.addLoop(loopModel);
-        break;
-      case diagObj.db.LINETYPE.BREAK_START:
-        adjustLoopHeightForWrap(
-          loopWidths,
-          msg,
-          conf.boxMargin,
-          conf.boxMargin + conf.boxTextMargin,
-          (message) => bounds.newLoop(message)
-        );
-        break;
-      case diagObj.db.LINETYPE.BREAK_END:
-        loopModel = bounds.endLoop();
-        svgDraw.drawLoop(diagram, loopModel, 'break', conf);
-        bounds.bumpVerticalPos(loopModel.stopy - bounds.getVerticalPos());
-        bounds.models.addLoop(loopModel);
-        break;
-      default:
-        try {
-          // lastMsg = msg
-          bounds.resetVerticalPos();
-          msgModel = msg.msgModel;
-          msgModel.starty = bounds.getVerticalPos();
-          msgModel.sequenceIndex = sequenceIndex;
-          msgModel.sequenceVisible = diagObj.db.showSequenceNumbers();
-          const lineStartY = boundMessage(diagram, msgModel);
-          messagesToDraw.push({ messageModel: msgModel, lineStartY: lineStartY });
-          bounds.models.addMessage(msgModel);
-        } catch (e) {
-          log.error('error while drawing message', e);
-        }
-    }
-
-    // Increment sequence counter if msg.type is a line (and not another event like activation or note, etc)
-    if (
-      [
-        diagObj.db.LINETYPE.SOLID_OPEN,
-        diagObj.db.LINETYPE.DOTTED_OPEN,
-        diagObj.db.LINETYPE.SOLID,
-        diagObj.db.LINETYPE.DOTTED,
-        diagObj.db.LINETYPE.SOLID_CROSS,
-        diagObj.db.LINETYPE.DOTTED_CROSS,
-        diagObj.db.LINETYPE.SOLID_POINT,
-        diagObj.db.LINETYPE.DOTTED_POINT,
-      ].includes(msg.type)
-    ) {
-      sequenceIndex = sequenceIndex + sequenceIndexStep;
-    }
-  });
-
-  messagesToDraw.forEach((e) => drawMessage(diagram, e.messageModel, e.lineStartY, diagObj));
-
-  if (conf.mirrorActors) {
-    // Draw actors below diagram
-    bounds.bumpVerticalPos(conf.boxMargin * 2);
-    drawActors(diagram, actors, actorKeys, bounds.getVerticalPos(), conf, messages, true);
-    bounds.bumpVerticalPos(conf.boxMargin);
-    fixLifeLineHeights(diagram, bounds.getVerticalPos());
-  }
-
-  bounds.models.boxes.forEach(function (box) {
-    box.height = bounds.getVerticalPos() - box.y;
-    bounds.insert(box.x, box.y, box.x + box.width, box.height);
-    box.startx = box.x;
-    box.starty = box.y;
-    box.stopx = box.startx + box.width;
-    box.stopy = box.starty + box.height;
-    box.stroke = 'rgb(0,0,0, 0.5)';
-    svgDraw.drawBox(diagram, box, conf);
-  });
-
-  if (hasBoxes) {
-    bounds.bumpVerticalPos(conf.boxMargin);
-  }
-
-  // only draw popups for the top row of actors.
-  const requiredBoxSize = drawActorsPopup(diagram, actors, actorKeys, doc);
-
-  const { bounds: box } = bounds.getBounds();
-
-  // Adjust line height of actor lines now that the height of the diagram is known
-  log.debug('For line height fix Querying: #' + id + ' .actor-line');
-  const actorLines = selectAll('#' + id + ' .actor-line');
-  actorLines.attr('y2', box.stopy);
-
-  // Make sure the height of the diagram supports long menus.
-  let boxHeight = box.stopy - box.starty;
-  if (boxHeight < requiredBoxSize.maxHeight) {
-    boxHeight = requiredBoxSize.maxHeight;
-  }
-
-  let height = boxHeight + 2 * conf.diagramMarginY;
-  if (conf.mirrorActors) {
-    height = height - conf.boxMargin + conf.bottomMarginAdj;
-  }
-
-  // Make sure the width of the diagram supports wide menus.
-  let boxWidth = box.stopx - box.startx;
-  if (boxWidth < requiredBoxSize.maxWidth) {
-    boxWidth = requiredBoxSize.maxWidth;
-  }
-  const width = boxWidth + 2 * conf.diagramMarginX;
-
-  if (title) {
-    diagram
-      .append('text')
-      .text(title)
-      .attr('x', (box.stopx - box.startx) / 2 - 2 * conf.diagramMarginX)
-      .attr('y', -25);
-  }
-
-  configureSvgSize(diagram, height, width, conf.useMaxWidth);
-
-  const extraVertForTitle = title ? 40 : 0;
-  diagram.attr(
-    'viewBox',
-    box.startx -
-      conf.diagramMarginX +
-      ' -' +
-      (conf.diagramMarginY + extraVertForTitle) +
-      ' ' +
-      width +
-      ' ' +
-      (height + extraVertForTitle)
-  );
-
-  log.debug(`models:`, bounds.models);
-};
-
-/**
- * Retrieves the max message width of each actor, supports signals (messages, loops) and notes.
- *
- * It will enumerate each given message, and will determine its text width, in relation to the actor
- * it originates from, and destined to.
- *
- * @param actors - The actors map
- * @param messages - A list of message objects to iterate
- * @param diagObj - The diagram object.
- * @returns The max message width of each actor.
- */
-function getMaxMessageWidthPerActor(
-  actors: { [id: string]: any },
-  messages: any[],
-  diagObj: Diagram
-): { [id: string]: number } {
-  const maxMessageWidthPerActor = {};
-
-  messages.forEach(function (msg) {
-    if (actors[msg.to] && actors[msg.from]) {
-      const actor = actors[msg.to];
-
-      // If this is the first actor, and the message is left of it, no need to calculate the margin
-      if (msg.placement === diagObj.db.PLACEMENT.LEFTOF && !actor.prevActor) {
-        return;
-      }
-
-      // If this is the last actor, and the message is right of it, no need to calculate the margin
-      if (msg.placement === diagObj.db.PLACEMENT.RIGHTOF && !actor.nextActor) {
-        return;
-      }
-
-      const isNote = msg.placement !== undefined;
-      const isMessage = !isNote;
-
-      const textFont = isNote ? noteFont(conf) : messageFont(conf);
-      const wrappedMessage = msg.wrap
-        ? utils.wrapLabel(msg.message, conf.width - 2 * conf.wrapPadding, textFont)
-        : msg.message;
-      const messageDimensions = utils.calculateTextDimensions(wrappedMessage, textFont);
-      const messageWidth = messageDimensions.width + 2 * conf.wrapPadding;
-
-      /*
-       * The following scenarios should be supported:
-       *
-       * - There's a message (non-note) between fromActor and toActor
-       *   - If fromActor is on the right and toActor is on the left, we should
-       *     define the toActor's margin
-       *   - If fromActor is on the left and toActor is on the right, we should
-       *     define the fromActor's margin
-       * - There's a note, in which case fromActor == toActor
-       *   - If the note is to the left of the actor, we should define the previous actor
-       *     margin
-       *   - If the note is on the actor, we should define both the previous and next actor
-       *     margins, each being the half of the note size
-       *   - If the note is on the right of the actor, we should define the current actor
-       *     margin
-       */
-      if (isMessage && msg.from === actor.nextActor) {
-        maxMessageWidthPerActor[msg.to] = common.getMax(
-          maxMessageWidthPerActor[msg.to] || 0,
-          messageWidth
-        );
-      } else if (isMessage && msg.from === actor.prevActor) {
-        maxMessageWidthPerActor[msg.from] = common.getMax(
-          maxMessageWidthPerActor[msg.from] || 0,
-          messageWidth
-        );
-      } else if (isMessage && msg.from === msg.to) {
-        maxMessageWidthPerActor[msg.from] = common.getMax(
-          maxMessageWidthPerActor[msg.from] || 0,
-          messageWidth / 2
-        );
-
-        maxMessageWidthPerActor[msg.to] = common.getMax(
-          maxMessageWidthPerActor[msg.to] || 0,
-          messageWidth / 2
-        );
-      } else if (msg.placement === diagObj.db.PLACEMENT.RIGHTOF) {
-        maxMessageWidthPerActor[msg.from] = common.getMax(
-          maxMessageWidthPerActor[msg.from] || 0,
-          messageWidth
-        );
-      } else if (msg.placement === diagObj.db.PLACEMENT.LEFTOF) {
-        maxMessageWidthPerActor[actor.prevActor] = common.getMax(
-          maxMessageWidthPerActor[actor.prevActor] || 0,
-          messageWidth
-        );
-      } else if (msg.placement === diagObj.db.PLACEMENT.OVER) {
-        if (actor.prevActor) {
-          maxMessageWidthPerActor[actor.prevActor] = common.getMax(
-            maxMessageWidthPerActor[actor.prevActor] || 0,
-            messageWidth / 2
-          );
-        }
-
-        if (actor.nextActor) {
-          maxMessageWidthPerActor[msg.from] = common.getMax(
-            maxMessageWidthPerActor[msg.from] || 0,
-            messageWidth / 2
-          );
-        }
-      }
-    }
-  });
-
-  log.debug('maxMessageWidthPerActor:', maxMessageWidthPerActor);
-  return maxMessageWidthPerActor;
+  return '';
 }
 
-const getRequiredPopupWidth = function (actor) {
-  let requiredPopupWidth = 0;
-  const textFont = actorFont(conf);
-  for (const key in actor.links) {
-    const labelDimensions = utils.calculateTextDimensions(key, textFont);
-    const labelWidth = labelDimensions.width + 2 * conf.wrapPadding + 2 * conf.boxMargin;
-    if (requiredPopupWidth < labelWidth) {
-      requiredPopupWidth = labelWidth;
-    }
-  }
-
-  return requiredPopupWidth;
-};
-
-/**
- * This will calculate the optimal margin for each given actor,
- * for a given actor → messageWidth map.
- *
- * An actor's margin is determined by the width of the actor, the width of the largest message that
- * originates from it, and the configured conf.actorMargin.
- *
- * @param actors - The actors map to calculate margins for
- * @param actorToMessageWidth - A map of actor key → max message width it holds
- * @param boxes - The boxes around the actors if any
- */
-function calculateActorMargins(
-  actors: { [id: string]: any },
-  actorToMessageWidth: ReturnType<typeof getMaxMessageWidthPerActor>,
-  boxes
-) {
-  let maxHeight = 0;
-  Object.keys(actors).forEach((prop) => {
-    const actor = actors[prop];
-    if (actor.wrap) {
-      actor.description = utils.wrapLabel(
-        actor.description,
-        conf.width - 2 * conf.wrapPadding,
-        actorFont(conf)
-      );
-    }
-    const actDims = utils.calculateTextDimensions(actor.description, actorFont(conf));
-    actor.width = actor.wrap
-      ? conf.width
-      : common.getMax(conf.width, actDims.width + 2 * conf.wrapPadding);
-
-    actor.height = actor.wrap ? common.getMax(actDims.height, conf.height) : conf.height;
-    maxHeight = common.getMax(maxHeight, actor.height);
-  });
-
-  for (const actorKey in actorToMessageWidth) {
-    const actor = actors[actorKey];
-
-    if (!actor) {
-      continue;
-    }
-
-    const nextActor = actors[actor.nextActor];
-
-    // No need to space out an actor that doesn't have a next link
-    if (!nextActor) {
-      const messageWidth = actorToMessageWidth[actorKey];
-      const actorWidth = messageWidth + conf.actorMargin - actor.width / 2;
-      actor.margin = common.getMax(actorWidth, conf.actorMargin);
-      continue;
-    }
-
-    const messageWidth = actorToMessageWidth[actorKey];
-    const actorWidth = messageWidth + conf.actorMargin - actor.width / 2 - nextActor.width / 2;
-
-    actor.margin = common.getMax(actorWidth, conf.actorMargin);
-  }
-
-  let maxBoxHeight = 0;
-  boxes.forEach((box) => {
-    const textFont = messageFont(conf);
-    let totalWidth = box.actorKeys.reduce((total, aKey) => {
-      return (total += actors[aKey].width + (actors[aKey].margin || 0));
-    }, 0);
-
-    totalWidth -= 2 * conf.boxTextMargin;
-    if (box.wrap) {
-      box.name = utils.wrapLabel(box.name, totalWidth - 2 * conf.wrapPadding, textFont);
-    }
-
-    const boxMsgDimensions = utils.calculateTextDimensions(box.name, textFont);
-    maxBoxHeight = common.getMax(boxMsgDimensions.height, maxBoxHeight);
-    const minWidth = common.getMax(totalWidth, boxMsgDimensions.width + 2 * conf.wrapPadding);
-    box.margin = conf.boxTextMargin;
-    if (totalWidth < minWidth) {
-      const missing = (minWidth - totalWidth) / 2;
-      box.margin += missing;
-    }
-  });
-  boxes.forEach((box) => (box.textMaxHeight = maxBoxHeight));
-
-  return common.getMax(maxHeight, conf.height);
-}
-
-const buildNoteModel = function (msg, actors, diagObj) {
-  const startx = actors[msg.from].x;
-  const stopx = actors[msg.to].x;
-  const shouldWrap = msg.wrap && msg.message;
-
-  let textDimensions = utils.calculateTextDimensions(
-    shouldWrap ? utils.wrapLabel(msg.message, conf.width, noteFont(conf)) : msg.message,
-    noteFont(conf)
-  );
-  const noteModel = {
-    width: shouldWrap
-      ? conf.width
-      : common.getMax(conf.width, textDimensions.width + 2 * conf.noteMargin),
-    height: 0,
-    startx: actors[msg.from].x,
-    stopx: 0,
-    starty: 0,
-    stopy: 0,
-    message: msg.message,
-  };
-  if (msg.placement === diagObj.db.PLACEMENT.RIGHTOF) {
-    noteModel.width = shouldWrap
-      ? common.getMax(conf.width, textDimensions.width)
-      : common.getMax(
-          actors[msg.from].width / 2 + actors[msg.to].width / 2,
-          textDimensions.width + 2 * conf.noteMargin
-        );
-    noteModel.startx = startx + (actors[msg.from].width + conf.actorMargin) / 2;
-  } else if (msg.placement === diagObj.db.PLACEMENT.LEFTOF) {
-    noteModel.width = shouldWrap
-      ? common.getMax(conf.width, textDimensions.width + 2 * conf.noteMargin)
-      : common.getMax(
-          actors[msg.from].width / 2 + actors[msg.to].width / 2,
-          textDimensions.width + 2 * conf.noteMargin
-        );
-    noteModel.startx = startx - noteModel.width + (actors[msg.from].width - conf.actorMargin) / 2;
-  } else if (msg.to === msg.from) {
-    textDimensions = utils.calculateTextDimensions(
-      shouldWrap
-        ? utils.wrapLabel(
-            msg.message,
-            common.getMax(conf.width, actors[msg.from].width),
-            noteFont(conf)
-          )
-        : msg.message,
-      noteFont(conf)
-    );
-    noteModel.width = shouldWrap
-      ? common.getMax(conf.width, actors[msg.from].width)
-      : common.getMax(
-          actors[msg.from].width,
-          conf.width,
-          textDimensions.width + 2 * conf.noteMargin
-        );
-    noteModel.startx = startx + (actors[msg.from].width - noteModel.width) / 2;
-  } else {
-    noteModel.width =
-      Math.abs(startx + actors[msg.from].width / 2 - (stopx + actors[msg.to].width / 2)) +
-      conf.actorMargin;
-    noteModel.startx =
-      startx < stopx
-        ? startx + actors[msg.from].width / 2 - conf.actorMargin / 2
-        : stopx + actors[msg.to].width / 2 - conf.actorMargin / 2;
-  }
-  if (shouldWrap) {
-    noteModel.message = utils.wrapLabel(
-      msg.message,
-      noteModel.width - 2 * conf.wrapPadding,
-      noteFont(conf)
-    );
-  }
-  log.debug(
-    `NM:[${noteModel.startx},${noteModel.stopx},${noteModel.starty},${noteModel.stopy}:${noteModel.width},${noteModel.height}=${msg.message}]`
-  );
-  return noteModel;
-};
-
-const buildMessageModel = function (msg, actors, diagObj) {
-  let process = false;
-  if (
-    [
-      diagObj.db.LINETYPE.SOLID_OPEN,
-      diagObj.db.LINETYPE.DOTTED_OPEN,
-      diagObj.db.LINETYPE.SOLID,
-      diagObj.db.LINETYPE.DOTTED,
-      diagObj.db.LINETYPE.SOLID_CROSS,
-      diagObj.db.LINETYPE.DOTTED_CROSS,
-      diagObj.db.LINETYPE.SOLID_POINT,
-      diagObj.db.LINETYPE.DOTTED_POINT,
-    ].includes(msg.type)
-  ) {
-    process = true;
-  }
-  if (!process) {
-    return {};
-  }
-  const fromBounds = activationBounds(msg.from, actors);
-  const toBounds = activationBounds(msg.to, actors);
-  const fromIdx = fromBounds[0] <= toBounds[0] ? 1 : 0;
-  const toIdx = fromBounds[0] < toBounds[0] ? 0 : 1;
-  const allBounds = [...fromBounds, ...toBounds];
-  const boundedWidth = Math.abs(toBounds[toIdx] - fromBounds[fromIdx]);
-  if (msg.wrap && msg.message) {
-    msg.message = utils.wrapLabel(
-      msg.message,
-      common.getMax(boundedWidth + 2 * conf.wrapPadding, conf.width),
-      messageFont(conf)
-    );
-  }
-  const msgDims = utils.calculateTextDimensions(msg.message, messageFont(conf));
-
-  return {
-    width: common.getMax(
-      msg.wrap ? 0 : msgDims.width + 2 * conf.wrapPadding,
-      boundedWidth + 2 * conf.wrapPadding,
-      conf.width
-    ),
-    height: 0,
-    startx: fromBounds[fromIdx],
-    stopx: toBounds[toIdx],
-    starty: 0,
-    stopy: 0,
-    message: msg.message,
-    type: msg.type,
-    wrap: msg.wrap,
-    fromBounds: Math.min.apply(null, allBounds),
-    toBounds: Math.max.apply(null, allBounds),
-  };
-};
-
-const calculateLoopBounds = function (messages, actors, _maxWidthPerActor, diagObj) {
-  const loops = {};
-  const stack = [];
-  let current, noteModel, msgModel;
-
-  messages.forEach(function (msg) {
-    msg.id = utils.random({ length: 10 });
-    switch (msg.type) {
-      case diagObj.db.LINETYPE.LOOP_START:
-      case diagObj.db.LINETYPE.ALT_START:
-      case diagObj.db.LINETYPE.OPT_START:
-      case diagObj.db.LINETYPE.PAR_START:
-      case diagObj.db.LINETYPE.PAR_OVER_START:
-      case diagObj.db.LINETYPE.CRITICAL_START:
-      case diagObj.db.LINETYPE.BREAK_START:
-        stack.push({
-          id: msg.id,
-          msg: msg.message,
-          from: Number.MAX_SAFE_INTEGER,
-          to: Number.MIN_SAFE_INTEGER,
-          width: 0,
-        });
-        break;
-      case diagObj.db.LINETYPE.ALT_ELSE:
-      case diagObj.db.LINETYPE.PAR_AND:
-      case diagObj.db.LINETYPE.CRITICAL_OPTION:
-        if (msg.message) {
-          current = stack.pop();
-          loops[current.id] = current;
-          loops[msg.id] = current;
-          stack.push(current);
-        }
-        break;
-      case diagObj.db.LINETYPE.LOOP_END:
-      case diagObj.db.LINETYPE.ALT_END:
-      case diagObj.db.LINETYPE.OPT_END:
-      case diagObj.db.LINETYPE.PAR_END:
-      case diagObj.db.LINETYPE.CRITICAL_END:
-      case diagObj.db.LINETYPE.BREAK_END:
-        current = stack.pop();
-        loops[current.id] = current;
-        break;
-      case diagObj.db.LINETYPE.ACTIVE_START:
-        {
-          const actorRect = actors[msg.from ? msg.from.actor : msg.to.actor];
-          const stackedSize = actorActivations(msg.from ? msg.from.actor : msg.to.actor).length;
-          const x =
-            actorRect.x + actorRect.width / 2 + ((stackedSize - 1) * conf.activationWidth) / 2;
-          const toAdd = {
-            startx: x,
-            stopx: x + conf.activationWidth,
-            actor: msg.from.actor,
-            enabled: true,
-          };
-          bounds.activations.push(toAdd);
-        }
-        break;
-      case diagObj.db.LINETYPE.ACTIVE_END:
-        {
-          const lastActorActivationIdx = bounds.activations
-            .map((a) => a.actor)
-            .lastIndexOf(msg.from.actor);
-          delete bounds.activations.splice(lastActorActivationIdx, 1)[0];
-        }
-        break;
-    }
-    const isNote = msg.placement !== undefined;
-    if (isNote) {
-      noteModel = buildNoteModel(msg, actors, diagObj);
-      msg.noteModel = noteModel;
-      stack.forEach((stk) => {
-        current = stk;
-        current.from = common.getMin(current.from, noteModel.startx);
-        current.to = common.getMax(current.to, noteModel.startx + noteModel.width);
-        current.width =
-          common.getMax(current.width, Math.abs(current.from - current.to)) - conf.labelBoxWidth;
-      });
-    } else {
-      msgModel = buildMessageModel(msg, actors, diagObj);
-      msg.msgModel = msgModel;
-      if (msgModel.startx && msgModel.stopx && stack.length > 0) {
-        stack.forEach((stk) => {
-          current = stk;
-          if (msgModel.startx === msgModel.stopx) {
-            const from = actors[msg.from];
-            const to = actors[msg.to];
-            current.from = common.getMin(
-              from.x - msgModel.width / 2,
-              from.x - from.width / 2,
-              current.from
-            );
-            current.to = common.getMax(
-              to.x + msgModel.width / 2,
-              to.x + from.width / 2,
-              current.to
-            );
-            current.width =
-              common.getMax(current.width, Math.abs(current.to - current.from)) -
-              conf.labelBoxWidth;
-          } else {
-            current.from = common.getMin(msgModel.startx, current.from);
-            current.to = common.getMax(msgModel.stopx, current.to);
-            current.width = common.getMax(current.width, msgModel.width) - conf.labelBoxWidth;
-          }
-        });
-      }
-    }
-  });
-  bounds.activations = [];
-  log.debug('Loop type widths:', loops);
-  return loops;
-};
-
 export default {
-  bounds,
-  drawActors,
-  drawActorsPopup,
-  setConf,
   draw,
 };

From fe3dd5a531f1489bfc9b0823fe26711a8d69b88d Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Sun, 18 Jun 2023 01:32:45 +0300
Subject: [PATCH 010/187] Updated dockerfile

---
 docker-compose.yml |  2 ++
 run                | 33 ++++++++++++++++++++++++++++-----
 2 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/docker-compose.yml b/docker-compose.yml
index 2762f3b99..cdf21c936 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -7,3 +7,5 @@ services:
     working_dir: /mermaid
     volumes:
       - ./:/mermaid
+    ports:
+      - 9000:9000
diff --git a/run b/run
index 6afe76eee..4da4093ee 100755
--- a/run
+++ b/run
@@ -1,8 +1,12 @@
 #!/bin/bash
 RUN="docker-compose run --rm"
+# UP="docker-compose up"
+
+name=$(basename $0)
 command=$1
 args=${@:2}
 
+
 case $command in
 
 sh)
@@ -17,24 +21,43 @@ test)
 $RUN mermaid sh -c "npx pnpm test"
 ;;
 
+e2e)
+$RUN mermaid sh -c "npx pnpm e2e"
+;;
+
 lint)
 $RUN mermaid sh -c "npx pnpm -w run lint:fix"
 ;;
 
+dev)
+$RUN --service-ports mermaid sh -c "npx pnpm run dev"
+# $UP --rm mermaid sh -c "npx pnpm run dev"
+;;
+
 help)
+usage=$(
 cat <<EOF
 Run commonly used commands within docker containers
 
-$0 install         # Equvalent of pnpm install 
-$0 lint            # Equvalent of pnpm -w run lint:fix
-$0 sh              # Open sh inside docker container for development
+\033[1m$name install\033[0m         # Equvalent of pnpm install 
+\033[1m$name run\033[0m             # Run dev server with examples, open http://localhost:9000
 
-$0 help            # Show this help
+$name lint            # Equvalent of pnpm -w run lint:fix
+$name test            # Run unit tests
+$name vitest          # Run watcher for unit tests
+$name e2e             # Run integration tests
+
+$name sh              # Open sh inside docker container for development
+
+$name help            # Show this help
 EOF
+)
+
+echo -n -e "$usage"
 ;;
 
 *)
-$0 help
+$name help
 ;;
 
 esac
\ No newline at end of file

From c874d74faff68b5850986495cca6a8f4a7d16734 Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Sun, 18 Jun 2023 01:32:45 +0300
Subject: [PATCH 011/187] Some fixes to docker and demos

---
 demos/sankey.html  | 43 +++++++++++++++++++++++++++++++++++++++++++
 docker-compose.yml |  5 +++++
 run                |  4 ++--
 3 files changed, 50 insertions(+), 2 deletions(-)
 create mode 100644 demos/sankey.html

diff --git a/demos/sankey.html b/demos/sankey.html
new file mode 100644
index 000000000..57f3a8af8
--- /dev/null
+++ b/demos/sankey.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>States Mermaid Quick Test Page</title>
+    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
+    <style>
+      div.mermaid {
+        /* font-family: 'trebuchet ms', verdana, arial; */
+        font-family: 'Courier New', Courier, monospace !important;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Sankey diagram demos</h1>
+    <h2>Simple flow</h2>
+    <pre class="mermaid">
+      stateDiagram-v2
+      direction LR
+      State1: A state with a note
+      note right of State1
+        Important information!<br />You can write notes.<br />And\nthey\ncan\nbe\nmulti-\nline.
+      end note
+      State1 --> State2
+      note left of State2 : Notes can be to the left of a state\n(like this one).
+      note right of State2 : Notes can be to the right of a state\n(like this one).
+    </pre>
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
+      mermaid.initialize({
+        theme: 'default',
+        // themeCSS: '.node rect { fill: red; }',
+        logLevel: 3,
+        securityLevel: 'loose',
+        flowchart: { curve: 'basis' },
+        gantt: { axisFormat: '%m/%d/%Y' },
+        sequence: { actorMargin: 50 },
+        // sequenceDiagram: { actorMargin: 300 } // deprecated
+      });
+    </script>
+  </body>
+</html>
diff --git a/docker-compose.yml b/docker-compose.yml
index cdf21c936..2bd00a277 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -7,5 +7,10 @@ services:
     working_dir: /mermaid
     volumes:
       - ./:/mermaid
+      - root_cache:/root/.cache
+      - root_local:/root/.local
     ports:
       - 9000:9000
+volumes:
+  root_cache:
+  root_local:
\ No newline at end of file
diff --git a/run b/run
index 4da4093ee..7dbdf918a 100755
--- a/run
+++ b/run
@@ -13,7 +13,7 @@ sh)
 $RUN mermaid sh $args
 ;;
 
-install)
+i | install)
 $RUN mermaid sh -c "npx pnpm install"
 ;;
 
@@ -40,7 +40,7 @@ cat <<EOF
 Run commonly used commands within docker containers
 
 \033[1m$name install\033[0m         # Equvalent of pnpm install 
-\033[1m$name run\033[0m             # Run dev server with examples, open http://localhost:9000
+\033[1m$name dev\033[0m             # Run dev server with examples, open http://localhost:9000
 
 $name lint            # Equvalent of pnpm -w run lint:fix
 $name test            # Run unit tests

From ad95c99cc2e53930155703b5eb5383a9f45ab681 Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Sun, 18 Jun 2023 01:32:45 +0300
Subject: [PATCH 012/187] Started sankey syntax

---
 .../src/diagrams/sankey/parser/sankey.jison   | 342 +-----------------
 .../src/diagrams/sankey/parser/sankey.spec.js |  52 +--
 2 files changed, 40 insertions(+), 354 deletions(-)

diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
index 074cd5975..d77b0b241 100644
--- a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
+++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
@@ -1,350 +1,30 @@
-/** mermaid
- *  https://mermaidjs.github.io/
- *  (c) 2014-2015 Knut Sveidqvist
- *  MIT license.
- *
- *  Based on js sequence diagrams jison grammr
- *  https://bramp.github.io/js-sequence-diagrams/
- *  (c) 2012-2013 Andrew Brampton (bramp.net)
- *  Simplified BSD license.
- */
+/** mermaid */
 %lex
 
 %options case-insensitive
 
-// Special states for recognizing aliases
-// A special state for grabbing text up to the first comment/newline
-%x ID ALIAS LINE
-
-// Directive states
-%x open_directive type_directive arg_directive
-%x acc_title
-%x acc_descr
-%x acc_descr_multiline
 %%
+"sankey" return 'SANKEY'
+"->" return 'ARROW'
+\w+ return 'NODE'
+[\n]+ return 'NEWLINE';
+\s+ /* skip all whitespace */
 
-\%\%\{                                                          { this.begin('open_directive'); return 'open_directive'; }
-<open_directive>((?:(?!\}\%\%)[^:.])*)                          { this.begin('type_directive'); return 'type_directive'; }
-<type_directive>":"                                             { this.popState(); this.begin('arg_directive'); return ':'; }
-<type_directive,arg_directive>\}\%\%                            { this.popState(); this.popState(); return 'close_directive'; }
-<arg_directive>((?:(?!\}\%\%).|\n)*)                            return 'arg_directive';
-[\n]+                                                           return 'NEWLINE';
-\s+                                                             /* skip all whitespace */
-<ID,ALIAS,LINE>((?!\n)\s)+                                      /* skip same-line whitespace */
-<INITIAL,ID,ALIAS,LINE,arg_directive,type_directive,open_directive>\#[^\n]*   /* skip comments */
-\%%(?!\{)[^\n]*                                                 /* skip comments */
-[^\}]\%\%[^\n]*                                                 /* skip comments */
-[0-9]+(?=[ \n]+)       											return 'NUM';
-"box"															{ this.begin('LINE'); return 'box'; }
-"participant"                                                   { this.begin('ID'); return 'participant'; }
-"actor"                                                   		{ this.begin('ID'); return 'participant_actor'; }
-<ID>[^\->:\n,;]+?([\-]*[^\->:\n,;]+?)*?(?=((?!\n)\s)+"as"(?!\n)\s|[#\n;]|$)     { yytext = yytext.trim(); this.begin('ALIAS'); return 'ACTOR'; }
-<ALIAS>"as"                                                     { this.popState(); this.popState(); this.begin('LINE'); return 'AS'; }
-<ALIAS>(?:)                                                     { this.popState(); this.popState(); return 'NEWLINE'; }
-"loop"                                                          { this.begin('LINE'); return 'loop'; }
-"rect"                                                          { this.begin('LINE'); return 'rect'; }
-"opt"                                                           { this.begin('LINE'); return 'opt'; }
-"alt"                                                           { this.begin('LINE'); return 'alt'; }
-"else"                                                          { this.begin('LINE'); return 'else'; }
-"par"                                                           { this.begin('LINE'); return 'par'; }
-"par_over" 														{ this.begin('LINE'); return 'par_over'; }
-"and"                                                           { this.begin('LINE'); return 'and'; }
-"critical"                                                      { this.begin('LINE'); return 'critical'; }
-"option"                                                        { this.begin('LINE'); return 'option'; }
-"break"                                                         { this.begin('LINE'); return 'break'; }
-<LINE>(?:[:]?(?:no)?wrap:)?[^#\n;]*                             { this.popState(); return 'restOfLine'; }
-"end"                                                           return 'end';
-"left of"                                                       return 'left_of';
-"right of"                                                      return 'right_of';
-"links"                                                         return 'links';
-"link"                                                          return 'link';
-"properties"                                                    return 'properties';
-"details"                                                       return 'details';
-"over"                                                          return 'over';
-"note"                                                          return 'note';
-"activate"                                                      { this.begin('ID'); return 'activate'; }
-"deactivate"                                                    { this.begin('ID'); return 'deactivate'; }
-"title"\s[^#\n;]+                                               return 'title';
-"title:"\s[^#\n;]+                                              return 'legacy_title';
-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";
-"sequenceDiagram"                                               return 'SD';
-"autonumber"                                                    return 'autonumber';
-"off"															return 'off';
-","                                                             return ',';
-";"                                                             return 'NEWLINE';
-[^\+\->:\n,;]+((?!(\-x|\-\-x|\-\)|\-\-\)))[\-]*[^\+\->:\n,;]+)*             { yytext = yytext.trim(); return 'ACTOR'; }
-"->>"                                                           return 'SOLID_ARROW';
-"-->>"                                                          return 'DOTTED_ARROW';
-"->"                                                            return 'SOLID_OPEN_ARROW';
-"-->"                                                           return 'DOTTED_OPEN_ARROW';
-\-[x]                                                           return 'SOLID_CROSS';
-\-\-[x]                                                         return 'DOTTED_CROSS';
-\-[\)]                                                          return 'SOLID_POINT';
-\-\-[\)]                                                        return 'DOTTED_POINT';
-":"(?:(?:no)?wrap:)?[^#\n;]+                                    return 'TXT';
-"+"                                                             return '+';
-"-"                                                             return '-';
-<<EOF>>                                                         return 'NEWLINE';
-.                                                               return 'INVALID';
+// TODO: check if jison will return 2 separate tokens (for nodes) while ignoring whitespace
 
 /lex
 
-%left '^'
-
 %start start
 
 %% /* language grammar */
 
 start
 	: SPACE start
-	| NEWLINE start
-	| directive start
-	| SD document { yy.apply($2);return $2; }
+	| SANKEY document
 	;
 
 document
-	: /* empty */ { $$ = [] }
-	| document line {$1.push($2);$$ = $1}
+	: node document
+	| /* empty */
 	;
-
-line
-	: SPACE statement { $$ = $2 }
-	| statement { $$ = $1 }
-	| NEWLINE { $$=[]; }
-	;
-
-box_section
-	: /* empty */ { $$ = [] }
-	| box_section box_line {$1.push($2);$$ = $1}
-	;
-
-box_line
-	: SPACE participant_statement { $$ = $2 }
-	| participant_statement { $$ = $1 }
-	| NEWLINE { $$=[]; }
-	;
-
-
-directive
-  : openDirective typeDirective closeDirective 'NEWLINE'
-  | openDirective typeDirective ':' argDirective closeDirective 'NEWLINE'
-  ;
-
-statement
-	: participant_statement
-	| 'box' restOfLine box_section end
-	{
-		$3.unshift({type: 'boxStart', boxData:yy.parseBoxData($2) });
-		$3.push({type: 'boxEnd', boxText:$2});
-		$$=$3;}
-	| signal 'NEWLINE'
-	| autonumber NUM NUM 'NEWLINE' { $$= {type:'sequenceIndex',sequenceIndex: Number($2), sequenceIndexStep:Number($3), sequenceVisible:true, signalType:yy.LINETYPE.AUTONUMBER};}
-	| autonumber NUM 'NEWLINE' { $$ = {type:'sequenceIndex',sequenceIndex: Number($2), sequenceIndexStep:1, sequenceVisible:true, signalType:yy.LINETYPE.AUTONUMBER};}
-	| autonumber off 'NEWLINE' { $$ = {type:'sequenceIndex', sequenceVisible:false, signalType:yy.LINETYPE.AUTONUMBER};}
-	| autonumber 'NEWLINE'  {$$ = {type:'sequenceIndex', sequenceVisible:true, signalType:yy.LINETYPE.AUTONUMBER}; }
-	| 'activate' actor 'NEWLINE' {$$={type: 'activeStart', signalType: yy.LINETYPE.ACTIVE_START, actor: $2};}
-	| 'deactivate' actor 'NEWLINE' {$$={type: 'activeEnd', signalType: yy.LINETYPE.ACTIVE_END, actor: $2};}
-	| note_statement 'NEWLINE'
-	| links_statement 'NEWLINE'
-	| link_statement 'NEWLINE'
-	| properties_statement 'NEWLINE'
-	| details_statement 'NEWLINE'
-	| title {yy.setDiagramTitle($1.substring(6));$$=$1.substring(6);}
-	| legacy_title {yy.setDiagramTitle($1.substring(7));$$=$1.substring(7);}
-  | acc_title acc_title_value  { $$=$2.trim();yy.setAccTitle($$); }
-  | acc_descr acc_descr_value  { $$=$2.trim();yy.setAccDescription($$); }
-  | acc_descr_multiline_value { $$=$1.trim();yy.setAccDescription($$); }
-	| 'loop' restOfLine document end
-	{
-		$3.unshift({type: 'loopStart', loopText:yy.parseMessage($2), signalType: yy.LINETYPE.LOOP_START});
-		$3.push({type: 'loopEnd', loopText:$2, signalType: yy.LINETYPE.LOOP_END});
-		$$=$3;}
-	| 'rect' restOfLine document end
-	{
-		$3.unshift({type: 'rectStart', color:yy.parseMessage($2), signalType: yy.LINETYPE.RECT_START });
-		$3.push({type: 'rectEnd', color:yy.parseMessage($2), signalType: yy.LINETYPE.RECT_END });
-		$$=$3;}
-	| opt restOfLine document end
-	{
-		$3.unshift({type: 'optStart', optText:yy.parseMessage($2), signalType: yy.LINETYPE.OPT_START});
-		$3.push({type: 'optEnd', optText:yy.parseMessage($2), signalType: yy.LINETYPE.OPT_END});
-		$$=$3;}
-	| alt restOfLine else_sections end
-	{
-		// Alt start
-		$3.unshift({type: 'altStart', altText:yy.parseMessage($2), signalType: yy.LINETYPE.ALT_START});
-		// Content in alt is already in $3
-		// End
-		$3.push({type: 'altEnd', signalType: yy.LINETYPE.ALT_END});
-		$$=$3;}
-	| par restOfLine par_sections end
-	{
-		// Parallel start
-		$3.unshift({type: 'parStart', parText:yy.parseMessage($2), signalType: yy.LINETYPE.PAR_START});
-		// Content in par is already in $3
-		// End
-		$3.push({type: 'parEnd', signalType: yy.LINETYPE.PAR_END});
-		$$=$3;}
-	| par_over restOfLine par_sections end
-	{
-		// Parallel (overlapped) start
-		$3.unshift({type: 'parStart', parText:yy.parseMessage($2), signalType: yy.LINETYPE.PAR_OVER_START});
-		// Content in par is already in $3
-		// End
-		$3.push({type: 'parEnd', signalType: yy.LINETYPE.PAR_END});
-		$$=$3;}
-	| critical restOfLine option_sections end
-	{
-		// critical start
-		$3.unshift({type: 'criticalStart', criticalText:yy.parseMessage($2), signalType: yy.LINETYPE.CRITICAL_START});
-		// Content in critical is already in $3
-		// critical end
-		$3.push({type: 'criticalEnd', signalType: yy.LINETYPE.CRITICAL_END});
-		$$=$3;}
-	| break restOfLine document end
-	{
-		$3.unshift({type: 'breakStart', breakText:yy.parseMessage($2), signalType: yy.LINETYPE.BREAK_START});
-		$3.push({type: 'breakEnd', optText:yy.parseMessage($2), signalType: yy.LINETYPE.BREAK_END});
-		$$=$3;}
-  | directive
-	;
-
-option_sections
-	: document
-	| document option restOfLine option_sections
-	{ $$ = $1.concat([{type: 'option', optionText:yy.parseMessage($3), signalType: yy.LINETYPE.CRITICAL_OPTION}, $4]); }
-	;
-
-par_sections
-	: document
-	| document and restOfLine par_sections
-	{ $$ = $1.concat([{type: 'and', parText:yy.parseMessage($3), signalType: yy.LINETYPE.PAR_AND}, $4]); }
-	;
-
-else_sections
-	: document
-	| document else restOfLine else_sections
-	{ $$ = $1.concat([{type: 'else', altText:yy.parseMessage($3), signalType: yy.LINETYPE.ALT_ELSE}, $4]); }
-	;
-
-participant_statement
-	: 'participant' actor 'AS' restOfLine 'NEWLINE' {$2.type='addParticipant';$2.description=yy.parseMessage($4); $$=$2;}
-	| 'participant' actor 'NEWLINE' {$2.type='addParticipant';$$=$2;}
-	| 'participant_actor' actor 'AS' restOfLine 'NEWLINE' {$2.type='addActor';$2.description=yy.parseMessage($4); $$=$2;}
-	| 'participant_actor' actor 'NEWLINE' {$2.type='addActor'; $$=$2;}
-	;
-
-note_statement
-	: 'note' placement actor text2
-	{
-		$$ = [$3, {type:'addNote', placement:$2, actor:$3.actor, text:$4}];}
-	| 'note' 'over' actor_pair text2
-	{
-		// Coerce actor_pair into a [to, from, ...] array
-		$2 = [].concat($3, $3).slice(0, 2);
-		$2[0] = $2[0].actor;
-		$2[1] = $2[1].actor;
-		$$ = [$3, {type:'addNote', placement:yy.PLACEMENT.OVER, actor:$2.slice(0, 2), text:$4}];}
-	;
-
-links_statement
-	: 'links' actor text2
-	{
-		$$ = [$2, {type:'addLinks', actor:$2.actor, text:$3}];
-  }
-	;
-
-link_statement
-	: 'link' actor text2
-	{
-		$$ = [$2, {type:'addALink', actor:$2.actor, text:$3}];
-  }
-	;
-
-properties_statement
-	: 'properties' actor text2
-	{
-		$$ = [$2, {type:'addProperties', actor:$2.actor, text:$3}];
-  }
-	;
-
-details_statement
-	: 'details' actor text2
-	{
-		$$ = [$2, {type:'addDetails', actor:$2.actor, text:$3}];
-  }
-	;
-
-spaceList
-    : SPACE spaceList
-    | SPACE
-    ;
-actor_pair
-	: actor ',' actor   { $$ = [$1, $3]; }
-	| actor             { $$ = $1; }
-	;
-
-placement
-	: 'left_of'   { $$ = yy.PLACEMENT.LEFTOF; }
-	| 'right_of'  { $$ = yy.PLACEMENT.RIGHTOF; }
-	;
-
-signal
-	: actor signaltype '+' actor text2
-	{ $$ = [$1,$4,{type: 'addMessage', from:$1.actor, to:$4.actor, signalType:$2, msg:$5},
-	              {type: 'activeStart', signalType: yy.LINETYPE.ACTIVE_START, actor: $4}
-	             ]}
-	| actor signaltype '-' actor text2
-	{ $$ = [$1,$4,{type: 'addMessage', from:$1.actor, to:$4.actor, signalType:$2, msg:$5},
-	             {type: 'activeEnd', signalType: yy.LINETYPE.ACTIVE_END, actor: $1}
-	             ]}
-	| actor signaltype actor text2
-	{ $$ = [$1,$3,{type: 'addMessage', from:$1.actor, to:$3.actor, signalType:$2, msg:$4}]}
-	;
-
-// actor
-// 	: actor_participant
-// 	| actor_actor
-// 	;
-
-actor: ACTOR {$$={ type: 'addParticipant', actor:$1}};
-// actor_actor: ACTOR {$$={type: 'addActor', actor:$1}};
-
-signaltype
-	: SOLID_OPEN_ARROW  { $$ = yy.LINETYPE.SOLID_OPEN; }
-	| DOTTED_OPEN_ARROW { $$ = yy.LINETYPE.DOTTED_OPEN; }
-	| SOLID_ARROW       { $$ = yy.LINETYPE.SOLID; }
-	| DOTTED_ARROW      { $$ = yy.LINETYPE.DOTTED; }
-	| SOLID_CROSS       { $$ = yy.LINETYPE.SOLID_CROSS; }
-	| DOTTED_CROSS      { $$ = yy.LINETYPE.DOTTED_CROSS; }
-	| SOLID_POINT { $$ = yy.LINETYPE.SOLID_POINT; }
-	| DOTTED_POINT { $$ = yy.LINETYPE.DOTTED_POINT; }
-	;
-
-text2
-  : TXT {$$ = yy.parseMessage($1.trim().substring(1)) }
-  ;
-
-openDirective
-  : open_directive { yy.parseDirective('%%{', 'open_directive'); }
-  ;
-
-typeDirective
-  : type_directive { yy.parseDirective($1, 'type_directive'); }
-  ;
-
-argDirective
-  : arg_directive { $1 = $1.trim().replace(/'/g, '"'); yy.parseDirective($1, 'arg_directive'); }
-  ;
-
-closeDirective
-  : close_directive { yy.parseDirective('}%%', 'close_directive', 'sequence'); }
-  ;
-
-%%
+	
\ No newline at end of file
diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js
index 995c92478..5ef6f80fe 100644
--- a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js
+++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js
@@ -11,34 +11,40 @@ describe('Sankey diagram', function () {
       diagram.parser.yy.clear();
     });
 
-    it('one simple flow', function () {
-      const str = `
-      sankey
-      a -> 30 -> b
-      `;
-
+    it('recognized its type', function() {
+      const str=`sankey`;
+      
       parser.parse(str);
     });
 
-    it('multiple flows', function () {
-      const str = `
-      sankey
-      a -> 30 -> b
-      c -> 30 -> d
-      c -> 40 -> e
-      `;
+    // it('one simple flow', function () {
+    //   const str = `
+    //   sankey
+    //   a -> 30 -> b
+    //   `;
 
-      parser.parse(str);
-    });
+    //   parser.parse(str);
+    // });
 
-    it('multiple flows', function () {
-      const str = `
-      sankey
-      a -> 30 -> b
-      c -> 30 -> d
-      `;
+    // it('multiple flows', function () {
+    //   const str = `
+    //   sankey
+    //   a -> 30 -> b
+    //   c -> 30 -> d
+    //   c -> 40 -> e
+    //   `;
 
-      parser.parse(str);
-    });
+    //   parser.parse(str);
+    // });
+
+    // it('multiple flows', function () {
+    //   const str = `
+    //   sankey
+    //   a -> 30 -> b
+    //   c -> 30 -> d
+    //   `;
+
+    //   parser.parse(str);
+    // });
   });
 });

From 567686e140a4a2d4f35d5b5edf3df52486be29e4 Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Sun, 18 Jun 2023 01:32:45 +0300
Subject: [PATCH 013/187] Implementing new syntax

---
 .../diagrams/sankey/parser/desired_syntax.md  |  6 +-
 .../src/diagrams/sankey/parser/sankey.jison   | 59 ++++++++++--
 .../src/diagrams/sankey/parser/sankey.spec.js | 90 ++++++++++++++++---
 run                                           | 10 ++-
 4 files changed, 139 insertions(+), 26 deletions(-)

diff --git a/packages/mermaid/src/diagrams/sankey/parser/desired_syntax.md b/packages/mermaid/src/diagrams/sankey/parser/desired_syntax.md
index d0cbd4e8a..1b5cb81d2 100644
--- a/packages/mermaid/src/diagrams/sankey/parser/desired_syntax.md
+++ b/packages/mermaid/src/diagrams/sankey/parser/desired_syntax.md
@@ -100,9 +100,9 @@ a -> {
     30
     40
 } -> b -> {
-    20 -> d
-    50 -> e
-}
+    20 -> d -> 11
+    50 -> e -> 11
+} -> f -> 30 
 ```
 
 **Probably ambiguous!**
diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
index d77b0b241..e0b4252ca 100644
--- a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
+++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
@@ -2,13 +2,21 @@
 %lex
 
 %options case-insensitive
+%s group
+// %x attributes
 
 %%
+"{"       { this.pushState('group'); return 'OPEN_GROUP'; }
+<group>"}" { this.popState('group'); return 'CLOSE_GROUP'; }
 "sankey" return 'SANKEY'
-"->" return 'ARROW'
-\w+ return 'NODE'
-[\n]+ return 'NEWLINE';
-\s+ /* skip all whitespace */
+\d+    return 'VALUE'
+"->"     return 'ARROW'
+\w+      return 'NODE'
+"["             {/*this.pushState('attributes');*/ return 'OPEN_ATTRIBUTES'; }
+"]" { /* this.popState(); */ return 'CLOSE_ATTRIBUTES'; }
+(<<EOF>>|[\n;])+ return 'EOS' // end of statement
+\s+ // skip all whitespace
+// [\n]+ return 'NEWLINE';
 
 // TODO: check if jison will return 2 separate tokens (for nodes) while ignoring whitespace
 
@@ -16,15 +24,50 @@
 
 %start start
 
-%% /* language grammar */
+%% // language grammar
 
 start
-	: SPACE start
+	: EOS SANKEY document
 	| SANKEY document
 	;
 
 document
-	: node document
+	: line document
+	| // empty
+	;
+
+line
+	// : node_with_attributes // one node with attributes
+	: flow EOS
+	| node_with_attributes EOS
+	| EOS
+	;
+	
+
+node_with_attributes
+	: NODE
+	| NODE attributes_group
+	;
+
+attributes_group
+	: OPEN_ATTRIBUTES attributes CLOSE_ATTRIBUTES
+	;
+
+attributes:
+	| // TODO
+	;
+
+flow
+	: NODE ARROW value_or_values_group ARROW flow
+	| NODE
+	;
+
+value_or_values_group
+	: OPEN_GROUP values CLOSE_GROUP
+	| VALUE
+	;
+
+values
+	: values VALUE
 	| /* empty */
 	;
-	
\ No newline at end of file
diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js
index 5ef6f80fe..d96663f31 100644
--- a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js
+++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js
@@ -1,6 +1,7 @@
 import diagram from './sankey.jison';
 import { parser } from './sankey.jison';
 import db from '../sankeyDB.js';
+// import { fail } from 'assert';
 
 describe('Sankey diagram', function () {
   // TODO - these examples should be put into ./parser/stateDiagram.spec.js
@@ -11,39 +12,104 @@ describe('Sankey diagram', function () {
       diagram.parser.yy.clear();
     });
 
-    it('recognized its type', function() {
+    it('recognizes its type', () => {
       const str=`sankey`;
       
       parser.parse(str);
     });
 
-    // it('one simple flow', function () {
+    it('recognizes one flow', () => {
+      const str = `
+      sankey
+      a -> 30 -> b -> 20 -> c
+      `;
+      
+      parser.parse(str);
+    });
+    
+    it('recognizes multiple flows', () => {
+      const str = `
+      sankey
+      a -> 30 -> b -> 12 -> e
+      c -> 30 -> d -> 12 -> e
+      c -> 40 -> e -> 12 -> e
+      `;
+      
+      parser.parse(str);
+    });
+    
+    it('recognizes grouped values', () => {
+      const str = `
+      sankey
+      a -> {30} -> b
+      `;
+      
+      parser.parse(str);
+    });
+
+    it('recognizes a separate node with its attributes', () => {
+      const str = `
+      sankey
+      c[]
+      `;
+      
+      parser.parse(str);
+    });
+
+    // it('recognizes intake group', () => {
     //   const str = `
     //   sankey
-    //   a -> 30 -> b
+    //   a -> {
+    //     30 -> b
+    //     40 -> c
+    //   }
     //   `;
-
+      
     //   parser.parse(str);
     // });
 
-    // it('multiple flows', function () {
+    // it('recognizes exhaust group', () => {
     //   const str = `
     //   sankey
-    //   a -> 30 -> b
-    //   c -> 30 -> d
-    //   c -> 40 -> e
+    //   {
+    //     b -> 30
+    //     c -> 40
+    //   } -> a
     //   `;
-
+      
     //   parser.parse(str);
     // });
 
-    // it('multiple flows', function () {
+    // it('what to do?', () => {
     //   const str = `
     //   sankey
-    //   a -> 30 -> b
-    //   c -> 30 -> d
+    //   {
+    //     b -> 30
+    //     c -> 40
+    //   } -> {
+    //     e
+    //     d
+    //   }
     //   `;
+      
+    //   parser.parse(str);
+    // });
 
+    // it('complex', () => {
+    //   const str = `
+    //   sankey
+    //   {
+    //     a -> 30
+    //     b -> 40
+    //   } -> c -> {
+    //     20 -> e -> 49
+    //     20 -> d -> 23
+    //   } -> k -> 20 -> i -> {
+    //     10 -> f
+    //     11 -> j
+    //   }
+    //   `;
+      
     //   parser.parse(str);
     // });
   });
diff --git a/run b/run
index 7dbdf918a..9b02b0741 100755
--- a/run
+++ b/run
@@ -14,15 +14,19 @@ $RUN mermaid sh $args
 ;;
 
 i | install)
-$RUN mermaid sh -c "npx pnpm install"
+$RUN mermaid sh -c "npx pnpm install $args"
 ;;
 
 test)
-$RUN mermaid sh -c "npx pnpm test"
+$RUN mermaid sh -c "npx pnpm test $args"
+;;
+
+vitest)
+$RUN mermaid sh -c "npx pnpm vitest $args"
 ;;
 
 e2e)
-$RUN mermaid sh -c "npx pnpm e2e"
+$RUN mermaid sh -c "npx pnpm e2e $args"
 ;;
 
 lint)

From d2226604e447a2a339abdbb400c403173775c2fb Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Sun, 18 Jun 2023 01:32:45 +0300
Subject: [PATCH 014/187] Recognizing attrubutes

---
 .../src/diagrams/sankey/parser/sankey.jison   | 62 +++++++++----------
 .../src/diagrams/sankey/parser/sankey.spec.js | 30 +++++----
 2 files changed, 46 insertions(+), 46 deletions(-)

diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
index e0b4252ca..cc262f672 100644
--- a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
+++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
@@ -3,20 +3,29 @@
 
 %options case-insensitive
 %s group
-// %x attributes
+%x attributes
+%x attribute
+%x value
 
 %%
-"{"       { this.pushState('group'); return 'OPEN_GROUP'; }
-<group>"}" { this.popState('group'); return 'CLOSE_GROUP'; }
 "sankey" return 'SANKEY'
-\d+    return 'VALUE'
+\d+      return 'AMOUNT'
 "->"     return 'ARROW'
 \w+      return 'NODE'
-"["             {/*this.pushState('attributes');*/ return 'OPEN_ATTRIBUTES'; }
-"]" { /* this.popState(); */ return 'CLOSE_ATTRIBUTES'; }
-(<<EOF>>|[\n;])+ return 'EOS' // end of statement
+(?:<<EOF>>|[\n;])+ { return 'EOS'; } // end of statement is ; \n or end of file
 \s+ // skip all whitespace
-// [\n]+ return 'NEWLINE';
+"{"             { this.pushState('group'); return 'OPEN_GROUP'; }
+<group>"}"      { this.popState('group'); return 'CLOSE_GROUP'; }
+"["             { this.pushState('attributes'); return 'OPEN_ATTRIBUTES'; }
+<attributes>"]" { this.popState(); return 'CLOSE_ATTRIBUTES'; }
+<attributes>\w+ { return 'ATTRIBUTE'; } // string followed by = sign is "attrName"
+<attributes>(?=\=s*)[\s\w] {return 'VALUE';}
+<attributes>\= { this.pushState('attribute'); return 'EQUAL'; }
+<attributes>\s+ // skip all whitespace
+<attribute>[\w]+ {this.popState(); return 'VALUE';}
+<attribute>\s+ //skip
+<attribute>\" { this.pushState('value'); return 'OPEN_VALUE'; }
+<value>\"  { this.popState(); return 'CLOSE_VALUE'; }
 
 // TODO: check if jison will return 2 separate tokens (for nodes) while ignoring whitespace
 
@@ -33,41 +42,26 @@ start
 
 document
 	: line document
-	| // empty
+	|
 	;
 
 line
-	// : node_with_attributes // one node with attributes
 	: flow EOS
 	| node_with_attributes EOS
 	| EOS
 	;
-	
 
-node_with_attributes
-	: NODE
-	| NODE attributes_group
-	;
+node_with_attributes: NODE OPEN_ATTRIBUTES attributes CLOSE_ATTRIBUTES;
 
-attributes_group
-	: OPEN_ATTRIBUTES attributes CLOSE_ATTRIBUTES
-	;
+attributes: attribute attributes | ;
+attribute: ATTRIBUTE EQUAL VALUE | ATTRIBUTE;
 
-attributes:
-	| // TODO
-	;
+// flow
+// 	: NODE ARROW value_or_values_group ARROW flow
+// 	| NODE
+// 	;
 
-flow
-	: NODE ARROW value_or_values_group ARROW flow
-	| NODE
-	;
+flow: n_chain_a;
 
-value_or_values_group
-	: OPEN_GROUP values CLOSE_GROUP
-	| VALUE
-	;
-
-values
-	: values VALUE
-	| /* empty */
-	;
+n_chain_a: NODE ARROW a_chain_n | NODE;
+a_chain_n: AMOUNT ARROW n_chain_a | AMOUNT;
diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js
index d96663f31..8617c4bbc 100644
--- a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js
+++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js
@@ -30,31 +30,37 @@ describe('Sankey diagram', function () {
     it('recognizes multiple flows', () => {
       const str = `
       sankey
-      a -> 30 -> b -> 12 -> e
-      c -> 30 -> d -> 12 -> e
-      c -> 40 -> e -> 12 -> e
+      a -> 30 -> b -> 12 -> e;
+      c -> 30 -> d -> 12 -> e;
+      c -> 40 -> e -> 12 -> q;
       `;
       
       parser.parse(str);
     });
     
-    it('recognizes grouped values', () => {
+    it('recognizes a separate node with its attributes', () => {
       const str = `
       sankey
-      a -> {30} -> b
+      a[]
+      b[attr=1]
+      c[attr=2]
+      d[attrWithoutValue]
+      d[attr = 3]
       `;
       
       parser.parse(str);
     });
 
-    it('recognizes a separate node with its attributes', () => {
-      const str = `
-      sankey
-      c[]
-      `;
+    // it('recognizes grouped values', () => {
+    //   const str = `
+    //   sankey
+    //   a -> {30} -> b
+    //   `;
       
-      parser.parse(str);
-    });
+    //   parser.parse(str);
+    // });
+
+
 
     // it('recognizes intake group', () => {
     //   const str = `

From b4b535f9973dd4e7073791a179df5f9d27421697 Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Sun, 18 Jun 2023 01:32:45 +0300
Subject: [PATCH 015/187] Recognizing attributes

---
 .../src/diagrams/sankey/parser/sankey.jison   | 46 +++++++++++--------
 .../src/diagrams/sankey/parser/sankey.spec.js | 13 ++++--
 2 files changed, 34 insertions(+), 25 deletions(-)

diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
index cc262f672..3adc6a406 100644
--- a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
+++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
@@ -2,30 +2,36 @@
 %lex
 
 %options case-insensitive
+%options easy_keyword_rules
+
 %s group
+// when we are inside [] section we are defining attrubutes
 %x attributes
-%x attribute
-%x value
+// after attr= we are expecting a value without quotes
+%x value      
+// or if we use "" we are expecting a string containing value
+%x string    
 
 %%
-"sankey" return 'SANKEY'
-\d+      return 'AMOUNT'
-"->"     return 'ARROW'
-\w+      return 'NODE'
-(?:<<EOF>>|[\n;])+ { return 'EOS'; } // end of statement is ; \n or end of file
-\s+ // skip all whitespace
-"{"             { this.pushState('group'); return 'OPEN_GROUP'; }
-<group>"}"      { this.popState('group'); return 'CLOSE_GROUP'; }
-"["             { this.pushState('attributes'); return 'OPEN_ATTRIBUTES'; }
-<attributes>"]" { this.popState(); return 'CLOSE_ATTRIBUTES'; }
-<attributes>\w+ { return 'ATTRIBUTE'; } // string followed by = sign is "attrName"
-<attributes>(?=\=s*)[\s\w] {return 'VALUE';}
-<attributes>\= { this.pushState('attribute'); return 'EQUAL'; }
-<attributes>\s+ // skip all whitespace
-<attribute>[\w]+ {this.popState(); return 'VALUE';}
-<attribute>\s+ //skip
-<attribute>\" { this.pushState('value'); return 'OPEN_VALUE'; }
-<value>\"  { this.popState(); return 'CLOSE_VALUE'; }
+"sankey"                         { return 'SANKEY'; }
+\d+                              { return 'AMOUNT'; }
+"->"                             { return 'ARROW'; }
+\w+                              { return 'NODE'; }
+(?:<<EOF>>|[\n;])+               { return 'EOS'; } // end of statement is ; \n or end of file
+\s+                                                // skip all whitespace
+"{"                              { this.pushState('group'); return 'OPEN_GROUP'; }
+<group>"}"                       { this.popState('group'); return 'CLOSE_GROUP'; }
+"["                              { this.pushState('attributes'); return 'OPEN_ATTRIBUTES'; }
+<attributes>"]"                  { this.popState(); return 'CLOSE_ATTRIBUTES'; }
+<attributes>\w+                  { return 'ATTRIBUTE'; }
+<attributes>(?=\=s*)[\s\w]       { return 'VALUE';}
+<attributes>\=                   { this.pushState('value'); return 'EQUAL'; }
+<attributes>\s+                   // skip all whitespace
+<value>[\w]+                     { this.popState(); return 'VALUE';}
+<value>\s+                       //skip
+<value>\"                        { this.pushState('string'); return 'OPEN_STRING'; }
+<string>\"                       { this.popState(); return 'CLOSE_STRING'; }
+<string>[\w\s]+(?=\")            { return 'STRING'; }
 
 // TODO: check if jison will return 2 separate tokens (for nodes) while ignoring whitespace
 
diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js
index 8617c4bbc..4cd1befae 100644
--- a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js
+++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js
@@ -41,11 +41,14 @@ describe('Sankey diagram', function () {
     it('recognizes a separate node with its attributes', () => {
       const str = `
       sankey
-      a[]
-      b[attr=1]
-      c[attr=2]
-      d[attrWithoutValue]
-      d[attr = 3]
+      node[]
+      node[attr=1]
+      node[attr=2]
+      a -> 30 -> b
+      node[attrWithoutValue]
+      node[attr = 3]
+      node[attr1 = 23413 attr2=1234]
+      node[x1dfqowie attr1 = 23413 attr2]
       `;
       
       parser.parse(str);

From f71769e07ba119c165c9bc2c02ed201f65b243a3 Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Sun, 18 Jun 2023 01:32:45 +0300
Subject: [PATCH 016/187] Attributes within strings

---
 .../src/diagrams/sankey/parser/sankey.jison   | 17 ++++----
 .../src/diagrams/sankey/parser/sankey.spec.js | 41 ++++++++++++-------
 2 files changed, 36 insertions(+), 22 deletions(-)

diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
index 3adc6a406..53c427729 100644
--- a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
+++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
@@ -20,7 +20,7 @@
 (?:<<EOF>>|[\n;])+               { return 'EOS'; } // end of statement is ; \n or end of file
 \s+                                                // skip all whitespace
 "{"                              { this.pushState('group'); return 'OPEN_GROUP'; }
-<group>"}"                       { this.popState('group'); return 'CLOSE_GROUP'; }
+<group>"}"                       { this.popState(); return 'CLOSE_GROUP'; }
 "["                              { this.pushState('attributes'); return 'OPEN_ATTRIBUTES'; }
 <attributes>"]"                  { this.popState(); return 'CLOSE_ATTRIBUTES'; }
 <attributes>\w+                  { return 'ATTRIBUTE'; }
@@ -30,8 +30,12 @@
 <value>[\w]+                     { this.popState(); return 'VALUE';}
 <value>\s+                       //skip
 <value>\"                        { this.pushState('string'); return 'OPEN_STRING'; }
-<string>\"                       { this.popState(); return 'CLOSE_STRING'; }
-<string>[\w\s]+(?=\")            { return 'STRING'; }
+<string>(?!\\)\" {
+	if(this.topState()==='string') this.popState();
+	if(this.topState()==='value') this.popState();
+	return 'CLOSE_STRING';
+}
+<string>([^"\\]|\\\")+                    { console.log(this.state); return 'STRING'; }
 
 // TODO: check if jison will return 2 separate tokens (for nodes) while ignoring whitespace
 
@@ -60,12 +64,9 @@ line
 node_with_attributes: NODE OPEN_ATTRIBUTES attributes CLOSE_ATTRIBUTES;
 
 attributes: attribute attributes | ;
-attribute: ATTRIBUTE EQUAL VALUE | ATTRIBUTE;
+attribute: ATTRIBUTE EQUAL value | ATTRIBUTE;
 
-// flow
-// 	: NODE ARROW value_or_values_group ARROW flow
-// 	| NODE
-// 	;
+value: VALUE | OPEN_STRING STRING CLOSE_STRING;
 
 flow: n_chain_a;
 
diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js
index 4cd1befae..576862fd8 100644
--- a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js
+++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js
@@ -38,22 +38,35 @@ describe('Sankey diagram', function () {
       parser.parse(str);
     });
     
-    it('recognizes a separate node with its attributes', () => {
-      const str = `
-      sankey
-      node[]
-      node[attr=1]
-      node[attr=2]
-      a -> 30 -> b
-      node[attrWithoutValue]
-      node[attr = 3]
-      node[attr1 = 23413 attr2=1234]
-      node[x1dfqowie attr1 = 23413 attr2]
-      `;
-      
-      parser.parse(str);
+    describe('while attributes parsing', () => {
+      it('parses different quotless variations', () => {
+        const str = `
+        sankey
+        node[]
+        node[attr=1]
+        a -> 30 -> b
+        node[attrWithoutValue]
+        node[attr = 3]
+        node[attr1 = 23413 attr2=1234]
+        node[x1dfqowie attr1 = 23413 attr2]
+        `;
+        
+        parser.parse(str);
+      });
+
+      it('parses strings as values', () => {
+        const str = `
+        sankey
+        node[attr="hello, how are you?"]
+        node[attr="hello\\""]
+        `;
+        
+        parser.parse(str);
+      });
     });
 
+    
+    
     // it('recognizes grouped values', () => {
     //   const str = `
     //   sankey

From 5eae790740fe30599040aac0167629c832e4d4ad Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Sun, 18 Jun 2023 01:32:45 +0300
Subject: [PATCH 017/187] Sankey stream is ending on node only

---
 .../src/diagrams/sankey/parser/sankey.jison   | 24 +++---
 .../src/diagrams/sankey/parser/sankey.spec.js | 80 ++-----------------
 2 files changed, 20 insertions(+), 84 deletions(-)

diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
index 53c427729..e15dcf5d0 100644
--- a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
+++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
@@ -35,9 +35,7 @@
 	if(this.topState()==='value') this.popState();
 	return 'CLOSE_STRING';
 }
-<string>([^"\\]|\\\")+                    { console.log(this.state); return 'STRING'; }
-
-// TODO: check if jison will return 2 separate tokens (for nodes) while ignoring whitespace
+<string>([^"\\]|\\\")+           { return 'STRING'; }
 
 /lex
 
@@ -55,20 +53,28 @@ document
 	|
 	;
 
+	// : NODE exhaust intake exhaust_chain optional_attributes EOS
 line
-	: flow EOS
-	| node_with_attributes EOS
+	: stream optional_attributes EOS
+	| NODE optional_attributes EOS
 	| EOS
 	;
 
-node_with_attributes: NODE OPEN_ATTRIBUTES attributes CLOSE_ATTRIBUTES;
+optional_attributes: OPEN_ATTRIBUTES attributes CLOSE_ATTRIBUTES | ;
 
 attributes: attribute attributes | ;
 attribute: ATTRIBUTE EQUAL value | ATTRIBUTE;
 
 value: VALUE | OPEN_STRING STRING CLOSE_STRING;
 
-flow: n_chain_a;
+stream: NODE ARROW AMOUNT ARROW tail;
+tail: stream | NODE;
 
-n_chain_a: NODE ARROW a_chain_n | NODE;
-a_chain_n: AMOUNT ARROW n_chain_a | AMOUNT;
+// exhaust_chain: ARROW AMOUNT intake_chain | ;
+// intake_chain: ARROW NODE exhaust_chain | ;
+
+// exhaust: ARROW AMOUNT;
+// intake: ARROW NODE;
+
+// node_chain_amount: NODE ARROW amount_node_chain | NODE;
+// amount_node_chain: AMOUNT ARROW node_chain_amount | AMOUNT;
diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js
index 576862fd8..83d87ac71 100644
--- a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js
+++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js
@@ -30,9 +30,9 @@ describe('Sankey diagram', function () {
     it('recognizes multiple flows', () => {
       const str = `
       sankey
-      a -> 30 -> b -> 12 -> e;
-      c -> 30 -> d -> 12 -> e;
-      c -> 40 -> e -> 12 -> q;
+      a -> 30 -> b -> 12 -> e
+      c -> 30 -> d -> 12 -> e
+      c -> 40 -> e -> 12 -> q
       `;
       
       parser.parse(str);
@@ -58,81 +58,11 @@ describe('Sankey diagram', function () {
         const str = `
         sankey
         node[attr="hello, how are you?"]
-        node[attr="hello\\""]
+        node[attr="hello\\"afaasd"]
         `;
         
         parser.parse(str);
       });
-    });
-
-    
-    
-    // it('recognizes grouped values', () => {
-    //   const str = `
-    //   sankey
-    //   a -> {30} -> b
-    //   `;
-      
-    //   parser.parse(str);
-    // });
-
-
-
-    // it('recognizes intake group', () => {
-    //   const str = `
-    //   sankey
-    //   a -> {
-    //     30 -> b
-    //     40 -> c
-    //   }
-    //   `;
-      
-    //   parser.parse(str);
-    // });
-
-    // it('recognizes exhaust group', () => {
-    //   const str = `
-    //   sankey
-    //   {
-    //     b -> 30
-    //     c -> 40
-    //   } -> a
-    //   `;
-      
-    //   parser.parse(str);
-    // });
-
-    // it('what to do?', () => {
-    //   const str = `
-    //   sankey
-    //   {
-    //     b -> 30
-    //     c -> 40
-    //   } -> {
-    //     e
-    //     d
-    //   }
-    //   `;
-      
-    //   parser.parse(str);
-    // });
-
-    // it('complex', () => {
-    //   const str = `
-    //   sankey
-    //   {
-    //     a -> 30
-    //     b -> 40
-    //   } -> c -> {
-    //     20 -> e -> 49
-    //     20 -> d -> 23
-    //   } -> k -> 20 -> i -> {
-    //     10 -> f
-    //     11 -> j
-    //   }
-    //   `;
-      
-    //   parser.parse(str);
-    // });
+    });    
   });
 });

From 40f7105ae4a77d4b6869e1e5d24e2ef164edf2ef Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Sun, 18 Jun 2023 01:32:45 +0300
Subject: [PATCH 018/187] Started renderer development

---
 demos/index.html                              |   3 +
 demos/sankey.html                             |  14 +--
 .../mermaid/src/diagrams/sankey/energy.csv    |  69 ++++++++++++
 .../src/diagrams/sankey/parser/sankey.jison   |  10 +-
 .../mermaid/src/diagrams/sankey/sankeyDB.js   |  69 ------------
 .../mermaid/src/diagrams/sankey/sankeyDB.ts   | 106 ++++++++++++++++++
 .../src/diagrams/sankey/sankeyRenderer.ts     |  12 +-
 7 files changed, 199 insertions(+), 84 deletions(-)
 create mode 100644 packages/mermaid/src/diagrams/sankey/energy.csv
 delete mode 100644 packages/mermaid/src/diagrams/sankey/sankeyDB.js
 create mode 100644 packages/mermaid/src/diagrams/sankey/sankeyDB.ts

diff --git a/demos/index.html b/demos/index.html
index 391042182..24c4fbf3b 100644
--- a/demos/index.html
+++ b/demos/index.html
@@ -75,6 +75,9 @@
       <li>
         <h2><a href="./zenuml.html">ZenUML</a></h2>
       </li>
+      <li>
+        <h2><a href="./sankey.html">Sankey</a></h2>
+      </li>
     </ul>
   </body>
 </html>
diff --git a/demos/sankey.html b/demos/sankey.html
index 57f3a8af8..fa06b37dd 100644
--- a/demos/sankey.html
+++ b/demos/sankey.html
@@ -16,15 +16,11 @@
     <h1>Sankey diagram demos</h1>
     <h2>Simple flow</h2>
     <pre class="mermaid">
-      stateDiagram-v2
-      direction LR
-      State1: A state with a note
-      note right of State1
-        Important information!<br />You can write notes.<br />And\nthey\ncan\nbe\nmulti-\nline.
-      end note
-      State1 --> State2
-      note left of State2 : Notes can be to the left of a state\n(like this one).
-      note right of State2 : Notes can be to the right of a state\n(like this one).
+      sankey
+      a--10->b
+      c--20->b
+      b--15->d
+      a-- 7->d
     </pre>
     <script type="module">
       import mermaid from './mermaid.esm.mjs';
diff --git a/packages/mermaid/src/diagrams/sankey/energy.csv b/packages/mermaid/src/diagrams/sankey/energy.csv
new file mode 100644
index 000000000..e5691f66c
--- /dev/null
+++ b/packages/mermaid/src/diagrams/sankey/energy.csv
@@ -0,0 +1,69 @@
+source,target,value
+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
\ No newline at end of file
diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
index e15dcf5d0..cab630252 100644
--- a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
+++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
@@ -53,10 +53,9 @@ document
 	|
 	;
 
-	// : NODE exhaust intake exhaust_chain optional_attributes EOS
 line
 	: stream optional_attributes EOS
-	| NODE optional_attributes EOS
+	| node optional_attributes EOS
 	| EOS
 	;
 
@@ -67,9 +66,12 @@ attribute: ATTRIBUTE EQUAL value | ATTRIBUTE;
 
 value: VALUE | OPEN_STRING STRING CLOSE_STRING;
 
-stream: NODE ARROW AMOUNT ARROW tail;
-tail: stream | NODE;
+stream: node ARROW AMOUNT ARROW tail { yy.addNode($1); yy.addLink(); };
+tail: stream | node;
 
+node: NODE { yy.addNode($1) };
+
+// : NODE exhaust intake exhaust_chain optional_attributes EOS
 // exhaust_chain: ARROW AMOUNT intake_chain | ;
 // intake_chain: ARROW NODE exhaust_chain | ;
 
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyDB.js b/packages/mermaid/src/diagrams/sankey/sankeyDB.js
deleted file mode 100644
index 2c86752c6..000000000
--- a/packages/mermaid/src/diagrams/sankey/sankeyDB.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import { log } from '../../logger.js';
-import mermaidAPI from '../../mermaidAPI.js';
-import * as configApi from '../../config.js';
-import common from '../common/common.js';
-import {
-  setAccTitle,
-  getAccTitle,
-  setDiagramTitle,
-  getDiagramTitle,
-  getAccDescription,
-  setAccDescription,
-  clear as commonClear,
-} from '../../commonDb.js';
-
-let sections = {};
-let showData = false;
-
-export const parseDirective = function (statement, context, type) {
-  mermaidAPI.parseDirective(this, statement, context, type);
-};
-
-const addSection = function (id, value) {
-  id = common.sanitizeText(id, configApi.getConfig());
-  if (sections[id] === undefined) {
-    sections[id] = value;
-    log.debug('Added new section :', id);
-  }
-};
-const getSections = () => sections;
-
-const setShowData = function (toggle) {
-  showData = toggle;
-};
-
-const getShowData = function () {
-  return showData;
-};
-
-const cleanupValue = function (value) {
-  if (value.substring(0, 1) === ':') {
-    value = value.substring(1).trim();
-    return Number(value.trim());
-  } else {
-    return Number(value.trim());
-  }
-};
-
-const clear = function () {
-  sections = {};
-  showData = false;
-  commonClear();
-};
-
-export default {
-  parseDirective,
-  getConfig: () => configApi.getConfig().pie,
-  addSection,
-  getSections,
-  cleanupValue,
-  clear,
-  setAccTitle,
-  getAccTitle,
-  setDiagramTitle,
-  getDiagramTitle,
-  setShowData,
-  getShowData,
-  getAccDescription,
-  setAccDescription,
-};
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts
new file mode 100644
index 000000000..96568b0c4
--- /dev/null
+++ b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts
@@ -0,0 +1,106 @@
+import { log } from '../../logger.js';
+import mermaidAPI from '../../mermaidAPI.js';
+import * as configApi from '../../config.js';
+import common from '../common/common.js';
+import {
+  // setAccTitle,
+  // getAccTitle,
+  // getAccDescription,
+  // setAccDescription,
+  setDiagramTitle,
+  getDiagramTitle,
+  clear as commonClear,
+} from '../../commonDb.js';
+
+// export const parseDirective = function (statement, context, type) {
+//   mermaidAPI.parseDirective(this, statement, context, type);
+// };
+
+// export const cleanupComments = (text: string): string => {
+//   return text.trimStart().replace(/^\s*%%(?!{)[^\n]+\n?/gm, '');
+// };
+let links:Array<Link> = [];
+let nodes: {[id: string]: Node} = {};
+
+const clear = function () {
+  links = [];
+  nodes = {}
+  commonClear();
+};
+
+
+type Nullable<T> = T | null;
+
+
+class Link {
+  sourceNode: Nullable<Node>
+  targetNode: Nullable<Node>
+  constructor() {
+    this.sourceNode = null;
+    this.targetNode = null;
+  }
+}
+
+/**
+ * Adds a stream between two elements on the diagram
+ * 
+ * @param sourceNodeID - The id Node where the link starts
+ * @param targetNodeID - The id Node where the link ends
+*/
+
+interface IAddLink {
+  sourceNodeID?: string;
+  targetNodeID?: string;
+  // amount?: number;
+}
+
+const addLink = ({sourceNodeID, targetNodeID}: IAddLink = {}): Link => {
+  const link: Link = new Link();
+  
+  if(typeof(sourceNodeID) !== 'undefined') link.sourceNode = addNode(sourceNodeID);
+  if(typeof(targetNodeID) !== 'undefined') link.targetNode = addNode(targetNodeID);
+  
+  links.push(link);
+
+  return link;
+}
+
+
+class Node {
+  id: string;
+  title: string;
+  constructor(id: string) {
+    this.id = id;
+    this.title = id;
+  }
+}
+
+/**
+ * Finds or creates a new Node by ID
+ * 
+ * @param id - The id Node
+ */
+const addNode = (id: string): Node => {
+  id = common.sanitizeText(id, configApi.getConfig());
+  let node: Node;
+  if (nodes[id] === undefined) {
+    nodes[id] = new Node(id);
+  }
+  node = nodes[id];
+  return node;
+}
+
+export default {
+  // sankey interface
+  addLink,
+  addNode,
+  // common DB interface
+  // TODO: If this is a must this probably should be an interface
+  // getAccTitle,
+  // setAccTitle,
+  // getAccDescription,
+  // setAccDescription,
+  getDiagramTitle,
+  setDiagramTitle,
+  clear
+};
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
index f1482210e..1ebcda772 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
@@ -8,8 +8,16 @@ import { Diagram } from '../../Diagram.js';
  * @param _version - Mermaid version from package.json
  * @param diagObj - A standard diagram containing the db and the text and type etc of the diagram
  */
-export const draw = function (_text: string, id: string, _version: string, diagObj: Diagram) {
-  return '';
+export const draw = function (text: string, id: string, _version: string, diagObj: Diagram) {
+  
+  debugger;
+  // diagObj.db.clear();
+  diagObj.parser.parse(text);
+  
+  // const elem = doc.getElementById(id);
+
+  debugger;
+  return 'TEST';
 }
 
 export default {

From 1782f69c8f9e699fcb167c1714877e6a10984a49 Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Sun, 18 Jun 2023 01:32:45 +0300
Subject: [PATCH 019/187] Increased mem for lint, fixed spell checking, run
 lint

---
 cSpell.json                                   |  1 +
 docker-compose.yml                            |  6 ++-
 .../src/diagram-api/diagram-orchestration.ts  |  2 +-
 .../diagrams/sankey/parser/desired_syntax.md  | 35 ++++++++++------
 .../src/diagrams/sankey/parser/sankey.spec.js | 18 ++++----
 .../mermaid/src/diagrams/sankey/sankeyDB.ts   | 42 +++++++++----------
 .../src/diagrams/sankey/sankeyDiagram.ts      |  1 -
 .../src/diagrams/sankey/sankeyRenderer.ts     |  9 ++--
 8 files changed, 64 insertions(+), 50 deletions(-)

diff --git a/cSpell.json b/cSpell.json
index ff9ef1074..cd9b4b396 100644
--- a/cSpell.json
+++ b/cSpell.json
@@ -102,6 +102,7 @@
     "rehype",
     "roledescription",
     "sandboxed",
+    "sankey",
     "setupgraphviewbox",
     "shiki",
     "sidharth",
diff --git a/docker-compose.yml b/docker-compose.yml
index 2bd00a277..21da2edd5 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -5,6 +5,10 @@ services:
     stdin_open: true
     tty: true
     working_dir: /mermaid
+    # mem_reservation: "10M"
+    mem_limit: '8G'
+    environment:
+      - NODE_OPTIONS=--max_old_space_size=8192
     volumes:
       - ./:/mermaid
       - root_cache:/root/.cache
@@ -13,4 +17,4 @@ services:
       - 9000:9000
 volumes:
   root_cache:
-  root_local:
\ No newline at end of file
+  root_local:
diff --git a/packages/mermaid/src/diagram-api/diagram-orchestration.ts b/packages/mermaid/src/diagram-api/diagram-orchestration.ts
index afebaf1ae..9c03e27f3 100644
--- a/packages/mermaid/src/diagram-api/diagram-orchestration.ts
+++ b/packages/mermaid/src/diagram-api/diagram-orchestration.ts
@@ -81,6 +81,6 @@ export const addDiagrams = () => {
     state,
     journey,
     quadrantChart,
-    sankey,
+    sankey
   );
 };
diff --git a/packages/mermaid/src/diagrams/sankey/parser/desired_syntax.md b/packages/mermaid/src/diagrams/sankey/parser/desired_syntax.md
index 1b5cb81d2..ccde1c59b 100644
--- a/packages/mermaid/src/diagrams/sankey/parser/desired_syntax.md
+++ b/packages/mermaid/src/diagrams/sankey/parser/desired_syntax.md
@@ -29,6 +29,7 @@ Interviewed,Accepted Offer,1,orange
 ```
 
 GoJS uses similar approach:
+
 ```json
 {
 "nodeDataArray": [
@@ -47,30 +48,34 @@ GoJS uses similar approach:
 ## What do we need
 
 Mainly we need:
-* collection of nodes
-* collection of links
+
+- collection of nodes
+- collection of links
 
 We also need graph and node attributes like this:
-* link sort
-* node sort
-* coloring strategy for links (source, target, transition)
-* graph alignment (left, right, width)
-* node color
-* node title
-* node width
-* node padding
-* graph margin
+
+- link sort
+- node sort
+- coloring strategy for links (source, target, transition)
+- graph alignment (left, right, width)
+- node color
+- node title
+- node width
+- node padding
+- graph margin
 
 ## Desired syntax
 
 Graph is a list of flows (or links).
 Flow is a sequence `node -> value -> node -> value...`
+
 ```
 a -> 30 -> b
 a -> 40 -> b
 ```
 
 2 separate streams between 2 nodes they can be grouped as well:
+
 ```
 a -> {
     30
@@ -79,6 +84,7 @@ a -> {
 ```
 
 All outflows from the node can be grouped:
+
 ```
 a -> {
     30 -> b
@@ -87,6 +93,7 @@ a -> {
 ```
 
 All inflows to the node can be grouped too:
+
 ```
 {
     a -> 30
@@ -95,6 +102,7 @@ All inflows to the node can be grouped too:
 ```
 
 Chaining example:
+
 ```
 a -> {
     30
@@ -102,12 +110,13 @@ a -> {
 } -> b -> {
     20 -> d -> 11
     50 -> e -> 11
-} -> f -> 30 
+} -> f -> 30
 ```
 
 **Probably ambiguous!**
 
 Does the sample below mean that total outflow from "a" is 60?
+
 ```
 a -> 30 -> {
     b
@@ -116,6 +125,7 @@ a -> 30 -> {
 ```
 
 Or does this one mean that total outflow must be 140 (70 to "b" and "c" respectively)?
+
 ```
 a -> {
     30
@@ -129,6 +139,7 @@ a -> {
 **Overcomplicated**
 
 Nested:
+
 ```
 {
     {
diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js
index 83d87ac71..47345d1b6 100644
--- a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js
+++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js
@@ -13,8 +13,8 @@ describe('Sankey diagram', function () {
     });
 
     it('recognizes its type', () => {
-      const str=`sankey`;
-      
+      const str = `sankey`;
+
       parser.parse(str);
     });
 
@@ -23,10 +23,10 @@ describe('Sankey diagram', function () {
       sankey
       a -> 30 -> b -> 20 -> c
       `;
-      
+
       parser.parse(str);
     });
-    
+
     it('recognizes multiple flows', () => {
       const str = `
       sankey
@@ -34,10 +34,10 @@ describe('Sankey diagram', function () {
       c -> 30 -> d -> 12 -> e
       c -> 40 -> e -> 12 -> q
       `;
-      
+
       parser.parse(str);
     });
-    
+
     describe('while attributes parsing', () => {
       it('parses different quotless variations', () => {
         const str = `
@@ -50,7 +50,7 @@ describe('Sankey diagram', function () {
         node[attr1 = 23413 attr2=1234]
         node[x1dfqowie attr1 = 23413 attr2]
         `;
-        
+
         parser.parse(str);
       });
 
@@ -60,9 +60,9 @@ describe('Sankey diagram', function () {
         node[attr="hello, how are you?"]
         node[attr="hello\\"afaasd"]
         `;
-        
+
         parser.parse(str);
       });
-    });    
+    });
   });
 });
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts
index 96568b0c4..f43f3514a 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts
@@ -19,22 +19,20 @@ import {
 // export const cleanupComments = (text: string): string => {
 //   return text.trimStart().replace(/^\s*%%(?!{)[^\n]+\n?/gm, '');
 // };
-let links:Array<Link> = [];
-let nodes: {[id: string]: Node} = {};
+let links: Array<Link> = [];
+let nodes: { [id: string]: Node } = {};
 
 const clear = function () {
   links = [];
-  nodes = {}
+  nodes = {};
   commonClear();
 };
 
-
 type Nullable<T> = T | null;
 
-
 class Link {
-  sourceNode: Nullable<Node>
-  targetNode: Nullable<Node>
+  sourceNode: Nullable<Node>;
+  targetNode: Nullable<Node>;
   constructor() {
     this.sourceNode = null;
     this.targetNode = null;
@@ -43,10 +41,10 @@ class Link {
 
 /**
  * Adds a stream between two elements on the diagram
- * 
+ *
  * @param sourceNodeID - The id Node where the link starts
  * @param targetNodeID - The id Node where the link ends
-*/
+ */
 
 interface IAddLink {
   sourceNodeID?: string;
@@ -54,17 +52,20 @@ interface IAddLink {
   // amount?: number;
 }
 
-const addLink = ({sourceNodeID, targetNodeID}: IAddLink = {}): Link => {
+const addLink = ({ sourceNodeID, targetNodeID }: IAddLink = {}): Link => {
   const link: Link = new Link();
-  
-  if(typeof(sourceNodeID) !== 'undefined') link.sourceNode = addNode(sourceNodeID);
-  if(typeof(targetNodeID) !== 'undefined') link.targetNode = addNode(targetNodeID);
-  
+
+  if (sourceNodeID !== undefined) {
+    link.sourceNode = addNode(sourceNodeID);
+  }
+  if (targetNodeID !== undefined) {
+    link.targetNode = addNode(targetNodeID);
+  }
+
   links.push(link);
 
   return link;
-}
-
+};
 
 class Node {
   id: string;
@@ -77,18 +78,17 @@ class Node {
 
 /**
  * Finds or creates a new Node by ID
- * 
+ *
  * @param id - The id Node
  */
 const addNode = (id: string): Node => {
   id = common.sanitizeText(id, configApi.getConfig());
-  let node: Node;
   if (nodes[id] === undefined) {
     nodes[id] = new Node(id);
   }
-  node = nodes[id];
+  const node = nodes[id];
   return node;
-}
+};
 
 export default {
   // sankey interface
@@ -102,5 +102,5 @@ export default {
   // setAccDescription,
   getDiagramTitle,
   setDiagramTitle,
-  clear
+  clear,
 };
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts b/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts
index 482a75a48..e7a46d8bc 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts
@@ -11,4 +11,3 @@ export const diagram: DiagramDefinition = {
   renderer,
   styles,
 };
-
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
index 1ebcda772..916fd7ed0 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
@@ -9,16 +9,15 @@ import { Diagram } from '../../Diagram.js';
  * @param diagObj - A standard diagram containing the db and the text and type etc of the diagram
  */
 export const draw = function (text: string, id: string, _version: string, diagObj: Diagram) {
-  
-  debugger;
+  // debugger;
   // diagObj.db.clear();
   diagObj.parser.parse(text);
-  
+
   // const elem = doc.getElementById(id);
 
-  debugger;
+  // debugger;
   return 'TEST';
-}
+};
 
 export default {
   draw,

From afaf87e414a4c5f7dbfc0c89a431e5887950fab5 Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Sun, 18 Jun 2023 01:32:45 +0300
Subject: [PATCH 020/187] At last something is working

---
 demos/sankey.html                             |  10 +-
 docker-compose.yml                            |   2 +
 package.json                                  |   5 +
 packages/mermaid/src/config.type.ts           |   3 +
 .../src/diagrams/sankey/parser/sankey.jison   |  16 +-
 .../src/diagrams/sankey/parser/sankey.spec.js |  10 +-
 .../mermaid/src/diagrams/sankey/sankeyDB.ts   |  97 +++++----
 .../src/diagrams/sankey/sankeyRenderer.ts     | 192 +++++++++++++++++-
 run                                           |  15 +-
 9 files changed, 278 insertions(+), 72 deletions(-)

diff --git a/demos/sankey.html b/demos/sankey.html
index fa06b37dd..b06ead15e 100644
--- a/demos/sankey.html
+++ b/demos/sankey.html
@@ -17,22 +17,20 @@
     <h2>Simple flow</h2>
     <pre class="mermaid">
       sankey
-      a--10->b
-      c--20->b
-      b--15->d
-      a-- 7->d
+      node_a->10->node_b;
+      node_c->20->node_b;
+      node_b->15->node_d;
+      node_a-> 7->node_d;
     </pre>
     <script type="module">
       import mermaid from './mermaid.esm.mjs';
       mermaid.initialize({
         theme: 'default',
-        // themeCSS: '.node rect { fill: red; }',
         logLevel: 3,
         securityLevel: 'loose',
         flowchart: { curve: 'basis' },
         gantt: { axisFormat: '%m/%d/%Y' },
         sequence: { actorMargin: 50 },
-        // sequenceDiagram: { actorMargin: 300 } // deprecated
       });
     </script>
   </body>
diff --git a/docker-compose.yml b/docker-compose.yml
index 21da2edd5..5cf97ef6d 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -13,8 +13,10 @@ services:
       - ./:/mermaid
       - root_cache:/root/.cache
       - root_local:/root/.local
+      - root_local:/root/.npm
     ports:
       - 9000:9000
 volumes:
   root_cache:
   root_local:
+  root_npm:
diff --git a/package.json b/package.json
index ac197712c..6a291f0d6 100644
--- a/package.json
+++ b/package.json
@@ -85,7 +85,12 @@
     "coveralls": "^3.1.1",
     "cypress": "^12.10.0",
     "cypress-image-snapshot": "^4.0.1",
+<<<<<<< HEAD
     "esbuild": "^0.18.0",
+=======
+    "d3-sankey": "^0.12.3",
+    "esbuild": "^0.17.18",
+>>>>>>> 84c278d0 (At last something is working)
     "eslint": "^8.39.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-cypress": "^2.13.2",
diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts
index 140c200fb..3f3716928 100644
--- a/packages/mermaid/src/config.type.ts
+++ b/packages/mermaid/src/config.type.ts
@@ -32,6 +32,7 @@ export interface MermaidConfig {
   mindmap?: MindmapDiagramConfig;
   gitGraph?: GitGraphDiagramConfig;
   c4?: C4DiagramConfig;
+  sankey?: SankeyDiagramConfig;
   dompurifyConfig?: DOMPurify.Config;
   wrap?: boolean;
   fontSize?: number;
@@ -411,6 +412,8 @@ export interface FlowchartDiagramConfig extends BaseDiagramConfig {
   wrappingWidth?: number;
 }
 
+export interface SankeyDiagramConfig extends BaseDiagramConfig {}
+
 export interface FontConfig {
   fontSize?: string | number;
   fontFamily?: string;
diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
index cab630252..231c3fd50 100644
--- a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
+++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
@@ -40,6 +40,7 @@
 /lex
 
 %start start
+%left ARROW
 
 %% // language grammar
 
@@ -66,10 +67,19 @@ attribute: ATTRIBUTE EQUAL value | ATTRIBUTE;
 
 value: VALUE | OPEN_STRING STRING CLOSE_STRING;
 
-stream: node ARROW AMOUNT ARROW tail { yy.addNode($1); yy.addLink(); };
-tail: stream | node;
+stream: node[source] ARROW amount ARROW tail[target] {
+	$$=$source;
+	yy.addLink($source, $target, $amount);
+};
 
-node: NODE { yy.addNode($1) };
+amount: AMOUNT { $$=parseFloat($AMOUNT); };
+
+tail
+	: stream { $$ = $stream }
+	| node { $$ = $node; }
+	;
+
+node: NODE { $$ = yy.addNode($NODE); };
 
 // : NODE exhaust intake exhaust_chain optional_attributes EOS
 // exhaust_chain: ARROW AMOUNT intake_chain | ;
diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js
index 47345d1b6..ee52efefc 100644
--- a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js
+++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js
@@ -21,7 +21,7 @@ describe('Sankey diagram', function () {
     it('recognizes one flow', () => {
       const str = `
       sankey
-      a -> 30 -> b -> 20 -> c
+      node_a -> 30 -> node_b -> 20 -> node_c
       `;
 
       parser.parse(str);
@@ -30,9 +30,9 @@ describe('Sankey diagram', function () {
     it('recognizes multiple flows', () => {
       const str = `
       sankey
-      a -> 30 -> b -> 12 -> e
-      c -> 30 -> d -> 12 -> e
-      c -> 40 -> e -> 12 -> q
+      node_a -> 30 -> node_b -> 12 -> node_e
+      node_c -> 30 -> node_d -> 12 -> node_e
+      node_c -> 40 -> node_e -> 12 -> node_q
       `;
 
       parser.parse(str);
@@ -44,7 +44,7 @@ describe('Sankey diagram', function () {
         sankey
         node[]
         node[attr=1]
-        a -> 30 -> b
+        node_a -> 30 -> node_b
         node[attrWithoutValue]
         node[attr = 3]
         node[attr1 = 23413 attr2=1234]
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts
index f43f3514a..4f50fa4cc 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts
@@ -1,12 +1,12 @@
-import { log } from '../../logger.js';
-import mermaidAPI from '../../mermaidAPI.js';
+// import { log } from '../../logger.js';
+// import mermaidAPI from '../../mermaidAPI.js';
 import * as configApi from '../../config.js';
 import common from '../common/common.js';
 import {
-  // setAccTitle,
-  // getAccTitle,
-  // getAccDescription,
-  // setAccDescription,
+  setAccTitle,
+  getAccTitle,
+  getAccDescription,
+  setAccDescription,
   setDiagramTitle,
   getDiagramTitle,
   clear as commonClear,
@@ -20,46 +20,54 @@ import {
 //   return text.trimStart().replace(/^\s*%%(?!{)[^\n]+\n?/gm, '');
 // };
 let links: Array<Link> = [];
-let nodes: { [id: string]: Node } = {};
+let nodes: Array<Node> = [];
+let nodesHash: Record<string, Node> = {};
 
-const clear = function () {
+const clear = () => {
   links = [];
-  nodes = {};
+  nodes = [];
+  nodesHash = {};
   commonClear();
 };
 
 type Nullable<T> = T | null;
 
+interface ILink {
+  source?: Node;
+  target?: Node;
+  amount?: number;
+}
+
 class Link {
-  sourceNode: Nullable<Node>;
-  targetNode: Nullable<Node>;
+  source: Nullable<Node>;
+  target: Nullable<Node>;
+  amount: Nullable<number>;
   constructor() {
-    this.sourceNode = null;
-    this.targetNode = null;
+    this.source = null;
+    this.target = null;
+    this.amount = 0;
   }
 }
 
 /**
- * Adds a stream between two elements on the diagram
+ * Adds a link between two elements on the diagram
  *
- * @param sourceNodeID - The id Node where the link starts
- * @param targetNodeID - The id Node where the link ends
+ * @param source - Node where the link starts
+ * @param target - Node where the link ends
+ * @param amount - number, float or integer, describes the amount to be passed
  */
-
-interface IAddLink {
-  sourceNodeID?: string;
-  targetNodeID?: string;
-  // amount?: number;
-}
-
-const addLink = ({ sourceNodeID, targetNodeID }: IAddLink = {}): Link => {
+// const addLink = ({ source, target, amount }: ILink = {}): Link => {
+const addLink = (source?: Node, target?: Node, amount?: number): Link => {
   const link: Link = new Link();
 
-  if (sourceNodeID !== undefined) {
-    link.sourceNode = addNode(sourceNodeID);
+  if (source !== undefined) {
+    link.source = source;
   }
-  if (targetNodeID !== undefined) {
-    link.targetNode = addNode(targetNodeID);
+  if (target !== undefined) {
+    link.target = target;
+  }
+  if (amount !== undefined) {
+    link.amount = amount;
   }
 
   links.push(link);
@@ -68,11 +76,11 @@ const addLink = ({ sourceNodeID, targetNodeID }: IAddLink = {}): Link => {
 };
 
 class Node {
-  id: string;
+  ID: string;
   title: string;
-  constructor(id: string) {
-    this.id = id;
-    this.title = id;
+  constructor(ID: string) {
+    this.ID = ID;
+    this.title = ID;
   }
 }
 
@@ -81,25 +89,28 @@ class Node {
  *
  * @param id - The id Node
  */
-const addNode = (id: string): Node => {
-  id = common.sanitizeText(id, configApi.getConfig());
-  if (nodes[id] === undefined) {
-    nodes[id] = new Node(id);
+const addNode = (ID: string): Node => {
+  ID = common.sanitizeText(ID, configApi.getConfig());
+  if (nodesHash[ID] === undefined) {
+    nodesHash[ID] = new Node(ID);
   }
-  const node = nodes[id];
+  const node = nodesHash[ID];
+  nodes.push(node);
+  // debugger;
   return node;
 };
 
 export default {
-  // sankey interface
+  nodesHash,
+  nodes,
+  links,
   addLink,
   addNode,
-  // common DB interface
   // TODO: If this is a must this probably should be an interface
-  // getAccTitle,
-  // setAccTitle,
-  // getAccDescription,
-  // setAccDescription,
+  getAccTitle,
+  setAccTitle,
+  getAccDescription,
+  setAccDescription,
   getDiagramTitle,
   setDiagramTitle,
   clear,
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
index 916fd7ed0..5d7fb2f64 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
@@ -1,22 +1,202 @@
+// @ts-nocheck TODO: fix file
 import { Diagram } from '../../Diagram.js';
+import { log } from '../../logger.js';
+import * as configApi from '../../config.js';
+import {
+  select as d3select,
+  scaleOrdinal as d3scaleOrdinal,
+  schemeTableau10 as d3schemeTableau10,
+  // rgb as d3rgb,
+  map as d3map,
+} from 'd3';
+import {
+  sankey as d3sankey,
+  sankeyLinkHorizontal
+} from 'd3-sankey';
+import { configureSvgSize } from '../../setupGraphViewbox.js';
+import sankeyDB from './sankeyDB.js';
 
 /**
  * Draws a sequenceDiagram in the tag with id: id based on the graph definition in text.
  *
- * @param _text - The text of the diagram
+ * @param text - The text of the diagram
  * @param id - The id of the diagram which will be used as a DOM element id¨
  * @param _version - Mermaid version from package.json
  * @param diagObj - A standard diagram containing the db and the text and type etc of the diagram
  */
-export const draw = function (text: string, id: string, _version: string, diagObj: Diagram) {
-  // debugger;
-  // diagObj.db.clear();
+export const draw = function (text: string, id: string, _version: string, diagObj: Diagram): void {
+
+  // First of all parse sankey language
+  // Everything that is parsed will be stored in diagObj.DB
+  // That is why we need to clear DB first
+  //
+  if (typeof (diagObj?.db?.clear) !== 'undefined') { // why do we need to check for undefined? typescript complains
+    diagObj?.db?.clear();
+  }
+  // Launch parsing
   diagObj.parser.parse(text);
+  log.debug('Parsed sankey diagram');
 
-  // const elem = doc.getElementById(id);
+  // Figure out what is happening there
+  // The main thing is svg object that is a wrapper from d3 for svg operations
+  //
+  const { securityLevel, sequence: conf } = configApi.getConfig();
+  let sandboxElement;
+  if (securityLevel === 'sandbox') {
+    sandboxElement = select('#i' + id);
+  }
+  const root =
+    securityLevel === 'sandbox'
+      ? d3select(sandboxElement.nodes()[0].contentDocument.body)
+      : d3select('body');
+  const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
+  const svg = securityLevel === 'sandbox' ? root.select(`[id="${id}"]`) : d3select(`[id="${id}"]`);
+
+  // Establish svg dimensions
+  //
+  const elem = doc.getElementById(id);
+  const width = elem.parentElement.offsetWidth;
+
+  const height = 600;
+  configureSvgSize(svg, height, width, true);
+
+  // Prepare data for construction
+  // This must be a mutable object with 2 properties:
+  // `nodes` and `links`
+  //
+  //    let graph = {
+  //      "nodes": [
+  //        { "id": "Alice" },
+  //        { "id": "Bob" },
+  //        { "id": "Carol" }
+  //      ],
+  //      "links": [
+  //        { "source": "Alice", "target": "Bob", "value": 23 },
+  //        { "source": "Bob", "target": "Carol", "value": 43 }
+  //      ]
+  //    };
+  // 
+  let graph = {
+    "nodes": [
+      { "id": "Alice" },
+      { "id": "Bob" },
+      { "id": "Carol" }
+    ],
+    "links": [
+      { "source": "Alice", "target": "Bob", "value": 23 },
+      { "source": "Bob", "target": "Carol", "value": 43 }
+    ]
+  };
+
+  // Construct and configure a Sankey generator
+  // That will be a functino that calculates nodes and links dimentions
+  //
+  const sankey = d3sankey()
+    .nodeId((d) => d.id) // we use 'id' property to identify node
+    .nodeWidth(36)
+    .nodePadding(290)
+    .size([width, height]);
+
+  // .nodeAlign(d3Sankey.sankeyLeft) // d3.sankeyLeft, etc.
+  // .nodeWidth(15)
+  //   .nodePadding(10)
+  //   .extent([[1, 5], [width - 1, height - 5]]);
+  // .nodeId(d => d['id'])
+  // 
+
+  // Compute the Sankey layout
+  // Namely calalculate nodes and links positions
+  // Our `graph` object will be mutated by this
+  //
+  sankey(graph);
 
   // debugger;
-  return 'TEST';
+
+  // const node = svg.append("g")
+  //   .selectAll("rect")
+  //   .data(graph.nodes)
+  //   .join("rect")
+  //   .attr("x", d => d.x0)
+  //   .attr("y", d => d.y0)
+  //   .attr("height", d => d.y1 - d.y0)
+  //   .attr("width", d => d.x1 - d.x0);
+  // // .attr("stroke", nodeStroke)
+  // // .attr("stroke-width", nodeStrokeWidth)
+  // // .attr("stroke-opacity", nodeStrokeOpacity)
+  // // .attr("stroke-linejoin", nodeStrokeLinejoin)
+
+  var color = d3scaleOrdinal(d3schemeTableau10);
+  // Creates the rects that represent the nodes.
+  const rect = svg.append("g")
+    .attr("stroke", "#000")
+    .selectAll("rect")
+    .data(graph.nodes)
+    .join("rect")
+    .attr("x", d => d.x0)
+    .attr("y", d => d.y0)
+    .attr("height", d => d.y1 - d.y0)
+    .attr("width", d => d.x1 - d.x0)
+    .attr("fill", d => color(d.node));
+
+
+  // // add in the links
+  // var link = svg.append("g")
+  //   .selectAll(".link")
+  //   .data(graph.links)
+  //   .enter()
+  //   .append("path")
+  //   .attr("class", "link")
+  //   .attr("d", sankeyLinkHorizontal())
+  //   .style("stroke-width", function (d) { return Math.max(1, d.dy); })
+  //   .sort(function (a, b) { return b.dy - a.dy; });
+
+  // // add in the nodes
+  // var node = svg.append("g")
+  //   .selectAll(".node")
+  //   .data(graph.nodes)
+  //   .enter().append("g")
+  //   .attr("class", "node")
+  //   .attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")"; })
+  //   // .call(d3.drag()
+  //   //   .subject(function(d) { return d; })
+  //   //   .on("start", function() { this.parentNode.appendChild(this); })
+  //   //   .on("drag", dragmove))
+  //   ;
+
+
+  // // add the rectangles for the nodes
+  // node
+  //   .append("rect")
+  //   .attr("height", function (d) { return d.dy; })
+  //   .attr("width", generator.nodeWidth())
+  //   .style("fill", function (d) { return d.color = color(d.name.replace(/ .*/, "")); })
+  //   .style("stroke", function (d) { return d3rgb(d.color).darker(2); })
+  //   // Add hover text
+  //   .append("title")
+  //   .text(function (d) { return d.name + "\n" + "There is " + d.value + " stuff in this node"; });
+
+
+  // // add in the title for the nodes
+  // node
+  //   .append("text")
+  //   .attr("x", -6)
+  //   .attr("y", function (d) { return d.dy / 2; })
+  //   .attr("dy", ".35em")
+  //   .attr("text-anchor", "end")
+  //   .attr("transform", null)
+  //   .text(function (d) { return d.name; })
+  //   .filter(function (d) { return d.x < width / 2; })
+  //   .attr("x", 6 + generator.nodeWidth())
+  //   .attr("text-anchor", "start");
+
+  // console.log();
+  // debugger;
+  // .layout(1);
+
+  // const { nodes, links } = generator({
+  //   nodes: graph.nodes,
+  //   links: graph.links,
+  // });
 };
 
 export default {
diff --git a/run b/run
index 9b02b0741..09f63cb82 100755
--- a/run
+++ b/run
@@ -10,23 +10,19 @@ args=${@:2}
 case $command in
 
 sh)
-$RUN mermaid sh $args
+$RUN --service-ports mermaid sh $args
 ;;
 
 i | install)
 $RUN mermaid sh -c "npx pnpm install $args"
 ;;
 
-test)
-$RUN mermaid sh -c "npx pnpm test $args"
+add)
+$RUN mermaid sh -c "npx pnpm -w add $args"
 ;;
 
-vitest)
-$RUN mermaid sh -c "npx pnpm vitest $args"
-;;
-
-e2e)
-$RUN mermaid sh -c "npx pnpm e2e $args"
+test | vitest | e2e )
+$RUN mermaid sh -c "npx pnpm $command $args"
 ;;
 
 lint)
@@ -46,6 +42,7 @@ Run commonly used commands within docker containers
 \033[1m$name install\033[0m         # Equvalent of pnpm install 
 \033[1m$name dev\033[0m             # Run dev server with examples, open http://localhost:9000
 
+$name add             # Add package, 'run add d3-sankey'
 $name lint            # Equvalent of pnpm -w run lint:fix
 $name test            # Run unit tests
 $name vitest          # Run watcher for unit tests

From 81542142f569c87efbb29abb96024c1dccfd5997 Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Sun, 18 Jun 2023 01:32:45 +0300
Subject: [PATCH 021/187] Fix errors

---
 packages/mermaid/src/config.type.ts           |  2 +-
 .../src/diagrams/sankey/sankeyRenderer.ts     | 55 ++++++++-----------
 pnpm-lock.yaml                                |  4 ++
 3 files changed, 28 insertions(+), 33 deletions(-)

diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts
index 3f3716928..f50a15d6b 100644
--- a/packages/mermaid/src/config.type.ts
+++ b/packages/mermaid/src/config.type.ts
@@ -412,7 +412,7 @@ export interface FlowchartDiagramConfig extends BaseDiagramConfig {
   wrappingWidth?: number;
 }
 
-export interface SankeyDiagramConfig extends BaseDiagramConfig {}
+export type SankeyDiagramConfig = BaseDiagramConfig;
 
 export interface FontConfig {
   fontSize?: string | number;
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
index 5d7fb2f64..8731dd5ce 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
@@ -9,10 +9,7 @@ import {
   // rgb as d3rgb,
   map as d3map,
 } from 'd3';
-import {
-  sankey as d3sankey,
-  sankeyLinkHorizontal
-} from 'd3-sankey';
+import { sankey as d3sankey, sankeyLinkHorizontal } from 'd3-sankey';
 import { configureSvgSize } from '../../setupGraphViewbox.js';
 import sankeyDB from './sankeyDB.js';
 
@@ -25,12 +22,12 @@ import sankeyDB from './sankeyDB.js';
  * @param diagObj - A standard diagram containing the db and the text and type etc of the diagram
  */
 export const draw = function (text: string, id: string, _version: string, diagObj: Diagram): void {
-
   // First of all parse sankey language
   // Everything that is parsed will be stored in diagObj.DB
   // That is why we need to clear DB first
   //
-  if (typeof (diagObj?.db?.clear) !== 'undefined') { // why do we need to check for undefined? typescript complains
+  if (diagObj?.db?.clear !== undefined) {
+    // why do we need to check for undefined? typescript complains
     diagObj?.db?.clear();
   }
   // Launch parsing
@@ -75,21 +72,17 @@ export const draw = function (text: string, id: string, _version: string, diagOb
   //        { "source": "Bob", "target": "Carol", "value": 43 }
   //      ]
   //    };
-  // 
-  let graph = {
-    "nodes": [
-      { "id": "Alice" },
-      { "id": "Bob" },
-      { "id": "Carol" }
+  //
+  const graph = {
+    nodes: [{ id: 'Alice' }, { id: 'Bob' }, { id: 'Carol' }],
+    links: [
+      { source: 'Alice', target: 'Bob', value: 23 },
+      { source: 'Bob', target: 'Carol', value: 43 },
     ],
-    "links": [
-      { "source": "Alice", "target": "Bob", "value": 23 },
-      { "source": "Bob", "target": "Carol", "value": 43 }
-    ]
   };
 
   // Construct and configure a Sankey generator
-  // That will be a functino that calculates nodes and links dimentions
+  // That will be a function that calculates nodes and links dimensions
   //
   const sankey = d3sankey()
     .nodeId((d) => d.id) // we use 'id' property to identify node
@@ -102,10 +95,10 @@ export const draw = function (text: string, id: string, _version: string, diagOb
   //   .nodePadding(10)
   //   .extent([[1, 5], [width - 1, height - 5]]);
   // .nodeId(d => d['id'])
-  // 
+  //
 
   // Compute the Sankey layout
-  // Namely calalculate nodes and links positions
+  // Namely calculate nodes and links positions
   // Our `graph` object will be mutated by this
   //
   sankey(graph);
@@ -125,19 +118,19 @@ export const draw = function (text: string, id: string, _version: string, diagOb
   // // .attr("stroke-opacity", nodeStrokeOpacity)
   // // .attr("stroke-linejoin", nodeStrokeLinejoin)
 
-  var color = d3scaleOrdinal(d3schemeTableau10);
+  const color = d3scaleOrdinal(d3schemeTableau10);
   // Creates the rects that represent the nodes.
-  const rect = svg.append("g")
-    .attr("stroke", "#000")
-    .selectAll("rect")
+  const rect = svg
+    .append('g')
+    .attr('stroke', '#000')
+    .selectAll('rect')
     .data(graph.nodes)
-    .join("rect")
-    .attr("x", d => d.x0)
-    .attr("y", d => d.y0)
-    .attr("height", d => d.y1 - d.y0)
-    .attr("width", d => d.x1 - d.x0)
-    .attr("fill", d => color(d.node));
-
+    .join('rect')
+    .attr('x', (d) => d.x0)
+    .attr('y', (d) => d.y0)
+    .attr('height', (d) => d.y1 - d.y0)
+    .attr('width', (d) => d.x1 - d.x0)
+    .attr('fill', (d) => color(d.node));
 
   // // add in the links
   // var link = svg.append("g")
@@ -163,7 +156,6 @@ export const draw = function (text: string, id: string, _version: string, diagOb
   //   //   .on("drag", dragmove))
   //   ;
 
-
   // // add the rectangles for the nodes
   // node
   //   .append("rect")
@@ -175,7 +167,6 @@ export const draw = function (text: string, id: string, _version: string, diagOb
   //   .append("title")
   //   .text(function (d) { return d.name + "\n" + "There is " + d.value + " stuff in this node"; });
 
-
   // // add in the title for the nodes
   // node
   //   .append("text")
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index da40c7d36..f02a51f09 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -15810,3 +15810,7 @@ packages:
   /zwitch@2.0.2:
     resolution: {integrity: sha512-JZxotl7SxAJH0j7dN4pxsTV6ZLXoLdGME+PsjkL/DaBrVryK9kTGq06GfKrwcSOqypP+fdXGoCHE36b99fWVoA==}
     dev: true
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false

From c41fc672545b9936d3d3e2e5472103c361464cd8 Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Sun, 18 Jun 2023 03:23:11 +0300
Subject: [PATCH 022/187] Added nodes and paths

---
 .../src/diagrams/sankey/sankeyRenderer.ts     | 132 ++++++++++++++----
 packages/mermaid/src/setupGraphViewbox.js     |   1 +
 2 files changed, 108 insertions(+), 25 deletions(-)

diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
index 8731dd5ce..6a184ef86 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
@@ -9,7 +9,7 @@ import {
   // rgb as d3rgb,
   map as d3map,
 } from 'd3';
-import { sankey as d3sankey, sankeyLinkHorizontal } from 'd3-sankey';
+import { sankey as d3Sankey, sankeyLinkHorizontal as d3SankeyLinkHorizontal } from 'd3-sankey';
 import { configureSvgSize } from '../../setupGraphViewbox.js';
 import sankeyDB from './sankeyDB.js';
 
@@ -35,7 +35,7 @@ export const draw = function (text: string, id: string, _version: string, diagOb
   log.debug('Parsed sankey diagram');
 
   // Figure out what is happening there
-  // The main thing is svg object that is a wrapper from d3 for svg operations
+  // The main thing is svg object that is a d3 wrapper for svg operations
   //
   const { securityLevel, sequence: conf } = configApi.getConfig();
   let sandboxElement;
@@ -49,13 +49,15 @@ export const draw = function (text: string, id: string, _version: string, diagOb
   const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
   const svg = securityLevel === 'sandbox' ? root.select(`[id="${id}"]`) : d3select(`[id="${id}"]`);
 
-  // Establish svg dimensions
+  // Establish svg dimensions and get width and height
   //
   const elem = doc.getElementById(id);
   const width = elem.parentElement.offsetWidth;
+  const height = 100; // TODO calculate height?
 
-  const height = 600;
+  // FIX: using max width prevents height from being set
   configureSvgSize(svg, height, width, true);
+  svg.attr('height', height); // that's why we need this line
 
   // Prepare data for construction
   // This must be a mutable object with 2 properties:
@@ -84,7 +86,7 @@ export const draw = function (text: string, id: string, _version: string, diagOb
   // Construct and configure a Sankey generator
   // That will be a function that calculates nodes and links dimensions
   //
-  const sankey = d3sankey()
+  const sankey = d3Sankey()
     .nodeId((d) => d.id) // we use 'id' property to identify node
     .nodeWidth(36)
     .nodePadding(290)
@@ -100,10 +102,10 @@ export const draw = function (text: string, id: string, _version: string, diagOb
   // Compute the Sankey layout
   // Namely calculate nodes and links positions
   // Our `graph` object will be mutated by this
+  // and enriched with some properties
   //
   sankey(graph);
 
-  // debugger;
 
   // const node = svg.append("g")
   //   .selectAll("rect")
@@ -118,30 +120,110 @@ export const draw = function (text: string, id: string, _version: string, diagOb
   // // .attr("stroke-opacity", nodeStrokeOpacity)
   // // .attr("stroke-linejoin", nodeStrokeLinejoin)
 
+  // Get color scheme for the graph
   const color = d3scaleOrdinal(d3schemeTableau10);
-  // Creates the rects that represent the nodes.
-  const rect = svg
-    .append('g')
-    .attr('stroke', '#000')
-    .selectAll('rect')
-    .data(graph.nodes)
-    .join('rect')
-    .attr('x', (d) => d.x0)
-    .attr('y', (d) => d.y0)
-    .attr('height', (d) => d.y1 - d.y0)
-    .attr('width', (d) => d.x1 - d.x0)
-    .attr('fill', (d) => color(d.node));
 
-  // // add in the links
-  // var link = svg.append("g")
+  // Creates the groups for nodes
+  svg
+    .append('g')
+      .attr('class', 'nodes')
+      .attr('stroke', '#000')
+    .selectAll('.node')
+    .data(graph.nodes)
+    .join('g')
+      .attr('class', 'node')
+      .attr("transform", function (d) { return "translate(" + d.x0 + "," + d.y0 + ")"; })
+      .attr('x', (d) => d.x0)
+      .attr('y', (d) => d.y0)
+      .append('rect')
+        .attr('height', (d) => {console.log(d); return (d.y1 - d.y0);})
+        .attr('width', (d) => d.x1 - d.x0)
+        .attr('fill', (d) => color(d.id));
+
+  // Create text for nodes
+  svg
+    .append("g")
+      .attr('class', 'node-labels')
+      .attr("font-family", "sans-serif")
+      .attr("font-size", 12)
+    .selectAll('text')
+    .data(graph.nodes)
+    .join('text')
+      .attr("x", d => d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6)
+      .attr("y", d => (d.y1 + d.y0) / 2)
+      .attr("dy", "0.35em")
+      .attr("text-anchor", d => d.x0 < width / 2 ? "start" : "end")
+      .text(d => d.id)
+
+  // Add links
+  // svg
+  //   .append("g")
   //   .selectAll(".link")
   //   .data(graph.links)
   //   .enter()
-  //   .append("path")
-  //   .attr("class", "link")
-  //   .attr("d", sankeyLinkHorizontal())
-  //   .style("stroke-width", function (d) { return Math.max(1, d.dy); })
-  //   .sort(function (a, b) { return b.dy - a.dy; });
+  //     .append("path")
+  //     .attr("class", "link")
+  //     .attr("d", sankeyLinkHorizontal())
+  //     .style("stroke-width", function (d) { return Math.max(1, d.dy); })
+  //     .sort(function (a, b) { return b.dy - a.dy; });
+
+  // Creates the paths that represent the links.
+  const link_g = svg.append("g")
+      .attr('class', 'links')
+      .attr("fill", "none")
+      .attr("stroke-opacity", 0.5)
+    .selectAll(".link")
+    .data(graph.links)
+    .join("g")
+      .attr('class', 'link')
+      .style("mix-blend-mode", "multiply");
+
+  link_g.append("path")
+    .attr("d", d3SankeyLinkHorizontal())
+    .attr("stroke", d => color(d.source.id))
+    .attr("stroke-width", d => Math.max(1, d.width));
+
+    // linkColor === "source-target" ? (d) => d.uid
+    // : linkColor === "source" ? (d) => color(d.source.category)
+    //   : linkColor === "target" ? (d) => color(d.target.category)
+    //     : linkColor
+
+    //   svg.append("g")
+    //   .attr("font-family", "sans-serif")
+    //   .attr("font-size", 10)
+    // .selectAll("text")
+    // .data(nodes)
+    // .join("text")
+    //   .attr("x", d => d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6)
+    //   .attr("y", d => (d.y1 + d.y0) / 2)
+    //   .attr("dy", "0.35em")
+    //   .attr("text-anchor", d => d.x0 < width / 2 ? "start" : "end")
+    //   .text(d => d.name);
+  
+    // Create links
+      // .attr("transform", null)
+    // .append("g")
+    //   .attr("font-family", "sans-serif")
+    //   .attr("font-size", 10)
+    // .selectAll("text")
+    // .data(nodes)
+    // .join("text")
+    //   .attr("x", d => d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6)
+    //   .attr("y", d => (d.y1 + d.y0) / 2)
+    //   .attr("dy", "0.35em")
+    //   .attr("text-anchor", d => d.x0 < width / 2 ? "start" : "end")
+    //   .text(d => d.name);
+  //   .attr("y", function (d) { return d.dy / 2; })
+  //   .attr("dy", ".35em")
+  //   .attr("text-anchor", "end")
+  //   .attr("transform", null)
+  //   .text(function (d) { return d.name; })
+  //   .filter(function (d) { return d.x < width / 2; })
+  //   .attr("x", 6 + generator.nodeWidth())
+  //   .attr("text-anchor", "start");
+ 
+  // .selectAll('rect')
+
 
   // // add in the nodes
   // var node = svg.append("g")
diff --git a/packages/mermaid/src/setupGraphViewbox.js b/packages/mermaid/src/setupGraphViewbox.js
index 0396d654f..9294f8024 100644
--- a/packages/mermaid/src/setupGraphViewbox.js
+++ b/packages/mermaid/src/setupGraphViewbox.js
@@ -25,6 +25,7 @@ export const calculateSvgSizeAttrs = function (height, width, useMaxWidth) {
   if (useMaxWidth) {
     attrs.set('width', '100%');
     attrs.set('style', `max-width: ${width}px;`);
+    // TODO: when using max width it does not set height? Is it intended?
   } else {
     attrs.set('height', height);
     attrs.set('width', width);

From f5add81e29114dc5dd2e88041da80ecef4db32b9 Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Sun, 18 Jun 2023 03:36:54 +0300
Subject: [PATCH 023/187] Simple flow is done

---
 .../src/diagrams/sankey/sankeyRenderer.ts     | 143 +++---------------
 1 file changed, 25 insertions(+), 118 deletions(-)

diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
index 6a184ef86..484eeab1a 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
@@ -7,9 +7,16 @@ import {
   scaleOrdinal as d3scaleOrdinal,
   schemeTableau10 as d3schemeTableau10,
   // rgb as d3rgb,
-  map as d3map,
+  // map as d3map,
 } from 'd3';
-import { sankey as d3Sankey, sankeyLinkHorizontal as d3SankeyLinkHorizontal } from 'd3-sankey';
+
+import {
+  sankey as d3Sankey,
+  sankeyLinkHorizontal as d3SankeyLinkHorizontal,
+  sankeyLeft as d3SankeyLeft,
+  sankeyRight as d3SankeyRight,
+  sankeyJustify as d3SankeyJustify,
+} from 'd3-sankey';
 import { configureSvgSize } from '../../setupGraphViewbox.js';
 import sankeyDB from './sankeyDB.js';
 
@@ -53,7 +60,7 @@ export const draw = function (text: string, id: string, _version: string, diagOb
   //
   const elem = doc.getElementById(id);
   const width = elem.parentElement.offsetWidth;
-  const height = 100; // TODO calculate height?
+  const height = 300; // TODO calculate height?
 
   // FIX: using max width prevents height from being set
   configureSvgSize(svg, height, width, true);
@@ -76,10 +83,18 @@ export const draw = function (text: string, id: string, _version: string, diagOb
   //    };
   //
   const graph = {
-    nodes: [{ id: 'Alice' }, { id: 'Bob' }, { id: 'Carol' }],
+    nodes: [
+      { id: 'Alice' },
+      { id: 'Bob' },
+      { id: 'Carol' },
+      { id: 'Andrew' },
+      { id: 'Peter' }
+    ],
     links: [
+      { source: 'Alice', target: 'Andrew', value: 11 },
       { source: 'Alice', target: 'Bob', value: 23 },
       { source: 'Bob', target: 'Carol', value: 43 },
+      { source: 'Peter', target: 'Carol', value: 15 },
     ],
   };
 
@@ -88,11 +103,12 @@ export const draw = function (text: string, id: string, _version: string, diagOb
   //
   const sankey = d3Sankey()
     .nodeId((d) => d.id) // we use 'id' property to identify node
-    .nodeWidth(36)
-    .nodePadding(290)
+    .nodeWidth(10)
+    .nodePadding(10)
+    .nodeAlign(d3SankeyJustify) // d3.sankeyLeft, etc.
     .size([width, height]);
-
-  // .nodeAlign(d3Sankey.sankeyLeft) // d3.sankeyLeft, etc.
+    
+    //["left", "sankeyLeft"], ["right", "sankeyRight"], ["center", "sankeyCenter"], ["justify", "sankeyJustify"]
   // .nodeWidth(15)
   //   .nodePadding(10)
   //   .extent([[1, 5], [width - 1, height - 5]]);
@@ -106,20 +122,6 @@ export const draw = function (text: string, id: string, _version: string, diagOb
   //
   sankey(graph);
 
-
-  // const node = svg.append("g")
-  //   .selectAll("rect")
-  //   .data(graph.nodes)
-  //   .join("rect")
-  //   .attr("x", d => d.x0)
-  //   .attr("y", d => d.y0)
-  //   .attr("height", d => d.y1 - d.y0)
-  //   .attr("width", d => d.x1 - d.x0);
-  // // .attr("stroke", nodeStroke)
-  // // .attr("stroke-width", nodeStrokeWidth)
-  // // .attr("stroke-opacity", nodeStrokeOpacity)
-  // // .attr("stroke-linejoin", nodeStrokeLinejoin)
-
   // Get color scheme for the graph
   const color = d3scaleOrdinal(d3schemeTableau10);
 
@@ -145,7 +147,7 @@ export const draw = function (text: string, id: string, _version: string, diagOb
     .append("g")
       .attr('class', 'node-labels')
       .attr("font-family", "sans-serif")
-      .attr("font-size", 12)
+      .attr("font-size", 14)
     .selectAll('text')
     .data(graph.nodes)
     .join('text')
@@ -155,18 +157,6 @@ export const draw = function (text: string, id: string, _version: string, diagOb
       .attr("text-anchor", d => d.x0 < width / 2 ? "start" : "end")
       .text(d => d.id)
 
-  // Add links
-  // svg
-  //   .append("g")
-  //   .selectAll(".link")
-  //   .data(graph.links)
-  //   .enter()
-  //     .append("path")
-  //     .attr("class", "link")
-  //     .attr("d", sankeyLinkHorizontal())
-  //     .style("stroke-width", function (d) { return Math.max(1, d.dy); })
-  //     .sort(function (a, b) { return b.dy - a.dy; });
-
   // Creates the paths that represent the links.
   const link_g = svg.append("g")
       .attr('class', 'links')
@@ -183,89 +173,6 @@ export const draw = function (text: string, id: string, _version: string, diagOb
     .attr("stroke", d => color(d.source.id))
     .attr("stroke-width", d => Math.max(1, d.width));
 
-    // linkColor === "source-target" ? (d) => d.uid
-    // : linkColor === "source" ? (d) => color(d.source.category)
-    //   : linkColor === "target" ? (d) => color(d.target.category)
-    //     : linkColor
-
-    //   svg.append("g")
-    //   .attr("font-family", "sans-serif")
-    //   .attr("font-size", 10)
-    // .selectAll("text")
-    // .data(nodes)
-    // .join("text")
-    //   .attr("x", d => d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6)
-    //   .attr("y", d => (d.y1 + d.y0) / 2)
-    //   .attr("dy", "0.35em")
-    //   .attr("text-anchor", d => d.x0 < width / 2 ? "start" : "end")
-    //   .text(d => d.name);
-  
-    // Create links
-      // .attr("transform", null)
-    // .append("g")
-    //   .attr("font-family", "sans-serif")
-    //   .attr("font-size", 10)
-    // .selectAll("text")
-    // .data(nodes)
-    // .join("text")
-    //   .attr("x", d => d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6)
-    //   .attr("y", d => (d.y1 + d.y0) / 2)
-    //   .attr("dy", "0.35em")
-    //   .attr("text-anchor", d => d.x0 < width / 2 ? "start" : "end")
-    //   .text(d => d.name);
-  //   .attr("y", function (d) { return d.dy / 2; })
-  //   .attr("dy", ".35em")
-  //   .attr("text-anchor", "end")
-  //   .attr("transform", null)
-  //   .text(function (d) { return d.name; })
-  //   .filter(function (d) { return d.x < width / 2; })
-  //   .attr("x", 6 + generator.nodeWidth())
-  //   .attr("text-anchor", "start");
- 
-  // .selectAll('rect')
-
-
-  // // add in the nodes
-  // var node = svg.append("g")
-  //   .selectAll(".node")
-  //   .data(graph.nodes)
-  //   .enter().append("g")
-  //   .attr("class", "node")
-  //   .attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")"; })
-  //   // .call(d3.drag()
-  //   //   .subject(function(d) { return d; })
-  //   //   .on("start", function() { this.parentNode.appendChild(this); })
-  //   //   .on("drag", dragmove))
-  //   ;
-
-  // // add the rectangles for the nodes
-  // node
-  //   .append("rect")
-  //   .attr("height", function (d) { return d.dy; })
-  //   .attr("width", generator.nodeWidth())
-  //   .style("fill", function (d) { return d.color = color(d.name.replace(/ .*/, "")); })
-  //   .style("stroke", function (d) { return d3rgb(d.color).darker(2); })
-  //   // Add hover text
-  //   .append("title")
-  //   .text(function (d) { return d.name + "\n" + "There is " + d.value + " stuff in this node"; });
-
-  // // add in the title for the nodes
-  // node
-  //   .append("text")
-  //   .attr("x", -6)
-  //   .attr("y", function (d) { return d.dy / 2; })
-  //   .attr("dy", ".35em")
-  //   .attr("text-anchor", "end")
-  //   .attr("transform", null)
-  //   .text(function (d) { return d.name; })
-  //   .filter(function (d) { return d.x < width / 2; })
-  //   .attr("x", 6 + generator.nodeWidth())
-  //   .attr("text-anchor", "start");
-
-  // console.log();
-  // debugger;
-  // .layout(1);
-
   // const { nodes, links } = generator({
   //   nodes: graph.nodes,
   //   links: graph.links,

From d22131e2fb373065379de8ca9837b2e9c51f42e0 Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Sun, 18 Jun 2023 04:33:20 +0300
Subject: [PATCH 024/187] It can read syntax and draw diagram

---
 .../mermaid/src/diagrams/sankey/sankeyDB.ts   | 35 ++++++------
 .../src/diagrams/sankey/sankeyRenderer.ts     | 53 +++++++++++++------
 2 files changed, 57 insertions(+), 31 deletions(-)

diff --git a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts
index 4f50fa4cc..23ef95528 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts
@@ -23,7 +23,7 @@ let links: Array<Link> = [];
 let nodes: Array<Node> = [];
 let nodesHash: Record<string, Node> = {};
 
-const clear = () => {
+const clear = function() {
   links = [];
   nodes = [];
   nodesHash = {};
@@ -32,20 +32,20 @@ const clear = () => {
 
 type Nullable<T> = T | null;
 
-interface ILink {
-  source?: Node;
-  target?: Node;
-  amount?: number;
-}
+// interface ILink {
+//   source?: Node;
+//   target?: Node;
+//   value?: number;
+// }
 
 class Link {
   source: Nullable<Node>;
   target: Nullable<Node>;
-  amount: Nullable<number>;
+  value: Nullable<number>;
   constructor() {
     this.source = null;
     this.target = null;
-    this.amount = 0;
+    this.value = 0;
   }
 }
 
@@ -54,20 +54,21 @@ class Link {
  *
  * @param source - Node where the link starts
  * @param target - Node where the link ends
- * @param amount - number, float or integer, describes the amount to be passed
+ * @param value - number, float or integer, describes the amount to be passed
  */
 // const addLink = ({ source, target, amount }: ILink = {}): Link => {
-const addLink = (source?: Node, target?: Node, amount?: number): Link => {
+const addLink = function(source?: Node, target?: Node, value?: number): Link {
   const link: Link = new Link();
 
+  // TODO: make attribute setters
   if (source !== undefined) {
     link.source = source;
   }
   if (target !== undefined) {
     link.target = target;
   }
-  if (amount !== undefined) {
-    link.amount = amount;
+  if (value !== undefined) {
+    link.value = value;
   }
 
   links.push(link);
@@ -89,7 +90,7 @@ class Node {
  *
  * @param id - The id Node
  */
-const addNode = (ID: string): Node => {
+const addNode = function(ID: string): Node {
   ID = common.sanitizeText(ID, configApi.getConfig());
   if (nodesHash[ID] === undefined) {
     nodesHash[ID] = new Node(ID);
@@ -100,10 +101,14 @@ const addNode = (ID: string): Node => {
   return node;
 };
 
+const getNodes = () => nodes;
+const getLinks = () => links;
+
 export default {
   nodesHash,
-  nodes,
-  links,
+  getConfig: () => configApi.getConfig().sankey,
+  getNodes,
+  getLinks,
   addLink,
   addNode,
   // TODO: If this is a must this probably should be an interface
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
index 484eeab1a..b0fac5c12 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
@@ -15,10 +15,13 @@ import {
   sankeyLinkHorizontal as d3SankeyLinkHorizontal,
   sankeyLeft as d3SankeyLeft,
   sankeyRight as d3SankeyRight,
+  sankeyCenter as d3SankeyCenter,
   sankeyJustify as d3SankeyJustify,
 } from 'd3-sankey';
 import { configureSvgSize } from '../../setupGraphViewbox.js';
 import sankeyDB from './sankeyDB.js';
+import { db } from '../info/infoDb.js';
+import { debug } from 'console';
 
 /**
  * Draws a sequenceDiagram in the tag with id: id based on the graph definition in text.
@@ -39,6 +42,7 @@ export const draw = function (text: string, id: string, _version: string, diagOb
   }
   // Launch parsing
   diagObj.parser.parse(text);
+  debugger;
   log.debug('Parsed sankey diagram');
 
   // Figure out what is happening there
@@ -66,7 +70,7 @@ export const draw = function (text: string, id: string, _version: string, diagOb
   configureSvgSize(svg, height, width, true);
   svg.attr('height', height); // that's why we need this line
 
-  // Prepare data for construction
+  // Prepare data for construction based on diagObj.db
   // This must be a mutable object with 2 properties:
   // `nodes` and `links`
   //
@@ -82,21 +86,36 @@ export const draw = function (text: string, id: string, _version: string, diagOb
   //      ]
   //    };
   //
-  const graph = {
-    nodes: [
-      { id: 'Alice' },
-      { id: 'Bob' },
-      { id: 'Carol' },
-      { id: 'Andrew' },
-      { id: 'Peter' }
-    ],
-    links: [
-      { source: 'Alice', target: 'Andrew', value: 11 },
-      { source: 'Alice', target: 'Bob', value: 23 },
-      { source: 'Bob', target: 'Carol', value: 43 },
-      { source: 'Peter', target: 'Carol', value: 15 },
-    ],
-  };
+  let graph = {
+    nodes: [],
+    links: []
+  }
+
+  diagObj.db.getNodes().forEach(node => {
+    graph.nodes.push({id: node.ID});
+  });
+
+  diagObj.db.getLinks().forEach(link => {
+    graph.links.push({source: link.source.ID, target: link.target.ID, value: link.value});
+  });
+
+
+  debugger;
+  // const graph = {
+  //   nodes: [
+  //     { id: 'Alice' },
+  //     { id: 'Bob' },
+  //     { id: 'Carol' },
+  //     { id: 'Andrew' },
+  //     { id: 'Peter' }
+  //   ],
+  //   links: [
+  //     { source: 'Alice', target: 'Andrew', value: 11 },
+  //     { source: 'Alice', target: 'Bob', value: 23 },
+  //     { source: 'Bob', target: 'Carol', value: 43 },
+  //     { source: 'Peter', target: 'Carol', value: 15 },
+  //   ],
+  // };
 
   // Construct and configure a Sankey generator
   // That will be a function that calculates nodes and links dimensions
@@ -107,6 +126,8 @@ export const draw = function (text: string, id: string, _version: string, diagOb
     .nodePadding(10)
     .nodeAlign(d3SankeyJustify) // d3.sankeyLeft, etc.
     .size([width, height]);
+    // .extent([[5, 20], [width - 5, height - 20]]); alias for size
+    // paddings
     
     //["left", "sankeyLeft"], ["right", "sankeyRight"], ["center", "sankeyCenter"], ["justify", "sankeyJustify"]
   // .nodeWidth(15)

From 19f858b73b9baf093e53fbd9bc1e3961deb89dad Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Sun, 18 Jun 2023 23:53:57 +0300
Subject: [PATCH 025/187] Fixed nodes duplicates

---
 demos/sankey.html                                      | 10 ++++++----
 packages/mermaid/src/diagrams/sankey/sankeyDB.ts       | 10 ++++++----
 packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts |  1 -
 3 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/demos/sankey.html b/demos/sankey.html
index b06ead15e..ebacae649 100644
--- a/demos/sankey.html
+++ b/demos/sankey.html
@@ -17,10 +17,12 @@
     <h2>Simple flow</h2>
     <pre class="mermaid">
       sankey
-      node_a->10->node_b;
-      node_c->20->node_b;
-      node_b->15->node_d;
-      node_a-> 7->node_d;
+      a->28->b->10->c
+      a->11->b
+      k->18->b->35->d->13->e->43->dd11
+      d->5->e
+      d->10->c
+      k->25->e
     </pre>
     <script type="module">
       import mermaid from './mermaid.esm.mjs';
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts
index 23ef95528..8c20a465d 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts
@@ -92,12 +92,14 @@ class Node {
  */
 const addNode = function(ID: string): Node {
   ID = common.sanitizeText(ID, configApi.getConfig());
+  let node: Node;
   if (nodesHash[ID] === undefined) {
-    nodesHash[ID] = new Node(ID);
+    node = new Node(ID);
+    nodesHash[ID] = node;
+    nodes.push(node);
+  } else {
+    node = nodesHash[ID];
   }
-  const node = nodesHash[ID];
-  nodes.push(node);
-  // debugger;
   return node;
 };
 
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
index b0fac5c12..54b129098 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
@@ -99,7 +99,6 @@ export const draw = function (text: string, id: string, _version: string, diagOb
     graph.links.push({source: link.source.ID, target: link.target.ID, value: link.value});
   });
 
-
   debugger;
   // const graph = {
   //   nodes: [

From 9dbb9872bc1db18a53d4244755da6d0bcb13f964 Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Mon, 19 Jun 2023 01:02:45 +0300
Subject: [PATCH 026/187] Fix linters

---
 demos/sankey.html                             | 61 +++++++++---------
 .../src/diagrams/sankey/sankeyRenderer.ts     | 64 +++++++++----------
 2 files changed, 64 insertions(+), 61 deletions(-)

diff --git a/demos/sankey.html b/demos/sankey.html
index ebacae649..2cf778206 100644
--- a/demos/sankey.html
+++ b/demos/sankey.html
@@ -1,21 +1,23 @@
 <!DOCTYPE html>
 <html lang="en" xmlns="http://www.w3.org/1999/html">
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <title>States Mermaid Quick Test Page</title>
-    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
-    <style>
-      div.mermaid {
-        /* font-family: 'trebuchet ms', verdana, arial; */
-        font-family: 'Courier New', Courier, monospace !important;
-      }
-    </style>
-  </head>
-  <body>
-    <h1>Sankey diagram demos</h1>
-    <h2>Simple flow</h2>
-    <pre class="mermaid">
+
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <title>States Mermaid Quick Test Page</title>
+  <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
+  <style>
+    div.mermaid {
+      /* font-family: 'trebuchet ms', verdana, arial; */
+      font-family: 'Courier New', Courier, monospace !important;
+    }
+  </style>
+</head>
+
+<body>
+  <h1>Sankey diagram demos</h1>
+  <h2>Simple flow</h2>
+  <pre class="mermaid">
       sankey
       a->28->b->10->c
       a->11->b
@@ -24,16 +26,17 @@
       d->10->c
       k->25->e
     </pre>
-    <script type="module">
-      import mermaid from './mermaid.esm.mjs';
-      mermaid.initialize({
-        theme: 'default',
-        logLevel: 3,
-        securityLevel: 'loose',
-        flowchart: { curve: 'basis' },
-        gantt: { axisFormat: '%m/%d/%Y' },
-        sequence: { actorMargin: 50 },
-      });
-    </script>
-  </body>
-</html>
+  <script type="module">
+    import mermaid from './mermaid.esm.mjs';
+    mermaid.initialize({
+      theme: 'default',
+      logLevel: 3,
+      securityLevel: 'loose',
+      flowchart: { curve: 'basis' },
+      gantt: { axisFormat: '%m/%d/%Y' },
+      sequence: { actorMargin: 50 },
+    });
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
index 54b129098..06a33980b 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
@@ -42,7 +42,7 @@ export const draw = function (text: string, id: string, _version: string, diagOb
   }
   // Launch parsing
   diagObj.parser.parse(text);
-  debugger;
+  // debugger;
   log.debug('Parsed sankey diagram');
 
   // Figure out what is happening there
@@ -86,20 +86,20 @@ export const draw = function (text: string, id: string, _version: string, diagOb
   //      ]
   //    };
   //
-  let graph = {
+  const graph = {
     nodes: [],
     links: []
   }
 
   diagObj.db.getNodes().forEach(node => {
-    graph.nodes.push({id: node.ID});
+    graph.nodes.push({ id: node.ID });
   });
 
   diagObj.db.getLinks().forEach(link => {
-    graph.links.push({source: link.source.ID, target: link.target.ID, value: link.value});
+    graph.links.push({ source: link.source.ID, target: link.target.ID, value: link.value });
   });
 
-  debugger;
+  // debugger;
   // const graph = {
   //   nodes: [
   //     { id: 'Alice' },
@@ -125,10 +125,10 @@ export const draw = function (text: string, id: string, _version: string, diagOb
     .nodePadding(10)
     .nodeAlign(d3SankeyJustify) // d3.sankeyLeft, etc.
     .size([width, height]);
-    // .extent([[5, 20], [width - 5, height - 20]]); alias for size
-    // paddings
-    
-    //["left", "sankeyLeft"], ["right", "sankeyRight"], ["center", "sankeyCenter"], ["justify", "sankeyJustify"]
+  // .extent([[5, 20], [width - 5, height - 20]]); alias for size
+  // paddings
+
+  //["left", "sankeyLeft"], ["right", "sankeyRight"], ["center", "sankeyCenter"], ["justify", "sankeyJustify"]
   // .nodeWidth(15)
   //   .nodePadding(10)
   //   .extent([[1, 5], [width - 1, height - 5]]);
@@ -148,45 +148,45 @@ export const draw = function (text: string, id: string, _version: string, diagOb
   // Creates the groups for nodes
   svg
     .append('g')
-      .attr('class', 'nodes')
-      .attr('stroke', '#000')
+    .attr('class', 'nodes')
+    .attr('stroke', '#000')
     .selectAll('.node')
     .data(graph.nodes)
     .join('g')
-      .attr('class', 'node')
-      .attr("transform", function (d) { return "translate(" + d.x0 + "," + d.y0 + ")"; })
-      .attr('x', (d) => d.x0)
-      .attr('y', (d) => d.y0)
-      .append('rect')
-        .attr('height', (d) => {console.log(d); return (d.y1 - d.y0);})
-        .attr('width', (d) => d.x1 - d.x0)
-        .attr('fill', (d) => color(d.id));
+    .attr('class', 'node')
+    .attr("transform", function (d) { return "translate(" + d.x0 + "," + d.y0 + ")"; })
+    .attr('x', (d) => d.x0)
+    .attr('y', (d) => d.y0)
+    .append('rect')
+    .attr('height', (d) => { console.log(d); return (d.y1 - d.y0); })
+    .attr('width', (d) => d.x1 - d.x0)
+    .attr('fill', (d) => color(d.id));
 
   // Create text for nodes
   svg
     .append("g")
-      .attr('class', 'node-labels')
-      .attr("font-family", "sans-serif")
-      .attr("font-size", 14)
+    .attr('class', 'node-labels')
+    .attr("font-family", "sans-serif")
+    .attr("font-size", 14)
     .selectAll('text')
     .data(graph.nodes)
     .join('text')
-      .attr("x", d => d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6)
-      .attr("y", d => (d.y1 + d.y0) / 2)
-      .attr("dy", "0.35em")
-      .attr("text-anchor", d => d.x0 < width / 2 ? "start" : "end")
-      .text(d => d.id)
+    .attr("x", d => d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6)
+    .attr("y", d => (d.y1 + d.y0) / 2)
+    .attr("dy", "0.35em")
+    .attr("text-anchor", d => d.x0 < width / 2 ? "start" : "end")
+    .text(d => d.id)
 
   // Creates the paths that represent the links.
   const link_g = svg.append("g")
-      .attr('class', 'links')
-      .attr("fill", "none")
-      .attr("stroke-opacity", 0.5)
+    .attr('class', 'links')
+    .attr("fill", "none")
+    .attr("stroke-opacity", 0.5)
     .selectAll(".link")
     .data(graph.links)
     .join("g")
-      .attr('class', 'link')
-      .style("mix-blend-mode", "multiply");
+    .attr('class', 'link')
+    .style("mix-blend-mode", "multiply");
 
   link_g.append("path")
     .attr("d", d3SankeyLinkHorizontal())

From 726efdad5346c7969f683de0490f0050b0e2a9a0 Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Mon, 19 Jun 2023 01:09:21 +0300
Subject: [PATCH 027/187] Fixed packaged

---
 package.json   |  6 +-----
 pnpm-lock.yaml | 34 ++++++++++++++++++++++++++++++----
 2 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index 6a291f0d6..785f8056c 100644
--- a/package.json
+++ b/package.json
@@ -85,12 +85,8 @@
     "coveralls": "^3.1.1",
     "cypress": "^12.10.0",
     "cypress-image-snapshot": "^4.0.1",
-<<<<<<< HEAD
-    "esbuild": "^0.18.0",
-=======
     "d3-sankey": "^0.12.3",
-    "esbuild": "^0.17.18",
->>>>>>> 84c278d0 (At last something is working)
+    "esbuild": "^0.18.0",
     "eslint": "^8.39.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-cypress": "^2.13.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f02a51f09..365f1bc5c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,9 +1,5 @@
 lockfileVersion: '6.0'
 
-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false
-
 importers:
 
   .:
@@ -86,6 +82,9 @@ importers:
       cypress-image-snapshot:
         specifier: ^4.0.1
         version: 4.0.1(cypress@12.10.0)(jest@29.5.0)
+      d3-sankey:
+        specifier: ^0.12.3
+        version: 0.12.3
       esbuild:
         specifier: ^0.18.0
         version: 0.18.0
@@ -7046,6 +7045,12 @@ packages:
       lodash: 4.17.21
     dev: false
 
+  /d3-array@2.12.1:
+    resolution: {integrity: sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==}
+    dependencies:
+      internmap: 1.0.1
+    dev: true
+
   /d3-array@3.2.0:
     resolution: {integrity: sha512-3yXFQo0oG3QCxbF06rMPFyGRMGJNS7NvsV1+2joOjbBE+9xvWQ8+GcMJAjRCzw06zQ3/arXeJgbPYcjUCuC+3g==}
     engines: {node: '>=12'}
@@ -7163,6 +7168,10 @@ packages:
       d3-color: 3.1.0
     dev: false
 
+  /d3-path@1.0.9:
+    resolution: {integrity: sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==}
+    dev: true
+
   /d3-path@3.0.1:
     resolution: {integrity: sha512-gq6gZom9AFZby0YLduxT1qmrp4xpBA1YZr19OI717WIdKE2OM5ETq5qrHLb301IgxhLwcuxvGZVLeeWc/k1I6w==}
     engines: {node: '>=12'}
@@ -7183,6 +7192,13 @@ packages:
     engines: {node: '>=12'}
     dev: false
 
+  /d3-sankey@0.12.3:
+    resolution: {integrity: sha512-nQhsBRmM19Ax5xEIPLMY9ZmJ/cDvd1BG3UVvt5h3WRxKg5zGRbvnteTyWAbzeSvlh3tW7ZEmq4VwR5mB3tutmQ==}
+    dependencies:
+      d3-array: 2.12.1
+      d3-shape: 1.3.7
+    dev: true
+
   /d3-scale-chromatic@3.0.0:
     resolution: {integrity: sha512-Lx9thtxAKrO2Pq6OO2Ua474opeziKr279P/TKZsMAhYyNDD3EnCffdbgeSYN5O7m2ByQsxtuP2CSDczNUIZ22g==}
     engines: {node: '>=12'}
@@ -7207,6 +7223,12 @@ packages:
     engines: {node: '>=12'}
     dev: false
 
+  /d3-shape@1.3.7:
+    resolution: {integrity: sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==}
+    dependencies:
+      d3-path: 1.0.9
+    dev: true
+
   /d3-shape@3.1.0:
     resolution: {integrity: sha512-tGDh1Muf8kWjEDT/LswZJ8WF85yDZLvVJpYU9Nq+8+yW1Z5enxrmXOhTArlkaElU+CTn0OTVNli+/i+HP45QEQ==}
     engines: {node: '>=12'}
@@ -9442,6 +9464,10 @@ packages:
       side-channel: 1.0.4
     dev: true
 
+  /internmap@1.0.1:
+    resolution: {integrity: sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==}
+    dev: true
+
   /internmap@2.0.3:
     resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
     engines: {node: '>=12'}

From 6722ac754082d3ba77bbe7d9be23a6e0c70ce2d7 Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Mon, 19 Jun 2023 03:45:24 +0300
Subject: [PATCH 028/187] Multiple improvements on syntax

Syntax has been simplified
Removed extra initial states
Removed unused groups
Nodes can be wrapped in double qotes
Updated demo page
---
 demos/sankey.html                             | 95 +++++++++++++++++--
 .../src/diagrams/sankey/parser/sankey.jison   | 66 ++++++-------
 .../src/diagrams/sankey/parser/sankey.spec.js | 93 +++++++++++++++++-
 .../mermaid/src/diagrams/sankey/sankeyDB.ts   |  4 +-
 .../src/diagrams/sankey/sankeyRenderer.ts     | 12 +--
 5 files changed, 214 insertions(+), 56 deletions(-)

diff --git a/demos/sankey.html b/demos/sankey.html
index 2cf778206..c35b907d2 100644
--- a/demos/sankey.html
+++ b/demos/sankey.html
@@ -16,16 +16,93 @@
 
 <body>
   <h1>Sankey diagram demos</h1>
-  <h2>Simple flow</h2>
+  <h2>Simple example</h2>
   <pre class="mermaid">
-      sankey
-      a->28->b->10->c
-      a->11->b
-      k->18->b->35->d->13->e->43->dd11
-      d->5->e
-      d->10->c
-      k->25->e
-    </pre>
+    sankey
+
+    node[title="hello, how are you?"]
+    node[title="hello, mister Sankey"]
+
+    First -> 30 -> Second
+    First -> 10 -> Third 
+    Second -> 20 -> Third
+  </pre>
+  <!-- node[title="hello, mister "sankey", backslash for you "] -->
+
+  <h2>Energy flow</h2>
+  <pre class="mermaid">
+    sankey
+
+    "Agricultural 'waste'"      ->      124.729  -> "Bio-conversion"
+    "Bio-conversion"            ->      0.597    -> "Liquid"
+    "Bio-conversion"            ->      26.862   -> "Losses"
+    "Bio-conversion"            ->      280.322  -> "Solid"
+    "Bio-conversion"            ->      81.144   -> "Gas"
+    "Biofuel imports"           ->      35       -> "Liquid"
+    "Biomass imports"           ->      35       -> "Solid"
+    "Coal imports"              ->      11.606   -> "Coal"
+    "Coal reserves"             ->      63.965   -> "Coal"
+    "Coal"                      ->      75.571   -> "Solid"
+    "District heating"          ->      10.639   -> "Industry"
+    "District heating"          ->      22.505   -> "Heating and cooling - commercial"
+    "District heating"          ->      46.184   -> "Heating and cooling - homes"
+    "Electricity grid"          ->      104.453  -> "Over generation / exports"
+    "Electricity grid"          ->      113.726  -> "Heating and cooling - homes"
+    "Electricity grid"          ->      27.14    -> "H2 conversion"
+    "Electricity grid"          ->      342.165  -> "Industry"
+    "Electricity grid"          ->      37.797   -> "Road transport"
+    "Electricity grid"          ->      4.412    -> "Agriculture"
+    "Electricity grid"          ->      40.858   -> "Heating and cooling - commercial"
+    "Electricity grid"          ->      56.691   -> "Losses"
+    "Electricity grid"          ->      7.863    -> "Rail transport"
+    "Electricity grid"          ->      90.008   -> "Lighting & appliances - commercial"
+    "Electricity grid"          ->      93.494   -> "Lighting & appliances - homes"
+    "Gas imports"               ->      40.719   -> "Ngas"
+    "Gas reserves"              ->      82.233   -> "Ngas"
+    "Gas"                       ->      0.129    -> "Heating and cooling - commercial"
+    "Gas"                       ->      1.401    -> "Losses"
+    "Gas"                       ->      151.891  -> "Thermal generation"
+    "Gas"                       ->      2.096    -> "Agriculture"
+    "Gas"                       ->      48.58    -> "Industry"
+    "Geothermal"                ->      7.013    -> "Electricity grid"
+    "H2 conversion"             ->      20.897   -> "H2"
+    "H2 conversion"             ->      6.242    -> "Losses"
+    "H2"                        ->      20.897   -> "Road transport"
+    "Hydro"                     ->      6.995    -> "Electricity grid"
+    "Liquid"                    ->      121.066  -> "Industry"
+    "Liquid"                    ->      128.69   -> "International shipping"
+    "Liquid"                    ->      135.835  -> "Road transport"
+    "Liquid"                    ->      14.458   -> "Domestic aviation"
+    "Liquid"                    ->      206.267  -> "International aviation"
+    "Liquid"                    ->      3.64     -> "Agriculture"
+    "Liquid"                    ->      33.218   -> "National navigation"
+    "Liquid"                    ->      4.413    -> "Rail transport"
+    "Marine algae"              ->      4.375    -> "Bio-conversion"
+    "Ngas"                      ->      122.952  -> "Gas"
+    "Nuclear"                   ->      839.978  -> "Thermal generation"
+    "Oil imports"               ->      504.287  -> "Oil"
+    "Oil reserves"              ->      107.703  -> "Oil"
+    "Oil"                       ->      611.99   -> "Liquid"
+    "Other waste"               ->      56.587   -> "Solid"
+    "Other waste"               ->      77.81    -> "Bio-conversion"
+    "Pumped heat"               ->      193.026  -> "Heating and cooling - homes"
+    "Pumped heat"               ->      70.672   -> "Heating and cooling - commercial"
+    "Solar PV"                  ->      59.901   -> "Electricity grid"
+    "Solar Thermal"             ->      19.263   -> "Heating and cooling - homes"
+    "Solar"                     ->      19.263   -> "Solar Thermal"
+    "Solar"                     ->      59.901   -> "Solar PV"
+    "Solid"                     ->      0.882    -> "Agriculture"
+    "Solid"                     ->      400.12   -> "Thermal generation"
+    "Solid"                     ->      46.477   -> "Industry"
+    "Thermal generation"        ->      525.531  -> "Electricity grid"
+    "Thermal generation"        ->      787.129  -> "Losses"
+    "Thermal generation"        ->      79.329   -> "District heating"
+    "Tidal"                     ->      9.452    -> "Electricity grid"
+    "UK land based bioenergy"   ->      182.01   -> "Bio-conversion"
+    "Wave"                      ->      19.013   -> "Electricity grid"
+    "Wind"                      ->      289.366  -> "Electricity grid"
+  </pre>
+
   <script type="module">
     import mermaid from './mermaid.esm.mjs';
     mermaid.initialize({
diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
index 231c3fd50..8f970b815 100644
--- a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
+++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
@@ -4,38 +4,36 @@
 %options case-insensitive
 %options easy_keyword_rules
 
-%s group
 // when we are inside [] section we are defining attrubutes
 %x attributes
-// after attr= we are expecting a value without quotes
-%x value      
 // or if we use "" we are expecting a string containing value
-%x string    
+%x string
+%x value
 
 %%
-"sankey"                         { return 'SANKEY'; }
-\d+                              { return 'AMOUNT'; }
-"->"                             { return 'ARROW'; }
-\w+                              { return 'NODE'; }
-(?:<<EOF>>|[\n;])+               { return 'EOS'; } // end of statement is ; \n or end of file
-\s+                                                // skip all whitespace
-"{"                              { this.pushState('group'); return 'OPEN_GROUP'; }
-<group>"}"                       { this.popState(); return 'CLOSE_GROUP'; }
-"["                              { this.pushState('attributes'); return 'OPEN_ATTRIBUTES'; }
-<attributes>"]"                  { this.popState(); return 'CLOSE_ATTRIBUTES'; }
-<attributes>\w+                  { return 'ATTRIBUTE'; }
-<attributes>(?=\=s*)[\s\w]       { return 'VALUE';}
-<attributes>\=                   { this.pushState('value'); return 'EQUAL'; }
-<attributes>\s+                   // skip all whitespace
-<value>[\w]+                     { this.popState(); return 'VALUE';}
-<value>\s+                       //skip
-<value>\"                        { this.pushState('string'); return 'OPEN_STRING'; }
-<string>(?!\\)\" {
-	if(this.topState()==='string') this.popState();
-	if(this.topState()==='value') this.popState();
-	return 'CLOSE_STRING';
-}
-<string>([^"\\]|\\\")+           { return 'STRING'; }
+// skip all whitespace EXCEPT newlines, but not within a string
+<INITIAL,attributes,value>[^\S\r\n]+ {}
+
+// main
+"sankey"                              { return 'SANKEY'; }
+\d+(.\d+)?                            { return 'AMOUNT'; }
+"->"                                  { return 'ARROW'; }
+\w+                                   { return 'NODE'; }
+(?:<<EOF>>|[\n;])+                    { return 'EOS'; } // end of statement is semicolon ; new line \n or end of file
+// attributes
+"["                                   { this.pushState('attributes'); return 'OPEN_ATTRIBUTES'; }
+<attributes>"]"                       { this.popState(); return 'CLOSE_ATTRIBUTES'; }
+<attributes>\w+                       { return 'ATTRIBUTE'; }
+<attributes>\=                        { this.pushState('value'); return 'EQUAL'; }
+<value>\w+                            { this.popState(); return 'VALUE'; }
+// strings
+<INITIAL,attributes,value>\"          { this.pushState('string'); return 'OPEN_STRING'; }
+<string>(?!\\)\"                      {
+																			  if(this.topState()==='string') this.popState();
+																			  if(this.topState()==='value') this.popState();
+																				return 'CLOSE_STRING';
+																			}
+<string>([^"\\]|\\\"|\\\\)+           { return 'STRING'; }
 
 /lex
 
@@ -79,14 +77,8 @@ tail
 	| node { $$ = $node; }
 	;
 
-node: NODE { $$ = yy.addNode($NODE); };
+node
+	: NODE { $$ = yy.addNode($NODE); }
+	| OPEN_STRING STRING[title] CLOSE_STRING { $$ = yy.addNode($title); /* TODO: add title and id separately?*/ }
+	;
 
-// : NODE exhaust intake exhaust_chain optional_attributes EOS
-// exhaust_chain: ARROW AMOUNT intake_chain | ;
-// intake_chain: ARROW NODE exhaust_chain | ;
-
-// exhaust: ARROW AMOUNT;
-// intake: ARROW NODE;
-
-// node_chain_amount: NODE ARROW amount_node_chain | NODE;
-// amount_node_chain: AMOUNT ARROW node_chain_amount | AMOUNT;
diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js
index ee52efefc..3bc40e151 100644
--- a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js
+++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js
@@ -38,11 +38,23 @@ describe('Sankey diagram', function () {
       parser.parse(str);
     });
 
+    it('parses node as a string', () => {
+      const str = `
+      sankey
+      "node a" -> 30 -> "node b" -> 12 -> "node e"
+      "node c" -> 30 -> "node d" -> 12 -> "node e"
+      "node c" -> 40 -> "node e" -> 12 -> "node q"
+      `;
+
+      parser.parse(str);
+    });
+
     describe('while attributes parsing', () => {
       it('parses different quotless variations', () => {
         const str = `
         sankey
         node[]
+
         node[attr=1]
         node_a -> 30 -> node_b
         node[attrWithoutValue]
@@ -57,12 +69,89 @@ describe('Sankey diagram', function () {
       it('parses strings as values', () => {
         const str = `
         sankey
-        node[attr="hello, how are you?"]
-        node[attr="hello\\"afaasd"]
+        node[title="hello, how are you?"]
+        node[title="hello, mister \\"sankey\\", backslash for you \\\\"]
         `;
 
         parser.parse(str);
       });
+
+      it('parses truly complex example', () => {
+        const str = `
+        sankey
+
+        "Agricultural 'waste'"      ->      124.729  -> "Bio-conversion"
+        "Bio-conversion"            ->      0.597    -> "Liquid"
+        "Bio-conversion"            ->      26.862   -> "Losses"
+        "Bio-conversion"            ->      280.322  -> "Solid"
+        "Bio-conversion"            ->      81.144   -> "Gas"
+        "Biofuel imports"           ->      35       -> "Liquid"
+        "Biomass imports"           ->      35       -> "Solid"
+        "Coal imports"              ->      11.606   -> "Coal"
+        "Coal reserves"             ->      63.965   -> "Coal"
+        "Coal"                      ->      75.571   -> "Solid"
+        "District heating"          ->      10.639   -> "Industry"
+        "District heating"          ->      22.505   -> "Heating and cooling - commercial"
+        "District heating"          ->      46.184   -> "Heating and cooling - homes"
+        "Electricity grid"          ->      104.453  -> "Over generation / exports"
+        "Electricity grid"          ->      113.726  -> "Heating and cooling - homes"
+        "Electricity grid"          ->      27.14    -> "H2 conversion"
+        "Electricity grid"          ->      342.165  -> "Industry"
+        "Electricity grid"          ->      37.797   -> "Road transport"
+        "Electricity grid"          ->      4.412    -> "Agriculture"
+        "Electricity grid"          ->      40.858   -> "Heating and cooling - commercial"
+        "Electricity grid"          ->      56.691   -> "Losses"
+        "Electricity grid"          ->      7.863    -> "Rail transport"
+        "Electricity grid"          ->      90.008   -> "Lighting & appliances - commercial"
+        "Electricity grid"          ->      93.494   -> "Lighting & appliances - homes"
+        "Gas imports"               ->      40.719   -> "Ngas"
+        "Gas reserves"              ->      82.233   -> "Ngas"
+        "Gas"                       ->      0.129    -> "Heating and cooling - commercial"
+        "Gas"                       ->      1.401    -> "Losses"
+        "Gas"                       ->      151.891  -> "Thermal generation"
+        "Gas"                       ->      2.096    -> "Agriculture"
+        "Gas"                       ->      48.58    -> "Industry"
+        "Geothermal"                ->      7.013    -> "Electricity grid"
+        "H2 conversion"             ->      20.897   -> "H2"
+        "H2 conversion"             ->      6.242    -> "Losses"
+        "H2"                        ->      20.897   -> "Road transport"
+        "Hydro"                     ->      6.995    -> "Electricity grid"
+        "Liquid"                    ->      121.066  -> "Industry"
+        "Liquid"                    ->      128.69   -> "International shipping"
+        "Liquid"                    ->      135.835  -> "Road transport"
+        "Liquid"                    ->      14.458   -> "Domestic aviation"
+        "Liquid"                    ->      206.267  -> "International aviation"
+        "Liquid"                    ->      3.64     -> "Agriculture"
+        "Liquid"                    ->      33.218   -> "National navigation"
+        "Liquid"                    ->      4.413    -> "Rail transport"
+        "Marine algae"              ->      4.375    -> "Bio-conversion"
+        "Ngas"                      ->      122.952  -> "Gas"
+        "Nuclear"                   ->      839.978  -> "Thermal generation"
+        "Oil imports"               ->      504.287  -> "Oil"
+        "Oil reserves"              ->      107.703  -> "Oil"
+        "Oil"                       ->      611.99   -> "Liquid"
+        "Other waste"               ->      56.587   -> "Solid"
+        "Other waste"               ->      77.81    -> "Bio-conversion"
+        "Pumped heat"               ->      193.026  -> "Heating and cooling - homes"
+        "Pumped heat"               ->      70.672   -> "Heating and cooling - commercial"
+        "Solar PV"                  ->      59.901   -> "Electricity grid"
+        "Solar Thermal"             ->      19.263   -> "Heating and cooling - homes"
+        "Solar"                     ->      19.263   -> "Solar Thermal"
+        "Solar"                     ->      59.901   -> "Solar PV"
+        "Solid"                     ->      0.882    -> "Agriculture"
+        "Solid"                     ->      400.12   -> "Thermal generation"
+        "Solid"                     ->      46.477   -> "Industry"
+        "Thermal generation"        ->      525.531  -> "Electricity grid"
+        "Thermal generation"        ->      787.129  -> "Losses"
+        "Thermal generation"        ->      79.329   -> "District heating"
+        "Tidal"                     ->      9.452    -> "Electricity grid"
+        "UK land based bioenergy"   ->      182.01   -> "Bio-conversion"
+        "Wave"                      ->      19.013   -> "Electricity grid"
+        "Wind"                      ->      289.366  -> "Electricity grid"
+        `
+        parser.parse(str);
+
+      })
     });
   });
 });
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts
index 8c20a465d..0757eac7c 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts
@@ -79,9 +79,9 @@ const addLink = function(source?: Node, target?: Node, value?: number): Link {
 class Node {
   ID: string;
   title: string;
-  constructor(ID: string) {
+  constructor(ID: string, title: string = ID) {
     this.ID = ID;
-    this.title = ID;
+    this.title = title;
   }
 }
 
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
index 06a33980b..cbb409811 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
@@ -1,6 +1,6 @@
 // @ts-nocheck TODO: fix file
 import { Diagram } from '../../Diagram.js';
-import { log } from '../../logger.js';
+// import { log } from '../../logger.js';
 import * as configApi from '../../config.js';
 import {
   select as d3select,
@@ -43,7 +43,7 @@ export const draw = function (text: string, id: string, _version: string, diagOb
   // Launch parsing
   diagObj.parser.parse(text);
   // debugger;
-  log.debug('Parsed sankey diagram');
+  // log.debug('Parsed sankey diagram');
 
   // Figure out what is happening there
   // The main thing is svg object that is a d3 wrapper for svg operations
@@ -64,7 +64,7 @@ export const draw = function (text: string, id: string, _version: string, diagOb
   //
   const elem = doc.getElementById(id);
   const width = elem.parentElement.offsetWidth;
-  const height = 300; // TODO calculate height?
+  const height = 600; // TODO calculate height?
 
   // FIX: using max width prevents height from being set
   configureSvgSize(svg, height, width, true);
@@ -92,7 +92,7 @@ export const draw = function (text: string, id: string, _version: string, diagOb
   }
 
   diagObj.db.getNodes().forEach(node => {
-    graph.nodes.push({ id: node.ID });
+    graph.nodes.push({ id: node.ID, title: node.title });
   });
 
   diagObj.db.getLinks().forEach(link => {
@@ -158,7 +158,7 @@ export const draw = function (text: string, id: string, _version: string, diagOb
     .attr('x', (d) => d.x0)
     .attr('y', (d) => d.y0)
     .append('rect')
-    .attr('height', (d) => { console.log(d); return (d.y1 - d.y0); })
+    .attr('height', (d) => { return (d.y1 - d.y0); })
     .attr('width', (d) => d.x1 - d.x0)
     .attr('fill', (d) => color(d.id));
 
@@ -175,7 +175,7 @@ export const draw = function (text: string, id: string, _version: string, diagOb
     .attr("y", d => (d.y1 + d.y0) / 2)
     .attr("dy", "0.35em")
     .attr("text-anchor", d => d.x0 < width / 2 ? "start" : "end")
-    .text(d => d.id)
+    .text(d => d.title)
 
   // Creates the paths that represent the links.
   const link_g = svg.append("g")

From 1009bb8fb762a02d9e0546c19ee378ad89d99826 Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Mon, 19 Jun 2023 04:29:41 +0300
Subject: [PATCH 029/187] Prettify

---
 .../src/diagrams/sankey/parser/sankey.spec.js |  5 +-
 .../mermaid/src/diagrams/sankey/sankeyDB.ts   |  6 +--
 .../src/diagrams/sankey/sankeyRenderer.ts     | 54 ++++++++++---------
 run                                           |  6 ++-
 4 files changed, 40 insertions(+), 31 deletions(-)

diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js
index 3bc40e151..d42fa7f74 100644
--- a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js
+++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js
@@ -148,10 +148,9 @@ describe('Sankey diagram', function () {
         "UK land based bioenergy"   ->      182.01   -> "Bio-conversion"
         "Wave"                      ->      19.013   -> "Electricity grid"
         "Wind"                      ->      289.366  -> "Electricity grid"
-        `
+        `;
         parser.parse(str);
-
-      })
+      });
     });
   });
 });
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts
index 0757eac7c..fd96ef1c2 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts
@@ -23,7 +23,7 @@ let links: Array<Link> = [];
 let nodes: Array<Node> = [];
 let nodesHash: Record<string, Node> = {};
 
-const clear = function() {
+const clear = function () {
   links = [];
   nodes = [];
   nodesHash = {};
@@ -57,7 +57,7 @@ class Link {
  * @param value - number, float or integer, describes the amount to be passed
  */
 // const addLink = ({ source, target, amount }: ILink = {}): Link => {
-const addLink = function(source?: Node, target?: Node, value?: number): Link {
+const addLink = function (source?: Node, target?: Node, value?: number): Link {
   const link: Link = new Link();
 
   // TODO: make attribute setters
@@ -90,7 +90,7 @@ class Node {
  *
  * @param id - The id Node
  */
-const addNode = function(ID: string): Node {
+const addNode = function (ID: string): Node {
   ID = common.sanitizeText(ID, configApi.getConfig());
   let node: Node;
   if (nodesHash[ID] === undefined) {
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
index cbb409811..37362803a 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
@@ -88,14 +88,14 @@ export const draw = function (text: string, id: string, _version: string, diagOb
   //
   const graph = {
     nodes: [],
-    links: []
-  }
+    links: [],
+  };
 
-  diagObj.db.getNodes().forEach(node => {
+  diagObj.db.getNodes().forEach((node) => {
     graph.nodes.push({ id: node.ID, title: node.title });
   });
 
-  diagObj.db.getLinks().forEach(link => {
+  diagObj.db.getLinks().forEach((link) => {
     graph.links.push({ source: link.source.ID, target: link.target.ID, value: link.value });
   });
 
@@ -154,44 +154,50 @@ export const draw = function (text: string, id: string, _version: string, diagOb
     .data(graph.nodes)
     .join('g')
     .attr('class', 'node')
-    .attr("transform", function (d) { return "translate(" + d.x0 + "," + d.y0 + ")"; })
+    .attr('transform', function (d) {
+      return 'translate(' + d.x0 + ',' + d.y0 + ')';
+    })
     .attr('x', (d) => d.x0)
     .attr('y', (d) => d.y0)
     .append('rect')
-    .attr('height', (d) => { return (d.y1 - d.y0); })
+    .attr('height', (d) => {
+      return d.y1 - d.y0;
+    })
     .attr('width', (d) => d.x1 - d.x0)
     .attr('fill', (d) => color(d.id));
 
   // Create text for nodes
   svg
-    .append("g")
+    .append('g')
     .attr('class', 'node-labels')
-    .attr("font-family", "sans-serif")
-    .attr("font-size", 14)
+    .attr('font-family', 'sans-serif')
+    .attr('font-size', 14)
     .selectAll('text')
     .data(graph.nodes)
     .join('text')
-    .attr("x", d => d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6)
-    .attr("y", d => (d.y1 + d.y0) / 2)
-    .attr("dy", "0.35em")
-    .attr("text-anchor", d => d.x0 < width / 2 ? "start" : "end")
-    .text(d => d.title)
+    .attr('x', (d) => (d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6))
+    .attr('y', (d) => (d.y1 + d.y0) / 2)
+    .attr('dy', '0.35em')
+    .attr('text-anchor', (d) => (d.x0 < width / 2 ? 'start' : 'end'))
+    .text((d) => d.title);
 
   // Creates the paths that represent the links.
-  const link_g = svg.append("g")
+  const link_g = svg
+    .append('g')
     .attr('class', 'links')
-    .attr("fill", "none")
-    .attr("stroke-opacity", 0.5)
-    .selectAll(".link")
+    .attr('fill', 'none')
+    .attr('stroke-opacity', 0.5)
+    .selectAll('.link')
     .data(graph.links)
-    .join("g")
+    .join('g')
     .attr('class', 'link')
-    .style("mix-blend-mode", "multiply");
+    .style('mix-blend-mode', 'multiply');
 
-  link_g.append("path")
-    .attr("d", d3SankeyLinkHorizontal())
-    .attr("stroke", d => color(d.source.id))
-    .attr("stroke-width", d => Math.max(1, d.width));
+  link_g
+    .append('path')
+    .attr('d', d3SankeyLinkHorizontal())
+    .attr('stroke', (d) => color(d.source.id))
+    .attr('stroke-width', (d) => Math.max(1, d.width));
 
   // const { nodes, links } = generator({
   //   nodes: graph.nodes,
diff --git a/run b/run
index 09f63cb82..473c6aaff 100755
--- a/run
+++ b/run
@@ -25,8 +25,12 @@ test | vitest | e2e )
 $RUN mermaid sh -c "npx pnpm $command $args"
 ;;
 
+prettier)
+$RUN mermaid sh -c "npx pnpm prettier --write $args"
+;;
+
 lint)
-$RUN mermaid sh -c "npx pnpm -w run lint:fix"
+$RUN mermaid sh -c "npx pnpm -w run lint:fix $args"
 ;;
 
 dev)

From fd3ffdc22abf780e63d1ff56fb78183db321a583 Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Mon, 19 Jun 2023 04:34:41 +0300
Subject: [PATCH 030/187] Prettify

---
 demos/sankey.html | 72 +++++++++++++++++++++++------------------------
 run               |  3 +-
 2 files changed, 38 insertions(+), 37 deletions(-)

diff --git a/demos/sankey.html b/demos/sankey.html
index c35b907d2..d6ae1d2ec 100644
--- a/demos/sankey.html
+++ b/demos/sankey.html
@@ -1,23 +1,22 @@
 <!DOCTYPE html>
 <html lang="en" xmlns="http://www.w3.org/1999/html">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>States Mermaid Quick Test Page</title>
+    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
+    <style>
+      div.mermaid {
+        /* font-family: 'trebuchet ms', verdana, arial; */
+        font-family: 'Courier New', Courier, monospace !important;
+      }
+    </style>
+  </head>
 
-<head>
-  <meta charset="utf-8" />
-  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-  <title>States Mermaid Quick Test Page</title>
-  <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
-  <style>
-    div.mermaid {
-      /* font-family: 'trebuchet ms', verdana, arial; */
-      font-family: 'Courier New', Courier, monospace !important;
-    }
-  </style>
-</head>
-
-<body>
-  <h1>Sankey diagram demos</h1>
-  <h2>Simple example</h2>
-  <pre class="mermaid">
+  <body>
+    <h1>Sankey diagram demos</h1>
+    <h2>Simple example</h2>
+    <pre class="mermaid">
     sankey
 
     node[title="hello, how are you?"]
@@ -26,11 +25,12 @@
     First -> 30 -> Second
     First -> 10 -> Third 
     Second -> 20 -> Third
-  </pre>
-  <!-- node[title="hello, mister "sankey", backslash for you "] -->
+  </pre
+    >
+    <!-- node[title="hello, mister "sankey", backslash for you "] -->
 
-  <h2>Energy flow</h2>
-  <pre class="mermaid">
+    <h2>Energy flow</h2>
+    <pre class="mermaid">
     sankey
 
     "Agricultural 'waste'"      ->      124.729  -> "Bio-conversion"
@@ -101,19 +101,19 @@
     "UK land based bioenergy"   ->      182.01   -> "Bio-conversion"
     "Wave"                      ->      19.013   -> "Electricity grid"
     "Wind"                      ->      289.366  -> "Electricity grid"
-  </pre>
+  </pre
+    >
 
-  <script type="module">
-    import mermaid from './mermaid.esm.mjs';
-    mermaid.initialize({
-      theme: 'default',
-      logLevel: 3,
-      securityLevel: 'loose',
-      flowchart: { curve: 'basis' },
-      gantt: { axisFormat: '%m/%d/%Y' },
-      sequence: { actorMargin: 50 },
-    });
-  </script>
-</body>
-
-</html>
\ No newline at end of file
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
+      mermaid.initialize({
+        theme: 'default',
+        logLevel: 3,
+        securityLevel: 'loose',
+        flowchart: { curve: 'basis' },
+        gantt: { axisFormat: '%m/%d/%Y' },
+        sequence: { actorMargin: 50 },
+      });
+    </script>
+  </body>
+</html>
diff --git a/run b/run
index 473c6aaff..0f9c451d9 100755
--- a/run
+++ b/run
@@ -47,6 +47,7 @@ Run commonly used commands within docker containers
 \033[1m$name dev\033[0m             # Run dev server with examples, open http://localhost:9000
 
 $name add             # Add package, 'run add d3-sankey'
+$name prettier        # Prettify a file 'run prettier <path-to-file>'
 $name lint            # Equvalent of pnpm -w run lint:fix
 $name test            # Run unit tests
 $name vitest          # Run watcher for unit tests
@@ -65,4 +66,4 @@ echo -n -e "$usage"
 $name help
 ;;
 
-esac
\ No newline at end of file
+esac

From 6077ba54054eed165052d73fe342b6ad3bf04e8c Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Tue, 20 Jun 2023 02:37:27 +0300
Subject: [PATCH 031/187] Updated syntax and fixed comments from review

---
 .../src/diagrams/sankey/parser/sankey.jison   | 111 +++++++++++-------
 .../src/diagrams/sankey/parser/sankey.spec.js |  12 +-
 .../mermaid/src/diagrams/sankey/sankeyDB.ts   |  86 +++++---------
 .../src/diagrams/sankey/sankeyDiagram.ts      |   2 +-
 .../src/diagrams/sankey/sankeyRenderer.ts     |  43 ++-----
 5 files changed, 114 insertions(+), 140 deletions(-)

diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
index 8f970b815..c981267a0 100644
--- a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
+++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
@@ -1,39 +1,58 @@
 /** mermaid */
 %lex
+TOKEN \w+
+NUM \d+(.\d+)?
 
 %options case-insensitive
-%options easy_keyword_rules
+%options easy_keword_rules
+
+%s link_value
 
-// when we are inside [] section we are defining attrubutes
 %x attributes
-// or if we use "" we are expecting a string containing value
+%x attr_value
 %x string
-%x value
 
 %%
+//--------------------------------------------------------------
 // skip all whitespace EXCEPT newlines, but not within a string
-<INITIAL,attributes,value>[^\S\r\n]+ {}
+//--------------------------------------------------------------
 
-// main
-"sankey"                              { return 'SANKEY'; }
-\d+(.\d+)?                            { return 'AMOUNT'; }
-"->"                                  { return 'ARROW'; }
-\w+                                   { return 'NODE'; }
-(?:<<EOF>>|[\n;])+                    { return 'EOS'; } // end of statement is semicolon ; new line \n or end of file
+<INITIAL,link_value,attributes,attr_value>[^\S\r\n]+   {}
+
+//--------------
+// basic tokens
+//--------------
+
+(<<EOF>>|[\n;])+                            { return 'EOS'; } // end of statement is semicolon ; new line \n or end of file
+"sankey"                                    { return 'SANKEY'; }
+<INITIAL>{TOKEN}                            { return 'NODE_ID'; }
+<link_value>{NUM}                           { return 'AMOUNT'; }
+"->"                                        {
+                                              if(this.topState()!=='link_value') this.pushState('link_value');
+                                              else this.popState();
+                                              return 'ARROW';
+                                            }
+//------------
 // attributes
-"["                                   { this.pushState('attributes'); return 'OPEN_ATTRIBUTES'; }
-<attributes>"]"                       { this.popState(); return 'CLOSE_ATTRIBUTES'; }
-<attributes>\w+                       { return 'ATTRIBUTE'; }
-<attributes>\=                        { this.pushState('value'); return 'EQUAL'; }
-<value>\w+                            { this.popState(); return 'VALUE'; }
+//------------
+
+"["                                         { this.pushState('attributes'); return 'OPEN_ATTRIBUTES'; }
+<attributes>"]"                             { this.popState(); return 'CLOSE_ATTRIBUTES'; }
+<attributes>{TOKEN}                         { return 'ATTRIBUTE'; }
+<attributes>\=                              { this.pushState('attr_value'); return 'EQUAL'; }
+<attr_value>{TOKEN}                         { this.popState(); return 'VALUE'; }
+
+//------------
 // strings
-<INITIAL,attributes,value>\"          { this.pushState('string'); return 'OPEN_STRING'; }
-<string>(?!\\)\"                      {
-																			  if(this.topState()==='string') this.popState();
-																			  if(this.topState()==='value') this.popState();
-																				return 'CLOSE_STRING';
-																			}
-<string>([^"\\]|\\\"|\\\\)+           { return 'STRING'; }
+//------------
+
+<INITIAL,attributes,attr_value>\"           { this.pushState('string'); return 'OPEN_STRING'; }
+<string>(?!\\)\"                            {
+                                              if(this.topState()==='string') this.popState();
+                                              if(this.topState()==='attr_value') this.popState();
+                                              return 'CLOSE_STRING';
+                                            }
+<string>([^"\\]|\\\"|\\\\)+                 { return 'STRING'; }
 
 /lex
 
@@ -43,20 +62,20 @@
 %% // language grammar
 
 start
-	: EOS SANKEY document
-	| SANKEY document
-	;
+  : EOS SANKEY document
+  | SANKEY document
+  ;
 
 document
-	: line document
-	|
-	;
+  : line document
+  |
+  ;
 
 line
-	: stream optional_attributes EOS
-	| node optional_attributes EOS
-	| EOS
-	;
+  : node optional_attributes EOS
+  | stream optional_attributes EOS
+  | EOS
+  ;
 
 optional_attributes: OPEN_ATTRIBUTES attributes CLOSE_ATTRIBUTES | ;
 
@@ -65,20 +84,22 @@ attribute: ATTRIBUTE EQUAL value | ATTRIBUTE;
 
 value: VALUE | OPEN_STRING STRING CLOSE_STRING;
 
-stream: node[source] ARROW amount ARROW tail[target] {
-	$$=$source;
-	yy.addLink($source, $target, $amount);
-};
+stream
+  : node\[source] ARROW amount ARROW tail\[target] {
+      $$=$source;
+      yy.addLink($source, $target, $amount);
+    }
+  ;
+
+tail
+  : stream { $$ = $stream }
+  | node { $$ = $node; }
+    ;
 
 amount: AMOUNT { $$=parseFloat($AMOUNT); };
 
-tail
-	: stream { $$ = $stream }
-	| node { $$ = $node; }
-	;
-
 node
-	: NODE { $$ = yy.addNode($NODE); }
-	| OPEN_STRING STRING[title] CLOSE_STRING { $$ = yy.addNode($title); /* TODO: add title and id separately?*/ }
-	;
+  : NODE_ID { $$ = yy.findOrCreateNode($NODE_ID); }
+  | OPEN_STRING STRING\[node_label] CLOSE_STRING { $$ = yy.findOrCreateNode($node_label); }
+  ;
 
diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js
index d42fa7f74..58fe31ab1 100644
--- a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js
+++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js
@@ -50,11 +50,20 @@ describe('Sankey diagram', function () {
     });
 
     describe('while attributes parsing', () => {
+      it('recognized node and attribute ids starting with numbers', () => {
+        const str = `
+        sankey
+        1st -> 200 -> 2nd -> 180 -> 3rd;
+        `;
+
+        parser.parse(str);
+      });
+
       it('parses different quotless variations', () => {
         const str = `
         sankey
         node[]
-
+        
         node[attr=1]
         node_a -> 30 -> node_b
         node[attrWithoutValue]
@@ -149,6 +158,7 @@ describe('Sankey diagram', function () {
         "Wave"                      ->      19.013   -> "Electricity grid"
         "Wind"                      ->      289.366  -> "Electricity grid"
         `;
+
         parser.parse(str);
       });
     });
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts
index fd96ef1c2..d44f3e6e8 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts
@@ -12,16 +12,13 @@ import {
   clear as commonClear,
 } from '../../commonDb.js';
 
-// export const parseDirective = function (statement, context, type) {
-//   mermaidAPI.parseDirective(this, statement, context, type);
-// };
-
-// export const cleanupComments = (text: string): string => {
-//   return text.trimStart().replace(/^\s*%%(?!{)[^\n]+\n?/gm, '');
-// };
-let links: Array<Link> = [];
-let nodes: Array<Node> = [];
-let nodesHash: Record<string, Node> = {};
+// Variables where graph data is stored
+// Sankey diagram represented by nodes and links between those nodes
+// We have to track nodes uniqueness (by ID), thats why we need hash also
+//
+let links: Array<SankeyLink> = [];
+let nodes: Array<SankeyNode> = [];
+let nodesHash: Record<string, SankeyNode> = {};
 
 const clear = function () {
   links = [];
@@ -30,71 +27,35 @@ const clear = function () {
   commonClear();
 };
 
-type Nullable<T> = T | null;
-
-// interface ILink {
-//   source?: Node;
-//   target?: Node;
-//   value?: number;
-// }
-
-class Link {
-  source: Nullable<Node>;
-  target: Nullable<Node>;
-  value: Nullable<number>;
-  constructor() {
-    this.source = null;
-    this.target = null;
-    this.value = 0;
-  }
+class SankeyLink {
+  constructor(public source: SankeyNode, public target: SankeyNode, public value: number = 0) {}
 }
 
 /**
- * Adds a link between two elements on the diagram
- *
  * @param source - Node where the link starts
  * @param target - Node where the link ends
  * @param value - number, float or integer, describes the amount to be passed
  */
-// const addLink = ({ source, target, amount }: ILink = {}): Link => {
-const addLink = function (source?: Node, target?: Node, value?: number): Link {
-  const link: Link = new Link();
-
-  // TODO: make attribute setters
-  if (source !== undefined) {
-    link.source = source;
-  }
-  if (target !== undefined) {
-    link.target = target;
-  }
-  if (value !== undefined) {
-    link.value = value;
-  }
+const addLink = function (source: SankeyNode, target: SankeyNode, value: number): SankeyLink {
+  const link: SankeyLink = new SankeyLink(source, target, value);
 
   links.push(link);
 
   return link;
 };
 
-class Node {
-  ID: string;
-  title: string;
-  constructor(ID: string, title: string = ID) {
-    this.ID = ID;
-    this.title = title;
-  }
+class SankeyNode {
+  constructor(public ID: string, public label: string = ID) {}
 }
 
 /**
- * Finds or creates a new Node by ID
- *
- * @param id - The id Node
+ * @param ID - The id of the node
  */
-const addNode = function (ID: string): Node {
+const findOrCreateNode = function (ID: string): SankeyNode {
   ID = common.sanitizeText(ID, configApi.getConfig());
-  let node: Node;
+  let node: SankeyNode;
   if (nodesHash[ID] === undefined) {
-    node = new Node(ID);
+    node = new SankeyNode(ID);
     nodesHash[ID] = node;
     nodes.push(node);
   } else {
@@ -103,16 +64,27 @@ const addNode = function (ID: string): Node {
   return node;
 };
 
+// TODO: this will be better using getters in typescript
 const getNodes = () => nodes;
 const getLinks = () => links;
 
+const getGraph = () => ({
+  nodes: nodes.map((node) => ({ id: node.ID, label: node.label })),
+  links: links.map((link) => ({
+    source: link.source.ID,
+    target: link.target.ID,
+    value: link.value,
+  })),
+});
+
 export default {
   nodesHash,
   getConfig: () => configApi.getConfig().sankey,
   getNodes,
   getLinks,
+  getGraph,
   addLink,
-  addNode,
+  findOrCreateNode,
   // TODO: If this is a must this probably should be an interface
   getAccTitle,
   setAccTitle,
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts b/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts
index e7a46d8bc..9c8fbaa2d 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts
@@ -1,5 +1,5 @@
 import { DiagramDefinition } from '../../diagram-api/types.js';
-// @ts-ignore: TODO Fix ts errors
+// @ts-ignore: jison doesn't export types
 import parser from './parser/sankey.jison';
 import db from './sankeyDB.js';
 import styles from './styles.js';
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
index 37362803a..c8a3edaa8 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
@@ -2,6 +2,7 @@
 import { Diagram } from '../../Diagram.js';
 // import { log } from '../../logger.js';
 import * as configApi from '../../config.js';
+
 import {
   select as d3select,
   scaleOrdinal as d3scaleOrdinal,
@@ -19,9 +20,7 @@ import {
   sankeyJustify as d3SankeyJustify,
 } from 'd3-sankey';
 import { configureSvgSize } from '../../setupGraphViewbox.js';
-import sankeyDB from './sankeyDB.js';
-import { db } from '../info/infoDb.js';
-import { debug } from 'console';
+// import { debug } from 'console';
 
 /**
  * Draws a sequenceDiagram in the tag with id: id based on the graph definition in text.
@@ -51,7 +50,7 @@ export const draw = function (text: string, id: string, _version: string, diagOb
   const { securityLevel, sequence: conf } = configApi.getConfig();
   let sandboxElement;
   if (securityLevel === 'sandbox') {
-    sandboxElement = select('#i' + id);
+    sandboxElement = d3select('#i' + id);
   }
   const root =
     securityLevel === 'sandbox'
@@ -86,35 +85,8 @@ export const draw = function (text: string, id: string, _version: string, diagOb
   //      ]
   //    };
   //
-  const graph = {
-    nodes: [],
-    links: [],
-  };
 
-  diagObj.db.getNodes().forEach((node) => {
-    graph.nodes.push({ id: node.ID, title: node.title });
-  });
-
-  diagObj.db.getLinks().forEach((link) => {
-    graph.links.push({ source: link.source.ID, target: link.target.ID, value: link.value });
-  });
-
-  // debugger;
-  // const graph = {
-  //   nodes: [
-  //     { id: 'Alice' },
-  //     { id: 'Bob' },
-  //     { id: 'Carol' },
-  //     { id: 'Andrew' },
-  //     { id: 'Peter' }
-  //   ],
-  //   links: [
-  //     { source: 'Alice', target: 'Andrew', value: 11 },
-  //     { source: 'Alice', target: 'Bob', value: 23 },
-  //     { source: 'Bob', target: 'Carol', value: 43 },
-  //     { source: 'Peter', target: 'Carol', value: 15 },
-  //   ],
-  // };
+  const graph = diagObj.db.getGraph();
 
   // Construct and configure a Sankey generator
   // That will be a function that calculates nodes and links dimensions
@@ -145,11 +117,10 @@ export const draw = function (text: string, id: string, _version: string, diagOb
   // Get color scheme for the graph
   const color = d3scaleOrdinal(d3schemeTableau10);
 
-  // Creates the groups for nodes
+  // Create groups for nodes
   svg
     .append('g')
     .attr('class', 'nodes')
-    .attr('stroke', '#000')
     .selectAll('.node')
     .data(graph.nodes)
     .join('g')
@@ -166,7 +137,7 @@ export const draw = function (text: string, id: string, _version: string, diagOb
     .attr('width', (d) => d.x1 - d.x0)
     .attr('fill', (d) => color(d.id));
 
-  // Create text for nodes
+  // Create labels for nodes
   svg
     .append('g')
     .attr('class', 'node-labels')
@@ -179,7 +150,7 @@ export const draw = function (text: string, id: string, _version: string, diagOb
     .attr('y', (d) => (d.y1 + d.y0) / 2)
     .attr('dy', '0.35em')
     .attr('text-anchor', (d) => (d.x0 < width / 2 ? 'start' : 'end'))
-    .text((d) => d.title);
+    .text((d) => d.label);
 
   // Creates the paths that represent the links.
   const link_g = svg

From a2c055ba5d492231ebceefe5c32db90e8927fb26 Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Wed, 21 Jun 2023 01:28:59 +0300
Subject: [PATCH 032/187] CSV syntax implementation

---
 demos/sankey.html                             | 150 ++++++++----------
 .../diagrams/sankey/{ => parser}/energy.csv   |   1 -
 .../diagrams/sankey/parser/sankey-arrow.jison | 105 ++++++++++++
 .../{sankey.spec.js => sankey-arrow.spec.js}  |   0
 .../src/diagrams/sankey/parser/sankey.jison   | 131 +++++++--------
 .../src/diagrams/sankey/parser/sankey.spec.ts |  33 ++++
 6 files changed, 260 insertions(+), 160 deletions(-)
 rename packages/mermaid/src/diagrams/sankey/{ => parser}/energy.csv (99%)
 create mode 100644 packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.jison
 rename packages/mermaid/src/diagrams/sankey/parser/{sankey.spec.js => sankey-arrow.spec.js} (100%)
 create mode 100644 packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts

diff --git a/demos/sankey.html b/demos/sankey.html
index d6ae1d2ec..d49bfc77e 100644
--- a/demos/sankey.html
+++ b/demos/sankey.html
@@ -15,92 +15,78 @@
 
   <body>
     <h1>Sankey diagram demos</h1>
-    <h2>Simple example</h2>
-    <pre class="mermaid">
-    sankey
-
-    node[title="hello, how are you?"]
-    node[title="hello, mister Sankey"]
-
-    First -> 30 -> Second
-    First -> 10 -> Third 
-    Second -> 20 -> Third
-  </pre
-    >
-    <!-- node[title="hello, mister "sankey", backslash for you "] -->
-
     <h2>Energy flow</h2>
     <pre class="mermaid">
     sankey
 
-    "Agricultural 'waste'"      ->      124.729  -> "Bio-conversion"
-    "Bio-conversion"            ->      0.597    -> "Liquid"
-    "Bio-conversion"            ->      26.862   -> "Losses"
-    "Bio-conversion"            ->      280.322  -> "Solid"
-    "Bio-conversion"            ->      81.144   -> "Gas"
-    "Biofuel imports"           ->      35       -> "Liquid"
-    "Biomass imports"           ->      35       -> "Solid"
-    "Coal imports"              ->      11.606   -> "Coal"
-    "Coal reserves"             ->      63.965   -> "Coal"
-    "Coal"                      ->      75.571   -> "Solid"
-    "District heating"          ->      10.639   -> "Industry"
-    "District heating"          ->      22.505   -> "Heating and cooling - commercial"
-    "District heating"          ->      46.184   -> "Heating and cooling - homes"
-    "Electricity grid"          ->      104.453  -> "Over generation / exports"
-    "Electricity grid"          ->      113.726  -> "Heating and cooling - homes"
-    "Electricity grid"          ->      27.14    -> "H2 conversion"
-    "Electricity grid"          ->      342.165  -> "Industry"
-    "Electricity grid"          ->      37.797   -> "Road transport"
-    "Electricity grid"          ->      4.412    -> "Agriculture"
-    "Electricity grid"          ->      40.858   -> "Heating and cooling - commercial"
-    "Electricity grid"          ->      56.691   -> "Losses"
-    "Electricity grid"          ->      7.863    -> "Rail transport"
-    "Electricity grid"          ->      90.008   -> "Lighting & appliances - commercial"
-    "Electricity grid"          ->      93.494   -> "Lighting & appliances - homes"
-    "Gas imports"               ->      40.719   -> "Ngas"
-    "Gas reserves"              ->      82.233   -> "Ngas"
-    "Gas"                       ->      0.129    -> "Heating and cooling - commercial"
-    "Gas"                       ->      1.401    -> "Losses"
-    "Gas"                       ->      151.891  -> "Thermal generation"
-    "Gas"                       ->      2.096    -> "Agriculture"
-    "Gas"                       ->      48.58    -> "Industry"
-    "Geothermal"                ->      7.013    -> "Electricity grid"
-    "H2 conversion"             ->      20.897   -> "H2"
-    "H2 conversion"             ->      6.242    -> "Losses"
-    "H2"                        ->      20.897   -> "Road transport"
-    "Hydro"                     ->      6.995    -> "Electricity grid"
-    "Liquid"                    ->      121.066  -> "Industry"
-    "Liquid"                    ->      128.69   -> "International shipping"
-    "Liquid"                    ->      135.835  -> "Road transport"
-    "Liquid"                    ->      14.458   -> "Domestic aviation"
-    "Liquid"                    ->      206.267  -> "International aviation"
-    "Liquid"                    ->      3.64     -> "Agriculture"
-    "Liquid"                    ->      33.218   -> "National navigation"
-    "Liquid"                    ->      4.413    -> "Rail transport"
-    "Marine algae"              ->      4.375    -> "Bio-conversion"
-    "Ngas"                      ->      122.952  -> "Gas"
-    "Nuclear"                   ->      839.978  -> "Thermal generation"
-    "Oil imports"               ->      504.287  -> "Oil"
-    "Oil reserves"              ->      107.703  -> "Oil"
-    "Oil"                       ->      611.99   -> "Liquid"
-    "Other waste"               ->      56.587   -> "Solid"
-    "Other waste"               ->      77.81    -> "Bio-conversion"
-    "Pumped heat"               ->      193.026  -> "Heating and cooling - homes"
-    "Pumped heat"               ->      70.672   -> "Heating and cooling - commercial"
-    "Solar PV"                  ->      59.901   -> "Electricity grid"
-    "Solar Thermal"             ->      19.263   -> "Heating and cooling - homes"
-    "Solar"                     ->      19.263   -> "Solar Thermal"
-    "Solar"                     ->      59.901   -> "Solar PV"
-    "Solid"                     ->      0.882    -> "Agriculture"
-    "Solid"                     ->      400.12   -> "Thermal generation"
-    "Solid"                     ->      46.477   -> "Industry"
-    "Thermal generation"        ->      525.531  -> "Electricity grid"
-    "Thermal generation"        ->      787.129  -> "Losses"
-    "Thermal generation"        ->      79.329   -> "District heating"
-    "Tidal"                     ->      9.452    -> "Electricity grid"
-    "UK land based bioenergy"   ->      182.01   -> "Bio-conversion"
-    "Wave"                      ->      19.013   -> "Electricity grid"
-    "Wind"                      ->      289.366  -> "Electricity grid"
+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
   </pre
     >
 
diff --git a/packages/mermaid/src/diagrams/sankey/energy.csv b/packages/mermaid/src/diagrams/sankey/parser/energy.csv
similarity index 99%
rename from packages/mermaid/src/diagrams/sankey/energy.csv
rename to packages/mermaid/src/diagrams/sankey/parser/energy.csv
index e5691f66c..36fd45d2a 100644
--- a/packages/mermaid/src/diagrams/sankey/energy.csv
+++ b/packages/mermaid/src/diagrams/sankey/parser/energy.csv
@@ -1,4 +1,3 @@
-source,target,value
 Agricultural 'waste',Bio-conversion,124.729
 Bio-conversion,Liquid,0.597
 Bio-conversion,Losses,26.862
diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.jison b/packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.jison
new file mode 100644
index 000000000..c981267a0
--- /dev/null
+++ b/packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.jison
@@ -0,0 +1,105 @@
+/** mermaid */
+%lex
+TOKEN \w+
+NUM \d+(.\d+)?
+
+%options case-insensitive
+%options easy_keword_rules
+
+%s link_value
+
+%x attributes
+%x attr_value
+%x string
+
+%%
+//--------------------------------------------------------------
+// skip all whitespace EXCEPT newlines, but not within a string
+//--------------------------------------------------------------
+
+<INITIAL,link_value,attributes,attr_value>[^\S\r\n]+   {}
+
+//--------------
+// basic tokens
+//--------------
+
+(<<EOF>>|[\n;])+                            { return 'EOS'; } // end of statement is semicolon ; new line \n or end of file
+"sankey"                                    { return 'SANKEY'; }
+<INITIAL>{TOKEN}                            { return 'NODE_ID'; }
+<link_value>{NUM}                           { return 'AMOUNT'; }
+"->"                                        {
+                                              if(this.topState()!=='link_value') this.pushState('link_value');
+                                              else this.popState();
+                                              return 'ARROW';
+                                            }
+//------------
+// attributes
+//------------
+
+"["                                         { this.pushState('attributes'); return 'OPEN_ATTRIBUTES'; }
+<attributes>"]"                             { this.popState(); return 'CLOSE_ATTRIBUTES'; }
+<attributes>{TOKEN}                         { return 'ATTRIBUTE'; }
+<attributes>\=                              { this.pushState('attr_value'); return 'EQUAL'; }
+<attr_value>{TOKEN}                         { this.popState(); return 'VALUE'; }
+
+//------------
+// strings
+//------------
+
+<INITIAL,attributes,attr_value>\"           { this.pushState('string'); return 'OPEN_STRING'; }
+<string>(?!\\)\"                            {
+                                              if(this.topState()==='string') this.popState();
+                                              if(this.topState()==='attr_value') this.popState();
+                                              return 'CLOSE_STRING';
+                                            }
+<string>([^"\\]|\\\"|\\\\)+                 { return 'STRING'; }
+
+/lex
+
+%start start
+%left ARROW
+
+%% // language grammar
+
+start
+  : EOS SANKEY document
+  | SANKEY document
+  ;
+
+document
+  : line document
+  |
+  ;
+
+line
+  : node optional_attributes EOS
+  | stream optional_attributes EOS
+  | EOS
+  ;
+
+optional_attributes: OPEN_ATTRIBUTES attributes CLOSE_ATTRIBUTES | ;
+
+attributes: attribute attributes | ;
+attribute: ATTRIBUTE EQUAL value | ATTRIBUTE;
+
+value: VALUE | OPEN_STRING STRING CLOSE_STRING;
+
+stream
+  : node\[source] ARROW amount ARROW tail\[target] {
+      $$=$source;
+      yy.addLink($source, $target, $amount);
+    }
+  ;
+
+tail
+  : stream { $$ = $stream }
+  | node { $$ = $node; }
+    ;
+
+amount: AMOUNT { $$=parseFloat($AMOUNT); };
+
+node
+  : NODE_ID { $$ = yy.findOrCreateNode($NODE_ID); }
+  | OPEN_STRING STRING\[node_label] CLOSE_STRING { $$ = yy.findOrCreateNode($node_label); }
+  ;
+
diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js b/packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.spec.js
similarity index 100%
rename from packages/mermaid/src/diagrams/sankey/parser/sankey.spec.js
rename to packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.spec.js
diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
index c981267a0..5ad25e811 100644
--- a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
+++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
@@ -1,105 +1,82 @@
 /** mermaid */
+
+//----------------------------------------------------
+// We support csv format as defined there
+// CSV format // https://www.ietf.org/rfc/rfc4180.txt
+//----------------------------------------------------
+
 %lex
-TOKEN \w+
-NUM \d+(.\d+)?
 
 %options case-insensitive
 %options easy_keword_rules
 
-%s link_value
-
-%x attributes
-%x attr_value
-%x string
+// as per section 6.1 of RFC 2234 [2]
+COMMA \u002C
+CR \u000D 
+LF \u000A
+CRLF \u000D\u000A
+DQUOTE \u0022
+TEXTDATA [\u0020-\u0021\u0023-\u002B\u002D-\u007E]
 
 %%
-//--------------------------------------------------------------
-// skip all whitespace EXCEPT newlines, but not within a string
-//--------------------------------------------------------------
 
-<INITIAL,link_value,attributes,attr_value>[^\S\r\n]+   {}
+<<EOF>> { return 'EOF' }
 
-//--------------
-// basic tokens
-//--------------
-
-(<<EOF>>|[\n;])+                            { return 'EOS'; } // end of statement is semicolon ; new line \n or end of file
-"sankey"                                    { return 'SANKEY'; }
-<INITIAL>{TOKEN}                            { return 'NODE_ID'; }
-<link_value>{NUM}                           { return 'AMOUNT'; }
-"->"                                        {
-                                              if(this.topState()!=='link_value') this.pushState('link_value');
-                                              else this.popState();
-                                              return 'ARROW';
-                                            }
-//------------
-// attributes
-//------------
-
-"["                                         { this.pushState('attributes'); return 'OPEN_ATTRIBUTES'; }
-<attributes>"]"                             { this.popState(); return 'CLOSE_ATTRIBUTES'; }
-<attributes>{TOKEN}                         { return 'ATTRIBUTE'; }
-<attributes>\=                              { this.pushState('attr_value'); return 'EQUAL'; }
-<attr_value>{TOKEN}                         { this.popState(); return 'VALUE'; }
-
-//------------
-// strings
-//------------
-
-<INITIAL,attributes,attr_value>\"           { this.pushState('string'); return 'OPEN_STRING'; }
-<string>(?!\\)\"                            {
-                                              if(this.topState()==='string') this.popState();
-                                              if(this.topState()==='attr_value') this.popState();
-                                              return 'CLOSE_STRING';
-                                            }
-<string>([^"\\]|\\\"|\\\\)+                 { return 'STRING'; }
+"sankey" { return 'SANKEY' }
+{COMMA} { return 'COMMA' }
+{DQUOTE} { return 'DQUOTE' }
+({CRLF}|{LF}) { return 'NEWLINE' }
+{TEXTDATA}* { return 'NON_ESCAPED_TEXT' }
+({TEXTDATA}|{COMMA}|{CR}|{LF}|{DQUOTE}{DQUOTE})* { return 'ESCAPED_TEXT' }
 
 /lex
 
 %start start
-%left ARROW
 
 %% // language grammar
 
 start
-  : EOS SANKEY document
-  | SANKEY document
+  : SANKEY file opt_eof
   ;
 
-document
-  : line document
-  |
+file: csv opt_newline;
+
+csv
+  : record csv_tail 
   ;
 
-line
-  : node optional_attributes EOS
-  | stream optional_attributes EOS
-  | EOS
+csv_tail
+  : NEWLINE csv
+  | // empty
   ;
 
-optional_attributes: OPEN_ATTRIBUTES attributes CLOSE_ATTRIBUTES | ;
-
-attributes: attribute attributes | ;
-attribute: ATTRIBUTE EQUAL value | ATTRIBUTE;
-
-value: VALUE | OPEN_STRING STRING CLOSE_STRING;
-
-stream
-  : node\[source] ARROW amount ARROW tail\[target] {
-      $$=$source;
-      yy.addLink($source, $target, $amount);
-    }
+opt_newline
+  : NEWLINE
+  | // empty
   ;
 
-tail
-  : stream { $$ = $stream }
-  | node { $$ = $node; }
-    ;
-
-amount: AMOUNT { $$=parseFloat($AMOUNT); };
-
-node
-  : NODE_ID { $$ = yy.findOrCreateNode($NODE_ID); }
-  | OPEN_STRING STRING\[node_label] CLOSE_STRING { $$ = yy.findOrCreateNode($node_label); }
+opt_eof
+  : EOF
+  | // empty
   ;
 
+record
+  : field\[source] COMMA field\[target] COMMA field\[value] {
+      const source = yy.findOrCreateNode($source);
+      const target = yy.findOrCreateNode($target);
+      const value = parseFloat($value);
+      $$ = yy.addLink(source,target,value);
+    } // parse only 3 fields, this is not part of standard
+  | // allow empty record to handle empty lines, this is not part of csv standard either
+  ;
+
+field
+  : escaped { $$=$escaped; }
+  | non_escaped { $$=$non_escaped; }
+  ;
+
+escaped: DQUOTE ESCAPED_TEXT DQUOTE { $$=$ESCAPED_TEXT; };
+
+non_escaped: NON_ESCAPED_TEXT { $$=$NON_ESCAPED_TEXT; };
+
+
diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts
new file mode 100644
index 000000000..0c83df33f
--- /dev/null
+++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts
@@ -0,0 +1,33 @@
+// @ts-ignore: jison doesn't export types
+import diagram from './sankey.jison';
+// @ts-ignore: jison doesn't export types
+import { parser } from './sankey.jison';
+import db from '../sankeyDB.js';
+// import { fail } from 'assert';
+
+
+describe('Sankey diagram', function () {
+  // TODO - these examples should be put into ./parser/stateDiagram.spec.js
+  describe('when parsing an info graph it', function () {
+    beforeEach(function () {
+      parser.yy = db;
+      diagram.parser.yy = db;
+      diagram.parser.yy.clear();
+    });
+    
+    it('parses csv', async () => {
+      
+      const fs = require('fs');
+      const path = require('path').resolve(__dirname, "./energy.csv");
+      await fs.readFile(path, 'utf8', (err: Error, data: string) => {
+        if (err) throw(err);
+        
+        const str = `sankey\\n${data}`;
+
+        parser.parse(str);
+      });
+
+    });
+
+  });
+});

From 362648b74b53a951a5f40b7a70a036ec876a1398 Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Wed, 21 Jun 2023 01:37:06 +0300
Subject: [PATCH 033/187] Trim trailing spaces

---
 demos/sankey.html                             | 137 +++++++++---------
 .../src/diagrams/sankey/parser/energy.csv     |   3 +-
 .../sankey/parser/sankey-arrow.spec.js        |   4 +-
 .../src/diagrams/sankey/parser/sankey.jison   |   6 +-
 4 files changed, 76 insertions(+), 74 deletions(-)

diff --git a/demos/sankey.html b/demos/sankey.html
index d49bfc77e..4fc0993bf 100644
--- a/demos/sankey.html
+++ b/demos/sankey.html
@@ -19,74 +19,75 @@
     <pre class="mermaid">
     sankey
 
-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
+    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
+    
   </pre
     >
 
diff --git a/packages/mermaid/src/diagrams/sankey/parser/energy.csv b/packages/mermaid/src/diagrams/sankey/parser/energy.csv
index 36fd45d2a..ebddaca0c 100644
--- a/packages/mermaid/src/diagrams/sankey/parser/energy.csv
+++ b/packages/mermaid/src/diagrams/sankey/parser/energy.csv
@@ -64,5 +64,6 @@ 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
\ No newline at end of file
+Wind,Electricity grid,289.366
diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.spec.js b/packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.spec.js
index 58fe31ab1..19f1ff357 100644
--- a/packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.spec.js
+++ b/packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.spec.js
@@ -1,5 +1,5 @@
-import diagram from './sankey.jison';
-import { parser } from './sankey.jison';
+import diagram from './sankey-arrow.jison';
+import { parser } from './sankey-arrow.jison';
 import db from '../sankeyDB.js';
 // import { fail } from 'assert';
 
diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
index 5ad25e811..c0294917c 100644
--- a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
+++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
@@ -62,9 +62,9 @@ opt_eof
 
 record
   : field\[source] COMMA field\[target] COMMA field\[value] {
-      const source = yy.findOrCreateNode($source);
-      const target = yy.findOrCreateNode($target);
-      const value = parseFloat($value);
+      const source = yy.findOrCreateNode($source.trim());
+      const target = yy.findOrCreateNode($target.trim());
+      const value = parseFloat($value.trim());
       $$ = yy.addLink(source,target,value);
     } // parse only 3 fields, this is not part of standard
   | // allow empty record to handle empty lines, this is not part of csv standard either

From 6c6efb24f406009a6c7fdd0fbd4476f1f3b279a1 Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Wed, 21 Jun 2023 01:48:48 +0300
Subject: [PATCH 034/187] Fix graph width

---
 .../src/diagrams/sankey/parser/sankey.jison       |  4 ++--
 .../src/diagrams/sankey/parser/sankey.spec.ts     | 12 ++++--------
 .../mermaid/src/diagrams/sankey/sankeyRenderer.ts | 15 ++++++---------
 3 files changed, 12 insertions(+), 19 deletions(-)

diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
index c0294917c..7f5d76554 100644
--- a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
+++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
@@ -66,8 +66,8 @@ record
       const target = yy.findOrCreateNode($target.trim());
       const value = parseFloat($value.trim());
       $$ = yy.addLink(source,target,value);
-    } // parse only 3 fields, this is not part of standard
-  | // allow empty record to handle empty lines, this is not part of csv standard either
+    } // parse only 3 fields, this is not part of CSV standard
+  | // allow empty record to handle empty lines, this is not part of CSV standard either
   ;
 
 field
diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts
index 0c83df33f..d25a1cdb6 100644
--- a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts
+++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts
@@ -5,7 +5,6 @@ import { parser } from './sankey.jison';
 import db from '../sankeyDB.js';
 // import { fail } from 'assert';
 
-
 describe('Sankey diagram', function () {
   // TODO - these examples should be put into ./parser/stateDiagram.spec.js
   describe('when parsing an info graph it', function () {
@@ -14,20 +13,17 @@ describe('Sankey diagram', function () {
       diagram.parser.yy = db;
       diagram.parser.yy.clear();
     });
-    
+
     it('parses csv', async () => {
-      
       const fs = require('fs');
-      const path = require('path').resolve(__dirname, "./energy.csv");
+      const path = require('path').resolve(__dirname, './energy.csv');
       await fs.readFile(path, 'utf8', (err: Error, data: string) => {
-        if (err) throw(err);
-        
+        if (err) throw err;
+
         const str = `sankey\\n${data}`;
 
         parser.parse(str);
       });
-
     });
-
   });
 });
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
index c8a3edaa8..63abb2a6c 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
@@ -88,17 +88,19 @@ export const draw = function (text: string, id: string, _version: string, diagOb
 
   const graph = diagObj.db.getGraph();
 
+  const nodeWidth = 10;
   // Construct and configure a Sankey generator
   // That will be a function that calculates nodes and links dimensions
   //
   const sankey = d3Sankey()
     .nodeId((d) => d.id) // we use 'id' property to identify node
-    .nodeWidth(10)
+    .nodeWidth(nodeWidth)
     .nodePadding(10)
     .nodeAlign(d3SankeyJustify) // d3.sankeyLeft, etc.
-    .size([width, height]);
-  // .extent([[5, 20], [width - 5, height - 20]]); alias for size
-  // paddings
+    .extent([
+      [0, 0],
+      [width - nodeWidth, height],
+    ]);
 
   //["left", "sankeyLeft"], ["right", "sankeyRight"], ["center", "sankeyCenter"], ["justify", "sankeyJustify"]
   // .nodeWidth(15)
@@ -169,11 +171,6 @@ export const draw = function (text: string, id: string, _version: string, diagOb
     .attr('d', d3SankeyLinkHorizontal())
     .attr('stroke', (d) => color(d.source.id))
     .attr('stroke-width', (d) => Math.max(1, d.width));
-
-  // const { nodes, links } = generator({
-  //   nodes: graph.nodes,
-  //   links: graph.links,
-  // });
 };
 
 export default {

From 24d9f59d6997ca192ba50e62ad277d0bf29a2e49 Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Wed, 21 Jun 2023 02:52:21 +0300
Subject: [PATCH 035/187] Fix specs

---
 .../mermaid/src/diagrams/sankey/parser/sankey.spec.ts     | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts
index d25a1cdb6..31f02a4a0 100644
--- a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts
+++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts
@@ -15,10 +15,12 @@ describe('Sankey diagram', function () {
     });
 
     it('parses csv', async () => {
-      const fs = require('fs');
-      const path = require('path').resolve(__dirname, './energy.csv');
+      const fs = await import('fs');
+      const path = await require('path').resolve(__dirname, './energy.csv');
       await fs.readFile(path, 'utf8', (err: Error, data: string) => {
-        if (err) throw err;
+        if (err) {
+          throw err;
+        }
 
         const str = `sankey\\n${data}`;
 

From 7bc5c1930ee75ede54141caf5728f615bd4b6021 Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Wed, 21 Jun 2023 02:58:25 +0300
Subject: [PATCH 036/187] Fix specs

---
 packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts
index 31f02a4a0..60d70013d 100644
--- a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts
+++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts
@@ -16,8 +16,9 @@ describe('Sankey diagram', function () {
 
     it('parses csv', async () => {
       const fs = await import('fs');
-      const path = await require('path').resolve(__dirname, './energy.csv');
-      await fs.readFile(path, 'utf8', (err: Error, data: string) => {
+      const path = await import('path');
+      const csv = path.resolve(__dirname, './energy.csv');
+      fs.readFile(csv, 'utf8', (err: NodeJS.ErrnoException | null, data: string) => {
         if (err) {
           throw err;
         }

From 272615e580382b724117faae502841ad27c723bb Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Wed, 21 Jun 2023 03:54:55 +0300
Subject: [PATCH 037/187] Fixed tests and added node alignment

---
 cypress/integration/rendering/sankey.spec.js  |  2 +-
 demos/sankey.html                             |  2 +-
 .../src/diagrams/sankey/parser/energy.csv     |  3 +--
 .../src/diagrams/sankey/parser/sankey.jison   | 19 ++++++++++---------
 .../mermaid/src/diagrams/sankey/sankeyDB.ts   | 11 +++++++++++
 .../src/diagrams/sankey/sankeyRenderer.ts     | 16 ++++++++--------
 6 files changed, 32 insertions(+), 21 deletions(-)

diff --git a/cypress/integration/rendering/sankey.spec.js b/cypress/integration/rendering/sankey.spec.js
index 5b9bcf870..3ed242724 100644
--- a/cypress/integration/rendering/sankey.spec.js
+++ b/cypress/integration/rendering/sankey.spec.js
@@ -5,7 +5,7 @@ describe('Sankey Diagram', () => {
     imgSnapshotTest(
       `
       sankey
-        a -> 30 -> b
+      a,b,10
       `,
       {}
     );
diff --git a/demos/sankey.html b/demos/sankey.html
index 4fc0993bf..3afc83371 100644
--- a/demos/sankey.html
+++ b/demos/sankey.html
@@ -18,7 +18,7 @@
     <h2>Energy flow</h2>
     <pre class="mermaid">
     sankey
-
+    
     Agricultural 'waste',Bio-conversion,124.729
     Bio-conversion,Liquid,0.597
     Bio-conversion,Losses,26.862
diff --git a/packages/mermaid/src/diagrams/sankey/parser/energy.csv b/packages/mermaid/src/diagrams/sankey/parser/energy.csv
index ebddaca0c..36fd45d2a 100644
--- a/packages/mermaid/src/diagrams/sankey/parser/energy.csv
+++ b/packages/mermaid/src/diagrams/sankey/parser/energy.csv
@@ -64,6 +64,5 @@ 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
+Wind,Electricity grid,289.366
\ No newline at end of file
diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
index 7f5d76554..649d2dbd8 100644
--- a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
+++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
@@ -1,9 +1,12 @@
 /** mermaid */
 
-//----------------------------------------------------
-// We support csv format as defined there
-// CSV format // https://www.ietf.org/rfc/rfc4180.txt
-//----------------------------------------------------
+//---------------------------------------------------------
+// We support csv format as defined here:
+// https://www.ietf.org/rfc/rfc4180.txt
+// There are some minor changes for compliance with jison
+// We also parse only 3 columns: source,target,value
+// And allow blank lines for visual purposes
+//---------------------------------------------------------
 
 %lex
 
@@ -23,9 +26,9 @@ TEXTDATA [\u0020-\u0021\u0023-\u002B\u002D-\u007E]
 <<EOF>> { return 'EOF' }
 
 "sankey" { return 'SANKEY' }
+({CRLF}|{LF})+ { return 'NEWLINE' } // let newline to be multiple lines
 {COMMA} { return 'COMMA' }
 {DQUOTE} { return 'DQUOTE' }
-({CRLF}|{LF}) { return 'NEWLINE' }
 {TEXTDATA}* { return 'NON_ESCAPED_TEXT' }
 ({TEXTDATA}|{COMMA}|{CR}|{LF}|{DQUOTE}{DQUOTE})* { return 'ESCAPED_TEXT' }
 
@@ -36,11 +39,9 @@ TEXTDATA [\u0020-\u0021\u0023-\u002B\u002D-\u007E]
 %% // language grammar
 
 start
-  : SANKEY file opt_eof
+  : SANKEY csv opt_eof
   ;
 
-file: csv opt_newline;
-
 csv
   : record csv_tail 
   ;
@@ -67,7 +68,7 @@ record
       const value = parseFloat($value.trim());
       $$ = yy.addLink(source,target,value);
     } // parse only 3 fields, this is not part of CSV standard
-  | // allow empty record to handle empty lines, this is not part of CSV standard either
+  | {} // allow empty record to handle empty lines, this is not part of CSV standard either
   ;
 
 field
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts
index d44f3e6e8..f3faf9c7a 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts
@@ -19,11 +19,20 @@ import {
 let links: Array<SankeyLink> = [];
 let nodes: Array<SankeyNode> = [];
 let nodesHash: Record<string, SankeyNode> = {};
+let nodeAlign: string = 'justify';
+
+const setNodeAlign = function (alignment: string): void {
+  const nodeAlignments: string[] = ['left', 'right', 'center', 'justify'];
+  if (nodeAlignments.includes(alignment)) nodeAlign = alignment;
+};
+
+const getNodeAlign = () => nodeAlign;
 
 const clear = function () {
   links = [];
   nodes = [];
   nodesHash = {};
+  nodeAlign = 'justify';
   commonClear();
 };
 
@@ -85,6 +94,8 @@ export default {
   getGraph,
   addLink,
   findOrCreateNode,
+  setNodeAlign,
+  getNodeAlign,
   // TODO: If this is a must this probably should be an interface
   getAccTitle,
   setAccTitle,
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
index 63abb2a6c..4956b6cf2 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
@@ -87,6 +87,13 @@ export const draw = function (text: string, id: string, _version: string, diagOb
   //
 
   const graph = diagObj.db.getGraph();
+  const nodeAligns = {
+    left: d3SankeyLeft,
+    right: d3SankeyRight,
+    center: d3SankeyCenter,
+    justify: d3SankeyJustify,
+  };
+  const nodeAlign = nodeAligns[diagObj.db.getNodeAlign()];
 
   const nodeWidth = 10;
   // Construct and configure a Sankey generator
@@ -96,19 +103,12 @@ export const draw = function (text: string, id: string, _version: string, diagOb
     .nodeId((d) => d.id) // we use 'id' property to identify node
     .nodeWidth(nodeWidth)
     .nodePadding(10)
-    .nodeAlign(d3SankeyJustify) // d3.sankeyLeft, etc.
+    .nodeAlign(nodeAlign) // d3.sankeyLeft, etc.
     .extent([
       [0, 0],
       [width - nodeWidth, height],
     ]);
 
-  //["left", "sankeyLeft"], ["right", "sankeyRight"], ["center", "sankeyCenter"], ["justify", "sankeyJustify"]
-  // .nodeWidth(15)
-  //   .nodePadding(10)
-  //   .extent([[1, 5], [width - 1, height - 5]]);
-  // .nodeId(d => d['id'])
-  //
-
   // Compute the Sankey layout
   // Namely calculate nodes and links positions
   // Our `graph` object will be mutated by this

From be9cd480aa0a9815a899a5b158850e6a8292b6fa Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Thu, 22 Jun 2023 15:56:56 +0300
Subject: [PATCH 038/187] Sankey syntax has beed reduced

---
 cypress/integration/rendering/sankey.spec.js  |  1 +
 .../src/diagrams/sankey/parser/energy.csv     | 12 ++++++--
 .../src/diagrams/sankey/parser/sankey.jison   | 30 ++++---------------
 .../src/diagrams/sankey/parser/sankey.spec.ts | 18 ++++++-----
 .../src/diagrams/sankey/sankeyDiagram.ts      | 12 ++++++++
 5 files changed, 39 insertions(+), 34 deletions(-)

diff --git a/cypress/integration/rendering/sankey.spec.js b/cypress/integration/rendering/sankey.spec.js
index 3ed242724..435ef8184 100644
--- a/cypress/integration/rendering/sankey.spec.js
+++ b/cypress/integration/rendering/sankey.spec.js
@@ -5,6 +5,7 @@ describe('Sankey Diagram', () => {
     imgSnapshotTest(
       `
       sankey
+      
       a,b,10
       `,
       {}
diff --git a/packages/mermaid/src/diagrams/sankey/parser/energy.csv b/packages/mermaid/src/diagrams/sankey/parser/energy.csv
index 36fd45d2a..7f4dbc153 100644
--- a/packages/mermaid/src/diagrams/sankey/parser/energy.csv
+++ b/packages/mermaid/src/diagrams/sankey/parser/energy.csv
@@ -1,5 +1,7 @@
-Agricultural 'waste',Bio-conversion,124.729
+%% there are leading and trailing spaces, do not remove
+    Agricultural 'waste',Bio-conversion,124.729   
 Bio-conversion,Liquid,0.597
+%% line with comment
 Bio-conversion,Losses,26.862
 Bio-conversion,Solid,280.322
 Bio-conversion,Gas,81.144
@@ -50,6 +52,9 @@ Oil reserves,Oil,107.703
 Oil,Liquid,611.99
 Other waste,Solid,56.587
 Other waste,Bio-conversion,77.81
+%% blank lines in the middle
+
+
 Pumped heat,Heating and cooling - homes,193.026
 Pumped heat,Heating and cooling - commercial,70.672
 Solar PV,Electricity grid,59.901
@@ -65,4 +70,7 @@ 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
\ No newline at end of file
+Wind,Electricity grid,289.366
+
+%% lines at the end, do not remove
+
diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
index 649d2dbd8..b9d5854ed 100644
--- a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
+++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
@@ -23,10 +23,10 @@ TEXTDATA [\u0020-\u0021\u0023-\u002B\u002D-\u007E]
 
 %%
 
-<<EOF>> { return 'EOF' }
+<<EOF>> { return 'EOF' } // match end of file
 
 "sankey" { return 'SANKEY' }
-({CRLF}|{LF})+ { return 'NEWLINE' } // let newline to be multiple lines
+({CRLF}|{LF}) { return 'NEWLINE' }
 {COMMA} { return 'COMMA' }
 {DQUOTE} { return 'DQUOTE' }
 {TEXTDATA}* { return 'NON_ESCAPED_TEXT' }
@@ -38,28 +38,11 @@ TEXTDATA [\u0020-\u0021\u0023-\u002B\u002D-\u007E]
 
 %% // language grammar
 
-start
-  : SANKEY csv opt_eof
-  ;
+start: SANKEY NEWLINE csv opt_eof;
 
-csv
-  : record csv_tail 
-  ;
-
-csv_tail
-  : NEWLINE csv
-  | // empty
-  ;
-
-opt_newline
-  : NEWLINE
-  | // empty
-  ;
-
-opt_eof
-  : EOF
-  | // empty
-  ;
+csv: record csv_tail;
+csv_tail: NEWLINE csv | ;
+opt_eof: EOF | ;
 
 record
   : field\[source] COMMA field\[target] COMMA field\[value] {
@@ -68,7 +51,6 @@ record
       const value = parseFloat($value.trim());
       $$ = yy.addLink(source,target,value);
     } // parse only 3 fields, this is not part of CSV standard
-  | {} // allow empty record to handle empty lines, this is not part of CSV standard either
   ;
 
 field
diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts
index 60d70013d..873e99cb1 100644
--- a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts
+++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts
@@ -3,7 +3,8 @@ import diagram from './sankey.jison';
 // @ts-ignore: jison doesn't export types
 import { parser } from './sankey.jison';
 import db from '../sankeyDB.js';
-// import { fail } from 'assert';
+import { cleanupComments } from '../../../diagram-api/comments.js';
+import { prepareTextForParsing } from '../sankeyDiagram.js';
 
 describe('Sankey diagram', function () {
   // TODO - these examples should be put into ./parser/stateDiagram.spec.js
@@ -18,15 +19,16 @@ describe('Sankey diagram', function () {
       const fs = await import('fs');
       const path = await import('path');
       const csv = path.resolve(__dirname, './energy.csv');
-      fs.readFile(csv, 'utf8', (err: NodeJS.ErrnoException | null, data: string) => {
-        if (err) {
-          throw err;
-        }
+      const data = fs.readFileSync(csv, 'utf8');
 
-        const str = `sankey\\n${data}`;
+      // Add \n\n + space to emulate possible possible imperfections
+      const graphDefinition = prepareTextForParsing(cleanupComments('sankey\n\n ' + data));
+      // const textToParse = graphDefinition
+      //   .replaceAll(/^[^\S\r\n]+|[^\S\r\n]+$/g, '')
+      //   .replaceAll(/([\n\r])+/g, "\n")
+      //   .trim();
 
-        parser.parse(str);
-      });
+      parser.parse(graphDefinition);
     });
   });
 });
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts b/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts
index 9c8fbaa2d..7ec305db7 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts
@@ -5,6 +5,18 @@ import db from './sankeyDB.js';
 import styles from './styles.js';
 import renderer from './sankeyRenderer.js';
 
+export const prepareTextForParsing = (text: string): string => {
+  const textToParse = text
+    .replaceAll(/^[^\S\r\n]+|[^\S\r\n]+$/g, '') // remove all trailing spaces for each row
+    .replaceAll(/([\n\r])+/g, '\n') // remove empty lines duplicated
+    .trim();
+
+  return textToParse;
+};
+
+const originalParse = parser.parse.bind(parser);
+parser.parse = (text: string) => originalParse(prepareTextForParsing(text));
+
 export const diagram: DiagramDefinition = {
   parser,
   db,

From 9a29066426d27b6a751203b0f2b4fcb469aff5d8 Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Thu, 22 Jun 2023 16:53:44 +0300
Subject: [PATCH 039/187] Ensure that sankey keyword does not intefere with csv

---
 demos/sankey.html                             | 145 +++++++++---------
 .../src/diagrams/sankey/parser/energy.csv     |  45 ++++--
 .../src/diagrams/sankey/parser/sankey.jison   |  20 ++-
 3 files changed, 118 insertions(+), 92 deletions(-)

diff --git a/demos/sankey.html b/demos/sankey.html
index 3afc83371..a7d4d5537 100644
--- a/demos/sankey.html
+++ b/demos/sankey.html
@@ -17,79 +17,78 @@
     <h1>Sankey diagram demos</h1>
     <h2>Energy flow</h2>
     <pre class="mermaid">
-    sankey
-    
-    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
-    
-  </pre
-    >
+      sankey
+      
+      Agricultural 'waste',Bio-conversion,124.729
+      Bio-conversion,Liquid,0.597
+      %% line with comment
+      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
+    </pre>
 
     <script type="module">
       import mermaid from './mermaid.esm.mjs';
diff --git a/packages/mermaid/src/diagrams/sankey/parser/energy.csv b/packages/mermaid/src/diagrams/sankey/parser/energy.csv
index 7f4dbc153..8b8182252 100644
--- a/packages/mermaid/src/diagrams/sankey/parser/energy.csv
+++ b/packages/mermaid/src/diagrams/sankey/parser/energy.csv
@@ -1,18 +1,44 @@
-%% there are leading and trailing spaces, do not remove
+%% There are leading and trailing spaces, do not crop
     Agricultural 'waste',Bio-conversion,124.729   
+%% line with a comment
+
+%% Normal line
 Bio-conversion,Liquid,0.597
-%% line with comment
+
+%% Line with unquoted sankey keyword
+sankey,target,10
+
+%% Quoted sankey keyword
+"sankey",target,10
+
+%% Another normal line
 Bio-conversion,Losses,26.862
-Bio-conversion,Solid,280.322
+
+%% Line with integer amount
+Bio-conversion,Solid,280
+
+%% Some blank lines in the middle of CSV
+
+
+%% Another normal line
 Bio-conversion,Gas,81.144
-Biofuel imports,Liquid,35
-Biomass imports,Solid,35
+
+%% Quoted line
+"Biofuel imports",Liquid,35
+
+%% Quoted line with escaped quotes inside
+"""Biomass imports""",Solid,35
+
+%% Lines containing commas inside
+%% Quoted and unquoted values should be equal in terms of graph
+"District heating","Heating and cooling, commercial",22.505
+District heating,"Heating and cooling, homes",46.184
+
+%% A bunch of lines, normal CSV
 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
@@ -52,9 +78,6 @@ Oil reserves,Oil,107.703
 Oil,Liquid,611.99
 Other waste,Solid,56.587
 Other waste,Bio-conversion,77.81
-%% blank lines in the middle
-
-
 Pumped heat,Heating and cooling - homes,193.026
 Pumped heat,Heating and cooling - commercial,70.672
 Solar PV,Electricity grid,59.901
@@ -69,7 +92,7 @@ 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
+"""Wave""",Electricity grid,19.013
 Wind,Electricity grid,289.366
 
 %% lines at the end, do not remove
diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
index b9d5854ed..e9d3dfecb 100644
--- a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
+++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
@@ -13,24 +13,28 @@
 %options case-insensitive
 %options easy_keword_rules
 
+%x escaped_text
+%x csv
+
 // as per section 6.1 of RFC 2234 [2]
 COMMA \u002C
 CR \u000D 
 LF \u000A
 CRLF \u000D\u000A
+ESCAPED_QUOTE \u0022
 DQUOTE \u0022
 TEXTDATA [\u0020-\u0021\u0023-\u002B\u002D-\u007E]
 
 %%
 
-<<EOF>> { return 'EOF' } // match end of file
-
-"sankey" { return 'SANKEY' }
-({CRLF}|{LF}) { return 'NEWLINE' }
-{COMMA} { return 'COMMA' }
-{DQUOTE} { return 'DQUOTE' }
-{TEXTDATA}* { return 'NON_ESCAPED_TEXT' }
-({TEXTDATA}|{COMMA}|{CR}|{LF}|{DQUOTE}{DQUOTE})* { return 'ESCAPED_TEXT' }
+<INITIAL>"sankey"                              { this.pushState('csv'); return 'SANKEY'; }
+<INITIAL,csv><<EOF>>                           { return 'EOF' } // match end of file
+<INITIAL,csv>({CRLF}|{LF})                     { return 'NEWLINE' }
+<INITIAL,csv>{COMMA}                           { return 'COMMA' }
+<INITIAL,csv>{DQUOTE}                          { this.pushState('escaped_text'); return 'DQUOTE'; }
+<INITIAL,csv>{TEXTDATA}*                       { return 'NON_ESCAPED_TEXT' } 
+<INITIAL,csv,escaped_text>{DQUOTE}(?!{DQUOTE}) {this.popState('escaped_text'); return 'DQUOTE'; } // unescaped DQUOTE closes string
+<INITIAL,csv,escaped_text>({TEXTDATA}|{COMMA}|{CR}|{LF}|{DQUOTE}{DQUOTE})* { return 'ESCAPED_TEXT'; }
 
 /lex
 

From 104aece46e99699bacd0a844964cc12cd89844b1 Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Thu, 22 Jun 2023 17:35:40 +0300
Subject: [PATCH 040/187] Cleanup sankey diagrams according code review

---
 demos/sankey.html                             |   1 -
 .../diagrams/sankey/parser/desired_syntax.md  | 154 ------------------
 .../sankey/parser/sankey-arrow.spec.js        |  64 +-------
 .../src/diagrams/sankey/parser/sankey.spec.ts |   9 +-
 .../mermaid/src/diagrams/sankey/sankeyDB.ts   |   9 +-
 .../src/diagrams/sankey/sankeyDiagram.ts      |  12 --
 .../src/diagrams/sankey/sankeyRenderer.ts     |  30 ++--
 .../src/diagrams/sankey/sankeyUtils.ts        |   8 +
 packages/mermaid/src/setupGraphViewbox.js     |   1 -
 9 files changed, 24 insertions(+), 264 deletions(-)
 delete mode 100644 packages/mermaid/src/diagrams/sankey/parser/desired_syntax.md
 create mode 100644 packages/mermaid/src/diagrams/sankey/sankeyUtils.ts

diff --git a/demos/sankey.html b/demos/sankey.html
index a7d4d5537..e597c408f 100644
--- a/demos/sankey.html
+++ b/demos/sankey.html
@@ -21,7 +21,6 @@
       
       Agricultural 'waste',Bio-conversion,124.729
       Bio-conversion,Liquid,0.597
-      %% line with comment
       Bio-conversion,Losses,26.862
       Bio-conversion,Solid,280.322
       Bio-conversion,Gas,81.144
diff --git a/packages/mermaid/src/diagrams/sankey/parser/desired_syntax.md b/packages/mermaid/src/diagrams/sankey/parser/desired_syntax.md
deleted file mode 100644
index ccde1c59b..000000000
--- a/packages/mermaid/src/diagrams/sankey/parser/desired_syntax.md
+++ /dev/null
@@ -1,154 +0,0 @@
-# Sankey diagrams syntax proposal
-
-## What is used now
-
-**Circular graphs are not supported by d3. There are some alternatives for that.**
-**Dropped flows are not supported by d3**
-
-This is example of data for Sakey diagrams from d3 author (simple csv):
-
-```csv
-Berlin,Job Applications,102
-Barcelona,Job Applications,39
-Madrid,Job Applications,35
-Amsterdam,Job Applications,15
-Paris,Job Applications,14
-London,Job Applications,6
-Munich,Job Applications,5
-Brussels,Job Applications,4
-Dubai,Job Applications,3
-Dublin,Job Applications,3
-Other Cities,Job Applications,12
-Job Applications,No Response,189
-Job Applications,Responded,49,orange
-Responded,Rejected,38
-Responded,Interviewed,11,orange
-Interviewed,No Offer,8
-Interviewed,Declined Offer,2
-Interviewed,Accepted Offer,1,orange
-```
-
-GoJS uses similar approach:
-
-```json
-{
-"nodeDataArray": [
-{"key":"Coal reserves", "text":"Coal reserves", "color":"#9d75c2"},
-{"key":"Coal imports", "text":"Coal imports", "color":"#9d75c2"},
-{"key":"Oil reserves", "text":"Oil\nreserves", "color":"#9d75c2"},
-{"key":"Oil imports", "text":"Oil imports", "color":"#9d75c2"}
-],
-"linkDataArray": [
-{"from":"Coal reserves", "to":"Coal", "width":31},
-{"from":"Coal imports", "to":"Coal", "width":86},
-{"from":"Oil reserves", "to":"Oil", "width":244}
-}
-```
-
-## What do we need
-
-Mainly we need:
-
-- collection of nodes
-- collection of links
-
-We also need graph and node attributes like this:
-
-- link sort
-- node sort
-- coloring strategy for links (source, target, transition)
-- graph alignment (left, right, width)
-- node color
-- node title
-- node width
-- node padding
-- graph margin
-
-## Desired syntax
-
-Graph is a list of flows (or links).
-Flow is a sequence `node -> value -> node -> value...`
-
-```
-a -> 30 -> b
-a -> 40 -> b
-```
-
-2 separate streams between 2 nodes they can be grouped as well:
-
-```
-a -> {
-    30
-    40
-} -> b
-```
-
-All outflows from the node can be grouped:
-
-```
-a -> {
-    30 -> b
-    40 -> c
-}
-```
-
-All inflows to the node can be grouped too:
-
-```
-{
-    a -> 30
-    b -> 40
-} -> c
-```
-
-Chaining example:
-
-```
-a -> {
-    30
-    40
-} -> b -> {
-    20 -> d -> 11
-    50 -> e -> 11
-} -> f -> 30
-```
-
-**Probably ambiguous!**
-
-Does the sample below mean that total outflow from "a" is 60?
-
-```
-a -> 30 -> {
-    b
-    c
-}
-```
-
-Or does this one mean that total outflow must be 140 (70 to "b" and "c" respectively)?
-
-```
-a -> {
-    30
-    40
-} -> {
-    b
-    c
-}
-```
-
-**Overcomplicated**
-
-Nested:
-
-```
-{
-    {
-        a -> 30
-        b -> 40
-    } -> c -> 12
-    {
-        d -> 10
-        e -> 20
-    } -> f -> 43
-} -> g
-```
diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.spec.js b/packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.spec.js
index 19f1ff357..a85a8d5c0 100644
--- a/packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.spec.js
+++ b/packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.spec.js
@@ -85,7 +85,7 @@ describe('Sankey diagram', function () {
         parser.parse(str);
       });
 
-      it('parses truly complex example', () => {
+      it('parses real example', () => {
         const str = `
         sankey
 
@@ -95,68 +95,6 @@ describe('Sankey diagram', function () {
         "Bio-conversion"            ->      280.322  -> "Solid"
         "Bio-conversion"            ->      81.144   -> "Gas"
         "Biofuel imports"           ->      35       -> "Liquid"
-        "Biomass imports"           ->      35       -> "Solid"
-        "Coal imports"              ->      11.606   -> "Coal"
-        "Coal reserves"             ->      63.965   -> "Coal"
-        "Coal"                      ->      75.571   -> "Solid"
-        "District heating"          ->      10.639   -> "Industry"
-        "District heating"          ->      22.505   -> "Heating and cooling - commercial"
-        "District heating"          ->      46.184   -> "Heating and cooling - homes"
-        "Electricity grid"          ->      104.453  -> "Over generation / exports"
-        "Electricity grid"          ->      113.726  -> "Heating and cooling - homes"
-        "Electricity grid"          ->      27.14    -> "H2 conversion"
-        "Electricity grid"          ->      342.165  -> "Industry"
-        "Electricity grid"          ->      37.797   -> "Road transport"
-        "Electricity grid"          ->      4.412    -> "Agriculture"
-        "Electricity grid"          ->      40.858   -> "Heating and cooling - commercial"
-        "Electricity grid"          ->      56.691   -> "Losses"
-        "Electricity grid"          ->      7.863    -> "Rail transport"
-        "Electricity grid"          ->      90.008   -> "Lighting & appliances - commercial"
-        "Electricity grid"          ->      93.494   -> "Lighting & appliances - homes"
-        "Gas imports"               ->      40.719   -> "Ngas"
-        "Gas reserves"              ->      82.233   -> "Ngas"
-        "Gas"                       ->      0.129    -> "Heating and cooling - commercial"
-        "Gas"                       ->      1.401    -> "Losses"
-        "Gas"                       ->      151.891  -> "Thermal generation"
-        "Gas"                       ->      2.096    -> "Agriculture"
-        "Gas"                       ->      48.58    -> "Industry"
-        "Geothermal"                ->      7.013    -> "Electricity grid"
-        "H2 conversion"             ->      20.897   -> "H2"
-        "H2 conversion"             ->      6.242    -> "Losses"
-        "H2"                        ->      20.897   -> "Road transport"
-        "Hydro"                     ->      6.995    -> "Electricity grid"
-        "Liquid"                    ->      121.066  -> "Industry"
-        "Liquid"                    ->      128.69   -> "International shipping"
-        "Liquid"                    ->      135.835  -> "Road transport"
-        "Liquid"                    ->      14.458   -> "Domestic aviation"
-        "Liquid"                    ->      206.267  -> "International aviation"
-        "Liquid"                    ->      3.64     -> "Agriculture"
-        "Liquid"                    ->      33.218   -> "National navigation"
-        "Liquid"                    ->      4.413    -> "Rail transport"
-        "Marine algae"              ->      4.375    -> "Bio-conversion"
-        "Ngas"                      ->      122.952  -> "Gas"
-        "Nuclear"                   ->      839.978  -> "Thermal generation"
-        "Oil imports"               ->      504.287  -> "Oil"
-        "Oil reserves"              ->      107.703  -> "Oil"
-        "Oil"                       ->      611.99   -> "Liquid"
-        "Other waste"               ->      56.587   -> "Solid"
-        "Other waste"               ->      77.81    -> "Bio-conversion"
-        "Pumped heat"               ->      193.026  -> "Heating and cooling - homes"
-        "Pumped heat"               ->      70.672   -> "Heating and cooling - commercial"
-        "Solar PV"                  ->      59.901   -> "Electricity grid"
-        "Solar Thermal"             ->      19.263   -> "Heating and cooling - homes"
-        "Solar"                     ->      19.263   -> "Solar Thermal"
-        "Solar"                     ->      59.901   -> "Solar PV"
-        "Solid"                     ->      0.882    -> "Agriculture"
-        "Solid"                     ->      400.12   -> "Thermal generation"
-        "Solid"                     ->      46.477   -> "Industry"
-        "Thermal generation"        ->      525.531  -> "Electricity grid"
-        "Thermal generation"        ->      787.129  -> "Losses"
-        "Thermal generation"        ->      79.329   -> "District heating"
-        "Tidal"                     ->      9.452    -> "Electricity grid"
-        "UK land based bioenergy"   ->      182.01   -> "Bio-conversion"
-        "Wave"                      ->      19.013   -> "Electricity grid"
-        "Wind"                      ->      289.366  -> "Electricity grid"
         `;
 
         parser.parse(str);
diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts
index 873e99cb1..10a187622 100644
--- a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts
+++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts
@@ -4,10 +4,9 @@ import diagram from './sankey.jison';
 import { parser } from './sankey.jison';
 import db from '../sankeyDB.js';
 import { cleanupComments } from '../../../diagram-api/comments.js';
-import { prepareTextForParsing } from '../sankeyDiagram.js';
+import { prepareTextForParsing } from '../sankeyUtils.js';
 
 describe('Sankey diagram', function () {
-  // TODO - these examples should be put into ./parser/stateDiagram.spec.js
   describe('when parsing an info graph it', function () {
     beforeEach(function () {
       parser.yy = db;
@@ -20,13 +19,7 @@ describe('Sankey diagram', function () {
       const path = await import('path');
       const csv = path.resolve(__dirname, './energy.csv');
       const data = fs.readFileSync(csv, 'utf8');
-
-      // Add \n\n + space to emulate possible possible imperfections
       const graphDefinition = prepareTextForParsing(cleanupComments('sankey\n\n ' + data));
-      // const textToParse = graphDefinition
-      //   .replaceAll(/^[^\S\r\n]+|[^\S\r\n]+$/g, '')
-      //   .replaceAll(/([\n\r])+/g, "\n")
-      //   .trim();
 
       parser.parse(graphDefinition);
     });
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts
index f3faf9c7a..f54034a3b 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts
@@ -1,5 +1,3 @@
-// import { log } from '../../logger.js';
-// import mermaidAPI from '../../mermaidAPI.js';
 import * as configApi from '../../config.js';
 import common from '../common/common.js';
 import {
@@ -19,11 +17,13 @@ import {
 let links: Array<SankeyLink> = [];
 let nodes: Array<SankeyNode> = [];
 let nodesHash: Record<string, SankeyNode> = {};
-let nodeAlign: string = 'justify';
+let nodeAlign = 'justify';
 
 const setNodeAlign = function (alignment: string): void {
   const nodeAlignments: string[] = ['left', 'right', 'center', 'justify'];
-  if (nodeAlignments.includes(alignment)) nodeAlign = alignment;
+  if (nodeAlignments.includes(alignment)) {
+    nodeAlign = alignment;
+  }
 };
 
 const getNodeAlign = () => nodeAlign;
@@ -96,7 +96,6 @@ export default {
   findOrCreateNode,
   setNodeAlign,
   getNodeAlign,
-  // TODO: If this is a must this probably should be an interface
   getAccTitle,
   setAccTitle,
   getAccDescription,
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts b/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts
index 7ec305db7..9c8fbaa2d 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts
@@ -5,18 +5,6 @@ import db from './sankeyDB.js';
 import styles from './styles.js';
 import renderer from './sankeyRenderer.js';
 
-export const prepareTextForParsing = (text: string): string => {
-  const textToParse = text
-    .replaceAll(/^[^\S\r\n]+|[^\S\r\n]+$/g, '') // remove all trailing spaces for each row
-    .replaceAll(/([\n\r])+/g, '\n') // remove empty lines duplicated
-    .trim();
-
-  return textToParse;
-};
-
-const originalParse = parser.parse.bind(parser);
-parser.parse = (text: string) => originalParse(prepareTextForParsing(text));
-
 export const diagram: DiagramDefinition = {
   parser,
   db,
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
index 4956b6cf2..b034e8c24 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
@@ -1,14 +1,11 @@
 // @ts-nocheck TODO: fix file
 import { Diagram } from '../../Diagram.js';
-// import { log } from '../../logger.js';
 import * as configApi from '../../config.js';
 
 import {
   select as d3select,
   scaleOrdinal as d3scaleOrdinal,
   schemeTableau10 as d3schemeTableau10,
-  // rgb as d3rgb,
-  // map as d3map,
 } from 'd3';
 
 import {
@@ -20,7 +17,7 @@ import {
   sankeyJustify as d3SankeyJustify,
 } from 'd3-sankey';
 import { configureSvgSize } from '../../setupGraphViewbox.js';
-// import { debug } from 'console';
+import { prepareTextForParsing } from './sankeyUtils.js';
 
 /**
  * Draws a sequenceDiagram in the tag with id: id based on the graph definition in text.
@@ -31,20 +28,15 @@ import { configureSvgSize } from '../../setupGraphViewbox.js';
  * @param diagObj - A standard diagram containing the db and the text and type etc of the diagram
  */
 export const draw = function (text: string, id: string, _version: string, diagObj: Diagram): void {
-  // First of all parse sankey language
-  // Everything that is parsed will be stored in diagObj.DB
-  // That is why we need to clear DB first
+  // Clear DB before parsing
   //
-  if (diagObj?.db?.clear !== undefined) {
-    // why do we need to check for undefined? typescript complains
-    diagObj?.db?.clear();
-  }
+  diagObj.db.clear?.();
+  
   // Launch parsing
-  diagObj.parser.parse(text);
-  // debugger;
-  // log.debug('Parsed sankey diagram');
+  const preparedText = prepareTextForParsing(text);
+  diagObj.parser.parse(preparedText);
 
-  // Figure out what is happening there
+  // TODO: Figure out what is happening there
   // The main thing is svg object that is a d3 wrapper for svg operations
   //
   const { securityLevel, sequence: conf } = configApi.getConfig();
@@ -95,10 +87,10 @@ export const draw = function (text: string, id: string, _version: string, diagOb
   };
   const nodeAlign = nodeAligns[diagObj.db.getNodeAlign()];
 
-  const nodeWidth = 10;
   // Construct and configure a Sankey generator
   // That will be a function that calculates nodes and links dimensions
   //
+  const nodeWidth = 10;
   const sankey = d3Sankey()
     .nodeId((d) => d.id) // we use 'id' property to identify node
     .nodeWidth(nodeWidth)
@@ -109,10 +101,8 @@ export const draw = function (text: string, id: string, _version: string, diagOb
       [width - nodeWidth, height],
     ]);
 
-  // Compute the Sankey layout
-  // Namely calculate nodes and links positions
-  // Our `graph` object will be mutated by this
-  // and enriched with some properties
+  // Compute the Sankey layout: calculate nodes and links positions
+  // Our `graph` object will be mutated by this and enriched with other properties
   //
   sankey(graph);
 
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyUtils.ts b/packages/mermaid/src/diagrams/sankey/sankeyUtils.ts
new file mode 100644
index 000000000..45ecf21dd
--- /dev/null
+++ b/packages/mermaid/src/diagrams/sankey/sankeyUtils.ts
@@ -0,0 +1,8 @@
+export const prepareTextForParsing = (text: string): string => {
+  const textToParse = text
+    .replaceAll(/^[^\S\n\r]+|[^\S\n\r]+$/g, '') // remove all trailing spaces for each row
+    .replaceAll(/([\n\r])+/g, '\n') // remove empty lines duplicated
+    .trim();
+
+  return textToParse;
+};
diff --git a/packages/mermaid/src/setupGraphViewbox.js b/packages/mermaid/src/setupGraphViewbox.js
index 9294f8024..0396d654f 100644
--- a/packages/mermaid/src/setupGraphViewbox.js
+++ b/packages/mermaid/src/setupGraphViewbox.js
@@ -25,7 +25,6 @@ export const calculateSvgSizeAttrs = function (height, width, useMaxWidth) {
   if (useMaxWidth) {
     attrs.set('width', '100%');
     attrs.set('style', `max-width: ${width}px;`);
-    // TODO: when using max width it does not set height? Is it intended?
   } else {
     attrs.set('height', height);
     attrs.set('width', width);

From 518da3236f3ca8300e5c73a8a0f08b51779e5882 Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Thu, 22 Jun 2023 18:28:02 +0300
Subject: [PATCH 041/187] Remove unnecessary parsing stage from render and
 prepare text before parsing

---
 packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts  | 4 ++++
 packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts | 9 ---------
 2 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts b/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts
index 9c8fbaa2d..4fce38f97 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts
@@ -4,6 +4,10 @@ import parser from './parser/sankey.jison';
 import db from './sankeyDB.js';
 import styles from './styles.js';
 import renderer from './sankeyRenderer.js';
+import { prepareTextForParsing } from './sankeyUtils.js';
+
+const originalParse = parser.parse.bind(parser);
+parser.parse = (text: string) => originalParse(prepareTextForParsing(text));
 
 export const diagram: DiagramDefinition = {
   parser,
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
index b034e8c24..4bb5bbd15 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
@@ -17,7 +17,6 @@ import {
   sankeyJustify as d3SankeyJustify,
 } from 'd3-sankey';
 import { configureSvgSize } from '../../setupGraphViewbox.js';
-import { prepareTextForParsing } from './sankeyUtils.js';
 
 /**
  * Draws a sequenceDiagram in the tag with id: id based on the graph definition in text.
@@ -28,14 +27,6 @@ import { prepareTextForParsing } from './sankeyUtils.js';
  * @param diagObj - A standard diagram containing the db and the text and type etc of the diagram
  */
 export const draw = function (text: string, id: string, _version: string, diagObj: Diagram): void {
-  // Clear DB before parsing
-  //
-  diagObj.db.clear?.();
-  
-  // Launch parsing
-  const preparedText = prepareTextForParsing(text);
-  diagObj.parser.parse(preparedText);
-
   // TODO: Figure out what is happening there
   // The main thing is svg object that is a d3 wrapper for svg operations
   //

From d9036c7af19dad576348197a60720ea31a565c97 Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Thu, 22 Jun 2023 21:26:39 +0300
Subject: [PATCH 042/187] Added gradient for sankey and cleaned code

---
 package.json                                  |  2 +
 .../mermaid/src/diagrams/sankey/sankeyDB.ts   |  1 -
 .../src/diagrams/sankey/sankeyDiagram.ts      |  3 +-
 .../src/diagrams/sankey/sankeyRenderer.ts     | 75 ++++++++++++-------
 .../src/diagrams/sankey/sankeyUtils.ts        | 32 +++++++-
 .../mermaid/src/diagrams/sankey/styles.js     |  5 --
 packages/mermaid/src/styles.spec.ts           |  3 +-
 pnpm-lock.yaml                                | 22 ++++++
 8 files changed, 104 insertions(+), 39 deletions(-)
 delete mode 100644 packages/mermaid/src/diagrams/sankey/styles.js

diff --git a/package.json b/package.json
index 785f8056c..f1ab3d4ec 100644
--- a/package.json
+++ b/package.json
@@ -66,6 +66,8 @@
     "@cypress/code-coverage": "^3.10.7",
     "@rollup/plugin-typescript": "^11.1.1",
     "@types/cors": "^2.8.13",
+    "@types/d3": "^7.4.0",
+    "@types/d3-sankey": "^0.12.1",
     "@types/eslint": "^8.37.0",
     "@types/express": "^4.17.17",
     "@types/js-yaml": "^4.0.5",
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts
index f54034a3b..853313640 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts
@@ -73,7 +73,6 @@ const findOrCreateNode = function (ID: string): SankeyNode {
   return node;
 };
 
-// TODO: this will be better using getters in typescript
 const getNodes = () => nodes;
 const getLinks = () => links;
 
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts b/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts
index 4fce38f97..df32523e8 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts
@@ -2,7 +2,6 @@ import { DiagramDefinition } from '../../diagram-api/types.js';
 // @ts-ignore: jison doesn't export types
 import parser from './parser/sankey.jison';
 import db from './sankeyDB.js';
-import styles from './styles.js';
 import renderer from './sankeyRenderer.js';
 import { prepareTextForParsing } from './sankeyUtils.js';
 
@@ -13,5 +12,5 @@ export const diagram: DiagramDefinition = {
   parser,
   db,
   renderer,
-  styles,
+  styles: () => {},
 };
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
index 4bb5bbd15..0624d7eac 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
@@ -4,7 +4,9 @@ import * as configApi from '../../config.js';
 
 import {
   select as d3select,
+  // @ts-ignore TODO: make proper import 
   scaleOrdinal as d3scaleOrdinal,
+  // @ts-ignore TODO: make proper import 
   schemeTableau10 as d3schemeTableau10,
 } from 'd3';
 
@@ -17,6 +19,7 @@ import {
   sankeyJustify as d3SankeyJustify,
 } from 'd3-sankey';
 import { configureSvgSize } from '../../setupGraphViewbox.js';
+import { Uid } from './sankeyUtils.js';
 
 /**
  * Draws a sequenceDiagram in the tag with id: id based on the graph definition in text.
@@ -31,14 +34,15 @@ export const draw = function (text: string, id: string, _version: string, diagOb
   // The main thing is svg object that is a d3 wrapper for svg operations
   //
   const { securityLevel, sequence: conf } = configApi.getConfig();
-  let sandboxElement;
+  let sandboxElement: any;
   if (securityLevel === 'sandbox') {
     sandboxElement = d3select('#i' + id);
   }
-  const root =
-    securityLevel === 'sandbox'
-      ? d3select(sandboxElement.nodes()[0].contentDocument.body)
-      : d3select('body');
+  let root = d3select('body');
+
+  if (securityLevel === 'sandbox' && sandboxElement) {
+    d3select(sandboxElement.nodes()[0].contentDocument.body)
+  }
   const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
   const svg = securityLevel === 'sandbox' ? root.select(`[id="${id}"]`) : d3select(`[id="${id}"]`);
 
@@ -46,11 +50,11 @@ export const draw = function (text: string, id: string, _version: string, diagOb
   //
   const elem = doc.getElementById(id);
   const width = elem.parentElement.offsetWidth;
-  const height = 600; // TODO calculate height?
+  const height = 600;
 
   // FIX: using max width prevents height from being set
-  configureSvgSize(svg, height, width, true);
-  svg.attr('height', height); // that's why we need this line
+  configureSvgSize(svg, height, width, false);
+  // svg.attr('height', height); // that's why we need this line
 
   // Prepare data for construction based on diagObj.db
   // This must be a mutable object with 2 properties:
@@ -68,7 +72,6 @@ export const draw = function (text: string, id: string, _version: string, diagOb
   //      ]
   //    };
   //
-
   const graph = diagObj.db.getGraph();
   const nodeAligns = {
     left: d3SankeyLeft,
@@ -83,13 +86,13 @@ export const draw = function (text: string, id: string, _version: string, diagOb
   //
   const nodeWidth = 10;
   const sankey = d3Sankey()
-    .nodeId((d) => d.id) // we use 'id' property to identify node
+    .nodeId((d: any) => d.id) // we use 'id' property to identify node
     .nodeWidth(nodeWidth)
     .nodePadding(10)
-    .nodeAlign(nodeAlign) // d3.sankeyLeft, etc.
+    .nodeAlign(nodeAlign)
     .extent([
       [0, 0],
-      [width - nodeWidth, height],
+      [width, height],
     ]);
 
   // Compute the Sankey layout: calculate nodes and links positions
@@ -98,9 +101,9 @@ export const draw = function (text: string, id: string, _version: string, diagOb
   sankey(graph);
 
   // Get color scheme for the graph
-  const color = d3scaleOrdinal(d3schemeTableau10);
+  const colorScheme = d3scaleOrdinal(d3schemeTableau10);
 
-  // Create groups for nodes
+  // Create rectangles for nodes
   svg
     .append('g')
     .attr('class', 'nodes')
@@ -108,17 +111,17 @@ export const draw = function (text: string, id: string, _version: string, diagOb
     .data(graph.nodes)
     .join('g')
     .attr('class', 'node')
-    .attr('transform', function (d) {
+    .attr('transform', function (d: any) {
       return 'translate(' + d.x0 + ',' + d.y0 + ')';
     })
-    .attr('x', (d) => d.x0)
-    .attr('y', (d) => d.y0)
+    .attr('x', (d: any) => d.x0)
+    .attr('y', (d: any) => d.y0)
     .append('rect')
-    .attr('height', (d) => {
+    .attr('height', (d: any) => {
       return d.y1 - d.y0;
     })
-    .attr('width', (d) => d.x1 - d.x0)
-    .attr('fill', (d) => color(d.id));
+    .attr('width', (d: any) => d.x1 - d.x0)
+    .attr('fill', (d: any) => colorScheme(d.id));
 
   // Create labels for nodes
   svg
@@ -129,14 +132,14 @@ export const draw = function (text: string, id: string, _version: string, diagOb
     .selectAll('text')
     .data(graph.nodes)
     .join('text')
-    .attr('x', (d) => (d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6))
-    .attr('y', (d) => (d.y1 + d.y0) / 2)
+    .attr('x', (d: any) => (d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6))
+    .attr('y', (d: any) => (d.y1 + d.y0) / 2)
     .attr('dy', '0.35em')
-    .attr('text-anchor', (d) => (d.x0 < width / 2 ? 'start' : 'end'))
-    .text((d) => d.label);
+    .attr('text-anchor', (d: any) => (d.x0 < width / 2 ? 'start' : 'end'))
+    .text((d: any) => d.label);
 
   // Creates the paths that represent the links.
-  const link_g = svg
+  const link = svg
     .append('g')
     .attr('class', 'links')
     .attr('fill', 'none')
@@ -147,11 +150,27 @@ export const draw = function (text: string, id: string, _version: string, diagOb
     .attr('class', 'link')
     .style('mix-blend-mode', 'multiply');
 
-  link_g
+  const gradient = link.append("linearGradient")
+    .attr("id", d => (d.uid = Uid.next("linearGradient-")).id)
+    .attr("gradientUnits", "userSpaceOnUse")
+    .attr("x1", d => d.source.x1)
+    .attr("x2", d => d.target.x0);
+
+  gradient
+    .append("stop")
+    .attr("offset", "0%")
+    .attr("stop-color", d => colorScheme(d.source.id));
+
+  gradient
+    .append("stop")
+    .attr("offset", "100%")
+    .attr("stop-color", d => colorScheme(d.target.id));
+
+  link
     .append('path')
     .attr('d', d3SankeyLinkHorizontal())
-    .attr('stroke', (d) => color(d.source.id))
-    .attr('stroke-width', (d) => Math.max(1, d.width));
+    .attr('stroke', (d: any) => d.uid)
+    .attr('stroke-width', (d: any) => Math.max(1, d.width));
 };
 
 export default {
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyUtils.ts b/packages/mermaid/src/diagrams/sankey/sankeyUtils.ts
index 45ecf21dd..861634a3c 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyUtils.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyUtils.ts
@@ -1,4 +1,4 @@
-export const prepareTextForParsing = (text: string): string => {
+const prepareTextForParsing = (text: string): string => {
   const textToParse = text
     .replaceAll(/^[^\S\n\r]+|[^\S\n\r]+$/g, '') // remove all trailing spaces for each row
     .replaceAll(/([\n\r])+/g, '\n') // remove empty lines duplicated
@@ -6,3 +6,33 @@ export const prepareTextForParsing = (text: string): string => {
 
   return textToParse;
 };
+
+
+class Uid {
+  private static count: number = 0;
+  id: string;
+  href: string;
+
+  public static next(name: string): Uid {
+    return new Uid(name + ++Uid.count);
+  }
+
+  constructor(id: string) {
+    this.id = id;
+    this.href = `#${id}`;
+  }
+
+  toString(): string {
+    return "url(" + this.href + ")";
+  }
+}
+
+export {
+  Uid,
+  prepareTextForParsing
+};
+
+
+
+
+
diff --git a/packages/mermaid/src/diagrams/sankey/styles.js b/packages/mermaid/src/diagrams/sankey/styles.js
deleted file mode 100644
index 54881fe6f..000000000
--- a/packages/mermaid/src/diagrams/sankey/styles.js
+++ /dev/null
@@ -1,5 +0,0 @@
-const getStyles = (options) =>
-  `
-`;
-
-export default getStyles;
diff --git a/packages/mermaid/src/styles.spec.ts b/packages/mermaid/src/styles.spec.ts
index d1edf4111..af076b6f9 100644
--- a/packages/mermaid/src/styles.spec.ts
+++ b/packages/mermaid/src/styles.spec.ts
@@ -29,7 +29,6 @@ import state from './diagrams/state/styles.js';
 import journey from './diagrams/user-journey/styles.js';
 import timeline from './diagrams/timeline/styles.js';
 import mindmap from './diagrams/mindmap/styles.js';
-import sankey from './diagrams/sankey/styles.js';
 import themes from './themes/index.js';
 
 async function checkValidStylisCSSStyleSheet(stylisString: string) {
@@ -99,7 +98,7 @@ describe('styles', () => {
         sequence,
         state,
         timeline,
-        sankey,
+        sankey: () => {},
       })) {
         test(`should return a valid style for diagram ${diagramId} and theme ${themeId}`, async () => {
           const { default: getStyles, addStylesForDiagram } = await import('./styles.js');
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4ddd70f2a..219cecd96 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -25,6 +25,12 @@ importers:
       '@types/cors':
         specifier: ^2.8.13
         version: 2.8.13
+      '@types/d3':
+        specifier: ^7.4.0
+        version: 7.4.0
+      '@types/d3-sankey':
+        specifier: ^0.12.1
+        version: 0.12.1
       '@types/eslint':
         specifier: ^8.37.0
         version: 8.37.0
@@ -3983,6 +3989,10 @@ packages:
       '@types/d3-color': 3.1.0
     dev: true
 
+  /@types/d3-path@1.0.9:
+    resolution: {integrity: sha512-NaIeSIBiFgSC6IGUBjZWcscUJEq7vpVu7KthHN8eieTV9d9MqkSOZLH4chq1PmcKy06PNe3axLeKmRIyxJ+PZQ==}
+    dev: true
+
   /@types/d3-path@3.0.0:
     resolution: {integrity: sha512-0g/A+mZXgFkQxN3HniRDbXMN79K3CdTpLsevj+PXiTcb2hVyvkZUBg37StmgCQkaD84cUJ4uaDAWq7UJOQy2Tg==}
     dev: true
@@ -3999,6 +4009,12 @@ packages:
     resolution: {integrity: sha512-IIE6YTekGczpLYo/HehAy3JGF1ty7+usI97LqraNa8IiDur+L44d0VOjAvFQWJVdZOJHukUJw+ZdZBlgeUsHOQ==}
     dev: true
 
+  /@types/d3-sankey@0.12.1:
+    resolution: {integrity: sha512-10X6l6lXB42udBNX9/fDN+kJuooifSMk7+x4U9815eobavldqis4wDdFQUQjMazh+qlzsUZsGzXKxfWFUVt+3w==}
+    dependencies:
+      '@types/d3-shape': 1.3.8
+    dev: true
+
   /@types/d3-scale-chromatic@3.0.0:
     resolution: {integrity: sha512-dsoJGEIShosKVRBZB0Vo3C8nqSDqVGujJU6tPznsBJxNJNwMF8utmS83nvCBKQYPpjCzaaHcrf66iTRpZosLPw==}
     dev: true
@@ -4013,6 +4029,12 @@ packages:
     resolution: {integrity: sha512-xCB0z3Hi8eFIqyja3vW8iV01+OHGYR2di/+e+AiOcXIOrY82lcvWW8Ke1DYE/EUVMsBl4Db9RppSBS3X1U6J0w==}
     dev: true
 
+  /@types/d3-shape@1.3.8:
+    resolution: {integrity: sha512-gqfnMz6Fd5H6GOLYixOZP/xlrMtJms9BaS+6oWxTKHNqPGZ93BkWWupQSCYm6YHqx6h9wjRupuJb90bun6ZaYg==}
+    dependencies:
+      '@types/d3-path': 1.0.9
+    dev: true
+
   /@types/d3-shape@3.1.0:
     resolution: {integrity: sha512-jYIYxFFA9vrJ8Hd4Se83YI6XF+gzDL1aC5DCsldai4XYYiVNdhtpGbA/GM6iyQ8ayhSp3a148LY34hy7A4TxZA==}
     dependencies:

From c75c10649047aab1b1b6b532fd2f49a589e721b5 Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Thu, 22 Jun 2023 23:02:13 +0300
Subject: [PATCH 043/187] Put styles back

---
 packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts | 3 ++-
 packages/mermaid/src/diagrams/sankey/styles.js        | 5 +++++
 packages/mermaid/src/styles.spec.ts                   | 3 ++-
 3 files changed, 9 insertions(+), 2 deletions(-)
 create mode 100644 packages/mermaid/src/diagrams/sankey/styles.js

diff --git a/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts b/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts
index df32523e8..4fce38f97 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts
@@ -2,6 +2,7 @@ import { DiagramDefinition } from '../../diagram-api/types.js';
 // @ts-ignore: jison doesn't export types
 import parser from './parser/sankey.jison';
 import db from './sankeyDB.js';
+import styles from './styles.js';
 import renderer from './sankeyRenderer.js';
 import { prepareTextForParsing } from './sankeyUtils.js';
 
@@ -12,5 +13,5 @@ export const diagram: DiagramDefinition = {
   parser,
   db,
   renderer,
-  styles: () => {},
+  styles,
 };
diff --git a/packages/mermaid/src/diagrams/sankey/styles.js b/packages/mermaid/src/diagrams/sankey/styles.js
new file mode 100644
index 000000000..54881fe6f
--- /dev/null
+++ b/packages/mermaid/src/diagrams/sankey/styles.js
@@ -0,0 +1,5 @@
+const getStyles = (options) =>
+  `
+`;
+
+export default getStyles;
diff --git a/packages/mermaid/src/styles.spec.ts b/packages/mermaid/src/styles.spec.ts
index af076b6f9..d1edf4111 100644
--- a/packages/mermaid/src/styles.spec.ts
+++ b/packages/mermaid/src/styles.spec.ts
@@ -29,6 +29,7 @@ import state from './diagrams/state/styles.js';
 import journey from './diagrams/user-journey/styles.js';
 import timeline from './diagrams/timeline/styles.js';
 import mindmap from './diagrams/mindmap/styles.js';
+import sankey from './diagrams/sankey/styles.js';
 import themes from './themes/index.js';
 
 async function checkValidStylisCSSStyleSheet(stylisString: string) {
@@ -98,7 +99,7 @@ describe('styles', () => {
         sequence,
         state,
         timeline,
-        sankey: () => {},
+        sankey,
       })) {
         test(`should return a valid style for diagram ${diagramId} and theme ${themeId}`, async () => {
           const { default: getStyles, addStylesForDiagram } = await import('./styles.js');

From 7ace602a6c0ab09e20853e7e81ab50e0d4365846 Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Thu, 22 Jun 2023 23:24:41 +0300
Subject: [PATCH 044/187] Fixed linters

---
 packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts | 2 +-
 packages/mermaid/src/diagrams/sankey/sankeyUtils.ts    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
index 0624d7eac..70661d0da 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
@@ -41,7 +41,7 @@ export const draw = function (text: string, id: string, _version: string, diagOb
   let root = d3select('body');
 
   if (securityLevel === 'sandbox' && sandboxElement) {
-    d3select(sandboxElement.nodes()[0].contentDocument.body)
+    root = d3select(sandboxElement.nodes()[0].contentDocument.body)
   }
   const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
   const svg = securityLevel === 'sandbox' ? root.select(`[id="${id}"]`) : d3select(`[id="${id}"]`);
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyUtils.ts b/packages/mermaid/src/diagrams/sankey/sankeyUtils.ts
index 861634a3c..838d25c7e 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyUtils.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyUtils.ts
@@ -9,7 +9,7 @@ const prepareTextForParsing = (text: string): string => {
 
 
 class Uid {
-  private static count: number = 0;
+  private static count = 0;
   id: string;
   href: string;
 

From 73840ead056756e9ad2de0d0824e3994e620cd6c Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Thu, 22 Jun 2023 23:38:00 +0300
Subject: [PATCH 045/187] Decrease docker mem

---
 docker-compose.yml | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/docker-compose.yml b/docker-compose.yml
index 5cf97ef6d..50bc81744 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -5,10 +5,9 @@ services:
     stdin_open: true
     tty: true
     working_dir: /mermaid
-    # mem_reservation: "10M"
-    mem_limit: '8G'
+    mem_limit: '2G'
     environment:
-      - NODE_OPTIONS=--max_old_space_size=8192
+      - NODE_OPTIONS=--max_old_space_size=2048
     volumes:
       - ./:/mermaid
       - root_cache:/root/.cache

From d766ac6d2096d429a95ab36b8cff3cbfc6875847 Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Thu, 22 Jun 2023 23:50:11 +0300
Subject: [PATCH 046/187] Prettier

---
 .../src/diagrams/sankey/sankeyRenderer.ts     | 29 ++++++++++---------
 .../src/diagrams/sankey/sankeyUtils.ts        | 13 ++-------
 2 files changed, 17 insertions(+), 25 deletions(-)

diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
index 70661d0da..f16f3a238 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
@@ -4,9 +4,9 @@ import * as configApi from '../../config.js';
 
 import {
   select as d3select,
-  // @ts-ignore TODO: make proper import 
+  // @ts-ignore TODO: make proper import
   scaleOrdinal as d3scaleOrdinal,
-  // @ts-ignore TODO: make proper import 
+  // @ts-ignore TODO: make proper import
   schemeTableau10 as d3schemeTableau10,
 } from 'd3';
 
@@ -41,7 +41,7 @@ export const draw = function (text: string, id: string, _version: string, diagOb
   let root = d3select('body');
 
   if (securityLevel === 'sandbox' && sandboxElement) {
-    root = d3select(sandboxElement.nodes()[0].contentDocument.body)
+    root = d3select(sandboxElement.nodes()[0].contentDocument.body);
   }
   const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
   const svg = securityLevel === 'sandbox' ? root.select(`[id="${id}"]`) : d3select(`[id="${id}"]`);
@@ -150,21 +150,22 @@ export const draw = function (text: string, id: string, _version: string, diagOb
     .attr('class', 'link')
     .style('mix-blend-mode', 'multiply');
 
-  const gradient = link.append("linearGradient")
-    .attr("id", d => (d.uid = Uid.next("linearGradient-")).id)
-    .attr("gradientUnits", "userSpaceOnUse")
-    .attr("x1", d => d.source.x1)
-    .attr("x2", d => d.target.x0);
+  const gradient = link
+    .append('linearGradient')
+    .attr('id', (d) => (d.uid = Uid.next('linearGradient-')).id)
+    .attr('gradientUnits', 'userSpaceOnUse')
+    .attr('x1', (d) => d.source.x1)
+    .attr('x2', (d) => d.target.x0);
 
   gradient
-    .append("stop")
-    .attr("offset", "0%")
-    .attr("stop-color", d => colorScheme(d.source.id));
+    .append('stop')
+    .attr('offset', '0%')
+    .attr('stop-color', (d) => colorScheme(d.source.id));
 
   gradient
-    .append("stop")
-    .attr("offset", "100%")
-    .attr("stop-color", d => colorScheme(d.target.id));
+    .append('stop')
+    .attr('offset', '100%')
+    .attr('stop-color', (d) => colorScheme(d.target.id));
 
   link
     .append('path')
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyUtils.ts b/packages/mermaid/src/diagrams/sankey/sankeyUtils.ts
index 838d25c7e..9a2fbab28 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyUtils.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyUtils.ts
@@ -7,7 +7,6 @@ const prepareTextForParsing = (text: string): string => {
   return textToParse;
 };
 
-
 class Uid {
   private static count = 0;
   id: string;
@@ -23,16 +22,8 @@ class Uid {
   }
 
   toString(): string {
-    return "url(" + this.href + ")";
+    return 'url(' + this.href + ')';
   }
 }
 
-export {
-  Uid,
-  prepareTextForParsing
-};
-
-
-
-
-
+export { Uid, prepareTextForParsing };

From 7f098c069c51c9d727bcdbb780e0a03d290e149e Mon Sep 17 00:00:00 2001
From: Kenneth Schackart <schackartk1@gmail.com>
Date: Thu, 22 Jun 2023 16:00:40 -0700
Subject: [PATCH 047/187] Add citation.cff file

---
 CITATION.cff | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 CITATION.cff

diff --git a/CITATION.cff b/CITATION.cff
new file mode 100644
index 000000000..43f8b8936
--- /dev/null
+++ b/CITATION.cff
@@ -0,0 +1,15 @@
+cff-version: 1.2.0
+title: "Mermaid: Generate diagrams from markdown-like text"
+message: >-
+  If you use this software, please cite it using the metadata from this file.
+type: software
+authors:
+  - family-names: Sveidqvist
+    given-names: Knut
+  - name: "Contributors to Mermaid"
+repository-code: "https://github.com/mermaid-js/mermaid"
+url: "https://mermaid.js.org/"
+abstract: >-
+  JavaScript based diagramming and charting tool that renders Markdown-inspired
+  text definitions to create and modify diagrams dynamically.
+license: MIT

From b117265fcbd8833684763f0c641d202845be28e9 Mon Sep 17 00:00:00 2001
From: ellenealds <107104287+ellenealds@users.noreply.github.com>
Date: Fri, 23 Jun 2023 19:08:13 +0100
Subject: [PATCH 048/187] Update Tutorials.md

Added tutorial and application demo for AI generated Mermaid Mind Map
---
 packages/mermaid/src/docs/config/Tutorials.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/mermaid/src/docs/config/Tutorials.md b/packages/mermaid/src/docs/config/Tutorials.md
index 875f15245..c6db9dacf 100644
--- a/packages/mermaid/src/docs/config/Tutorials.md
+++ b/packages/mermaid/src/docs/config/Tutorials.md
@@ -20,6 +20,10 @@ The definitions that can be generated the Live-Editor are also backwards-compati
 
 [Eddie Jaoude: Can you code your diagrams?](https://www.youtube.com/watch?v=9HZzKkAqrX8)
 
+## Mermaid with OpenAI
+
+[Elle Neal: Mind Mapping with AI: An Accessible Approach for Neurodiverse Learners Tutorial:](https://medium.com/@elle.neal_71064/mind-mapping-with-ai-an-accessible-approach-for-neurodiverse-learners-1a74767359ff), [Demo:](https://databutton.com/v/jk9vrghc)
+
 ## Mermaid with HTML
 
 Examples are provided in [Getting Started](../intro/n00b-gettingStarted.md)

From 0a7d42919294423a3f6925670ccbf4fc77dd68df Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Sat, 24 Jun 2023 21:37:19 +0300
Subject: [PATCH 049/187] Fixes for docker local development

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

diff --git a/docker-compose.yml b/docker-compose.yml
index 50bc81744..eea6a7ef8 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -12,7 +12,7 @@ services:
       - ./:/mermaid
       - root_cache:/root/.cache
       - root_local:/root/.local
-      - root_local:/root/.npm
+      - root_npm:/root/.npm
     ports:
       - 9000:9000
 volumes:
diff --git a/run b/run
index 0f9c451d9..6a9b0e5ce 100755
--- a/run
+++ b/run
@@ -10,7 +10,7 @@ args=${@:2}
 case $command in
 
 sh)
-$RUN --service-ports mermaid sh $args
+$RUN mermaid sh $args
 ;;
 
 i | install)

From 2f281ba228b561f1a9f721c82e9c9d8e8e8e5a20 Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Sat, 24 Jun 2023 22:02:18 +0300
Subject: [PATCH 050/187] Improvements for sankey diagram after review

---
 .../src/diagrams/sankey/parser/sankey.jison   |  2 +-
 .../mermaid/src/diagrams/sankey/sankeyDB.ts   | 38 +++++++++----------
 .../src/diagrams/sankey/sankeyRenderer.ts     | 20 +++-------
 .../src/diagrams/sankey/sankeyUtils.ts        |  8 ++--
 4 files changed, 27 insertions(+), 41 deletions(-)

diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
index e9d3dfecb..de5b47709 100644
--- a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
+++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
@@ -53,7 +53,7 @@ record
       const source = yy.findOrCreateNode($source.trim());
       const target = yy.findOrCreateNode($target.trim());
       const value = parseFloat($value.trim());
-      $$ = yy.addLink(source,target,value);
+      yy.addLink(source,target,value);
     } // parse only 3 fields, this is not part of CSV standard
   ;
 
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts
index 853313640..04515cda4 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts
@@ -12,26 +12,26 @@ import {
 
 // Variables where graph data is stored
 // Sankey diagram represented by nodes and links between those nodes
-// We have to track nodes uniqueness (by ID), thats why we need hash also
+// We have to track nodes uniqueness (by ID), thats why we need a mapping also
 //
 let links: Array<SankeyLink> = [];
 let nodes: Array<SankeyNode> = [];
-let nodesHash: Record<string, SankeyNode> = {};
+let nodesMap: Record<string, SankeyNode> = {};
 let nodeAlign = 'justify';
 
-const setNodeAlign = function (alignment: string): void {
-  const nodeAlignments: string[] = ['left', 'right', 'center', 'justify'];
-  if (nodeAlignments.includes(alignment)) {
+const setNodeAlign = (alignment: string): void => {
+  const nodeAlignments: Set<string>= new Set(['left', 'right', 'center', 'justify']);
+  if (nodeAlignments.has(alignment)) {
     nodeAlign = alignment;
   }
 };
 
-const getNodeAlign = () => nodeAlign;
+const getNodeAlign = (): string => nodeAlign;
 
-const clear = function () {
+const clear = (): void => {
   links = [];
   nodes = [];
-  nodesHash = {};
+  nodesMap = {};
   nodeAlign = 'justify';
   commonClear();
 };
@@ -45,30 +45,26 @@ class SankeyLink {
  * @param target - Node where the link ends
  * @param value - number, float or integer, describes the amount to be passed
  */
-const addLink = function (source: SankeyNode, target: SankeyNode, value: number): SankeyLink {
-  const link: SankeyLink = new SankeyLink(source, target, value);
-
-  links.push(link);
-
-  return link;
+const addLink = (source: SankeyNode, target: SankeyNode, value: number): void => {
+  links.push(new SankeyLink(source, target, value));
 };
 
 class SankeyNode {
-  constructor(public ID: string, public label: string = ID) {}
+  constructor(public ID: string) {}
 }
 
 /**
  * @param ID - The id of the node
  */
-const findOrCreateNode = function (ID: string): SankeyNode {
+const findOrCreateNode = (ID: string): SankeyNode => {
   ID = common.sanitizeText(ID, configApi.getConfig());
   let node: SankeyNode;
-  if (nodesHash[ID] === undefined) {
+  if (nodesMap[ID] === undefined) {
     node = new SankeyNode(ID);
-    nodesHash[ID] = node;
+    nodesMap[ID] = node;
     nodes.push(node);
   } else {
-    node = nodesHash[ID];
+    node = nodesMap[ID];
   }
   return node;
 };
@@ -77,7 +73,7 @@ const getNodes = () => nodes;
 const getLinks = () => links;
 
 const getGraph = () => ({
-  nodes: nodes.map((node) => ({ id: node.ID, label: node.label })),
+  nodes: nodes.map((node) => ({ id: node.ID })),
   links: links.map((link) => ({
     source: link.source.ID,
     target: link.target.ID,
@@ -86,7 +82,7 @@ const getGraph = () => ({
 });
 
 export default {
-  nodesHash,
+  nodesMap,
   getConfig: () => configApi.getConfig().sankey,
   getNodes,
   getLinks,
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
index f16f3a238..1a8eb5c7e 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
@@ -57,20 +57,12 @@ export const draw = function (text: string, id: string, _version: string, diagOb
   // svg.attr('height', height); // that's why we need this line
 
   // Prepare data for construction based on diagObj.db
-  // This must be a mutable object with 2 properties:
-  // `nodes` and `links`
+  // This must be a mutable object with `nodes` and `links` properties:
   //
-  //    let graph = {
-  //      "nodes": [
-  //        { "id": "Alice" },
-  //        { "id": "Bob" },
-  //        { "id": "Carol" }
-  //      ],
-  //      "links": [
-  //        { "source": "Alice", "target": "Bob", "value": 23 },
-  //        { "source": "Bob", "target": "Carol", "value": 43 }
-  //      ]
-  //    };
+  //    {
+  //      "nodes": [ { "id": "Alice" }, { "id": "Bob" }, { "id": "Carol" } ],
+  //      "links": [ { "source": "Alice", "target": "Bob", "value": 23 }, { "source": "Bob", "target": "Carol", "value": 43 } ]
+  //    }
   //
   const graph = diagObj.db.getGraph();
   const nodeAligns = {
@@ -136,7 +128,7 @@ export const draw = function (text: string, id: string, _version: string, diagOb
     .attr('y', (d: any) => (d.y1 + d.y0) / 2)
     .attr('dy', '0.35em')
     .attr('text-anchor', (d: any) => (d.x0 < width / 2 ? 'start' : 'end'))
-    .text((d: any) => d.label);
+    .text((d: any) => d.id);
 
   // Creates the paths that represent the links.
   const link = svg
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyUtils.ts b/packages/mermaid/src/diagrams/sankey/sankeyUtils.ts
index 9a2fbab28..d88e528c5 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyUtils.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyUtils.ts
@@ -1,4 +1,4 @@
-const prepareTextForParsing = (text: string): string => {
+export const prepareTextForParsing = (text: string): string => {
   const textToParse = text
     .replaceAll(/^[^\S\n\r]+|[^\S\n\r]+$/g, '') // remove all trailing spaces for each row
     .replaceAll(/([\n\r])+/g, '\n') // remove empty lines duplicated
@@ -7,7 +7,7 @@ const prepareTextForParsing = (text: string): string => {
   return textToParse;
 };
 
-class Uid {
+export class Uid {
   private static count = 0;
   id: string;
   href: string;
@@ -24,6 +24,4 @@ class Uid {
   toString(): string {
     return 'url(' + this.href + ')';
   }
-}
-
-export { Uid, prepareTextForParsing };
+}
\ No newline at end of file

From 07f6358a804900073fee7e69c8430b7ea6f69ca7 Mon Sep 17 00:00:00 2001
From: Yokozuna59 <u.yokozuna@gmail.com>
Date: Sat, 24 Jun 2023 22:18:00 +0300
Subject: [PATCH 051/187] fix not rendered style when style is optional

---
 packages/mermaid/src/diagram-api/diagramAPI.ts | 5 +----
 packages/mermaid/src/styles.ts                 | 6 ++++--
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/mermaid/src/diagram-api/diagramAPI.ts b/packages/mermaid/src/diagram-api/diagramAPI.ts
index 457dd673b..7e89d9cd7 100644
--- a/packages/mermaid/src/diagram-api/diagramAPI.ts
+++ b/packages/mermaid/src/diagram-api/diagramAPI.ts
@@ -7,7 +7,6 @@ import { addStylesForDiagram } from '../styles.js';
 import { DiagramDefinition, DiagramDetector } from './types.js';
 import * as _commonDb from '../commonDb.js';
 import { parseDirective as _parseDirective } from '../directiveUtils.js';
-import isEmpty from 'lodash-es/isEmpty.js';
 
 /*
   Packaging and exposing resources for external diagrams so that they can import
@@ -51,9 +50,7 @@ export const registerDiagram = (
   if (detector) {
     addDetector(id, detector);
   }
-  if (!isEmpty(diagram.styles)) {
-    addStylesForDiagram(id, diagram.styles);
-  }
+  addStylesForDiagram(id, diagram.styles);
 
   if (diagram.injectUtils) {
     diagram.injectUtils(
diff --git a/packages/mermaid/src/styles.ts b/packages/mermaid/src/styles.ts
index a6e752475..74322f678 100644
--- a/packages/mermaid/src/styles.ts
+++ b/packages/mermaid/src/styles.ts
@@ -73,8 +73,10 @@ const getStyles = (
 `;
 };
 
-export const addStylesForDiagram = (type: string, diagramTheme: unknown): void => {
-  themes[type] = diagramTheme;
+export const addStylesForDiagram = (type: string, diagramTheme?: unknown): void => {
+  if (diagramTheme !== undefined) {
+    themes[type] = diagramTheme;
+  }
 };
 
 export default getStyles;

From 1674f12b624b3e3aee49424ee274ff089a01329a Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Sat, 24 Jun 2023 23:11:54 +0300
Subject: [PATCH 052/187] Renamed sankey to sankey-beta

---
 cypress/integration/rendering/sankey.spec.js  |  4 ++--
 demos/sankey.html                             |  2 +-
 .../diagrams/sankey/parser/sankey-arrow.jison |  2 +-
 .../sankey/parser/sankey-arrow.spec.js        | 20 +++++++++----------
 .../src/diagrams/sankey/parser/sankey.jison   |  2 +-
 .../src/diagrams/sankey/parser/sankey.spec.ts |  2 +-
 .../src/diagrams/sankey/sankeyDetector.ts     |  2 +-
 7 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/cypress/integration/rendering/sankey.spec.js b/cypress/integration/rendering/sankey.spec.js
index 435ef8184..0a065e46c 100644
--- a/cypress/integration/rendering/sankey.spec.js
+++ b/cypress/integration/rendering/sankey.spec.js
@@ -1,10 +1,10 @@
 import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
 
 describe('Sankey Diagram', () => {
-  it('should render a simple sankey diagram', () => {
+  it('should render a simple example', () => {
     imgSnapshotTest(
       `
-      sankey
+      sankey-beta
       
       a,b,10
       `,
diff --git a/demos/sankey.html b/demos/sankey.html
index e597c408f..8429218b5 100644
--- a/demos/sankey.html
+++ b/demos/sankey.html
@@ -17,7 +17,7 @@
     <h1>Sankey diagram demos</h1>
     <h2>Energy flow</h2>
     <pre class="mermaid">
-      sankey
+      sankey-beta
       
       Agricultural 'waste',Bio-conversion,124.729
       Bio-conversion,Liquid,0.597
diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.jison b/packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.jison
index c981267a0..181953d95 100644
--- a/packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.jison
+++ b/packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.jison
@@ -24,7 +24,7 @@ NUM \d+(.\d+)?
 //--------------
 
 (<<EOF>>|[\n;])+                            { return 'EOS'; } // end of statement is semicolon ; new line \n or end of file
-"sankey"                                    { return 'SANKEY'; }
+"sankey-beta"                               { return 'SANKEY'; }
 <INITIAL>{TOKEN}                            { return 'NODE_ID'; }
 <link_value>{NUM}                           { return 'AMOUNT'; }
 "->"                                        {
diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.spec.js b/packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.spec.js
index a85a8d5c0..a6efe62c1 100644
--- a/packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.spec.js
+++ b/packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.spec.js
@@ -3,7 +3,7 @@ import { parser } from './sankey-arrow.jison';
 import db from '../sankeyDB.js';
 // import { fail } from 'assert';
 
-describe('Sankey diagram', function () {
+describe('sankey-beta diagram', function () {
   // TODO - these examples should be put into ./parser/stateDiagram.spec.js
   describe('when parsing an info graph it', function () {
     beforeEach(function () {
@@ -13,14 +13,14 @@ describe('Sankey diagram', function () {
     });
 
     it('recognizes its type', () => {
-      const str = `sankey`;
+      const str = `sankey-beta`;
 
       parser.parse(str);
     });
 
     it('recognizes one flow', () => {
       const str = `
-      sankey
+      sankey-beta
       node_a -> 30 -> node_b -> 20 -> node_c
       `;
 
@@ -29,7 +29,7 @@ describe('Sankey diagram', function () {
 
     it('recognizes multiple flows', () => {
       const str = `
-      sankey
+      sankey-beta
       node_a -> 30 -> node_b -> 12 -> node_e
       node_c -> 30 -> node_d -> 12 -> node_e
       node_c -> 40 -> node_e -> 12 -> node_q
@@ -40,7 +40,7 @@ describe('Sankey diagram', function () {
 
     it('parses node as a string', () => {
       const str = `
-      sankey
+      sankey-beta
       "node a" -> 30 -> "node b" -> 12 -> "node e"
       "node c" -> 30 -> "node d" -> 12 -> "node e"
       "node c" -> 40 -> "node e" -> 12 -> "node q"
@@ -52,7 +52,7 @@ describe('Sankey diagram', function () {
     describe('while attributes parsing', () => {
       it('recognized node and attribute ids starting with numbers', () => {
         const str = `
-        sankey
+        sankey-beta
         1st -> 200 -> 2nd -> 180 -> 3rd;
         `;
 
@@ -61,7 +61,7 @@ describe('Sankey diagram', function () {
 
       it('parses different quotless variations', () => {
         const str = `
-        sankey
+        sankey-beta
         node[]
         
         node[attr=1]
@@ -77,9 +77,9 @@ describe('Sankey diagram', function () {
 
       it('parses strings as values', () => {
         const str = `
-        sankey
+        sankey-beta
         node[title="hello, how are you?"]
-        node[title="hello, mister \\"sankey\\", backslash for you \\\\"]
+        node[title="hello, mister \\"sankey-beta\\", backslash for you \\\\"]
         `;
 
         parser.parse(str);
@@ -87,7 +87,7 @@ describe('Sankey diagram', function () {
 
       it('parses real example', () => {
         const str = `
-        sankey
+        sankey-beta
 
         "Agricultural 'waste'"      ->      124.729  -> "Bio-conversion"
         "Bio-conversion"            ->      0.597    -> "Liquid"
diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
index de5b47709..b0d994eb3 100644
--- a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
+++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
@@ -27,7 +27,7 @@ TEXTDATA [\u0020-\u0021\u0023-\u002B\u002D-\u007E]
 
 %%
 
-<INITIAL>"sankey"                              { this.pushState('csv'); return 'SANKEY'; }
+<INITIAL>"sankey-beta"                         { this.pushState('csv'); return 'SANKEY'; }
 <INITIAL,csv><<EOF>>                           { return 'EOF' } // match end of file
 <INITIAL,csv>({CRLF}|{LF})                     { return 'NEWLINE' }
 <INITIAL,csv>{COMMA}                           { return 'COMMA' }
diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts
index 10a187622..1df607b63 100644
--- a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts
+++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts
@@ -19,7 +19,7 @@ describe('Sankey diagram', function () {
       const path = await import('path');
       const csv = path.resolve(__dirname, './energy.csv');
       const data = fs.readFileSync(csv, 'utf8');
-      const graphDefinition = prepareTextForParsing(cleanupComments('sankey\n\n ' + data));
+      const graphDefinition = prepareTextForParsing(cleanupComments('sankey-beta\n\n ' + data));
 
       parser.parse(graphDefinition);
     });
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyDetector.ts b/packages/mermaid/src/diagrams/sankey/sankeyDetector.ts
index 6c0bcdae8..1045d7021 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyDetector.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyDetector.ts
@@ -3,7 +3,7 @@ import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-a
 const id = 'sankey';
 
 const detector: DiagramDetector = (txt) => {
-  return txt.match(/^\s*sankey/) !== null;
+  return txt.match(/^\s*sankey-beta/) !== null;
 };
 
 const loader = async () => {

From b23e86aea39c4e1afa0582fd2788550533ebd6a2 Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Sun, 25 Jun 2023 00:22:36 +0300
Subject: [PATCH 053/187] Added options for coloring

---
 demos/sankey.html                             |  6 ++
 packages/mermaid/src/config.type.ts           | 12 ++-
 packages/mermaid/src/defaultConfig.ts         |  5 ++
 .../mermaid/src/diagrams/sankey/sankeyDB.ts   |  2 +-
 .../src/diagrams/sankey/sankeyRenderer.ts     | 73 ++++++++++++-------
 .../src/diagrams/sankey/sankeyUtils.ts        |  2 +-
 6 files changed, 72 insertions(+), 28 deletions(-)

diff --git a/demos/sankey.html b/demos/sankey.html
index 8429218b5..3dc7a2332 100644
--- a/demos/sankey.html
+++ b/demos/sankey.html
@@ -98,6 +98,12 @@
         flowchart: { curve: 'basis' },
         gantt: { axisFormat: '%m/%d/%Y' },
         sequence: { actorMargin: 50 },
+        sankey: {
+          title: 'Hey, this is Sankey-Beta',
+          width: 1200,
+          height: 600,
+          linkColor: 'gradient',
+        },
       });
     </script>
   </body>
diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts
index f50a15d6b..7e0b67eb5 100644
--- a/packages/mermaid/src/config.type.ts
+++ b/packages/mermaid/src/config.type.ts
@@ -412,7 +412,17 @@ export interface FlowchartDiagramConfig extends BaseDiagramConfig {
   wrappingWidth?: number;
 }
 
-export type SankeyDiagramConfig = BaseDiagramConfig;
+export enum SankeyLinkColor {
+  source = 'source',
+  target = 'target',
+  gradient = 'gradient',
+}
+
+export interface SankeyDiagramConfig extends BaseDiagramConfig {
+  width?: number;
+  height?: number;
+  linkColor?: SankeyLinkColor | string;
+}
 
 export interface FontConfig {
   fontSize?: string | number;
diff --git a/packages/mermaid/src/defaultConfig.ts b/packages/mermaid/src/defaultConfig.ts
index c9407828f..4ece25010 100644
--- a/packages/mermaid/src/defaultConfig.ts
+++ b/packages/mermaid/src/defaultConfig.ts
@@ -2270,6 +2270,11 @@ const config: Partial<MermaidConfig> = {
     padding: 10,
     maxNodeWidth: 200,
   },
+  sankey: {
+    width: 800,
+    height: 400,
+    linkColor: 'gradient',
+  },
   fontSize: 16,
 };
 
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts
index 04515cda4..098f3938c 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts
@@ -20,7 +20,7 @@ let nodesMap: Record<string, SankeyNode> = {};
 let nodeAlign = 'justify';
 
 const setNodeAlign = (alignment: string): void => {
-  const nodeAlignments: Set<string>= new Set(['left', 'right', 'center', 'justify']);
+  const nodeAlignments: Set<string> = new Set(['left', 'right', 'center', 'justify']);
   if (nodeAlignments.has(alignment)) {
     nodeAlign = alignment;
   }
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
index 1a8eb5c7e..dd31e775e 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
@@ -20,9 +20,10 @@ import {
 } from 'd3-sankey';
 import { configureSvgSize } from '../../setupGraphViewbox.js';
 import { Uid } from './sankeyUtils.js';
+import { SankeyLinkColor } from '../../config.type.js';
 
 /**
- * Draws a sequenceDiagram in the tag with id: id based on the graph definition in text.
+ * Draws Sankey diagram.
  *
  * @param text - The text of the diagram
  * @param id - The id of the diagram which will be used as a DOM element id¨
@@ -30,10 +31,14 @@ import { Uid } from './sankeyUtils.js';
  * @param diagObj - A standard diagram containing the db and the text and type etc of the diagram
  */
 export const draw = function (text: string, id: string, _version: string, diagObj: Diagram): void {
-  // TODO: Figure out what is happening there
+  // Get Sankey config
+  const { securityLevel, sankey: conf } = configApi.getConfig();
+
+  // TODO:
+  // This code repeats for every diagram
+  // Figure out what is happening there, probably it should be separated
   // The main thing is svg object that is a d3 wrapper for svg operations
   //
-  const { securityLevel, sequence: conf } = configApi.getConfig();
   let sandboxElement: any;
   if (securityLevel === 'sandbox') {
     sandboxElement = d3select('#i' + id);
@@ -43,18 +48,17 @@ export const draw = function (text: string, id: string, _version: string, diagOb
   if (securityLevel === 'sandbox' && sandboxElement) {
     root = d3select(sandboxElement.nodes()[0].contentDocument.body);
   }
-  const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
   const svg = securityLevel === 'sandbox' ? root.select(`[id="${id}"]`) : d3select(`[id="${id}"]`);
 
   // Establish svg dimensions and get width and height
   //
-  const elem = doc.getElementById(id);
-  const width = elem.parentElement.offsetWidth;
-  const height = 600;
+  const width = conf?.width || 800;
+  const height = conf?.height || 400;
+  const useMaxWidth = conf?.useMaxWidth || false;
 
-  // FIX: using max width prevents height from being set
-  configureSvgSize(svg, height, width, false);
-  // svg.attr('height', height); // that's why we need this line
+  // FIX: using max width prevents height from being set, is it intended?
+  // to add height directly one can use `svg.attr('height', height)`
+  configureSvgSize(svg, height, width, useMaxWidth);
 
   // Prepare data for construction based on diagObj.db
   // This must be a mutable object with `nodes` and `links` properties:
@@ -142,27 +146,46 @@ export const draw = function (text: string, id: string, _version: string, diagOb
     .attr('class', 'link')
     .style('mix-blend-mode', 'multiply');
 
-  const gradient = link
-    .append('linearGradient')
-    .attr('id', (d) => (d.uid = Uid.next('linearGradient-')).id)
-    .attr('gradientUnits', 'userSpaceOnUse')
-    .attr('x1', (d) => d.source.x1)
-    .attr('x2', (d) => d.target.x0);
+  const linkColor = conf?.linkColor || SankeyLinkColor.gradient;
 
-  gradient
-    .append('stop')
-    .attr('offset', '0%')
-    .attr('stop-color', (d) => colorScheme(d.source.id));
+  if (linkColor === SankeyLinkColor.gradient) {
+    const gradient = link
+      .append('linearGradient')
+      .attr('id', (d) => (d.uid = Uid.next('linearGradient-')).id)
+      .attr('gradientUnits', 'userSpaceOnUse')
+      .attr('x1', (d) => d.source.x1)
+      .attr('x2', (d) => d.target.x0);
 
-  gradient
-    .append('stop')
-    .attr('offset', '100%')
-    .attr('stop-color', (d) => colorScheme(d.target.id));
+    gradient
+      .append('stop')
+      .attr('offset', '0%')
+      .attr('stop-color', (d) => colorScheme(d.source.id));
+
+    gradient
+      .append('stop')
+      .attr('offset', '100%')
+      .attr('stop-color', (d) => colorScheme(d.target.id));
+  }
+
+  let coloring: any;
+  switch (linkColor) {
+    case SankeyLinkColor.gradient:
+      coloring = (d) => d.uid;
+      break;
+    case SankeyLinkColor.source:
+      coloring = (d) => d.source.id;
+      break;
+    case SankeyLinkColor.target:
+      coloring = (d) => d.target.id;
+      break;
+    default:
+      coloring = linkColor;
+  }
 
   link
     .append('path')
     .attr('d', d3SankeyLinkHorizontal())
-    .attr('stroke', (d: any) => d.uid)
+    .attr('stroke', coloring)
     .attr('stroke-width', (d: any) => Math.max(1, d.width));
 };
 
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyUtils.ts b/packages/mermaid/src/diagrams/sankey/sankeyUtils.ts
index d88e528c5..08e4c547f 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyUtils.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyUtils.ts
@@ -24,4 +24,4 @@ export class Uid {
   toString(): string {
     return 'url(' + this.href + ')';
   }
-}
\ No newline at end of file
+}

From db2a556f626beb630629f9ddc39e604590eb2610 Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Sun, 25 Jun 2023 00:23:42 +0300
Subject: [PATCH 054/187] Cleanup

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

diff --git a/cypress/integration/rendering/sankey.spec.js b/cypress/integration/rendering/sankey.spec.js
index 0a065e46c..7a3ffa5db 100644
--- a/cypress/integration/rendering/sankey.spec.js
+++ b/cypress/integration/rendering/sankey.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
+import { imgSnapshotTest } from '../../helpers/util.js';
 
 describe('Sankey Diagram', () => {
   it('should render a simple example', () => {

From 1d6074dbfa6e7f0c0c0ca59987d55846d062965f Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Sun, 25 Jun 2023 00:42:06 +0300
Subject: [PATCH 055/187] Sankey: Use [] instead of Array

---
 packages/mermaid/src/diagrams/sankey/sankeyDB.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts
index 098f3938c..807c07cd1 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts
@@ -14,8 +14,8 @@ import {
 // Sankey diagram represented by nodes and links between those nodes
 // We have to track nodes uniqueness (by ID), thats why we need a mapping also
 //
-let links: Array<SankeyLink> = [];
-let nodes: Array<SankeyNode> = [];
+let links: SankeyLink[] = [];
+let nodes: SankeyNode[] = [];
 let nodesMap: Record<string, SankeyNode> = {};
 let nodeAlign = 'justify';
 

From 6a893a758b9784c6e493c0697c04ad33f339e721 Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Sun, 25 Jun 2023 01:07:11 +0300
Subject: [PATCH 056/187] Styles are optional

---
 packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts | 2 --
 packages/mermaid/src/diagrams/sankey/styles.js        | 5 -----
 packages/mermaid/src/styles.spec.ts                   | 2 --
 3 files changed, 9 deletions(-)
 delete mode 100644 packages/mermaid/src/diagrams/sankey/styles.js

diff --git a/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts b/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts
index 4fce38f97..d5b62122e 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyDiagram.ts
@@ -2,7 +2,6 @@ import { DiagramDefinition } from '../../diagram-api/types.js';
 // @ts-ignore: jison doesn't export types
 import parser from './parser/sankey.jison';
 import db from './sankeyDB.js';
-import styles from './styles.js';
 import renderer from './sankeyRenderer.js';
 import { prepareTextForParsing } from './sankeyUtils.js';
 
@@ -13,5 +12,4 @@ export const diagram: DiagramDefinition = {
   parser,
   db,
   renderer,
-  styles,
 };
diff --git a/packages/mermaid/src/diagrams/sankey/styles.js b/packages/mermaid/src/diagrams/sankey/styles.js
deleted file mode 100644
index 54881fe6f..000000000
--- a/packages/mermaid/src/diagrams/sankey/styles.js
+++ /dev/null
@@ -1,5 +0,0 @@
-const getStyles = (options) =>
-  `
-`;
-
-export default getStyles;
diff --git a/packages/mermaid/src/styles.spec.ts b/packages/mermaid/src/styles.spec.ts
index d1edf4111..51951f190 100644
--- a/packages/mermaid/src/styles.spec.ts
+++ b/packages/mermaid/src/styles.spec.ts
@@ -29,7 +29,6 @@ import state from './diagrams/state/styles.js';
 import journey from './diagrams/user-journey/styles.js';
 import timeline from './diagrams/timeline/styles.js';
 import mindmap from './diagrams/mindmap/styles.js';
-import sankey from './diagrams/sankey/styles.js';
 import themes from './themes/index.js';
 
 async function checkValidStylisCSSStyleSheet(stylisString: string) {
@@ -99,7 +98,6 @@ describe('styles', () => {
         sequence,
         state,
         timeline,
-        sankey,
       })) {
         test(`should return a valid style for diagram ${diagramId} and theme ${themeId}`, async () => {
           const { default: getStyles, addStylesForDiagram } = await import('./styles.js');

From 61e5dbeaa6900488ed7cbc5124663439c87f4d64 Mon Sep 17 00:00:00 2001
From: Tom PERRILLAT-COLLOMB <tom.perrillat-collomb@protonmail.com>
Date: Sun, 25 Jun 2023 00:15:35 +0200
Subject: [PATCH 057/187] fix(class): keep members in namespace classes

---
 demos/classchart.html                         | 23 ++++++
 .../mermaid/src/diagrams/class/classDb.ts     |  3 +-
 .../src/diagrams/class/classDiagram.spec.ts   | 45 ++++++++++
 .../src/diagrams/class/classRenderer-v2.ts    | 82 ++++++++++---------
 .../mermaid/src/diagrams/class/classTypes.ts  |  1 +
 5 files changed, 112 insertions(+), 42 deletions(-)

diff --git a/demos/classchart.html b/demos/classchart.html
index b20dda2a3..508bb1066 100644
--- a/demos/classchart.html
+++ b/demos/classchart.html
@@ -154,6 +154,29 @@
     </pre>
     <hr />
 
+    <pre class="mermaid">
+    classDiagram
+      A1 --> B1
+      namespace A {
+        class A1 {
+          +foo : string
+        }
+        class A2 {
+          +bar : int
+        }
+      }
+      namespace B {
+        class B1 {
+          +foo : bool
+        }
+        class B2 {
+          +bar : float
+        }
+      }
+      A2 --> B2
+    </pre>
+    <hr />
+
     <script type="module">
       import mermaid from './mermaid.esm.mjs';
       mermaid.initialize({
diff --git a/packages/mermaid/src/diagrams/class/classDb.ts b/packages/mermaid/src/diagrams/class/classDb.ts
index 11a1eb37d..7b74aa819 100644
--- a/packages/mermaid/src/diagrams/class/classDb.ts
+++ b/packages/mermaid/src/diagrams/class/classDb.ts
@@ -448,9 +448,8 @@ const getNamespaces = function (): NamespaceMap {
 export const addClassesToNamespace = function (id: string, classNames: string[]) {
   if (namespaces[id] !== undefined) {
     classNames.map((className) => {
+      classes[className].parent = id;
       namespaces[id].classes[className] = classes[className];
-      delete classes[className];
-      classCounter--;
     });
   }
 };
diff --git a/packages/mermaid/src/diagrams/class/classDiagram.spec.ts b/packages/mermaid/src/diagrams/class/classDiagram.spec.ts
index a43ed2fcd..2182e8c34 100644
--- a/packages/mermaid/src/diagrams/class/classDiagram.spec.ts
+++ b/packages/mermaid/src/diagrams/class/classDiagram.spec.ts
@@ -1373,9 +1373,54 @@ class Class2
       parser.parse(str);
 
       const testNamespace = parser.yy.getNamespace('Namespace1');
+      const testClasses = parser.yy.getClasses();
       expect(Object.keys(testNamespace.classes).length).toBe(2);
       expect(Object.keys(testNamespace.children).length).toBe(0);
       expect(testNamespace.classes['Class1'].id).toBe('Class1');
+      expect(Object.keys(testClasses).length).toBe(2);
+    });
+
+    it('should add relations between classes of different namespaces', function () {
+      const str = `classDiagram
+      A1 --> B1
+      namespace A {
+        class A1 {
+          +foo : string
+        }
+        class A2 {
+          +bar : int
+        }
+      }
+      namespace B {
+        class B1 {
+          +foo : bool
+        }
+        class B2 {
+          +bar : float
+        }
+      }
+      A2 --> B2`;
+
+      parser.parse(str);
+      const testNamespaceA = parser.yy.getNamespace('A');
+      const testNamespaceB = parser.yy.getNamespace('B');
+      const testClasses = parser.yy.getClasses();
+      const testRelations = parser.yy.getRelations();
+      expect(Object.keys(testNamespaceA.classes).length).toBe(2);
+      expect(testNamespaceA.classes['A1'].members[0]).toBe('+foo : string');
+      expect(testNamespaceA.classes['A2'].members[0]).toBe('+bar : int');
+      expect(Object.keys(testNamespaceB.classes).length).toBe(2);
+      expect(testNamespaceB.classes['B1'].members[0]).toBe('+foo : bool');
+      expect(testNamespaceB.classes['B2'].members[0]).toBe('+bar : float');
+      expect(Object.keys(testClasses).length).toBe(4);
+      expect(testClasses['A1'].parent).toBe('A');
+      expect(testClasses['A2'].parent).toBe('A');
+      expect(testClasses['B1'].parent).toBe('B');
+      expect(testClasses['B2'].parent).toBe('B');
+      expect(testRelations[0].id1).toBe('A1');
+      expect(testRelations[0].id2).toBe('B1');
+      expect(testRelations[1].id1).toBe('A2');
+      expect(testRelations[1].id2).toBe('B2');
     });
   });
 
diff --git a/packages/mermaid/src/diagrams/class/classRenderer-v2.ts b/packages/mermaid/src/diagrams/class/classRenderer-v2.ts
index e0cfea641..7892d2208 100644
--- a/packages/mermaid/src/diagrams/class/classRenderer-v2.ts
+++ b/packages/mermaid/src/diagrams/class/classRenderer-v2.ts
@@ -93,52 +93,54 @@ export const addClasses = function (
   log.info(classes);
 
   // Iterate through each item in the vertex object (containing all the vertices found) in the graph definition
-  keys.forEach(function (id) {
-    const vertex = classes[id];
+  keys
+    .filter((id) => classes[id].parent == parent)
+    .forEach(function (id) {
+      const vertex = classes[id];
 
-    /**
-     * Variable for storing the classes for the vertex
-     */
-    let cssClassStr = '';
-    if (vertex.cssClasses.length > 0) {
-      cssClassStr = cssClassStr + ' ' + vertex.cssClasses.join(' ');
-    }
+      /**
+       * Variable for storing the classes for the vertex
+       */
+      let cssClassStr = '';
+      if (vertex.cssClasses.length > 0) {
+        cssClassStr = cssClassStr + ' ' + vertex.cssClasses.join(' ');
+      }
 
-    const styles = { labelStyle: '', style: '' }; //getStylesFromArray(vertex.styles);
+      const styles = { labelStyle: '', style: '' }; //getStylesFromArray(vertex.styles);
 
-    // Use vertex id as text in the box if no text is provided by the graph definition
-    const vertexText = vertex.label ?? vertex.id;
-    const radius = 0;
-    const shape = 'class_box';
+      // Use vertex id as text in the box if no text is provided by the graph definition
+      const vertexText = vertex.label ?? vertex.id;
+      const radius = 0;
+      const shape = 'class_box';
 
-    // Add the node
-    const node = {
-      labelStyle: styles.labelStyle,
-      shape: shape,
-      labelText: sanitizeText(vertexText),
-      classData: vertex,
-      rx: radius,
-      ry: radius,
-      class: cssClassStr,
-      style: styles.style,
-      id: vertex.id,
-      domId: vertex.domId,
-      tooltip: diagObj.db.getTooltip(vertex.id, parent) || '',
-      haveCallback: vertex.haveCallback,
-      link: vertex.link,
-      width: vertex.type === 'group' ? 500 : undefined,
-      type: vertex.type,
-      // TODO V10: Flowchart ? Keeping flowchart for backwards compatibility. Remove in next major release
-      padding: getConfig().flowchart?.padding ?? getConfig().class?.padding,
-    };
-    g.setNode(vertex.id, node);
+      // Add the node
+      const node = {
+        labelStyle: styles.labelStyle,
+        shape: shape,
+        labelText: sanitizeText(vertexText),
+        classData: vertex,
+        rx: radius,
+        ry: radius,
+        class: cssClassStr,
+        style: styles.style,
+        id: vertex.id,
+        domId: vertex.domId,
+        tooltip: diagObj.db.getTooltip(vertex.id, parent) || '',
+        haveCallback: vertex.haveCallback,
+        link: vertex.link,
+        width: vertex.type === 'group' ? 500 : undefined,
+        type: vertex.type,
+        // TODO V10: Flowchart ? Keeping flowchart for backwards compatibility. Remove in next major release
+        padding: getConfig().flowchart?.padding ?? getConfig().class?.padding,
+      };
+      g.setNode(vertex.id, node);
 
-    if (parent) {
-      g.setParent(vertex.id, parent);
-    }
+      if (parent) {
+        g.setParent(vertex.id, parent);
+      }
 
-    log.info('setNode', node);
-  });
+      log.info('setNode', node);
+    });
 };
 
 /**
diff --git a/packages/mermaid/src/diagrams/class/classTypes.ts b/packages/mermaid/src/diagrams/class/classTypes.ts
index cf6f20f0b..f3b8dc8cf 100644
--- a/packages/mermaid/src/diagrams/class/classTypes.ts
+++ b/packages/mermaid/src/diagrams/class/classTypes.ts
@@ -7,6 +7,7 @@ export interface ClassNode {
   members: string[];
   annotations: string[];
   domId: string;
+  parent?: string;
   link?: string;
   linkTarget?: string;
   haveCallback?: boolean;

From 2a22bae1f93b3595ba45452ba2d817576bef9a4b Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Sun, 25 Jun 2023 01:18:38 +0300
Subject: [PATCH 058/187] Update docs

---
 .../interfaces/mermaidAPI.ParseOptions.md     |  2 +-
 .../interfaces/mermaidAPI.RenderResult.md     |  4 ++--
 docs/config/setup/modules/config.md           | 22 +++++++++----------
 docs/config/setup/modules/defaultConfig.md    |  4 ++--
 docs/config/setup/modules/mermaidAPI.md       | 22 +++++++++----------
 run                                           | 10 +++++----
 6 files changed, 33 insertions(+), 31 deletions(-)

diff --git a/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md b/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md
index 8ab259885..0875af71d 100644
--- a/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md
+++ b/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md
@@ -16,4 +16,4 @@
 
 #### Defined in
 
-[mermaidAPI.ts:77](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L77)
+mermaidAPI.ts:77
diff --git a/docs/config/setup/interfaces/mermaidAPI.RenderResult.md b/docs/config/setup/interfaces/mermaidAPI.RenderResult.md
index 527b46d09..ce4c7d52d 100644
--- a/docs/config/setup/interfaces/mermaidAPI.RenderResult.md
+++ b/docs/config/setup/interfaces/mermaidAPI.RenderResult.md
@@ -39,7 +39,7 @@ bindFunctions?.(div); // To call bindFunctions only if it's present.
 
 #### Defined in
 
-[mermaidAPI.ts:97](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L97)
+mermaidAPI.ts:97
 
 ---
 
@@ -51,4 +51,4 @@ The svg code for the rendered graph.
 
 #### Defined in
 
-[mermaidAPI.ts:87](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L87)
+mermaidAPI.ts:87
diff --git a/docs/config/setup/modules/config.md b/docs/config/setup/modules/config.md
index 8381dc8c7..c69958ea7 100644
--- a/docs/config/setup/modules/config.md
+++ b/docs/config/setup/modules/config.md
@@ -14,7 +14,7 @@
 
 #### Defined in
 
-[config.ts:7](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L7)
+config.ts:7
 
 ## Functions
 
@@ -36,7 +36,7 @@ Pushes in a directive to the configuration
 
 #### Defined in
 
-[config.ts:191](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L191)
+config.ts:191
 
 ---
 
@@ -60,7 +60,7 @@ The currentConfig
 
 #### Defined in
 
-[config.ts:137](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L137)
+config.ts:137
 
 ---
 
@@ -84,7 +84,7 @@ The siteConfig
 
 #### Defined in
 
-[config.ts:96](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L96)
+config.ts:96
 
 ---
 
@@ -118,7 +118,7 @@ The siteConfig
 
 #### Defined in
 
-[config.ts:223](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L223)
+config.ts:223
 
 ---
 
@@ -147,7 +147,7 @@ options in-place
 
 #### Defined in
 
-[config.ts:152](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L152)
+config.ts:152
 
 ---
 
@@ -167,7 +167,7 @@ options in-place
 
 #### Defined in
 
-[config.ts:75](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L75)
+config.ts:75
 
 ---
 
@@ -199,7 +199,7 @@ The currentConfig merged with the sanitized conf
 
 #### Defined in
 
-[config.ts:113](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L113)
+config.ts:113
 
 ---
 
@@ -232,7 +232,7 @@ The new siteConfig
 
 #### Defined in
 
-[config.ts:61](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L61)
+config.ts:61
 
 ---
 
@@ -253,7 +253,7 @@ The new siteConfig
 
 #### Defined in
 
-[config.ts:14](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L14)
+config.ts:14
 
 ---
 
@@ -273,4 +273,4 @@ The new siteConfig
 
 #### Defined in
 
-[config.ts:79](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L79)
+config.ts:79
diff --git a/docs/config/setup/modules/defaultConfig.md b/docs/config/setup/modules/defaultConfig.md
index d95ec4e92..649e03db8 100644
--- a/docs/config/setup/modules/defaultConfig.md
+++ b/docs/config/setup/modules/defaultConfig.md
@@ -14,7 +14,7 @@
 
 #### Defined in
 
-[defaultConfig.ts:2293](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L2293)
+defaultConfig.ts:2298
 
 ---
 
@@ -53,4 +53,4 @@ A description of each option follows below.
 
 #### Defined in
 
-[defaultConfig.ts:33](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L33)
+defaultConfig.ts:33
diff --git a/docs/config/setup/modules/mermaidAPI.md b/docs/config/setup/modules/mermaidAPI.md
index 591b6841a..aa3043713 100644
--- a/docs/config/setup/modules/mermaidAPI.md
+++ b/docs/config/setup/modules/mermaidAPI.md
@@ -25,7 +25,7 @@ Renames and re-exports [mermaidAPI](mermaidAPI.md#mermaidapi)
 
 #### Defined in
 
-[mermaidAPI.ts:81](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L81)
+mermaidAPI.ts:81
 
 ## Variables
 
@@ -96,7 +96,7 @@ mermaid.initialize(config);
 
 #### Defined in
 
-[mermaidAPI.ts:663](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L663)
+mermaidAPI.ts:663
 
 ## Functions
 
@@ -127,7 +127,7 @@ Return the last node appended
 
 #### Defined in
 
-[mermaidAPI.ts:308](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L308)
+mermaidAPI.ts:308
 
 ---
 
@@ -153,7 +153,7 @@ the cleaned up svgCode
 
 #### Defined in
 
-[mermaidAPI.ts:256](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L256)
+mermaidAPI.ts:256
 
 ---
 
@@ -179,7 +179,7 @@ the string with all the user styles
 
 #### Defined in
 
-[mermaidAPI.ts:185](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L185)
+mermaidAPI.ts:185
 
 ---
 
@@ -202,7 +202,7 @@ the string with all the user styles
 
 #### Defined in
 
-[mermaidAPI.ts:233](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L233)
+mermaidAPI.ts:233
 
 ---
 
@@ -229,7 +229,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
 
 #### Defined in
 
-[mermaidAPI.ts:169](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L169)
+mermaidAPI.ts:169
 
 ---
 
@@ -249,7 +249,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
 
 #### Defined in
 
-[mermaidAPI.ts:155](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L155)
+mermaidAPI.ts:155
 
 ---
 
@@ -269,7 +269,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
 
 #### Defined in
 
-[mermaidAPI.ts:126](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L126)
+mermaidAPI.ts:126
 
 ---
 
@@ -295,7 +295,7 @@ Put the svgCode into an iFrame. Return the iFrame code
 
 #### Defined in
 
-[mermaidAPI.ts:287](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L287)
+mermaidAPI.ts:287
 
 ---
 
@@ -320,4 +320,4 @@ Remove any existing elements from the given document
 
 #### Defined in
 
-[mermaidAPI.ts:358](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L358)
+mermaidAPI.ts:358
diff --git a/run b/run
index 6a9b0e5ce..6aee10dc2 100755
--- a/run
+++ b/run
@@ -1,16 +1,14 @@
 #!/bin/bash
 RUN="docker-compose run --rm"
-# UP="docker-compose up"
 
 name=$(basename $0)
 command=$1
 args=${@:2}
 
-
 case $command in
 
 sh)
-$RUN mermaid sh $args
+$RUN mermaid sh -c "npx $args" 
 ;;
 
 i | install)
@@ -35,7 +33,10 @@ $RUN mermaid sh -c "npx pnpm -w run lint:fix $args"
 
 dev)
 $RUN --service-ports mermaid sh -c "npx pnpm run dev"
-# $UP --rm mermaid sh -c "npx pnpm run dev"
+;;
+
+docs:dev)
+$RUN --service-ports mermaid sh -c "npx pnpm --filter mermaid run docs:dev"
 ;;
 
 help)
@@ -45,6 +46,7 @@ Run commonly used commands within docker containers
 
 \033[1m$name install\033[0m         # Equvalent of pnpm install 
 \033[1m$name dev\033[0m             # Run dev server with examples, open http://localhost:9000
+\033[1m$name docs:dev\033[0m        # For docs contributions, open http://localhost:3333
 
 $name add             # Add package, 'run add d3-sankey'
 $name prettier        # Prettify a file 'run prettier <path-to-file>'

From 95ab598ea4451d0c01386d1bc1f9023c9133d54e Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Sun, 25 Jun 2023 01:31:53 +0300
Subject: [PATCH 059/187] Fix docs

---
 .../interfaces/mermaidAPI.ParseOptions.md     |  2 +-
 .../interfaces/mermaidAPI.RenderResult.md     |  4 ++--
 docs/config/setup/modules/config.md           | 22 +++++++++----------
 docs/config/setup/modules/defaultConfig.md    |  4 ++--
 docs/config/setup/modules/mermaidAPI.md       | 22 +++++++++----------
 5 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md b/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md
index 0875af71d..8ab259885 100644
--- a/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md
+++ b/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md
@@ -16,4 +16,4 @@
 
 #### Defined in
 
-mermaidAPI.ts:77
+[mermaidAPI.ts:77](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L77)
diff --git a/docs/config/setup/interfaces/mermaidAPI.RenderResult.md b/docs/config/setup/interfaces/mermaidAPI.RenderResult.md
index ce4c7d52d..527b46d09 100644
--- a/docs/config/setup/interfaces/mermaidAPI.RenderResult.md
+++ b/docs/config/setup/interfaces/mermaidAPI.RenderResult.md
@@ -39,7 +39,7 @@ bindFunctions?.(div); // To call bindFunctions only if it's present.
 
 #### Defined in
 
-mermaidAPI.ts:97
+[mermaidAPI.ts:97](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L97)
 
 ---
 
@@ -51,4 +51,4 @@ The svg code for the rendered graph.
 
 #### Defined in
 
-mermaidAPI.ts:87
+[mermaidAPI.ts:87](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L87)
diff --git a/docs/config/setup/modules/config.md b/docs/config/setup/modules/config.md
index c69958ea7..8381dc8c7 100644
--- a/docs/config/setup/modules/config.md
+++ b/docs/config/setup/modules/config.md
@@ -14,7 +14,7 @@
 
 #### Defined in
 
-config.ts:7
+[config.ts:7](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L7)
 
 ## Functions
 
@@ -36,7 +36,7 @@ Pushes in a directive to the configuration
 
 #### Defined in
 
-config.ts:191
+[config.ts:191](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L191)
 
 ---
 
@@ -60,7 +60,7 @@ The currentConfig
 
 #### Defined in
 
-config.ts:137
+[config.ts:137](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L137)
 
 ---
 
@@ -84,7 +84,7 @@ The siteConfig
 
 #### Defined in
 
-config.ts:96
+[config.ts:96](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L96)
 
 ---
 
@@ -118,7 +118,7 @@ config.ts:96
 
 #### Defined in
 
-config.ts:223
+[config.ts:223](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L223)
 
 ---
 
@@ -147,7 +147,7 @@ options in-place
 
 #### Defined in
 
-config.ts:152
+[config.ts:152](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L152)
 
 ---
 
@@ -167,7 +167,7 @@ config.ts:152
 
 #### Defined in
 
-config.ts:75
+[config.ts:75](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L75)
 
 ---
 
@@ -199,7 +199,7 @@ The currentConfig merged with the sanitized conf
 
 #### Defined in
 
-config.ts:113
+[config.ts:113](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L113)
 
 ---
 
@@ -232,7 +232,7 @@ The new siteConfig
 
 #### Defined in
 
-config.ts:61
+[config.ts:61](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L61)
 
 ---
 
@@ -253,7 +253,7 @@ config.ts:61
 
 #### Defined in
 
-config.ts:14
+[config.ts:14](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L14)
 
 ---
 
@@ -273,4 +273,4 @@ config.ts:14
 
 #### Defined in
 
-config.ts:79
+[config.ts:79](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L79)
diff --git a/docs/config/setup/modules/defaultConfig.md b/docs/config/setup/modules/defaultConfig.md
index 649e03db8..d95ec4e92 100644
--- a/docs/config/setup/modules/defaultConfig.md
+++ b/docs/config/setup/modules/defaultConfig.md
@@ -14,7 +14,7 @@
 
 #### Defined in
 
-defaultConfig.ts:2298
+[defaultConfig.ts:2293](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L2293)
 
 ---
 
@@ -53,4 +53,4 @@ A description of each option follows below.
 
 #### Defined in
 
-defaultConfig.ts:33
+[defaultConfig.ts:33](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L33)
diff --git a/docs/config/setup/modules/mermaidAPI.md b/docs/config/setup/modules/mermaidAPI.md
index aa3043713..591b6841a 100644
--- a/docs/config/setup/modules/mermaidAPI.md
+++ b/docs/config/setup/modules/mermaidAPI.md
@@ -25,7 +25,7 @@ Renames and re-exports [mermaidAPI](mermaidAPI.md#mermaidapi)
 
 #### Defined in
 
-mermaidAPI.ts:81
+[mermaidAPI.ts:81](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L81)
 
 ## Variables
 
@@ -96,7 +96,7 @@ mermaid.initialize(config);
 
 #### Defined in
 
-mermaidAPI.ts:663
+[mermaidAPI.ts:663](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L663)
 
 ## Functions
 
@@ -127,7 +127,7 @@ Return the last node appended
 
 #### Defined in
 
-mermaidAPI.ts:308
+[mermaidAPI.ts:308](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L308)
 
 ---
 
@@ -153,7 +153,7 @@ the cleaned up svgCode
 
 #### Defined in
 
-mermaidAPI.ts:256
+[mermaidAPI.ts:256](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L256)
 
 ---
 
@@ -179,7 +179,7 @@ the string with all the user styles
 
 #### Defined in
 
-mermaidAPI.ts:185
+[mermaidAPI.ts:185](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L185)
 
 ---
 
@@ -202,7 +202,7 @@ mermaidAPI.ts:185
 
 #### Defined in
 
-mermaidAPI.ts:233
+[mermaidAPI.ts:233](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L233)
 
 ---
 
@@ -229,7 +229,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
 
 #### Defined in
 
-mermaidAPI.ts:169
+[mermaidAPI.ts:169](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L169)
 
 ---
 
@@ -249,7 +249,7 @@ mermaidAPI.ts:169
 
 #### Defined in
 
-mermaidAPI.ts:155
+[mermaidAPI.ts:155](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L155)
 
 ---
 
@@ -269,7 +269,7 @@ mermaidAPI.ts:155
 
 #### Defined in
 
-mermaidAPI.ts:126
+[mermaidAPI.ts:126](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L126)
 
 ---
 
@@ -295,7 +295,7 @@ Put the svgCode into an iFrame. Return the iFrame code
 
 #### Defined in
 
-mermaidAPI.ts:287
+[mermaidAPI.ts:287](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L287)
 
 ---
 
@@ -320,4 +320,4 @@ Remove any existing elements from the given document
 
 #### Defined in
 
-mermaidAPI.ts:358
+[mermaidAPI.ts:358](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L358)

From c5b89d127d03bb50995e87abe3294e4358a7348c Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Sun, 25 Jun 2023 01:38:31 +0300
Subject: [PATCH 060/187] Update docs

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

diff --git a/docs/config/setup/modules/defaultConfig.md b/docs/config/setup/modules/defaultConfig.md
index d95ec4e92..d74c9b2b1 100644
--- a/docs/config/setup/modules/defaultConfig.md
+++ b/docs/config/setup/modules/defaultConfig.md
@@ -14,7 +14,7 @@
 
 #### Defined in
 
-[defaultConfig.ts:2293](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L2293)
+[defaultConfig.ts:2298](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L2298)
 
 ---
 

From a38733346f01c443e46a2b81def9cf567aa325f8 Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Sun, 25 Jun 2023 21:56:14 +0300
Subject: [PATCH 061/187] Removed unnecessary configs and extra code

---
 cypress/integration/rendering/sankey.spec.js           | 1 -
 demos/sankey.html                                      | 3 ---
 packages/mermaid/src/diagrams/sankey/sankeyDetector.ts | 2 +-
 3 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/cypress/integration/rendering/sankey.spec.js b/cypress/integration/rendering/sankey.spec.js
index 7a3ffa5db..eb25edf0f 100644
--- a/cypress/integration/rendering/sankey.spec.js
+++ b/cypress/integration/rendering/sankey.spec.js
@@ -10,6 +10,5 @@ describe('Sankey Diagram', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
 });
diff --git a/demos/sankey.html b/demos/sankey.html
index 3dc7a2332..72ca84e44 100644
--- a/demos/sankey.html
+++ b/demos/sankey.html
@@ -95,9 +95,6 @@
         theme: 'default',
         logLevel: 3,
         securityLevel: 'loose',
-        flowchart: { curve: 'basis' },
-        gantt: { axisFormat: '%m/%d/%Y' },
-        sequence: { actorMargin: 50 },
         sankey: {
           title: 'Hey, this is Sankey-Beta',
           width: 1200,
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyDetector.ts b/packages/mermaid/src/diagrams/sankey/sankeyDetector.ts
index 1045d7021..73c4d1428 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyDetector.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyDetector.ts
@@ -3,7 +3,7 @@ import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-a
 const id = 'sankey';
 
 const detector: DiagramDetector = (txt) => {
-  return txt.match(/^\s*sankey-beta/) !== null;
+  return /^\s*sankey-beta/.test(txt);
 };
 
 const loader = async () => {

From f90a7dc784561caf35a6b02afa2b005226f63b19 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Mon, 26 Jun 2023 02:45:06 +0000
Subject: [PATCH 062/187] fix(deps): update all patch dependencies

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

diff --git a/docker-compose.yml b/docker-compose.yml
index 2762f3b99..b492ecba1 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,7 +1,7 @@
 version: '3.9'
 services:
   mermaid:
-    image: node:18.16.0-alpine3.18
+    image: node:18.16.1-alpine3.18
     stdin_open: true
     tty: true
     working_dir: /mermaid
diff --git a/package.json b/package.json
index ac197712c..41202e83f 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "version": "10.2.3",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "type": "module",
-  "packageManager": "pnpm@8.6.2",
+  "packageManager": "pnpm@8.6.4",
   "keywords": [
     "diagram",
     "markdown",
@@ -121,7 +121,7 @@
     "vitest": "^0.32.2"
   },
   "volta": {
-    "node": "18.16.0"
+    "node": "18.16.1"
   },
   "nyc": {
     "report-dir": "coverage/cypress"
diff --git a/packages/mermaid/src/docs/package.json b/packages/mermaid/src/docs/package.json
index 63d06fd21..37e1cffa6 100644
--- a/packages/mermaid/src/docs/package.json
+++ b/packages/mermaid/src/docs/package.json
@@ -30,7 +30,7 @@
     "unplugin-vue-components": "^0.25.0",
     "vite": "^4.3.3",
     "vite-plugin-pwa": "^0.16.0",
-    "vitepress": "1.0.0-beta.2",
+    "vitepress": "1.0.0-beta.3",
     "workbox-window": "^6.5.4"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 308f6e32e..52ec06740 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -445,8 +445,8 @@ importers:
         specifier: ^0.16.0
         version: 0.16.0(vite@4.3.3)(workbox-build@7.0.0)(workbox-window@6.5.4)
       vitepress:
-        specifier: 1.0.0-beta.2
-        version: 1.0.0-beta.2(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0)
+        specifier: 1.0.0-beta.3
+        version: 1.0.0-beta.3(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0)
       workbox-window:
         specifier: ^6.5.4
         version: 6.5.4
@@ -14939,8 +14939,8 @@ packages:
       - terser
     dev: true
 
-  /vitepress@1.0.0-beta.2(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0):
-    resolution: {integrity: sha512-DBXYjtYbm3W1IPPJ2TiCaK/XK+o/2XmL2+jslOGKm+txcbmG0kbeB+vadC5tCUZA9NdA+9Ywj3M4548c7t/SDg==}
+  /vitepress@1.0.0-beta.3(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0):
+    resolution: {integrity: sha512-GR5Pvr/o343NN1M4Na1shhDYZRrQbjmLq7WE0lla0H8iDPAsHE8agTHLWfu3FWx+3q2KA29sv16+0O9RQKGjlA==}
     hasBin: true
     dependencies:
       '@docsearch/css': 3.5.1

From f2c40271b27d4d44fb16d4bfc907ee08fda50baa Mon Sep 17 00:00:00 2001
From: Yokozuna59 <u.yokozuna@gmail.com>
Date: Mon, 26 Jun 2023 18:02:20 +0300
Subject: [PATCH 063/187] change `diagramTheme` and `themes` to return `string`

---
 packages/mermaid/src/styles.ts | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/mermaid/src/styles.ts b/packages/mermaid/src/styles.ts
index 74322f678..f924a4f1f 100644
--- a/packages/mermaid/src/styles.ts
+++ b/packages/mermaid/src/styles.ts
@@ -1,7 +1,7 @@
 import type { FlowChartStyleOptions } from './diagrams/flowchart/styles.js';
 import { log } from './logger.js';
 
-const themes: Record<string, any> = {};
+const themes: Record<string, (options?: any) => string> = {};
 
 const getStyles = (
   type: string,
@@ -73,9 +73,12 @@ const getStyles = (
 `;
 };
 
-export const addStylesForDiagram = (type: string, diagramTheme?: unknown): void => {
+export const addStylesForDiagram = (
+  type: string,
+  diagramTheme?: (options?: any) => string
+): void => {
   if (diagramTheme !== undefined) {
-    themes[type] = diagramTheme;
+    themes[type] = (options) => diagramTheme(options);
   }
 };
 

From 20eb28e1a4ea67a29d3b8e44fd7cdfabbde295f5 Mon Sep 17 00:00:00 2001
From: Yokozuna59 <u.yokozuna@gmail.com>
Date: Mon, 26 Jun 2023 18:21:09 +0300
Subject: [PATCH 064/187] fix cspell issues in *.md files

---
 README.md                                           | 4 ++--
 README.zh-CN.md                                     | 2 +-
 cSpell.json                                         | 2 ++
 docs/ecosystem/integrations.md                      | 8 ++++----
 packages/mermaid/src/dagre-wrapper/GraphObjects.md  | 6 +++---
 packages/mermaid/src/docs/ecosystem/integrations.md | 8 ++++----
 6 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/README.md b/README.md
index f1df0966b..bdffbe175 100644
--- a/README.md
+++ b/README.md
@@ -386,7 +386,7 @@ Update version number in `package.json`.
 npm publish
 ```
 
-The above command generates files into the `dist` folder and publishes them to npmjs.org.
+The above command generates files into the `dist` folder and publishes them to <https://www.npmjs.com>.
 
 ## Related projects
 
@@ -402,7 +402,7 @@ Detailed information about how to contribute can be found in the [contribution g
 
 ## Security and safe diagrams
 
-For public sites, it can be precarious to retrieve text from users on the internet, storing that content for presentation in a browser at a later stage. The reason is that the user content can contain embedded malicious scripts that will run when the data is presented. For Mermaid this is a risk, specially as mermaid diagrams contain many characters that are used in html which makes the standard sanitation unusable as it also breaks the diagrams. We still make an effort to sanitise the incoming code and keep refining the process but it is hard to guarantee that there are no loop holes.
+For public sites, it can be precarious to retrieve text from users on the internet, storing that content for presentation in a browser at a later stage. The reason is that the user content can contain embedded malicious scripts that will run when the data is presented. For Mermaid this is a risk, specially as mermaid diagrams contain many characters that are used in html which makes the standard sanitation unusable as it also breaks the diagrams. We still make an effort to sanitize the incoming code and keep refining the process but it is hard to guarantee that there are no loop holes.
 
 As an extra level of security for sites with external users we are happy to introduce a new security level in which the diagram is rendered in a sandboxed iframe preventing javascript in the code from being executed. This is a great step forward for better security.
 
diff --git a/README.zh-CN.md b/README.zh-CN.md
index 9af34998d..9a2e797be 100644
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -322,7 +322,7 @@ Rel(SystemC, customerA, "Sends e-mails to")
 npm publish
 ```
 
-以上的命令会将文件打包到 `dist` 目录并发布至 npmjs.org.
+以上的命令会将文件打包到 `dist` 目录并发布至 <https://www.npmjs.com>.
 
 ## 相关项目
 
diff --git a/cSpell.json b/cSpell.json
index ff9ef1074..7e25b4e10 100644
--- a/cSpell.json
+++ b/cSpell.json
@@ -42,6 +42,7 @@
     "elkjs",
     "faber",
     "flatmap",
+    "foswiki",
     "ftplugin",
     "gantt",
     "gitea",
@@ -51,6 +52,7 @@
     "graphviz",
     "grav",
     "greywolf",
+    "gzipped",
     "huynh",
     "huynhicode",
     "inkdrop",
diff --git a/docs/ecosystem/integrations.md b/docs/ecosystem/integrations.md
index 28db3afff..10041525d 100644
--- a/docs/ecosystem/integrations.md
+++ b/docs/ecosystem/integrations.md
@@ -66,7 +66,7 @@ They also serve as proof of concept, for the variety of things that can be built
 
 ## Blogs
 
-- [Wordpress](https://wordpress.org)
+- [WordPress](https://wordpress.org)
   - [WordPress Markdown Editor](https://wordpress.org/plugins/wp-githuber-md)
   - [WP-ReliableMD](https://wordpress.org/plugins/wp-reliablemd/)
 - [Hexo](https://hexo.io)
@@ -84,7 +84,7 @@ They also serve as proof of concept, for the variety of things that can be built
   - [Plugin for Mermaid.js](https://github.com/eFrane/vuepress-plugin-mermaidjs)
 - [Grav CMS](https://getgrav.org/)
   - [Mermaid Diagrams](https://github.com/DanielFlaum/grav-plugin-mermaid-diagrams)
-  - [Gitlab Markdown Adapter](https://github.com/Goutte/grav-plugin-gitlab-markdown-adapter)
+  - [GitLab Markdown Adapter](https://github.com/Goutte/grav-plugin-gitlab-markdown-adapter)
 
 ## Communication
 
@@ -104,7 +104,7 @@ They also serve as proof of concept, for the variety of things that can be built
   - [Flex Diagrams Extension](https://www.mediawiki.org/wiki/Extension:Flex_Diagrams)
 - [Semantic Media Wiki](https://semantic-mediawiki.org)
   - [Mermaid Plugin](https://github.com/SemanticMediaWiki/Mermaid)
-- [FosWiki](https://foswiki.org)
+- [Foswiki](https://foswiki.org)
   - [Mermaid Plugin](https://foswiki.org/Extensions/MermaidPlugin)
 - [DokuWiki](https://dokuwiki.org)
   - [Mermaid Plugin](https://www.dokuwiki.org/plugin:mermaid)
@@ -172,7 +172,7 @@ They also serve as proof of concept, for the variety of things that can be built
   - [rehype-mermaidjs](https://github.com/remcohaszing/rehype-mermaidjs)
 - [Gatsby](https://www.gatsbyjs.com/)
   - [gatsby-remark-mermaid](https://github.com/remcohaszing/gatsby-remark-mermaid)
-- [jSDoc](https://jsdoc.app/)
+- [JSDoc](https://jsdoc.app/)
   - [jsdoc-mermaid](https://github.com/Jellyvision/jsdoc-mermaid)
 - [MkDocs](https://www.mkdocs.org)
   - [mkdocs-mermaid2-plugin](https://github.com/fralau/mkdocs-mermaid2-plugin)
diff --git a/packages/mermaid/src/dagre-wrapper/GraphObjects.md b/packages/mermaid/src/dagre-wrapper/GraphObjects.md
index 184fc5137..840ddf824 100644
--- a/packages/mermaid/src/dagre-wrapper/GraphObjects.md
+++ b/packages/mermaid/src/dagre-wrapper/GraphObjects.md
@@ -1,6 +1,6 @@
 # Cluster handling
 
-Dagre does not support edges between nodes and clusters or between clusters to other clusters. In order to remedy this shortcoming the dagre wrapper implements a few work-arounds.
+Dagre does not support edges between nodes and clusters or between clusters to other clusters. In order to remedy this shortcoming the dagre wrapper implements a few workarounds.
 
 In the diagram below there are two clusters and there are no edges to nodes outside the own cluster.
 
@@ -73,7 +73,7 @@ Sample object:
 }
 ```
 
-This is set by the renderer of the diagram and insert the data that the wrapper neds for rendering.
+This is set by the renderer of the diagram and insert the data that the wrapper needs for rendering.
 
 | property   | description                                                                                      |
 | ---------- | ------------------------------------------------------------------------------------------------ |
@@ -114,7 +114,7 @@ Required edgeData for proper rendering:
 | label      | overlap between label and labelText?                                 |
 | labelPos   |                                                                      |
 | labelType  | overlap between label and labelText?                                 |
-| thickness  | Sets the thinkess of the edge. Can be \['normal', 'thick'\]          |
+| thickness  | Sets the thickness of the edge. Can be \['normal', 'thick'\]         |
 | pattern    | Sets the pattern of the edge. Can be \['solid', 'dotted', 'dashed'\] |
 
 # Markers
diff --git a/packages/mermaid/src/docs/ecosystem/integrations.md b/packages/mermaid/src/docs/ecosystem/integrations.md
index be229a8aa..336ae22f5 100644
--- a/packages/mermaid/src/docs/ecosystem/integrations.md
+++ b/packages/mermaid/src/docs/ecosystem/integrations.md
@@ -60,7 +60,7 @@ They also serve as proof of concept, for the variety of things that can be built
 
 ## Blogs
 
-- [Wordpress](https://wordpress.org)
+- [WordPress](https://wordpress.org)
   - [WordPress Markdown Editor](https://wordpress.org/plugins/wp-githuber-md)
   - [WP-ReliableMD](https://wordpress.org/plugins/wp-reliablemd/)
 - [Hexo](https://hexo.io)
@@ -78,7 +78,7 @@ They also serve as proof of concept, for the variety of things that can be built
   - [Plugin for Mermaid.js](https://github.com/eFrane/vuepress-plugin-mermaidjs)
 - [Grav CMS](https://getgrav.org/)
   - [Mermaid Diagrams](https://github.com/DanielFlaum/grav-plugin-mermaid-diagrams)
-  - [Gitlab Markdown Adapter](https://github.com/Goutte/grav-plugin-gitlab-markdown-adapter)
+  - [GitLab Markdown Adapter](https://github.com/Goutte/grav-plugin-gitlab-markdown-adapter)
 
 ## Communication
 
@@ -98,7 +98,7 @@ They also serve as proof of concept, for the variety of things that can be built
   - [Flex Diagrams Extension](https://www.mediawiki.org/wiki/Extension:Flex_Diagrams)
 - [Semantic Media Wiki](https://semantic-mediawiki.org)
   - [Mermaid Plugin](https://github.com/SemanticMediaWiki/Mermaid)
-- [FosWiki](https://foswiki.org)
+- [Foswiki](https://foswiki.org)
   - [Mermaid Plugin](https://foswiki.org/Extensions/MermaidPlugin)
 - [DokuWiki](https://dokuwiki.org)
   - [Mermaid Plugin](https://www.dokuwiki.org/plugin:mermaid)
@@ -166,7 +166,7 @@ They also serve as proof of concept, for the variety of things that can be built
   - [rehype-mermaidjs](https://github.com/remcohaszing/rehype-mermaidjs)
 - [Gatsby](https://www.gatsbyjs.com/)
   - [gatsby-remark-mermaid](https://github.com/remcohaszing/gatsby-remark-mermaid)
-- [jSDoc](https://jsdoc.app/)
+- [JSDoc](https://jsdoc.app/)
   - [jsdoc-mermaid](https://github.com/Jellyvision/jsdoc-mermaid)
 - [MkDocs](https://www.mkdocs.org)
   - [mkdocs-mermaid2-plugin](https://github.com/fralau/mkdocs-mermaid2-plugin)

From b0825ebb35ed001ae86a996e7f622901fa3e850e Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Mon, 26 Jun 2023 18:37:41 +0300
Subject: [PATCH 065/187] Import at the top

---
 .../mermaid/src/diagrams/sankey/parser/sankey-arrow.spec.js   | 1 -
 packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts    | 4 ++--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.spec.js b/packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.spec.js
index a6efe62c1..1fae77c15 100644
--- a/packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.spec.js
+++ b/packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.spec.js
@@ -1,7 +1,6 @@
 import diagram from './sankey-arrow.jison';
 import { parser } from './sankey-arrow.jison';
 import db from '../sankeyDB.js';
-// import { fail } from 'assert';
 
 describe('sankey-beta diagram', function () {
   // TODO - these examples should be put into ./parser/stateDiagram.spec.js
diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts
index 1df607b63..eef8ae3c6 100644
--- a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts
+++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts
@@ -5,6 +5,8 @@ import { parser } from './sankey.jison';
 import db from '../sankeyDB.js';
 import { cleanupComments } from '../../../diagram-api/comments.js';
 import { prepareTextForParsing } from '../sankeyUtils.js';
+import * as fs from 'fs';
+import * as path from 'path';
 
 describe('Sankey diagram', function () {
   describe('when parsing an info graph it', function () {
@@ -15,8 +17,6 @@ describe('Sankey diagram', function () {
     });
 
     it('parses csv', async () => {
-      const fs = await import('fs');
-      const path = await import('path');
       const csv = path.resolve(__dirname, './energy.csv');
       const data = fs.readFileSync(csv, 'utf8');
       const graphDefinition = prepareTextForParsing(cleanupComments('sankey-beta\n\n ' + data));

From f020f4a292cccf570127c2ed236f5453149262b2 Mon Sep 17 00:00:00 2001
From: Yokozuna59 <u.yokozuna@gmail.com>
Date: Mon, 26 Jun 2023 19:12:04 +0300
Subject: [PATCH 066/187] remove `diagramTheme` arrow function return

Co-authored-by: Sidharth Vinod <sidharthv96@gmail.com>
---
 packages/mermaid/src/styles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mermaid/src/styles.ts b/packages/mermaid/src/styles.ts
index f924a4f1f..2f1988419 100644
--- a/packages/mermaid/src/styles.ts
+++ b/packages/mermaid/src/styles.ts
@@ -78,7 +78,7 @@ export const addStylesForDiagram = (
   diagramTheme?: (options?: any) => string
 ): void => {
   if (diagramTheme !== undefined) {
-    themes[type] = (options) => diagramTheme(options);
+    themes[type] = diagramTheme;
   }
 };
 

From 3106ddbd1ec0d8c065479cf700e06e47b65f81cd Mon Sep 17 00:00:00 2001
From: Yokozuna59 <u.yokozuna@gmail.com>
Date: Mon, 26 Jun 2023 19:26:56 +0300
Subject: [PATCH 067/187] add `getDiagramStyles` type and use it in `style.ts`

---
 packages/mermaid/src/diagram-api/types.ts |  2 ++
 packages/mermaid/src/styles.ts            | 12 +++++-------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/mermaid/src/diagram-api/types.ts b/packages/mermaid/src/diagram-api/types.ts
index 265af6587..ab82e7e74 100644
--- a/packages/mermaid/src/diagram-api/types.ts
+++ b/packages/mermaid/src/diagram-api/types.ts
@@ -82,3 +82,5 @@ export type ParseDirectiveDefinition = (statement: string, context: string, type
 export type HTML = d3.Selection<HTMLIFrameElement, unknown, Element, unknown>;
 
 export type SVG = d3.Selection<SVGSVGElement, unknown, Element, unknown>;
+
+export type getDiagramStyles = (options?: unknown) => string;
diff --git a/packages/mermaid/src/styles.ts b/packages/mermaid/src/styles.ts
index 2f1988419..001bd1794 100644
--- a/packages/mermaid/src/styles.ts
+++ b/packages/mermaid/src/styles.ts
@@ -1,7 +1,8 @@
 import type { FlowChartStyleOptions } from './diagrams/flowchart/styles.js';
 import { log } from './logger.js';
+import { getDiagramStyles } from './diagram-api/types.js';
 
-const themes: Record<string, (options?: any) => string> = {};
+const themes: Record<string, getDiagramStyles> = {};
 
 const getStyles = (
   type: string,
@@ -73,12 +74,9 @@ const getStyles = (
 `;
 };
 
-export const addStylesForDiagram = (
-  type: string,
-  diagramTheme?: (options?: any) => string
-): void => {
-  if (diagramTheme !== undefined) {
-    themes[type] = diagramTheme;
+export const addStylesForDiagram = (type: string, getDiagramStyles?: getDiagramStyles): void => {
+  if (getDiagramStyles !== undefined) {
+    themes[type] = getDiagramStyles;
   }
 };
 

From 8b67200717607451b03e2357ca72c9577a5121b2 Mon Sep 17 00:00:00 2001
From: Yokozuna59 <u.yokozuna@gmail.com>
Date: Mon, 26 Jun 2023 19:31:53 +0300
Subject: [PATCH 068/187] change `options` paramter to any instead of `unknown`

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

diff --git a/packages/mermaid/src/diagram-api/types.ts b/packages/mermaid/src/diagram-api/types.ts
index ab82e7e74..67730e33c 100644
--- a/packages/mermaid/src/diagram-api/types.ts
+++ b/packages/mermaid/src/diagram-api/types.ts
@@ -83,4 +83,4 @@ export type HTML = d3.Selection<HTMLIFrameElement, unknown, Element, unknown>;
 
 export type SVG = d3.Selection<SVGSVGElement, unknown, Element, unknown>;
 
-export type getDiagramStyles = (options?: unknown) => string;
+export type getDiagramStyles = (options?: any) => string;

From 64a28be5e3930d59bc35a1efb857194ecdd91813 Mon Sep 17 00:00:00 2001
From: Yokozuna59 <u.yokozuna@gmail.com>
Date: Mon, 26 Jun 2023 20:34:21 +0300
Subject: [PATCH 069/187] rename `getDiagramStyles` type into
 `DiagramStylesProvider`

---
 packages/mermaid/src/diagram-api/types.ts |  2 +-
 packages/mermaid/src/styles.ts            | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/mermaid/src/diagram-api/types.ts b/packages/mermaid/src/diagram-api/types.ts
index 67730e33c..3b8d00456 100644
--- a/packages/mermaid/src/diagram-api/types.ts
+++ b/packages/mermaid/src/diagram-api/types.ts
@@ -83,4 +83,4 @@ export type HTML = d3.Selection<HTMLIFrameElement, unknown, Element, unknown>;
 
 export type SVG = d3.Selection<SVGSVGElement, unknown, Element, unknown>;
 
-export type getDiagramStyles = (options?: any) => string;
+export type DiagramStylesProvider = (options?: any) => string;
diff --git a/packages/mermaid/src/styles.ts b/packages/mermaid/src/styles.ts
index 001bd1794..fde079450 100644
--- a/packages/mermaid/src/styles.ts
+++ b/packages/mermaid/src/styles.ts
@@ -1,8 +1,8 @@
 import type { FlowChartStyleOptions } from './diagrams/flowchart/styles.js';
 import { log } from './logger.js';
-import { getDiagramStyles } from './diagram-api/types.js';
+import type { DiagramStylesProvider } from './diagram-api/types.js';
 
-const themes: Record<string, getDiagramStyles> = {};
+const themes: Record<string, DiagramStylesProvider> = {};
 
 const getStyles = (
   type: string,
@@ -74,9 +74,9 @@ const getStyles = (
 `;
 };
 
-export const addStylesForDiagram = (type: string, getDiagramStyles?: getDiagramStyles): void => {
-  if (getDiagramStyles !== undefined) {
-    themes[type] = getDiagramStyles;
+export const addStylesForDiagram = (type: string, diagramTheme?: DiagramStylesProvider): void => {
+  if (diagramTheme !== undefined) {
+    themes[type] = diagramTheme;
   }
 };
 

From 5a96bd1b9f1fb294f74ffb736142bc6556224fe7 Mon Sep 17 00:00:00 2001
From: Tom PERRILLAT-COLLOMB <tom.perrillat-collomb@protonmail.com>
Date: Tue, 27 Jun 2023 00:22:59 +0200
Subject: [PATCH 070/187] fix(flowchart): apply style on doublecircle

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

diff --git a/packages/mermaid/src/dagre-wrapper/nodes.js b/packages/mermaid/src/dagre-wrapper/nodes.js
index b842fa9a5..410703f6c 100644
--- a/packages/mermaid/src/dagre-wrapper/nodes.js
+++ b/packages/mermaid/src/dagre-wrapper/nodes.js
@@ -602,6 +602,8 @@ const doublecircle = async (parent, node) => {
   const outerCircle = circleGroup.insert('circle');
   const innerCircle = circleGroup.insert('circle');
 
+  circleGroup.attr('class', node.class);
+
   // center the circle around its coordinate
   outerCircle
     .attr('style', node.style)

From d15590f0a5bf069f66baae87a892ef1a8180e443 Mon Sep 17 00:00:00 2001
From: Yokozuna59 <u.yokozuna@gmail.com>
Date: Tue, 27 Jun 2023 02:31:09 +0300
Subject: [PATCH 071/187] add suggested solutions field in bug_report.yml

---
 .github/ISSUE_TEMPLATE/bug_report.yml | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml
index 1b84bfd45..6d8d4f4f8 100644
--- a/.github/ISSUE_TEMPLATE/bug_report.yml
+++ b/.github/ISSUE_TEMPLATE/bug_report.yml
@@ -53,8 +53,18 @@ body:
         Please fill out the info below.
         Note that you only need to fill out the relevant section
       value: |-
-        - Mermaid version: 
+        - Mermaid version:
         - Browser and Version: [Chrome, Edge, Firefox]
+  - type: textarea
+    attributes:
+      label: Suggested Solutions
+      description: >
+        If applicable, suggest solutions that could resolve the bug.
+        It would help maintainers/contributors to not waist time looking for some,
+        even pointing the line causing the bug would be great!
+      placeholder: |-
+        - Add a new option for ...
+        - Add a new type for ...
   - type: textarea
     attributes:
       label: Additional Context

From 8565a3106da3f614aa7d58a4cde568766f957daf Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Tue, 27 Jun 2023 11:35:06 +0530
Subject: [PATCH 072/187] Add release-date

---
 CITATION.cff | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CITATION.cff b/CITATION.cff
index 43f8b8936..96e96b7a9 100644
--- a/CITATION.cff
+++ b/CITATION.cff
@@ -8,6 +8,7 @@ authors:
     given-names: Knut
   - name: "Contributors to Mermaid"
 repository-code: "https://github.com/mermaid-js/mermaid"
+date-released: 2014-12-02
 url: "https://mermaid.js.org/"
 abstract: >-
   JavaScript based diagramming and charting tool that renders Markdown-inspired

From 7bd4e030053caf4036f71a6c676b6648b3e44466 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Tue, 27 Jun 2023 11:38:04 +0530
Subject: [PATCH 073/187] Fix lint issue

---
 CITATION.cff | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/CITATION.cff b/CITATION.cff
index 96e96b7a9..2f14a4b3d 100644
--- a/CITATION.cff
+++ b/CITATION.cff
@@ -1,15 +1,15 @@
 cff-version: 1.2.0
-title: "Mermaid: Generate diagrams from markdown-like text"
+title: 'Mermaid: Generate diagrams from markdown-like text'
 message: >-
   If you use this software, please cite it using the metadata from this file.
 type: software
 authors:
   - family-names: Sveidqvist
     given-names: Knut
-  - name: "Contributors to Mermaid"
-repository-code: "https://github.com/mermaid-js/mermaid"
+  - name: 'Contributors to Mermaid'
+repository-code: 'https://github.com/mermaid-js/mermaid'
 date-released: 2014-12-02
-url: "https://mermaid.js.org/"
+url: 'https://mermaid.js.org/'
 abstract: >-
   JavaScript based diagramming and charting tool that renders Markdown-inspired
   text definitions to create and modify diagrams dynamically.

From b60ec8e5ff8fea5ae0679770a3be8d2aa0d0706d Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Tue, 27 Jun 2023 11:51:44 +0530
Subject: [PATCH 074/187] Update .github/ISSUE_TEMPLATE/bug_report.yml

---
 .github/ISSUE_TEMPLATE/bug_report.yml | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml
index 6d8d4f4f8..2f87cd60c 100644
--- a/.github/ISSUE_TEMPLATE/bug_report.yml
+++ b/.github/ISSUE_TEMPLATE/bug_report.yml
@@ -60,10 +60,9 @@ body:
       label: Suggested Solutions
       description: >
         If applicable, suggest solutions that could resolve the bug.
-        It would help maintainers/contributors to not waist time looking for some,
-        even pointing the line causing the bug would be great!
+        It would help maintainers/contributors to not waste time looking for the solution. Even pointing the line causing the bug would be great!
       placeholder: |-
-        - Add a new option for ...
+        - Variable `parser` in file <filepath> is not initialised ...
         - Add a new type for ...
   - type: textarea
     attributes:

From aa67646b5a377d94f181d24db96e68be0c892f6d Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Tue, 27 Jun 2023 06:22:43 +0000
Subject: [PATCH 075/187] fix(deps): update all patch dependencies

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

diff --git a/package.json b/package.json
index 41202e83f..753726610 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "version": "10.2.3",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "type": "module",
-  "packageManager": "pnpm@8.6.4",
+  "packageManager": "pnpm@8.6.5",
   "keywords": [
     "diagram",
     "markdown",

From 120029913d31668e45daa84f7de70dfa519f3b81 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Tue, 27 Jun 2023 06:23:27 +0000
Subject: [PATCH 076/187] chore(deps): update dependency eslint-plugin-jsdoc to
 v46

---
 package.json   |  2 +-
 pnpm-lock.yaml | 36 ++++++++++++++++++++++--------------
 2 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/package.json b/package.json
index 41202e83f..3b16310ac 100644
--- a/package.json
+++ b/package.json
@@ -91,7 +91,7 @@
     "eslint-plugin-cypress": "^2.13.2",
     "eslint-plugin-html": "^7.1.0",
     "eslint-plugin-jest": "^27.2.1",
-    "eslint-plugin-jsdoc": "^43.0.7",
+    "eslint-plugin-jsdoc": "^46.0.0",
     "eslint-plugin-json": "^3.1.0",
     "eslint-plugin-lodash": "^7.4.0",
     "eslint-plugin-markdown": "^3.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 52ec06740..ca41dea59 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -105,8 +105,8 @@ importers:
         specifier: ^27.2.1
         version: 27.2.1(@typescript-eslint/eslint-plugin@5.59.0)(eslint@8.39.0)(jest@29.5.0)(typescript@5.1.3)
       eslint-plugin-jsdoc:
-        specifier: ^43.0.7
-        version: 43.0.7(eslint@8.39.0)
+        specifier: ^46.0.0
+        version: 46.0.0(eslint@8.39.0)
       eslint-plugin-json:
         specifier: ^3.1.0
         version: 3.1.0
@@ -2824,9 +2824,9 @@ packages:
       - search-insights
     dev: true
 
-  /@es-joy/jsdoccomment@0.37.1:
-    resolution: {integrity: sha512-5vxWJ1gEkEF0yRd0O+uK6dHJf7adrxwQSX8PuRiPfFSAbNLnY0ZJfXaZucoz14Jj2N11xn2DnlEPwWRpYpvRjg==}
-    engines: {node: ^14 || ^16 || ^17 || ^18 || ^19 || ^20}
+  /@es-joy/jsdoccomment@0.39.4:
+    resolution: {integrity: sha512-Jvw915fjqQct445+yron7Dufix9A+m9j1fCJYlCo1FWlRvTxa3pjJelxdSTdaLWcTwRU6vbL+NYjO4YuNIS5Qg==}
+    engines: {node: '>=16'}
     dependencies:
       comment-parser: 1.3.1
       esquery: 1.5.0
@@ -6653,7 +6653,7 @@ packages:
       js-string-escape: 1.0.1
       lodash: 4.17.21
       md5-hex: 3.0.1
-      semver: 7.5.0
+      semver: 7.5.3
       well-known-symbols: 2.0.0
     dev: true
 
@@ -8061,20 +8061,20 @@ packages:
       - typescript
     dev: true
 
-  /eslint-plugin-jsdoc@43.0.7(eslint@8.39.0):
-    resolution: {integrity: sha512-32Sx5I9VzO/bqbtslCu3L1GHIPo+QEliwqwjWq+qzbUv76wrkH6ifUEE0EbkuNEn+cHlSIOrg/IJ1PGNN72QZA==}
-    engines: {node: ^14 || ^16 || ^17 || ^18 || ^19 || ^20}
+  /eslint-plugin-jsdoc@46.0.0(eslint@8.39.0):
+    resolution: {integrity: sha512-xmB5WleBcPCFYlrFfdjrcfSKOJBLwyGmKa+i+fVqlIHp8g5aAoeQpBGugUzToFtQgd4hNZYlfIcP7QSxC9NYWQ==}
+    engines: {node: '>=16'}
     peerDependencies:
       eslint: ^7.0.0 || ^8.0.0
     dependencies:
-      '@es-joy/jsdoccomment': 0.37.1
+      '@es-joy/jsdoccomment': 0.39.4
       are-docs-informative: 0.0.2
       comment-parser: 1.3.1
       debug: 4.3.4(supports-color@8.1.1)
       escape-string-regexp: 4.0.0
       eslint: 8.39.0
       esquery: 1.5.0
-      semver: 7.5.0
+      semver: 7.5.3
       spdx-expression-parse: 3.0.1
     transitivePeerDependencies:
       - supports-color
@@ -8548,7 +8548,7 @@ packages:
       proxy-addr: 2.0.7
       rfdc: 1.3.0
       secure-json-parse: 2.7.0
-      semver: 7.5.0
+      semver: 7.5.3
       tiny-lru: 8.0.2
     transitivePeerDependencies:
       - supports-color
@@ -10347,7 +10347,7 @@ packages:
       jest-util: 29.5.0
       natural-compare: 1.4.0
       pretty-format: 29.5.0
-      semver: 7.5.0
+      semver: 7.5.3
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -11801,7 +11801,7 @@ packages:
     dependencies:
       hosted-git-info: 4.1.0
       is-core-module: 2.12.1
-      semver: 7.5.0
+      semver: 7.5.3
       validate-npm-package-license: 3.0.4
     dev: true
 
@@ -13254,6 +13254,14 @@ packages:
       lru-cache: 6.0.0
     dev: true
 
+  /semver@7.5.3:
+    resolution: {integrity: sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==}
+    engines: {node: '>=10'}
+    hasBin: true
+    dependencies:
+      lru-cache: 6.0.0
+    dev: true
+
   /send@0.18.0:
     resolution: {integrity: sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==}
     engines: {node: '>= 0.8.0'}

From f48652322d1cac67a5f15fe1dc97579ffccf0ea8 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Tue, 27 Jun 2023 07:13:43 +0000
Subject: [PATCH 077/187] chore(deps): update dependency jsdom to v22

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

diff --git a/package.json b/package.json
index 753726610..ed1baa5fa 100644
--- a/package.json
+++ b/package.json
@@ -104,7 +104,7 @@
     "jest": "^29.5.0",
     "jison": "^0.4.18",
     "js-yaml": "^4.1.0",
-    "jsdom": "^21.1.1",
+    "jsdom": "^22.0.0",
     "lint-staged": "^13.2.1",
     "nyc": "^15.1.0",
     "path-browserify": "^1.0.1",
diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index d0c67ee58..8e7e9696d 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -92,7 +92,7 @@
     "globby": "^13.1.4",
     "jison": "^0.4.18",
     "js-base64": "^3.7.5",
-    "jsdom": "^21.1.1",
+    "jsdom": "^22.0.0",
     "micromatch": "^4.0.5",
     "path-browserify": "^1.0.1",
     "prettier": "^2.8.8",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 52ec06740..23903efde 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -144,8 +144,8 @@ importers:
         specifier: ^4.1.0
         version: 4.1.0
       jsdom:
-        specifier: ^21.1.1
-        version: 21.1.1
+        specifier: ^22.0.0
+        version: 22.0.0
       lint-staged:
         specifier: ^13.2.1
         version: 13.2.1
@@ -187,7 +187,7 @@ importers:
         version: 4.1.0(vite@4.3.9)
       vitest:
         specifier: ^0.32.2
-        version: 0.32.2(@vitest/ui@0.32.2)(jsdom@21.1.1)
+        version: 0.32.2(@vitest/ui@0.32.2)(jsdom@22.0.0)
 
   packages/mermaid:
     dependencies:
@@ -307,8 +307,8 @@ importers:
         specifier: ^3.7.5
         version: 3.7.5
       jsdom:
-        specifier: ^21.1.1
-        version: 21.1.1
+        specifier: ^22.0.0
+        version: 22.0.0
       micromatch:
         specifier: ^4.0.5
         version: 4.0.5
@@ -878,7 +878,7 @@ packages:
       http-proxy-agent: 5.0.0
       https-proxy-agent: 5.0.1
       is-potential-custom-element-name: 1.0.1
-      nwsapi: 2.2.2
+      nwsapi: 2.2.5
       parse5: 6.0.1
       saxes: 5.0.1
       symbol-tree: 3.2.4
@@ -4890,7 +4890,7 @@ packages:
       istanbul-lib-source-maps: 4.0.1
       istanbul-reports: 3.1.5
       test-exclude: 6.0.0
-      vitest: 0.32.2(@vitest/ui@0.32.2)(jsdom@21.1.1)
+      vitest: 0.32.2(@vitest/ui@0.32.2)(jsdom@22.0.0)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -4938,7 +4938,7 @@ packages:
       pathe: 1.1.0
       picocolors: 1.0.0
       sirv: 2.0.3
-      vitest: 0.32.2(@vitest/ui@0.32.2)(jsdom@21.1.1)
+      vitest: 0.32.2(@vitest/ui@0.32.2)(jsdom@22.0.0)
     dev: true
 
   /@vitest/utils@0.32.2:
@@ -5479,13 +5479,6 @@ packages:
       acorn-walk: 7.2.0
     dev: true
 
-  /acorn-globals@7.0.1:
-    resolution: {integrity: sha512-umOSDSDrfHbTNPuNpC2NSnnA3LUrqpevPb4T9jRx4MagXNS0rs+gwiTcAvqCRmsD6utzsrzNt+ebm00SNWiC3Q==}
-    dependencies:
-      acorn: 8.8.2
-      acorn-walk: 8.2.0
-    dev: true
-
   /acorn-import-assertions@1.8.0(acorn@8.8.0):
     resolution: {integrity: sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==}
     peerDependencies:
@@ -10525,9 +10518,9 @@ packages:
     engines: {node: '>=12.0.0'}
     dev: true
 
-  /jsdom@21.1.1:
-    resolution: {integrity: sha512-Jjgdmw48RKcdAIQyUD1UdBh2ecH7VqwaXPN3ehoZN6MqgVbMn+lRm1aAT1AsdJRAJpwfa4IpwgzySn61h2qu3w==}
-    engines: {node: '>=14'}
+  /jsdom@22.0.0:
+    resolution: {integrity: sha512-p5ZTEb5h+O+iU02t0GfEjAnkdYPrQSkfuTSMkMYyIoMvUNEHsbG0bHHbfXIcfTqD2UfvjQX7mmgiFsyRwGscVw==}
+    engines: {node: '>=16'}
     peerDependencies:
       canvas: ^2.5.0
     peerDependenciesMeta:
@@ -10535,19 +10528,16 @@ packages:
         optional: true
     dependencies:
       abab: 2.0.6
-      acorn: 8.8.2
-      acorn-globals: 7.0.1
       cssstyle: 3.0.0
       data-urls: 4.0.0
       decimal.js: 10.4.3
       domexception: 4.0.0
-      escodegen: 2.0.0
       form-data: 4.0.0
       html-encoding-sniffer: 3.0.0
       http-proxy-agent: 5.0.0
       https-proxy-agent: 5.0.1
       is-potential-custom-element-name: 1.0.1
-      nwsapi: 2.2.2
+      nwsapi: 2.2.5
       parse5: 7.1.2
       rrweb-cssom: 0.6.0
       saxes: 6.0.0
@@ -11835,8 +11825,8 @@ packages:
       path-key: 4.0.0
     dev: true
 
-  /nwsapi@2.2.2:
-    resolution: {integrity: sha512-90yv+6538zuvUMnN+zCr8LuV6bPFdq50304114vJYJ8RDyK8D5O9Phpbd6SZWgI7PwzmmfN1upeOJlvybDSgCw==}
+  /nwsapi@2.2.5:
+    resolution: {integrity: sha512-6xpotnECFy/og7tKSBVmUNft7J3jyXAka4XvG6AUhFWRz+Q/Ljus7znJAA3bxColfQLdS+XsjoodtJfCgeTEFQ==}
     dev: true
 
   /nyc@15.1.0:
@@ -12583,11 +12573,6 @@ packages:
       once: 1.4.0
     dev: true
 
-  /punycode@2.1.1:
-    resolution: {integrity: sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==}
-    engines: {node: '>=6'}
-    dev: true
-
   /punycode@2.3.0:
     resolution: {integrity: sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==}
     engines: {node: '>=6'}
@@ -14143,7 +14128,7 @@ packages:
     engines: {node: '>=0.8'}
     dependencies:
       psl: 1.9.0
-      punycode: 2.1.1
+      punycode: 2.3.0
     dev: true
 
   /tough-cookie@4.1.2:
@@ -14151,7 +14136,7 @@ packages:
     engines: {node: '>=6'}
     dependencies:
       psl: 1.9.0
-      punycode: 2.1.1
+      punycode: 2.3.0
       universalify: 0.2.0
       url-parse: 1.5.10
     dev: true
@@ -14648,7 +14633,7 @@ packages:
   /uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
     dependencies:
-      punycode: 2.1.1
+      punycode: 2.3.0
     dev: true
 
   /url-parse@1.5.10:
@@ -14982,7 +14967,7 @@ packages:
       - universal-cookie
     dev: true
 
-  /vitest@0.32.2(@vitest/ui@0.32.2)(jsdom@21.1.1):
+  /vitest@0.32.2(@vitest/ui@0.32.2)(jsdom@22.0.0):
     resolution: {integrity: sha512-hU8GNNuQfwuQmqTLfiKcqEhZY72Zxb7nnN07koCUNmntNxbKQnVbeIS6sqUgR3eXSlbOpit8+/gr1KpqoMgWCQ==}
     engines: {node: '>=v14.18.0'}
     hasBin: true
@@ -15028,7 +15013,7 @@ packages:
       chai: 4.3.7
       concordance: 5.0.4
       debug: 4.3.4(supports-color@8.1.1)
-      jsdom: 21.1.1
+      jsdom: 22.0.0
       local-pkg: 0.4.3
       magic-string: 0.30.0
       pathe: 1.1.0

From b7af9bace4d0358eb9fce046cd997e466e35f7cb Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Tue, 27 Jun 2023 08:00:16 +0000
Subject: [PATCH 078/187] chore(deps): update dependency eslint-plugin-unicorn
 to v47

---
 package.json   |  2 +-
 pnpm-lock.yaml | 42 +++++++++++++++++++++++++++---------------
 2 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/package.json b/package.json
index d8a42b38a..0d8b25d40 100644
--- a/package.json
+++ b/package.json
@@ -97,7 +97,7 @@
     "eslint-plugin-markdown": "^3.0.0",
     "eslint-plugin-no-only-tests": "^3.1.0",
     "eslint-plugin-tsdoc": "^0.2.17",
-    "eslint-plugin-unicorn": "^46.0.0",
+    "eslint-plugin-unicorn": "^47.0.0",
     "express": "^4.18.2",
     "globby": "^13.1.4",
     "husky": "^8.0.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 07b8aa476..e8712b14c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -123,8 +123,8 @@ importers:
         specifier: ^0.2.17
         version: 0.2.17
       eslint-plugin-unicorn:
-        specifier: ^46.0.0
-        version: 46.0.0(eslint@8.39.0)
+        specifier: ^47.0.0
+        version: 47.0.0(eslint@8.39.0)
       express:
         specifier: ^4.18.2
         version: 4.18.2
@@ -6381,6 +6381,11 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /ci-info@3.8.0:
+    resolution: {integrity: sha512-eXTggHWSooYhq49F2opQhuHWgzucfF2YgODK4e1566GQs5BIfP30B0oenwBJHfWxAs2fyPB1s7Mg949zLf61Yw==}
+    engines: {node: '>=8'}
+    dev: true
+
   /cjs-module-lexer@1.2.2:
     resolution: {integrity: sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==}
     dev: true
@@ -8115,28 +8120,28 @@ packages:
       '@microsoft/tsdoc-config': 0.16.2
     dev: true
 
-  /eslint-plugin-unicorn@46.0.0(eslint@8.39.0):
-    resolution: {integrity: sha512-j07WkC+PFZwk8J33LYp6JMoHa1lXc1u6R45pbSAipjpfpb7KIGr17VE2D685zCxR5VL4cjrl65kTJflziQWMDA==}
-    engines: {node: '>=14.18'}
+  /eslint-plugin-unicorn@47.0.0(eslint@8.39.0):
+    resolution: {integrity: sha512-ivB3bKk7fDIeWOUmmMm9o3Ax9zbMz1Bsza/R2qm46ufw4T6VBFBaJIR1uN3pCKSmSXm8/9Nri8V+iUut1NhQGA==}
+    engines: {node: '>=16'}
     peerDependencies:
-      eslint: '>=8.28.0'
+      eslint: '>=8.38.0'
     dependencies:
       '@babel/helper-validator-identifier': 7.19.1
       '@eslint-community/eslint-utils': 4.4.0(eslint@8.39.0)
-      ci-info: 3.6.2
+      ci-info: 3.8.0
       clean-regexp: 1.0.0
       eslint: 8.39.0
       esquery: 1.5.0
       indent-string: 4.0.0
-      is-builtin-module: 3.2.0
+      is-builtin-module: 3.2.1
       jsesc: 3.0.2
       lodash: 4.17.21
       pluralize: 8.0.0
       read-pkg-up: 7.0.1
       regexp-tree: 0.1.24
-      regjsparser: 0.9.1
+      regjsparser: 0.10.0
       safe-regex: 2.1.1
-      semver: 7.3.8
+      semver: 7.5.3
       strip-indent: 3.0.0
     dev: true
 
@@ -9602,8 +9607,8 @@ packages:
     engines: {node: '>=4'}
     dev: true
 
-  /is-builtin-module@3.2.0:
-    resolution: {integrity: sha512-phDA4oSGt7vl1n5tJvTWooWWAsXLY+2xCnxNqvKhGEzujg+A43wPlPOyDg3C8XQHN+6k/JTQWJ/j0dQh/qr+Hw==}
+  /is-builtin-module@3.2.1:
+    resolution: {integrity: sha512-BSLE3HnV2syZ0FK0iMA/yUGplUeMmNz4AW5fnTunbCIqZi4vG3WjJT9FHMy5D69xmAYBHXQhJdALdpwVxV501A==}
     engines: {node: '>=6'}
     dependencies:
       builtin-modules: 3.3.0
@@ -9618,7 +9623,7 @@ packages:
     resolution: {integrity: sha512-ZYvCgrefwqoQ6yTyYUbQu64HsITZ3NfKX1lzaEYdkTDcfKzzCI/wthRRYKkdjHKFVgNiXKAKm65Zo1pk2as/QQ==}
     hasBin: true
     dependencies:
-      ci-info: 3.6.2
+      ci-info: 3.8.0
     dev: true
 
   /is-core-module@2.10.0:
@@ -10067,7 +10072,7 @@ packages:
       '@types/node': 18.16.0
       babel-jest: 29.5.0(@babel/core@7.12.3)
       chalk: 4.1.2
-      ci-info: 3.6.2
+      ci-info: 3.8.0
       deepmerge: 4.2.2
       glob: 7.2.3
       graceful-fs: 4.2.10
@@ -10352,7 +10357,7 @@ packages:
       '@jest/types': 29.5.0
       '@types/node': 18.16.0
       chalk: 4.1.2
-      ci-info: 3.6.2
+      ci-info: 3.8.0
       graceful-fs: 4.2.10
       picomatch: 2.3.1
     dev: true
@@ -12808,6 +12813,13 @@ packages:
       unicode-match-property-value-ecmascript: 2.1.0
     dev: true
 
+  /regjsparser@0.10.0:
+    resolution: {integrity: sha512-qx+xQGZVsy55CH0a1hiVwHmqjLryfh7wQyF5HO07XJ9f7dQMY/gPQHhlyDkIzJKC+x2fUCpCcUODUUUFrm7SHA==}
+    hasBin: true
+    dependencies:
+      jsesc: 0.5.0
+    dev: true
+
   /regjsparser@0.9.1:
     resolution: {integrity: sha512-dQUtn90WanSNl+7mQKcXAgZxvUe7Z0SqXlgzv0za4LwiUhyzBC58yQO3liFoUgu8GiJVInAhJjkj1N0EtQ5nkQ==}
     hasBin: true

From 1730a229a5a8edcc2f7e48e8074a6f57da0a96c8 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Tue, 27 Jun 2023 09:21:55 +0000
Subject: [PATCH 079/187] chore(deps): update dependency workbox-window to v7

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

diff --git a/packages/mermaid/src/docs/package.json b/packages/mermaid/src/docs/package.json
index 37e1cffa6..f24f9f4bc 100644
--- a/packages/mermaid/src/docs/package.json
+++ b/packages/mermaid/src/docs/package.json
@@ -31,6 +31,6 @@
     "vite": "^4.3.3",
     "vite-plugin-pwa": "^0.16.0",
     "vitepress": "1.0.0-beta.3",
-    "workbox-window": "^6.5.4"
+    "workbox-window": "^7.0.0"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e8712b14c..2f1ea7a43 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -443,13 +443,13 @@ importers:
         version: 4.3.3(@types/node@18.16.0)
       vite-plugin-pwa:
         specifier: ^0.16.0
-        version: 0.16.0(vite@4.3.3)(workbox-build@7.0.0)(workbox-window@6.5.4)
+        version: 0.16.0(vite@4.3.3)(workbox-build@7.0.0)(workbox-window@7.0.0)
       vitepress:
         specifier: 1.0.0-beta.3
         version: 1.0.0-beta.3(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0)
       workbox-window:
-        specifier: ^6.5.4
-        version: 6.5.4
+        specifier: ^7.0.0
+        version: 7.0.0
 
   tests/webpack:
     dependencies:
@@ -4843,7 +4843,7 @@ packages:
     peerDependencies:
       vite-plugin-pwa: '>=0.16.3 <1'
     dependencies:
-      vite-plugin-pwa: 0.16.0(vite@4.3.3)(workbox-build@7.0.0)(workbox-window@6.5.4)
+      vite-plugin-pwa: 0.16.0(vite@4.3.3)(workbox-build@7.0.0)(workbox-window@7.0.0)
     dev: true
 
   /@vitejs/plugin-vue@4.2.1(vite@4.3.3)(vue@3.2.47):
@@ -14781,7 +14781,7 @@ packages:
       - supports-color
     dev: true
 
-  /vite-plugin-pwa@0.16.0(vite@4.3.3)(workbox-build@7.0.0)(workbox-window@6.5.4):
+  /vite-plugin-pwa@0.16.0(vite@4.3.3)(workbox-build@7.0.0)(workbox-window@7.0.0):
     resolution: {integrity: sha512-E+AQRzHxqNU4ZhEeR8X37/foZB+ezJEhXauE/mcf1UITY6k2Pa1dtlFl+BQu57fTdiVlWim5S0Qy44Yap93Dkg==}
     engines: {node: '>=16.0.0'}
     peerDependencies:
@@ -14794,7 +14794,7 @@ packages:
       pretty-bytes: 6.1.0
       vite: 4.3.3(@types/node@18.16.0)
       workbox-build: 7.0.0
-      workbox-window: 6.5.4
+      workbox-window: 7.0.0
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -15609,10 +15609,6 @@ packages:
       workbox-core: 7.0.0
     dev: true
 
-  /workbox-core@6.5.4:
-    resolution: {integrity: sha512-OXYb+m9wZm8GrORlV2vBbE5EC1FKu71GGp0H4rjmxmF4/HLbMCoTFws87M3dFwgpmg0v00K++PImpNQ6J5NQ6Q==}
-    dev: true
-
   /workbox-core@7.0.0:
     resolution: {integrity: sha512-81JkAAZtfVP8darBpfRTovHg8DGAVrKFgHpOArZbdFd78VqHr5Iw65f2guwjE2NlCFbPFDoez3D3/6ZvhI/rwQ==}
     dev: true
@@ -15687,13 +15683,6 @@ packages:
     resolution: {integrity: sha512-SWfEouQfjRiZ7GNABzHUKUyj8pCoe+RwjfOIajcx6J5mtgKkN+t8UToHnpaJL5UVVOf5YhJh+OHhbVNIHe+LVA==}
     dev: true
 
-  /workbox-window@6.5.4:
-    resolution: {integrity: sha512-HnLZJDwYBE+hpG25AQBO8RUWBJRaCsI9ksQJEp3aCOFCaG5kqaToAYXFRAHxzRluM2cQbGzdQF5rjKPWPA1fug==}
-    dependencies:
-      '@types/trusted-types': 2.0.2
-      workbox-core: 6.5.4
-    dev: true
-
   /workbox-window@7.0.0:
     resolution: {integrity: sha512-j7P/bsAWE/a7sxqTzXo3P2ALb1reTfZdvVp6OJ/uLr/C2kZAMvjeWGm8V4htQhor7DOvYg0sSbFN2+flT5U0qA==}
     dependencies:

From f606ad2d9da7cb39bf8c66d18038f5d4a885e0cc Mon Sep 17 00:00:00 2001
From: Marco Beelen <marco@mcbeelen.net>
Date: Tue, 27 Jun 2023 09:39:43 +0200
Subject: [PATCH 080/187] docs: Howto on foreground color on timelines

---
 packages/mermaid/src/docs/syntax/timeline.md | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/mermaid/src/docs/syntax/timeline.md b/packages/mermaid/src/docs/syntax/timeline.md
index c9bc9161e..a485cba3f 100644
--- a/packages/mermaid/src/docs/syntax/timeline.md
+++ b/packages/mermaid/src/docs/syntax/timeline.md
@@ -172,9 +172,11 @@ let us look at same example, where we have disabled the multiColor option.
 
 ### Customizing Color scheme
 
-You can customize the color scheme using the `cScale0` to `cScale11` theme variables. Mermaid allows you to set unique colors for up-to 12 sections, where `cScale0` variable will drive the value of the first section or time-period, `cScale1` will drive the value of the second section and so on.
+You can customize the color scheme using the `cScale0` to `cScale11` theme variables, which will change the background colors. Mermaid allows you to set unique colors for up-to 12 sections, where `cScale0` variable will drive the value of the first section or time-period, `cScale1` will drive the value of the second section and so on.
 In case you have more than 12 sections, the color scheme will start to repeat.
 
+If you also want to change the foreground color of a section, you can do so use theme variables corresponding `cScaleLabel0` to `cScaleLabel11` variables.
+
 NOTE: Default values for these theme variables are picked from the selected theme. If you want to override the default values, you can use the `initialize` call to add your custom theme variable values.
 
 Example:
@@ -183,9 +185,9 @@ Now let's override the default values for the `cScale0` to `cScale2` variables:
 
 ```mermaid-example
     %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
-              'cScale0': '#ff0000',
+              'cScale0': '#ff0000', 'cScaleLabel0': '#ffffff', 
               'cScale1': '#00ff00',
-              'cScale2': '#0000ff'
+              'cScale2': '#0000ff', 'cScaleLabel2': '#ffffff'
        } } }%%
        timeline
         title History of Social Media Platform

From e2f21a2d984ddaf359c334c6f971dcb5aacc99d9 Mon Sep 17 00:00:00 2001
From: Marco Beelen <marco@mcbeelen.net>
Date: Tue, 27 Jun 2023 13:03:31 +0200
Subject: [PATCH 081/187] Lint fix

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

diff --git a/docs/syntax/timeline.md b/docs/syntax/timeline.md
index d9915ff3e..d42a2dc7c 100644
--- a/docs/syntax/timeline.md
+++ b/docs/syntax/timeline.md
@@ -257,9 +257,11 @@ let us look at same example, where we have disabled the multiColor option.
 
 ### Customizing Color scheme
 
-You can customize the color scheme using the `cScale0` to `cScale11` theme variables. Mermaid allows you to set unique colors for up-to 12 sections, where `cScale0` variable will drive the value of the first section or time-period, `cScale1` will drive the value of the second section and so on.
+You can customize the color scheme using the `cScale0` to `cScale11` theme variables, which will change the background colors. Mermaid allows you to set unique colors for up-to 12 sections, where `cScale0` variable will drive the value of the first section or time-period, `cScale1` will drive the value of the second section and so on.
 In case you have more than 12 sections, the color scheme will start to repeat.
 
+If you also want to change the foreground color of a section, you can do so use theme variables corresponding `cScaleLabel0` to `cScaleLabel11` variables.
+
 NOTE: Default values for these theme variables are picked from the selected theme. If you want to override the default values, you can use the `initialize` call to add your custom theme variable values.
 
 Example:
@@ -268,9 +270,9 @@ Now let's override the default values for the `cScale0` to `cScale2` variables:
 
 ```mermaid-example
     %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
-              'cScale0': '#ff0000',
+              'cScale0': '#ff0000', 'cScaleLabel0': '#ffffff',
               'cScale1': '#00ff00',
-              'cScale2': '#0000ff'
+              'cScale2': '#0000ff', 'cScaleLabel2': '#ffffff'
        } } }%%
        timeline
         title History of Social Media Platform
@@ -286,9 +288,9 @@ Now let's override the default values for the `cScale0` to `cScale2` variables:
 
 ```mermaid
     %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
-              'cScale0': '#ff0000',
+              'cScale0': '#ff0000', 'cScaleLabel0': '#ffffff',
               'cScale1': '#00ff00',
-              'cScale2': '#0000ff'
+              'cScale2': '#0000ff', 'cScaleLabel2': '#ffffff'
        } } }%%
        timeline
         title History of Social Media Platform
diff --git a/packages/mermaid/src/docs/syntax/timeline.md b/packages/mermaid/src/docs/syntax/timeline.md
index a485cba3f..201ab6b16 100644
--- a/packages/mermaid/src/docs/syntax/timeline.md
+++ b/packages/mermaid/src/docs/syntax/timeline.md
@@ -185,7 +185,7 @@ Now let's override the default values for the `cScale0` to `cScale2` variables:
 
 ```mermaid-example
     %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
-              'cScale0': '#ff0000', 'cScaleLabel0': '#ffffff', 
+              'cScale0': '#ff0000', 'cScaleLabel0': '#ffffff',
               'cScale1': '#00ff00',
               'cScale2': '#0000ff', 'cScaleLabel2': '#ffffff'
        } } }%%

From 605e8d4a922b8c2620b6abe47a8d13154e8a7839 Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Tue, 27 Jun 2023 14:11:06 +0300
Subject: [PATCH 082/187] Sankey refactoring

---
 packages/mermaid/src/config.type.ts           |  8 +++
 packages/mermaid/src/defaultConfig.ts         |  5 +-
 .../mermaid/src/diagrams/sankey/sankeyDB.ts   | 27 +++-------
 .../src/diagrams/sankey/sankeyRenderer.ts     | 22 ++++----
 run                                           | 52 ++++++++-----------
 5 files changed, 50 insertions(+), 64 deletions(-)

diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts
index 7e0b67eb5..4d40b33c8 100644
--- a/packages/mermaid/src/config.type.ts
+++ b/packages/mermaid/src/config.type.ts
@@ -418,10 +418,18 @@ export enum SankeyLinkColor {
   gradient = 'gradient',
 }
 
+export enum SankeyNodeAlignment {
+  left = 'left',
+  right = 'right',
+  center = 'center',
+  justify = 'justify',
+}
+
 export interface SankeyDiagramConfig extends BaseDiagramConfig {
   width?: number;
   height?: number;
   linkColor?: SankeyLinkColor | string;
+  nodeAlignment?: SankeyNodeAlignment;
 }
 
 export interface FontConfig {
diff --git a/packages/mermaid/src/defaultConfig.ts b/packages/mermaid/src/defaultConfig.ts
index 4ece25010..39dcd0721 100644
--- a/packages/mermaid/src/defaultConfig.ts
+++ b/packages/mermaid/src/defaultConfig.ts
@@ -1,5 +1,5 @@
 import theme from './themes/index.js';
-import { MermaidConfig } from './config.type.js';
+import { MermaidConfig, SankeyLinkColor, SankeyNodeAlignment } from './config.type.js';
 /**
  * **Configuration methods in Mermaid version 8.6.0 have been updated, to learn more[[click
  * here](8.6.0_docs.md)].**
@@ -2273,7 +2273,8 @@ const config: Partial<MermaidConfig> = {
   sankey: {
     width: 800,
     height: 400,
-    linkColor: 'gradient',
+    linkColor: SankeyLinkColor.gradient,
+    nodeAlignment: SankeyNodeAlignment.justify,
   },
   fontSize: 16,
 };
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts
index 807c07cd1..eda443871 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts
@@ -17,22 +17,11 @@ import {
 let links: SankeyLink[] = [];
 let nodes: SankeyNode[] = [];
 let nodesMap: Record<string, SankeyNode> = {};
-let nodeAlign = 'justify';
-
-const setNodeAlign = (alignment: string): void => {
-  const nodeAlignments: Set<string> = new Set(['left', 'right', 'center', 'justify']);
-  if (nodeAlignments.has(alignment)) {
-    nodeAlign = alignment;
-  }
-};
-
-const getNodeAlign = (): string => nodeAlign;
 
 const clear = (): void => {
   links = [];
   nodes = [];
   nodesMap = {};
-  nodeAlign = 'justify';
   commonClear();
 };
 
@@ -58,15 +47,13 @@ class SankeyNode {
  */
 const findOrCreateNode = (ID: string): SankeyNode => {
   ID = common.sanitizeText(ID, configApi.getConfig());
-  let node: SankeyNode;
-  if (nodesMap[ID] === undefined) {
-    node = new SankeyNode(ID);
-    nodesMap[ID] = node;
-    nodes.push(node);
-  } else {
-    node = nodesMap[ID];
+  if (nodesMap[ID]) {
+    return nodesMap[ID];
   }
-  return node;
+
+  nodesMap[ID] = new SankeyNode(ID);
+  nodes.push(nodesMap[ID]);
+  return nodesMap[ID];
 };
 
 const getNodes = () => nodes;
@@ -89,8 +76,6 @@ export default {
   getGraph,
   addLink,
   findOrCreateNode,
-  setNodeAlign,
-  getNodeAlign,
   getAccTitle,
   setAccTitle,
   getAccDescription,
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
index dd31e775e..a480b4b3e 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
@@ -1,12 +1,9 @@
-// @ts-nocheck TODO: fix file
 import { Diagram } from '../../Diagram.js';
 import * as configApi from '../../config.js';
 
 import {
   select as d3select,
-  // @ts-ignore TODO: make proper import
   scaleOrdinal as d3scaleOrdinal,
-  // @ts-ignore TODO: make proper import
   schemeTableau10 as d3schemeTableau10,
 } from 'd3';
 
@@ -20,7 +17,7 @@ import {
 } from 'd3-sankey';
 import { configureSvgSize } from '../../setupGraphViewbox.js';
 import { Uid } from './sankeyUtils.js';
-import { SankeyLinkColor } from '../../config.type.js';
+import { SankeyLinkColor, SankeyNodeAlignment } from '../../config.type.js';
 
 /**
  * Draws Sankey diagram.
@@ -69,13 +66,14 @@ export const draw = function (text: string, id: string, _version: string, diagOb
   //    }
   //
   const graph = diagObj.db.getGraph();
-  const nodeAligns = {
-    left: d3SankeyLeft,
-    right: d3SankeyRight,
-    center: d3SankeyCenter,
-    justify: d3SankeyJustify,
-  };
-  const nodeAlign = nodeAligns[diagObj.db.getNodeAlign()];
+  
+  const alignmentsMap: Record<SankeyNodeAlignment, (node: SankeyNode<{}, {}>, n: number) => number> = new Map([
+    [SankeyNodeAlignment.left, d3SankeyLeft],
+    [SankeyNodeAlignment.right, d3SankeyRight],
+    [SankeyNodeAlignment.center, d3SankeyCenter],
+    [SankeyNodeAlignment.justify, d3SankeyJustify],
+  ]);
+  const nodeAlignment = alignmentsMap[conf?.nodeAlignment];
 
   // Construct and configure a Sankey generator
   // That will be a function that calculates nodes and links dimensions
@@ -85,7 +83,7 @@ export const draw = function (text: string, id: string, _version: string, diagOb
     .nodeId((d: any) => d.id) // we use 'id' property to identify node
     .nodeWidth(nodeWidth)
     .nodePadding(10)
-    .nodeAlign(nodeAlign)
+    .nodeAlign(nodeAlignment)
     .extent([
       [0, 0],
       [width, height],
diff --git a/run b/run
index 6aee10dc2..b5e589e6e 100755
--- a/run
+++ b/run
@@ -11,24 +11,8 @@ sh)
 $RUN mermaid sh -c "npx $args" 
 ;;
 
-i | install)
-$RUN mermaid sh -c "npx pnpm install $args"
-;;
-
-add)
-$RUN mermaid sh -c "npx pnpm -w add $args"
-;;
-
-test | vitest | e2e )
-$RUN mermaid sh -c "npx pnpm $command $args"
-;;
-
-prettier)
-$RUN mermaid sh -c "npx pnpm prettier --write $args"
-;;
-
-lint)
-$RUN mermaid sh -c "npx pnpm -w run lint:fix $args"
+pnpm)
+$RUN mermaid sh -c "npx $command $args"
 ;;
 
 dev)
@@ -42,22 +26,32 @@ $RUN --service-ports mermaid sh -c "npx pnpm --filter mermaid run docs:dev"
 help)
 usage=$(
 cat <<EOF
-Run commonly used commands within docker containers
+Run commands within docker containers.
 
-\033[1m$name install\033[0m         # Equvalent of pnpm install 
-\033[1m$name dev\033[0m             # Run dev server with examples, open http://localhost:9000
-\033[1m$name docs:dev\033[0m        # For docs contributions, open http://localhost:3333
+Development quick start guide:
 
-$name add             # Add package, 'run add d3-sankey'
-$name prettier        # Prettify a file 'run prettier <path-to-file>'
-$name lint            # Equvalent of pnpm -w run lint:fix
-$name test            # Run unit tests
-$name vitest          # Run watcher for unit tests
-$name e2e             # Run integration tests
+\033[1m$name pnpm install\033[0m      # Install packages
+\033[1m$name dev\033[0m               # Run dev server with examples, open http://localhost:9000
+\033[1m$name docs:dev\033[0m          # For docs contributions, open http://localhost:3333
 
-$name sh              # Open sh inside docker container for development
+Commands:
+
+$name pnpm            # Run any 'pnpm' command
+$name dev             # Run dev server with examples, open http://localhost:9000
+$name docs:dev        # For docs contributions, open http://localhost:3333
+
+$name sh              # Open 'sh' inside docker container for development
 
 $name help            # Show this help
+
+Examples of frequiently used commands:
+
+$name pnpm add             # Add package, 'run add d3-sankey'
+$name pnpm prettier        # Prettify a file 'run prettier <path-to-file>'
+$name pnpm test            # Run unit tests
+$name pnpm vitest          # Run watcher for unit tests
+$name pnpm e2e             # Run integration tests
+$name pnpm -w run lint:fix
 EOF
 )
 

From 22a1813e9ee82bef9690b90e8b3064725b051fa8 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Tue, 27 Jun 2023 12:00:44 +0000
Subject: [PATCH 083/187] chore(deps): update node.js to v20

---
 docker-compose.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docker-compose.yml b/docker-compose.yml
index b492ecba1..a2773b8a5 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:20.3.1-alpine3.18
     stdin_open: true
     tty: true
     working_dir: /mermaid

From 616c5e6914c063af5d6c1db5696cc031ab44568c Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Tue, 27 Jun 2023 14:43:35 +0300
Subject: [PATCH 084/187] Move UID to separate file, refine run sh

---
 .../src/diagrams/sankey/sankeyRenderer.ts     | 12 +++++----
 .../src/diagrams/sankey/sankeyUtils.ts        | 19 -------------
 packages/mermaid/src/rendering-util/uid.ts    | 18 +++++++++++++
 run                                           | 27 ++++++++++---------
 4 files changed, 39 insertions(+), 37 deletions(-)
 create mode 100644 packages/mermaid/src/rendering-util/uid.ts

diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
index a480b4b3e..6a4c5fdcf 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
@@ -16,7 +16,7 @@ import {
   sankeyJustify as d3SankeyJustify,
 } from 'd3-sankey';
 import { configureSvgSize } from '../../setupGraphViewbox.js';
-import { Uid } from './sankeyUtils.js';
+import { Uid } from '../../rendering-util/uid.js';
 import { SankeyLinkColor, SankeyNodeAlignment } from '../../config.type.js';
 
 /**
@@ -30,7 +30,7 @@ import { SankeyLinkColor, SankeyNodeAlignment } from '../../config.type.js';
 export const draw = function (text: string, id: string, _version: string, diagObj: Diagram): void {
   // Get Sankey config
   const { securityLevel, sankey: conf } = configApi.getConfig();
-
+  
   // TODO:
   // This code repeats for every diagram
   // Figure out what is happening there, probably it should be separated
@@ -66,14 +66,16 @@ export const draw = function (text: string, id: string, _version: string, diagOb
   //    }
   //
   const graph = diagObj.db.getGraph();
-  
-  const alignmentsMap: Record<SankeyNodeAlignment, (node: SankeyNode<{}, {}>, n: number) => number> = new Map([
+  const alignmentsMap: Map<
+    SankeyNodeAlignment,
+    (node: SankeyNode<{}, {}>, n: number) => number
+  > = new Map([
     [SankeyNodeAlignment.left, d3SankeyLeft],
     [SankeyNodeAlignment.right, d3SankeyRight],
     [SankeyNodeAlignment.center, d3SankeyCenter],
     [SankeyNodeAlignment.justify, d3SankeyJustify],
   ]);
-  const nodeAlignment = alignmentsMap[conf?.nodeAlignment];
+  const nodeAlignment = alignmentsMap.get(conf?.nodeAlignment || SankeyNodeAlignment.justify);
 
   // Construct and configure a Sankey generator
   // That will be a function that calculates nodes and links dimensions
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyUtils.ts b/packages/mermaid/src/diagrams/sankey/sankeyUtils.ts
index 08e4c547f..45ecf21dd 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyUtils.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyUtils.ts
@@ -6,22 +6,3 @@ export const prepareTextForParsing = (text: string): string => {
 
   return textToParse;
 };
-
-export class Uid {
-  private static count = 0;
-  id: string;
-  href: string;
-
-  public static next(name: string): Uid {
-    return new Uid(name + ++Uid.count);
-  }
-
-  constructor(id: string) {
-    this.id = id;
-    this.href = `#${id}`;
-  }
-
-  toString(): string {
-    return 'url(' + this.href + ')';
-  }
-}
diff --git a/packages/mermaid/src/rendering-util/uid.ts b/packages/mermaid/src/rendering-util/uid.ts
new file mode 100644
index 000000000..9f581faa7
--- /dev/null
+++ b/packages/mermaid/src/rendering-util/uid.ts
@@ -0,0 +1,18 @@
+export class Uid {
+  private static count = 0;
+  id: string;
+  href: string;
+
+  public static next(name: string): Uid {
+    return new Uid(name + ++Uid.count);
+  }
+
+  constructor(id: string) {
+    this.id = id;
+    this.href = `#${id}`;
+  }
+
+  toString(): string {
+    return 'url(' + this.href + ')';
+  }
+}
diff --git a/run b/run
index b5e589e6e..18a544312 100755
--- a/run
+++ b/run
@@ -30,27 +30,28 @@ Run commands within docker containers.
 
 Development quick start guide:
 
-\033[1m$name pnpm install\033[0m      # Install packages
-\033[1m$name dev\033[0m               # Run dev server with examples, open http://localhost:9000
-\033[1m$name docs:dev\033[0m          # For docs contributions, open http://localhost:3333
+\033[1m$name pnpm install\033[0m            # Install packages
+\033[1m$name dev\033[0m                     # Run dev server with examples, open http://localhost:9000
+\033[1m$name docs:dev\033[0m                # For docs contributions, open http://localhost:3333
 
 Commands:
 
-$name pnpm            # Run any 'pnpm' command
-$name dev             # Run dev server with examples, open http://localhost:9000
-$name docs:dev        # For docs contributions, open http://localhost:3333
+$name pnpm                    # Run any 'pnpm' command
+$name dev                     # Run dev server with examples, open http://localhost:9000
+$name docs:dev                # For docs contributions, open http://localhost:3333
 
-$name sh              # Open 'sh' inside docker container for development
+$name sh                      # Open 'sh' inside docker container for development
 
-$name help            # Show this help
+$name help                    # Show this help
 
 Examples of frequiently used commands:
 
-$name pnpm add             # Add package, 'run add d3-sankey'
-$name pnpm prettier        # Prettify a file 'run prettier <path-to-file>'
-$name pnpm test            # Run unit tests
-$name pnpm vitest          # Run watcher for unit tests
-$name pnpm e2e             # Run integration tests
+$name pnpm add                # Add package, 'run add d3-sankey'
+$name pnpm prettier --write   # Prettify a file 'run prettier <path-to-file>'
+                              #   git diff --name-only develop | xargs run pnpm prettier --write
+$name pnpm test               # Run unit tests
+$name pnpm vitest             # Run watcher for unit tests
+$name pnpm e2e                # Run integration tests
 $name pnpm -w run lint:fix
 EOF
 )

From 32c85243172fd4162ae3ba1b0c036ac51e50eecf Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Tue, 27 Jun 2023 15:15:34 +0300
Subject: [PATCH 085/187] Put d3-sankey under mermaid package

---
 package.json                                  |   1 -
 packages/mermaid/package.json                 |   3 +
 .../mermaid/src/diagrams/sankey/sankeyDB.ts   |   3 -
 .../src/diagrams/sankey/sankeyRenderer.ts     |   1 +
 pnpm-lock.yaml                                | 179 ++++++++++++++++--
 5 files changed, 169 insertions(+), 18 deletions(-)

diff --git a/package.json b/package.json
index f1ab3d4ec..b1a5b5c4b 100644
--- a/package.json
+++ b/package.json
@@ -87,7 +87,6 @@
     "coveralls": "^3.1.1",
     "cypress": "^12.10.0",
     "cypress-image-snapshot": "^4.0.1",
-    "d3-sankey": "^0.12.3",
     "esbuild": "^0.18.0",
     "eslint": "^8.39.0",
     "eslint-config-prettier": "^8.8.0",
diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index d0c67ee58..97d658deb 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -53,10 +53,13 @@
   },
   "dependencies": {
     "@braintree/sanitize-url": "^6.0.2",
+    "@types/d3-scale": "^4.0.3",
+    "@types/d3-scale-chromatic": "^3.0.0",
     "cytoscape": "^3.23.0",
     "cytoscape-cose-bilkent": "^4.1.0",
     "cytoscape-fcose": "^2.1.0",
     "d3": "^7.4.0",
+    "d3-sankey": "^0.12.3",
     "dagre-d3-es": "7.0.10",
     "dayjs": "^1.11.7",
     "dompurify": "3.0.3",
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts
index eda443871..913fcb410 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts
@@ -42,9 +42,6 @@ class SankeyNode {
   constructor(public ID: string) {}
 }
 
-/**
- * @param ID - The id of the node
- */
 const findOrCreateNode = (ID: string): SankeyNode => {
   ID = common.sanitizeText(ID, configApi.getConfig());
   if (nodesMap[ID]) {
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
index 6a4c5fdcf..83d61dec7 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { Diagram } from '../../Diagram.js';
 import * as configApi from '../../config.js';
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 219cecd96..4d91dd5de 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -88,9 +88,6 @@ importers:
       cypress-image-snapshot:
         specifier: ^4.0.1
         version: 4.0.1(cypress@12.10.0)(jest@29.5.0)
-      d3-sankey:
-        specifier: ^0.12.3
-        version: 0.12.3
       esbuild:
         specifier: ^0.18.0
         version: 0.18.0
@@ -199,6 +196,12 @@ importers:
       '@braintree/sanitize-url':
         specifier: ^6.0.2
         version: 6.0.2
+      '@types/d3-scale':
+        specifier: ^4.0.3
+        version: 4.0.3
+      '@types/d3-scale-chromatic':
+        specifier: ^3.0.0
+        version: 3.0.0
       cytoscape:
         specifier: ^3.23.0
         version: 3.23.0
@@ -211,6 +214,9 @@ importers:
       d3:
         specifier: ^7.4.0
         version: 7.8.2
+      d3-sankey:
+        specifier: ^0.12.3
+        version: 0.12.3
       dagre-d3-es:
         specifier: 7.0.10
         version: 7.0.10
@@ -456,6 +462,58 @@ importers:
         specifier: ^6.5.4
         version: 6.5.4
 
+  packages/mermaid/src/vitepress:
+    dependencies:
+      '@vueuse/core':
+        specifier: ^10.1.0
+        version: 10.1.0(vue@3.2.47)
+      jiti:
+        specifier: ^1.18.2
+        version: 1.18.2
+      vue:
+        specifier: ^3.2.47
+        version: 3.2.47
+    devDependencies:
+      '@iconify-json/carbon':
+        specifier: ^1.1.16
+        version: 1.1.16
+      '@unocss/reset':
+        specifier: ^0.53.0
+        version: 0.53.0
+      '@vite-pwa/vitepress':
+        specifier: ^0.2.0
+        version: 0.2.0(vite-plugin-pwa@0.16.0)
+      '@vitejs/plugin-vue':
+        specifier: ^4.2.1
+        version: 4.2.1(vite@4.3.9)(vue@3.2.47)
+      fast-glob:
+        specifier: ^3.2.12
+        version: 3.2.12
+      https-localhost:
+        specifier: ^4.7.1
+        version: 4.7.1
+      pathe:
+        specifier: ^1.1.0
+        version: 1.1.0
+      unocss:
+        specifier: ^0.53.0
+        version: 0.53.0(postcss@8.4.23)(rollup@2.79.1)(vite@4.3.9)
+      unplugin-vue-components:
+        specifier: ^0.25.0
+        version: 0.25.0(rollup@2.79.1)(vue@3.2.47)
+      vite:
+        specifier: ^4.3.3
+        version: 4.3.9(@types/node@18.16.0)
+      vite-plugin-pwa:
+        specifier: ^0.16.0
+        version: 0.16.0(vite@4.3.9)(workbox-build@7.0.0)(workbox-window@6.5.4)
+      vitepress:
+        specifier: 1.0.0-beta.2
+        version: 1.0.0-beta.2(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0)
+      workbox-window:
+        specifier: ^6.5.4
+        version: 6.5.4
+
   tests/webpack:
     dependencies:
       '@mermaid-js/mermaid-example-diagram':
@@ -4017,13 +4075,11 @@ packages:
 
   /@types/d3-scale-chromatic@3.0.0:
     resolution: {integrity: sha512-dsoJGEIShosKVRBZB0Vo3C8nqSDqVGujJU6tPznsBJxNJNwMF8utmS83nvCBKQYPpjCzaaHcrf66iTRpZosLPw==}
-    dev: true
 
-  /@types/d3-scale@4.0.2:
-    resolution: {integrity: sha512-Yk4htunhPAwN0XGlIwArRomOjdoBFXC3+kCxK2Ubg7I9shQlVSJy/pG/Ht5ASN+gdMIalpk8TJ5xV74jFsetLA==}
+  /@types/d3-scale@4.0.3:
+    resolution: {integrity: sha512-PATBiMCpvHJSMtZAMEhc2WyL+hnzarKzI6wAHYjhsonjWJYGq5BXTzQjv4l8m2jO183/4wZ90rKvSeT7o72xNQ==}
     dependencies:
       '@types/d3-time': 3.0.0
-    dev: true
 
   /@types/d3-selection@3.0.5:
     resolution: {integrity: sha512-xCB0z3Hi8eFIqyja3vW8iV01+OHGYR2di/+e+AiOcXIOrY82lcvWW8Ke1DYE/EUVMsBl4Db9RppSBS3X1U6J0w==}
@@ -4047,7 +4103,6 @@ packages:
 
   /@types/d3-time@3.0.0:
     resolution: {integrity: sha512-sZLCdHvBUcNby1cB6Fd3ZBrABbjz3v1Vm90nysCQ6Vt7vd6e/h9Lt7SiJUoEX0l4Dzc7P5llKyhqSi1ycSf1Hg==}
-    dev: true
 
   /@types/d3-timer@3.0.0:
     resolution: {integrity: sha512-HNB/9GHqu7Fo8AQiugyJbv6ZxYz58wef0esl4Mv828w1ZKpAshw/uFWVDUcIB9KKFeFKoxS3cHY07FFgtTRZ1g==}
@@ -4090,7 +4145,7 @@ packages:
       '@types/d3-polygon': 3.0.0
       '@types/d3-quadtree': 3.0.2
       '@types/d3-random': 3.0.1
-      '@types/d3-scale': 4.0.2
+      '@types/d3-scale': 4.0.3
       '@types/d3-scale-chromatic': 3.0.0
       '@types/d3-selection': 3.0.5
       '@types/d3-shape': 3.1.0
@@ -4681,6 +4736,17 @@ packages:
       - vite
     dev: true
 
+  /@unocss/astro@0.53.0(rollup@2.79.1)(vite@4.3.9):
+    resolution: {integrity: sha512-8bR7ysIMZEOpcjd/cVmogcABSFDYPjUqMnbflv44p1A2/deemo9CIkpRARoq/96NQuzWJsKhKodcQodExZcqiA==}
+    dependencies:
+      '@unocss/core': 0.53.0
+      '@unocss/reset': 0.53.0
+      '@unocss/vite': 0.53.0(rollup@2.79.1)(vite@4.3.9)
+    transitivePeerDependencies:
+      - rollup
+      - vite
+    dev: true
+
   /@unocss/cli@0.53.0(rollup@2.79.1):
     resolution: {integrity: sha512-9WNBHy8m8tMqwcp7mUhebRUBvHQfbx01CMe5cAFLmUYtJULM+8IjJxqERkaAZyyoOXf1TNO2v1dFAmCwhMRCLQ==}
     engines: {node: '>=14'}
@@ -4859,6 +4925,26 @@ packages:
       - rollup
     dev: true
 
+  /@unocss/vite@0.53.0(rollup@2.79.1)(vite@4.3.9):
+    resolution: {integrity: sha512-JoZhKVNruRjfySMVg/zNJbLEn/NTXj29Wf0SN4++xnGKrSapkPzYC46psL5bm5N5v4SHdpepTCoonC3FWCY6Fw==}
+    peerDependencies:
+      vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0
+    dependencies:
+      '@ampproject/remapping': 2.2.1
+      '@rollup/pluginutils': 5.0.2(rollup@2.79.1)
+      '@unocss/config': 0.53.0
+      '@unocss/core': 0.53.0
+      '@unocss/inspector': 0.53.0
+      '@unocss/scope': 0.53.0
+      '@unocss/transformer-directives': 0.53.0
+      chokidar: 3.5.3
+      fast-glob: 3.2.12
+      magic-string: 0.30.0
+      vite: 4.3.9(@types/node@18.16.0)
+    transitivePeerDependencies:
+      - rollup
+    dev: true
+
   /@vite-pwa/vitepress@0.2.0(vite-plugin-pwa@0.16.0):
     resolution: {integrity: sha512-dVQVaP6NB9woCFe4UASUqRp7uwBQJOVXlJlqK4krqXcbb3NuXIXIWOnU7HLpJnHqZj5U/81gKtLN6gs5gJBwiQ==}
     peerDependencies:
@@ -4878,6 +4964,17 @@ packages:
       vue: 3.2.47
     dev: true
 
+  /@vitejs/plugin-vue@4.2.1(vite@4.3.9)(vue@3.2.47):
+    resolution: {integrity: sha512-ZTZjzo7bmxTRTkb8GSTwkPOYDIP7pwuyV+RV53c9PYUouwcbkIZIvWvNWlX2b1dYZqtOv7D6iUAnJLVNGcLrSw==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      vite: ^4.0.0
+      vue: ^3.2.25
+    dependencies:
+      vite: 4.3.9(@types/node@18.16.0)
+      vue: 3.2.47
+    dev: true
+
   /@vitejs/plugin-vue@4.2.3(vite@4.3.8)(vue@3.3.4):
     resolution: {integrity: sha512-R6JDUfiZbJA9cMiguQ7jxALsgiprjBeHL5ikpXfJCH62pPHtI+JdJ5xWj6Ev73yXSlYl86+blXn1kZHQ7uElxw==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -7166,7 +7263,7 @@ packages:
     resolution: {integrity: sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==}
     dependencies:
       internmap: 1.0.1
-    dev: true
+    dev: false
 
   /d3-array@3.2.0:
     resolution: {integrity: sha512-3yXFQo0oG3QCxbF06rMPFyGRMGJNS7NvsV1+2joOjbBE+9xvWQ8+GcMJAjRCzw06zQ3/arXeJgbPYcjUCuC+3g==}
@@ -7287,7 +7384,7 @@ packages:
 
   /d3-path@1.0.9:
     resolution: {integrity: sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==}
-    dev: true
+    dev: false
 
   /d3-path@3.0.1:
     resolution: {integrity: sha512-gq6gZom9AFZby0YLduxT1qmrp4xpBA1YZr19OI717WIdKE2OM5ETq5qrHLb301IgxhLwcuxvGZVLeeWc/k1I6w==}
@@ -7314,7 +7411,7 @@ packages:
     dependencies:
       d3-array: 2.12.1
       d3-shape: 1.3.7
-    dev: true
+    dev: false
 
   /d3-scale-chromatic@3.0.0:
     resolution: {integrity: sha512-Lx9thtxAKrO2Pq6OO2Ua474opeziKr279P/TKZsMAhYyNDD3EnCffdbgeSYN5O7m2ByQsxtuP2CSDczNUIZ22g==}
@@ -7344,7 +7441,7 @@ packages:
     resolution: {integrity: sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==}
     dependencies:
       d3-path: 1.0.9
-    dev: true
+    dev: false
 
   /d3-shape@3.1.0:
     resolution: {integrity: sha512-tGDh1Muf8kWjEDT/LswZJ8WF85yDZLvVJpYU9Nq+8+yW1Z5enxrmXOhTArlkaElU+CTn0OTVNli+/i+HP45QEQ==}
@@ -9583,7 +9680,7 @@ packages:
 
   /internmap@1.0.1:
     resolution: {integrity: sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==}
-    dev: true
+    dev: false
 
   /internmap@2.0.3:
     resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
@@ -14618,6 +14715,42 @@ packages:
       - vite
     dev: true
 
+  /unocss@0.53.0(postcss@8.4.23)(rollup@2.79.1)(vite@4.3.9):
+    resolution: {integrity: sha512-kY4h5ERiDYlSnL2X+hbDfh+uaF7QNouy7j51GOTUr3Q0aaWehaNd05b15SjHrab559dEC0mYfrSEdh/DnCK1cw==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@unocss/webpack': 0.53.0
+    peerDependenciesMeta:
+      '@unocss/webpack':
+        optional: true
+    dependencies:
+      '@unocss/astro': 0.53.0(rollup@2.79.1)(vite@4.3.9)
+      '@unocss/cli': 0.53.0(rollup@2.79.1)
+      '@unocss/core': 0.53.0
+      '@unocss/extractor-arbitrary-variants': 0.53.0
+      '@unocss/postcss': 0.53.0(postcss@8.4.23)
+      '@unocss/preset-attributify': 0.53.0
+      '@unocss/preset-icons': 0.53.0
+      '@unocss/preset-mini': 0.53.0
+      '@unocss/preset-tagify': 0.53.0
+      '@unocss/preset-typography': 0.53.0
+      '@unocss/preset-uno': 0.53.0
+      '@unocss/preset-web-fonts': 0.53.0
+      '@unocss/preset-wind': 0.53.0
+      '@unocss/reset': 0.53.0
+      '@unocss/transformer-attributify-jsx': 0.53.0
+      '@unocss/transformer-attributify-jsx-babel': 0.53.0
+      '@unocss/transformer-compile-class': 0.53.0
+      '@unocss/transformer-directives': 0.53.0
+      '@unocss/transformer-variant-group': 0.53.0
+      '@unocss/vite': 0.53.0(rollup@2.79.1)(vite@4.3.9)
+    transitivePeerDependencies:
+      - postcss
+      - rollup
+      - supports-color
+      - vite
+    dev: true
+
   /unpipe@1.0.0:
     resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
     engines: {node: '>= 0.8'}
@@ -14842,6 +14975,24 @@ packages:
       - supports-color
     dev: true
 
+  /vite-plugin-pwa@0.16.0(vite@4.3.9)(workbox-build@7.0.0)(workbox-window@6.5.4):
+    resolution: {integrity: sha512-E+AQRzHxqNU4ZhEeR8X37/foZB+ezJEhXauE/mcf1UITY6k2Pa1dtlFl+BQu57fTdiVlWim5S0Qy44Yap93Dkg==}
+    engines: {node: '>=16.0.0'}
+    peerDependencies:
+      vite: ^3.1.0 || ^4.0.0
+      workbox-build: ^7.0.0
+      workbox-window: ^7.0.0
+    dependencies:
+      debug: 4.3.4(supports-color@8.1.1)
+      fast-glob: 3.2.12
+      pretty-bytes: 6.1.0
+      vite: 4.3.9(@types/node@18.16.0)
+      workbox-build: 7.0.0
+      workbox-window: 6.5.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /vite@4.3.3(@types/node@18.16.0):
     resolution: {integrity: sha512-MwFlLBO4udZXd+VBcezo3u8mC77YQk+ik+fbc0GZWGgzfbPP+8Kf0fldhARqvSYmtIWoAJ5BXPClUbMTlqFxrA==}
     engines: {node: ^14.18.0 || >=16.0.0}

From 830319e3db6df0cb86ac7dd3e3b80d3328792602 Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Tue, 27 Jun 2023 15:21:36 +0300
Subject: [PATCH 086/187] Removed unnecessary TODO

---
 packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.spec.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.spec.js b/packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.spec.js
index 1fae77c15..2172801dc 100644
--- a/packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.spec.js
+++ b/packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.spec.js
@@ -3,7 +3,6 @@ import { parser } from './sankey-arrow.jison';
 import db from '../sankeyDB.js';
 
 describe('sankey-beta diagram', function () {
-  // TODO - these examples should be put into ./parser/stateDiagram.spec.js
   describe('when parsing an info graph it', function () {
     beforeEach(function () {
       parser.yy = db;

From bbba64328879ed31bc3fa294ebaca508df03eee4 Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Tue, 27 Jun 2023 15:30:22 +0300
Subject: [PATCH 087/187] Rmoved unnecessary imports in tests

---
 .../sankey/parser/sankey-arrow.spec.js        | 25 +++++++++----------
 .../src/diagrams/sankey/parser/sankey.spec.ts | 11 +++-----
 2 files changed, 16 insertions(+), 20 deletions(-)

diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.spec.js b/packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.spec.js
index 2172801dc..a180b9a28 100644
--- a/packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.spec.js
+++ b/packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.spec.js
@@ -1,19 +1,18 @@
-import diagram from './sankey-arrow.jison';
-import { parser } from './sankey-arrow.jison';
+// @ts-ignore: jison doesn't export types
+import sankey from './sankey-arrow.jison';
 import db from '../sankeyDB.js';
 
 describe('sankey-beta diagram', function () {
   describe('when parsing an info graph it', function () {
     beforeEach(function () {
-      parser.yy = db;
-      diagram.parser.yy = db;
-      diagram.parser.yy.clear();
+      sankey.parser.yy = db;
+      sankey.parser.yy.clear();
     });
 
     it('recognizes its type', () => {
       const str = `sankey-beta`;
 
-      parser.parse(str);
+      sankey.parser.parse(str);
     });
 
     it('recognizes one flow', () => {
@@ -22,7 +21,7 @@ describe('sankey-beta diagram', function () {
       node_a -> 30 -> node_b -> 20 -> node_c
       `;
 
-      parser.parse(str);
+      sankey.parser.parse(str);
     });
 
     it('recognizes multiple flows', () => {
@@ -33,7 +32,7 @@ describe('sankey-beta diagram', function () {
       node_c -> 40 -> node_e -> 12 -> node_q
       `;
 
-      parser.parse(str);
+      sankey.parser.parse(str);
     });
 
     it('parses node as a string', () => {
@@ -44,7 +43,7 @@ describe('sankey-beta diagram', function () {
       "node c" -> 40 -> "node e" -> 12 -> "node q"
       `;
 
-      parser.parse(str);
+      sankey.parser.parse(str);
     });
 
     describe('while attributes parsing', () => {
@@ -54,7 +53,7 @@ describe('sankey-beta diagram', function () {
         1st -> 200 -> 2nd -> 180 -> 3rd;
         `;
 
-        parser.parse(str);
+        sankey.parser.parse(str);
       });
 
       it('parses different quotless variations', () => {
@@ -70,7 +69,7 @@ describe('sankey-beta diagram', function () {
         node[x1dfqowie attr1 = 23413 attr2]
         `;
 
-        parser.parse(str);
+        sankey.parser.parse(str);
       });
 
       it('parses strings as values', () => {
@@ -80,7 +79,7 @@ describe('sankey-beta diagram', function () {
         node[title="hello, mister \\"sankey-beta\\", backslash for you \\\\"]
         `;
 
-        parser.parse(str);
+        sankey.parser.parse(str);
       });
 
       it('parses real example', () => {
@@ -95,7 +94,7 @@ describe('sankey-beta diagram', function () {
         "Biofuel imports"           ->      35       -> "Liquid"
         `;
 
-        parser.parse(str);
+        sankey.parser.parse(str);
       });
     });
   });
diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts
index eef8ae3c6..4517ca01f 100644
--- a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts
+++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts
@@ -1,7 +1,5 @@
 // @ts-ignore: jison doesn't export types
-import diagram from './sankey.jison';
-// @ts-ignore: jison doesn't export types
-import { parser } from './sankey.jison';
+import sankey from './sankey.jison';
 import db from '../sankeyDB.js';
 import { cleanupComments } from '../../../diagram-api/comments.js';
 import { prepareTextForParsing } from '../sankeyUtils.js';
@@ -11,9 +9,8 @@ import * as path from 'path';
 describe('Sankey diagram', function () {
   describe('when parsing an info graph it', function () {
     beforeEach(function () {
-      parser.yy = db;
-      diagram.parser.yy = db;
-      diagram.parser.yy.clear();
+      sankey.parser.yy = db;
+      sankey.parser.yy.clear();
     });
 
     it('parses csv', async () => {
@@ -21,7 +18,7 @@ describe('Sankey diagram', function () {
       const data = fs.readFileSync(csv, 'utf8');
       const graphDefinition = prepareTextForParsing(cleanupComments('sankey-beta\n\n ' + data));
 
-      parser.parse(graphDefinition);
+      sankey.parser.parse(graphDefinition);
     });
   });
 });

From 0b663ecbbaa6cf47b25989cd8e4a43ee40cb3e24 Mon Sep 17 00:00:00 2001
From: ellenealds <107104287+ellenealds@users.noreply.github.com>
Date: Tue, 27 Jun 2023 13:59:33 +0100
Subject: [PATCH 088/187] Update cSpell.json

---
 cSpell.json | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/cSpell.json b/cSpell.json
index ff9ef1074..9408a9b47 100644
--- a/cSpell.json
+++ b/cSpell.json
@@ -139,7 +139,9 @@
     "vueuse",
     "xlink",
     "yash",
-    "zenuml"
+    "zenuml",
+    "Elle",
+    "Neurodiverse"
   ],
   "patterns": [
     { "name": "Markdown links", "pattern": "\\((.*)\\)", "description": "" },

From d4d7ce5a4b7c352fa2c45a65aad5f99a914d83de Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Tue, 27 Jun 2023 16:12:41 +0300
Subject: [PATCH 089/187] Fixed majority of ts errors for sankey

---
 .../src/diagrams/sankey/sankeyRenderer.ts     | 43 +++++++++++--------
 1 file changed, 25 insertions(+), 18 deletions(-)

diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
index 83d61dec7..525c23e1f 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
@@ -1,4 +1,3 @@
-// @ts-nocheck
 import { Diagram } from '../../Diagram.js';
 import * as configApi from '../../config.js';
 
@@ -15,6 +14,7 @@ import {
   sankeyRight as d3SankeyRight,
   sankeyCenter as d3SankeyCenter,
   sankeyJustify as d3SankeyJustify,
+  SankeyNode as d3SankeyNode,
 } from 'd3-sankey';
 import { configureSvgSize } from '../../setupGraphViewbox.js';
 import { Uid } from '../../rendering-util/uid.js';
@@ -41,11 +41,11 @@ export const draw = function (text: string, id: string, _version: string, diagOb
   if (securityLevel === 'sandbox') {
     sandboxElement = d3select('#i' + id);
   }
-  let root = d3select('body');
-
-  if (securityLevel === 'sandbox' && sandboxElement) {
-    root = d3select(sandboxElement.nodes()[0].contentDocument.body);
-  }
+  const root =
+    securityLevel === 'sandbox'
+      ? d3select(sandboxElement.nodes()[0].contentDocument.body)
+      : d3select('body');
+  // @ts-ignore TODO root.select is not callable
   const svg = securityLevel === 'sandbox' ? root.select(`[id="${id}"]`) : d3select(`[id="${id}"]`);
 
   // Establish svg dimensions and get width and height
@@ -53,9 +53,12 @@ export const draw = function (text: string, id: string, _version: string, diagOb
   const width = conf?.width || 800;
   const height = conf?.height || 400;
   const useMaxWidth = conf?.useMaxWidth || false;
+  const nodeAlignment = conf?.nodeAlignment || SankeyNodeAlignment.justify;
 
   // FIX: using max width prevents height from being set, is it intended?
   // to add height directly one can use `svg.attr('height', height)`
+  //
+  // @ts-ignore TODO: svg type vs selection mismatch
   configureSvgSize(svg, height, width, useMaxWidth);
 
   // Prepare data for construction based on diagObj.db
@@ -66,17 +69,21 @@ export const draw = function (text: string, id: string, _version: string, diagOb
   //      "links": [ { "source": "Alice", "target": "Bob", "value": 23 }, { "source": "Bob", "target": "Carol", "value": 43 } ]
   //    }
   //
+  // @ts-ignore TODO: db should be coerced to sankey DB type
   const graph = diagObj.db.getGraph();
+
+  // Map config options to alignment functions
   const alignmentsMap: Map<
     SankeyNodeAlignment,
-    (node: SankeyNode<{}, {}>, n: number) => number
+    (node: d3SankeyNode<{}, {}>, n: number) => number
   > = new Map([
     [SankeyNodeAlignment.left, d3SankeyLeft],
     [SankeyNodeAlignment.right, d3SankeyRight],
     [SankeyNodeAlignment.center, d3SankeyCenter],
     [SankeyNodeAlignment.justify, d3SankeyJustify],
-  ]);
-  const nodeAlignment = alignmentsMap.get(conf?.nodeAlignment || SankeyNodeAlignment.justify);
+  ])
+  // We need fallback because typescript thinks that `get` can result in undefined
+  const nodeAlign = alignmentsMap.get(nodeAlignment) || d3SankeyJustify;
 
   // Construct and configure a Sankey generator
   // That will be a function that calculates nodes and links dimensions
@@ -86,7 +93,7 @@ export const draw = function (text: string, id: string, _version: string, diagOb
     .nodeId((d: any) => d.id) // we use 'id' property to identify node
     .nodeWidth(nodeWidth)
     .nodePadding(10)
-    .nodeAlign(nodeAlignment)
+    .nodeAlign(nodeAlign)
     .extent([
       [0, 0],
       [width, height],
@@ -152,32 +159,32 @@ export const draw = function (text: string, id: string, _version: string, diagOb
   if (linkColor === SankeyLinkColor.gradient) {
     const gradient = link
       .append('linearGradient')
-      .attr('id', (d) => (d.uid = Uid.next('linearGradient-')).id)
+      .attr('id', (d: any) => (d.uid = Uid.next('linearGradient-')).id)
       .attr('gradientUnits', 'userSpaceOnUse')
-      .attr('x1', (d) => d.source.x1)
-      .attr('x2', (d) => d.target.x0);
+      .attr('x1', (d: any) => d.source.x1)
+      .attr('x2', (d: any) => d.target.x0);
 
     gradient
       .append('stop')
       .attr('offset', '0%')
-      .attr('stop-color', (d) => colorScheme(d.source.id));
+      .attr('stop-color', (d: any) => colorScheme(d.source.id));
 
     gradient
       .append('stop')
       .attr('offset', '100%')
-      .attr('stop-color', (d) => colorScheme(d.target.id));
+      .attr('stop-color', (d: any) => colorScheme(d.target.id));
   }
 
   let coloring: any;
   switch (linkColor) {
     case SankeyLinkColor.gradient:
-      coloring = (d) => d.uid;
+      coloring = (d: any) => d.uid;
       break;
     case SankeyLinkColor.source:
-      coloring = (d) => d.source.id;
+      coloring = (d: any) => d.source.id;
       break;
     case SankeyLinkColor.target:
-      coloring = (d) => d.target.id;
+      coloring = (d: any) => d.target.id;
       break;
     default:
       coloring = linkColor;

From 0bbf0555d3ac7fe3dee453945dcd8fb2dbd63a18 Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Tue, 27 Jun 2023 16:17:55 +0300
Subject: [PATCH 090/187] Fix linters

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

diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
index 525c23e1f..ee78f95bd 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
@@ -75,7 +75,7 @@ export const draw = function (text: string, id: string, _version: string, diagOb
   // Map config options to alignment functions
   const alignmentsMap: Map<
     SankeyNodeAlignment,
-    (node: d3SankeyNode<{}, {}>, n: number) => number
+    (node: d3SankeyNode<object, object>, n: number) => number
   > = new Map([
     [SankeyNodeAlignment.left, d3SankeyLeft],
     [SankeyNodeAlignment.right, d3SankeyRight],

From f0231ad9b1c51697655f32ef391ff2c3355e1c5f Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Tue, 27 Jun 2023 16:22:12 +0300
Subject: [PATCH 091/187] Lint

---
 packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
index ee78f95bd..e80fe657d 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
@@ -31,7 +31,7 @@ import { SankeyLinkColor, SankeyNodeAlignment } from '../../config.type.js';
 export const draw = function (text: string, id: string, _version: string, diagObj: Diagram): void {
   // Get Sankey config
   const { securityLevel, sankey: conf } = configApi.getConfig();
-  
+
   // TODO:
   // This code repeats for every diagram
   // Figure out what is happening there, probably it should be separated
@@ -81,7 +81,7 @@ export const draw = function (text: string, id: string, _version: string, diagOb
     [SankeyNodeAlignment.right, d3SankeyRight],
     [SankeyNodeAlignment.center, d3SankeyCenter],
     [SankeyNodeAlignment.justify, d3SankeyJustify],
-  ])
+  ]);
   // We need fallback because typescript thinks that `get` can result in undefined
   const nodeAlign = alignmentsMap.get(nodeAlignment) || d3SankeyJustify;
 

From 7fe9c9e139abd9c87373a419cb9d185c7f15a1ce Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Tue, 27 Jun 2023 19:07:34 +0530
Subject: [PATCH 092/187] Docs Build

---
 cSpell.json              | 6 +++---
 docs/config/Tutorials.md | 4 ++++
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/cSpell.json b/cSpell.json
index 9408a9b47..de0dbc49d 100644
--- a/cSpell.json
+++ b/cSpell.json
@@ -40,6 +40,7 @@
     "dompurify",
     "edgechromium",
     "elkjs",
+    "elle",
     "faber",
     "flatmap",
     "ftplugin",
@@ -84,6 +85,7 @@
     "mkdocs",
     "mmorel",
     "mult",
+    "neurodiverse",
     "nextra",
     "orlandoni",
     "pathe",
@@ -139,9 +141,7 @@
     "vueuse",
     "xlink",
     "yash",
-    "zenuml",
-    "Elle",
-    "Neurodiverse"
+    "zenuml"
   ],
   "patterns": [
     { "name": "Markdown links", "pattern": "\\((.*)\\)", "description": "" },
diff --git a/docs/config/Tutorials.md b/docs/config/Tutorials.md
index 7b1530eaa..8f6d7e1ab 100644
--- a/docs/config/Tutorials.md
+++ b/docs/config/Tutorials.md
@@ -26,6 +26,10 @@ The definitions that can be generated the Live-Editor are also backwards-compati
 
 [Eddie Jaoude: Can you code your diagrams?](https://www.youtube.com/watch?v=9HZzKkAqrX8)
 
+## Mermaid with OpenAI
+
+[Elle Neal: Mind Mapping with AI: An Accessible Approach for Neurodiverse Learners Tutorial:](https://medium.com/@elle.neal_71064/mind-mapping-with-ai-an-accessible-approach-for-neurodiverse-learners-1a74767359ff), [Demo:](https://databutton.com/v/jk9vrghc)
+
 ## Mermaid with HTML
 
 Examples are provided in [Getting Started](../intro/n00b-gettingStarted.md)

From 149cc44c39f1e7c06382dd27adc498654c92b1a0 Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Tue, 27 Jun 2023 16:46:20 +0300
Subject: [PATCH 093/187] Empty


From 301073a60d602687aa96d2943030bff4ee14db58 Mon Sep 17 00:00:00 2001
From: nirname <nirname@users.noreply.github.com>
Date: Tue, 27 Jun 2023 13:51:44 +0000
Subject: [PATCH 094/187] Update docs

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

diff --git a/docs/config/setup/modules/defaultConfig.md b/docs/config/setup/modules/defaultConfig.md
index d74c9b2b1..8cc503ae6 100644
--- a/docs/config/setup/modules/defaultConfig.md
+++ b/docs/config/setup/modules/defaultConfig.md
@@ -14,7 +14,7 @@
 
 #### Defined in
 
-[defaultConfig.ts:2298](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L2298)
+[defaultConfig.ts:2299](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L2299)
 
 ---
 

From 8b111760b15b699ff4e024aa3f85d7a120f2e5f9 Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Tue, 27 Jun 2023 17:50:51 +0300
Subject: [PATCH 095/187] Updates after review

---
 packages/mermaid/src/defaultConfig.ts         |  1 +
 .../mermaid/src/diagrams/sankey/sankeyDB.ts   |  5 +-
 .../src/diagrams/sankey/sankeyRenderer.ts     | 26 ++++-----
 pnpm-lock.yaml                                | 54 +++++++++++++++++++
 4 files changed, 70 insertions(+), 16 deletions(-)

diff --git a/packages/mermaid/src/defaultConfig.ts b/packages/mermaid/src/defaultConfig.ts
index 39dcd0721..6e24b6391 100644
--- a/packages/mermaid/src/defaultConfig.ts
+++ b/packages/mermaid/src/defaultConfig.ts
@@ -2275,6 +2275,7 @@ const config: Partial<MermaidConfig> = {
     height: 400,
     linkColor: SankeyLinkColor.gradient,
     nodeAlignment: SankeyNodeAlignment.justify,
+    useMaxWidth: false,
   },
   fontSize: 16,
 };
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts
index 913fcb410..1b6864af9 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts
@@ -10,12 +10,11 @@ import {
   clear as commonClear,
 } from '../../commonDb.js';
 
-// Variables where graph data is stored
 // Sankey diagram represented by nodes and links between those nodes
-// We have to track nodes uniqueness (by ID), thats why we need a mapping also
-//
 let links: SankeyLink[] = [];
+// Array of nodes guarantees their order
 let nodes: SankeyNode[] = [];
+// We also have to track nodes uniqueness (by ID)
 let nodesMap: Record<string, SankeyNode> = {};
 
 const clear = (): void => {
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
index e80fe657d..cb3092f55 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
@@ -31,6 +31,7 @@ import { SankeyLinkColor, SankeyNodeAlignment } from '../../config.type.js';
 export const draw = function (text: string, id: string, _version: string, diagObj: Diagram): void {
   // Get Sankey config
   const { securityLevel, sankey: conf } = configApi.getConfig();
+  const defaultSankeyConfig = configApi!.defaultConfig!.sankey!;
 
   // TODO:
   // This code repeats for every diagram
@@ -50,10 +51,10 @@ export const draw = function (text: string, id: string, _version: string, diagOb
 
   // Establish svg dimensions and get width and height
   //
-  const width = conf?.width || 800;
-  const height = conf?.height || 400;
-  const useMaxWidth = conf?.useMaxWidth || false;
-  const nodeAlignment = conf?.nodeAlignment || SankeyNodeAlignment.justify;
+  const width = conf?.width || defaultSankeyConfig.width!;
+  const height = conf?.height || defaultSankeyConfig.width!;
+  const useMaxWidth = conf?.useMaxWidth || defaultSankeyConfig.useMaxWidth!;
+  const nodeAlignment = conf?.nodeAlignment || defaultSankeyConfig.nodeAlignment!;
 
   // FIX: using max width prevents height from being set, is it intended?
   // to add height directly one can use `svg.attr('height', height)`
@@ -73,17 +74,16 @@ export const draw = function (text: string, id: string, _version: string, diagOb
   const graph = diagObj.db.getGraph();
 
   // Map config options to alignment functions
-  const alignmentsMap: Map<
+  const alignmentsMap: Record<
     SankeyNodeAlignment,
     (node: d3SankeyNode<object, object>, n: number) => number
-  > = new Map([
-    [SankeyNodeAlignment.left, d3SankeyLeft],
-    [SankeyNodeAlignment.right, d3SankeyRight],
-    [SankeyNodeAlignment.center, d3SankeyCenter],
-    [SankeyNodeAlignment.justify, d3SankeyJustify],
-  ]);
-  // We need fallback because typescript thinks that `get` can result in undefined
-  const nodeAlign = alignmentsMap.get(nodeAlignment) || d3SankeyJustify;
+  > = {
+    [SankeyNodeAlignment.left]: d3SankeyLeft,
+    [SankeyNodeAlignment.right]: d3SankeyRight,
+    [SankeyNodeAlignment.center]: d3SankeyCenter,
+    [SankeyNodeAlignment.justify]: d3SankeyJustify,
+  };
+  const nodeAlign = alignmentsMap[nodeAlignment];
 
   // Construct and configure a Sankey generator
   // That will be a function that calculates nodes and links dimensions
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d13daf1b2..052e5eec9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -15143,6 +15143,49 @@ packages:
       - terser
     dev: true
 
+  /vitepress@1.0.0-beta.2(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0):
+    resolution: {integrity: sha512-DBXYjtYbm3W1IPPJ2TiCaK/XK+o/2XmL2+jslOGKm+txcbmG0kbeB+vadC5tCUZA9NdA+9Ywj3M4548c7t/SDg==}
+    hasBin: true
+    dependencies:
+      '@docsearch/css': 3.5.1
+      '@docsearch/js': 3.5.1(@algolia/client-search@4.14.2)(search-insights@2.6.0)
+      '@vitejs/plugin-vue': 4.2.3(vite@4.3.9)(vue@3.3.4)
+      '@vue/devtools-api': 6.5.0
+      '@vueuse/core': 10.1.2(vue@3.3.4)
+      '@vueuse/integrations': 10.1.2(focus-trap@7.4.3)(vue@3.3.4)
+      body-scroll-lock: 4.0.0-beta.0
+      focus-trap: 7.4.3
+      mark.js: 8.11.1
+      minisearch: 6.1.0
+      shiki: 0.14.2
+      vite: 4.3.9(@types/node@18.16.0)
+      vue: 3.3.4
+    transitivePeerDependencies:
+      - '@algolia/client-search'
+      - '@types/node'
+      - '@types/react'
+      - '@vue/composition-api'
+      - async-validator
+      - axios
+      - change-case
+      - drauu
+      - fuse.js
+      - idb-keyval
+      - jwt-decode
+      - less
+      - nprogress
+      - qrcode
+      - react
+      - react-dom
+      - sass
+      - search-insights
+      - sortablejs
+      - stylus
+      - sugarss
+      - terser
+      - universal-cookie
+    dev: true
+
   /vitepress@1.0.0-beta.3(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0):
     resolution: {integrity: sha512-GR5Pvr/o343NN1M4Na1shhDYZRrQbjmLq7WE0lla0H8iDPAsHE8agTHLWfu3FWx+3q2KA29sv16+0O9RQKGjlA==}
     hasBin: true
@@ -15808,6 +15851,10 @@ packages:
       workbox-core: 7.0.0
     dev: true
 
+  /workbox-core@6.5.4:
+    resolution: {integrity: sha512-OXYb+m9wZm8GrORlV2vBbE5EC1FKu71GGp0H4rjmxmF4/HLbMCoTFws87M3dFwgpmg0v00K++PImpNQ6J5NQ6Q==}
+    dev: true
+
   /workbox-core@7.0.0:
     resolution: {integrity: sha512-81JkAAZtfVP8darBpfRTovHg8DGAVrKFgHpOArZbdFd78VqHr5Iw65f2guwjE2NlCFbPFDoez3D3/6ZvhI/rwQ==}
     dev: true
@@ -15882,6 +15929,13 @@ packages:
     resolution: {integrity: sha512-SWfEouQfjRiZ7GNABzHUKUyj8pCoe+RwjfOIajcx6J5mtgKkN+t8UToHnpaJL5UVVOf5YhJh+OHhbVNIHe+LVA==}
     dev: true
 
+  /workbox-window@6.5.4:
+    resolution: {integrity: sha512-HnLZJDwYBE+hpG25AQBO8RUWBJRaCsI9ksQJEp3aCOFCaG5kqaToAYXFRAHxzRluM2cQbGzdQF5rjKPWPA1fug==}
+    dependencies:
+      '@types/trusted-types': 2.0.2
+      workbox-core: 6.5.4
+    dev: true
+
   /workbox-window@7.0.0:
     resolution: {integrity: sha512-j7P/bsAWE/a7sxqTzXo3P2ALb1reTfZdvVp6OJ/uLr/C2kZAMvjeWGm8V4htQhor7DOvYg0sSbFN2+flT5U0qA==}
     dependencies:

From 19bea109830c1e4986a02cfcccecf21c2e3d1f4d Mon Sep 17 00:00:00 2001
From: nirname <nirname@users.noreply.github.com>
Date: Tue, 27 Jun 2023 14:54:57 +0000
Subject: [PATCH 096/187] Update docs

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

diff --git a/docs/config/setup/modules/defaultConfig.md b/docs/config/setup/modules/defaultConfig.md
index 8cc503ae6..793dfffae 100644
--- a/docs/config/setup/modules/defaultConfig.md
+++ b/docs/config/setup/modules/defaultConfig.md
@@ -14,7 +14,7 @@
 
 #### Defined in
 
-[defaultConfig.ts:2299](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L2299)
+[defaultConfig.ts:2300](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L2300)
 
 ---
 

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

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

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

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

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

diff --git a/packages/mermaid/src/mermaidAPI.spec.ts b/packages/mermaid/src/mermaidAPI.spec.ts
index 11c16827b..0f4e61499 100644
--- a/packages/mermaid/src/mermaidAPI.spec.ts
+++ b/packages/mermaid/src/mermaidAPI.spec.ts
@@ -733,59 +733,7 @@ describe('mermaidAPI', () => {
           const diagramText = `${diagramType}\n accTitle: ${a11yTitle}\n accDescr: ${a11yDescr}\n`;
           const expectedDiagramType = testedDiagram.expectedType;
 
-          it('aria-roledscription is set to the diagram type, addSVGa11yTitleDescription is called', async () => {
-            const a11yDiagramInfo_spy = vi.spyOn(accessibility, 'setA11yDiagramInfo');
-            const a11yTitleDesc_spy = vi.spyOn(accessibility, 'addSVGa11yTitleDescription');
-            await mermaidAPI.render(id, diagramText);
-            expect(a11yDiagramInfo_spy).toHaveBeenCalledWith(
-              expect.anything(),
-              expectedDiagramType
-            );
-            expect(a11yTitleDesc_spy).toHaveBeenCalled();
-          });
-        });
-      });
-    });
-  });
-
-  describe('render', () => {
-    // Be sure to add async before each test (anonymous) method
-
-    // These are more like integration tests right now because nothing is mocked.
-    // But it is faster that a cypress test and there's no real reason to actually evaluate an image pixel by pixel.
-
-    // render(id, text, cb?, svgContainingElement?)
-
-    // Test all diagram types.  Note that old flowchart 'graph' type will invoke the flowRenderer-v2. (See the flowchart v2 detector.)
-    // We have to have both the specific textDiagramType and the expected type name because the expected type may be slightly different than was is put in the diagram text (ex: in -v2 diagrams)
-    const diagramTypesAndExpectations = [
-      { textDiagramType: 'C4Context', expectedType: 'c4' },
-      { textDiagramType: 'classDiagram', expectedType: 'classDiagram' },
-      { textDiagramType: 'classDiagram-v2', expectedType: 'classDiagram' },
-      { textDiagramType: 'erDiagram', expectedType: 'er' },
-      { textDiagramType: 'graph', expectedType: 'flowchart-v2' },
-      { textDiagramType: 'flowchart', expectedType: 'flowchart-v2' },
-      { textDiagramType: 'gitGraph', expectedType: 'gitGraph' },
-      { textDiagramType: 'gantt', expectedType: 'gantt' },
-      { textDiagramType: 'journey', expectedType: 'journey' },
-      { textDiagramType: 'pie', expectedType: 'pie' },
-      { textDiagramType: 'requirementDiagram', expectedType: 'requirement' },
-      { textDiagramType: 'sequenceDiagram', expectedType: 'sequence' },
-      { textDiagramType: 'stateDiagram-v2', expectedType: 'stateDiagram' },
-    ];
-
-    describe('accessibility', () => {
-      const id = 'mermaid-fauxId';
-      const a11yTitle = 'a11y title';
-      const a11yDescr = 'a11y description';
-
-      diagramTypesAndExpectations.forEach((testedDiagram) => {
-        describe(`${testedDiagram.textDiagramType}`, () => {
-          const diagramType = testedDiagram.textDiagramType;
-          const diagramText = `${diagramType}\n accTitle: ${a11yTitle}\n accDescr: ${a11yDescr}\n`;
-          const expectedDiagramType = testedDiagram.expectedType;
-
-          it('aria-roledscription is set to the diagram type, addSVGa11yTitleDescription is called', async () => {
+          it('should set aria-roledscription to the diagram type AND should call addSVGa11yTitleDescription', async () => {
             const a11yDiagramInfo_spy = vi.spyOn(accessibility, 'setA11yDiagramInfo');
             const a11yTitleDesc_spy = vi.spyOn(accessibility, 'addSVGa11yTitleDescription');
             await mermaidAPI.render(id, diagramText);
diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts
index 753e4944a..4d8d95290 100644
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -478,7 +478,7 @@ const render = async function (
 
   // Get the temporary div element containing the svg
   const element = root.select(enclosingDivID_selector).node();
-  const graphType = diag.type;
+  const diagramType = diag.type;
 
   // -------------------------------------------------------------------------------
   // Create and insert the styles (user styles, theme styles, config styles)
@@ -486,11 +486,11 @@ const render = async function (
   // Insert an element into svg. This is where we put the styles
   const svg = element.firstChild;
   const firstChild = svg.firstChild;
-  const diagramClassDefs = CLASSDEF_DIAGRAMS.includes(graphType)
+  const diagramClassDefs = CLASSDEF_DIAGRAMS.includes(diagramType)
     ? diag.renderer.getClasses(text, diag)
     : {};
 
-  const rules = createUserStyles(config, graphType, diagramClassDefs, idSelector);
+  const rules = createUserStyles(config, diagramType, diagramClassDefs, idSelector);
 
   const style1 = document.createElement('style');
   style1.innerHTML = rules;
@@ -507,9 +507,9 @@ const render = async function (
 
   // This is the d3 node for the svg element
   const svgNode = root.select(`${enclosingDivID_selector} svg`);
-  const a11yTitle = diag.db.getAccTitle?.();
-  const a11yDescr = diag.db.getAccDescription?.();
-  addA11yInfo(graphType, svgNode, a11yTitle, a11yDescr);
+  const a11yTitle: string | undefined = diag.db.getAccTitle?.();
+  const a11yDescr: string | undefined = diag.db.getAccDescription?.();
+  addA11yInfo(diagramType, svgNode, a11yTitle, a11yDescr);
 
   // -------------------------------------------------------------------------------
   // Clean up SVG code
@@ -586,14 +586,18 @@ function initialize(options: MermaidConfig = {}) {
 /**
  * Add accessibility (a11y) information to the diagram.
  *
+ * @param diagramType - diagram type
+ * @param svgNode - d3 node to insert the a11y title and desc info
+ * @param a11yTitle - a11y title
+ * @param a11yDescr - a11y description
  */
 function addA11yInfo(
-  graphType: string,
+  diagramType: string,
   svgNode: D3Element,
-  a11yTitle: string | undefined,
-  a11yDescr: string | undefined
-) {
-  setA11yDiagramInfo(svgNode, graphType);
+  a11yTitle?: string,
+  a11yDescr?: string
+): void {
+  setA11yDiagramInfo(svgNode, diagramType);
   addSVGa11yTitleDescription(svgNode, a11yTitle, a11yDescr, svgNode.attr('id'));
 }
 

From 9e024fd5f518fa32249df50b9f0d7b868b8aa138 Mon Sep 17 00:00:00 2001
From: Tom PERRILLAT-COLLOMB <tom.perrillat-collomb@protonmail.com>
Date: Tue, 27 Jun 2023 20:04:47 +0200
Subject: [PATCH 099/187] allow multiple vertices with style

---
 .../diagrams/flowchart/parser/flow-style.spec.js | 16 ++++++++++++++++
 .../src/diagrams/flowchart/parser/flow.jison     | 12 ++++++++----
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js
index e05c48627..3feaa2469 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js
@@ -338,4 +338,20 @@ describe('[Style] when parsing', () => {
 
     expect(edges[0].type).toBe('arrow_point');
   });
+
+  it('should handle multiple vertices with style', function () {
+    const res = flow.parser.parse(`
+    graph TD
+      classDef C1 stroke-dasharray:4
+      classDef C2 stroke-dasharray:6
+      A & B:::C1 & D:::C1 --> E:::C2
+    `);
+
+    const vert = flow.parser.yy.getVertices();
+
+    expect(vert['A'].classes.length).toBe(0);
+    expect(vert['B'].classes[0]).toBe('C1');
+    expect(vert['D'].classes[0]).toBe('C1');
+    expect(vert['E'].classes[0]).toBe('C2');
+  });
 });
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
index 51427118f..70fb49162 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
@@ -359,7 +359,7 @@ statement
 
 separator: NEWLINE | SEMI | EOF ;
 
-
+ 
 verticeStatement: verticeStatement link node
         { /* console.warn('vs',$1.stmt,$3); */ yy.addLink($1.stmt,$3,$2); $$ = { stmt: $3, nodes: $3.concat($1.nodes) } }
     |  verticeStatement link node spaceList
@@ -368,12 +368,16 @@ verticeStatement: verticeStatement link node
     |node { /*console.warn('noda', $1);*/ $$ = {stmt: $1, nodes:$1 }}
     ;
 
-node: vertex
+node: styledVertex
         { /* console.warn('nod', $1); */ $$ = [$1];}
-    | node spaceList AMP spaceList vertex
+    | node spaceList AMP spaceList styledVertex
         { $$ = $1.concat($5); /* console.warn('pip', $1[0], $5, $$); */ }
+    ;
+
+styledVertex: vertex
+        { /* console.warn('nod', $1); */ $$ = $1;}
     | vertex STYLE_SEPARATOR idString
-        {$$ = [$1];yy.setClass($1,$3)}
+        {$$ = $1;yy.setClass($1,$3)}
     ;
 
 vertex:  idString SQS text SQE

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

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

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

From 21e3001f4f2ca301017b7c4e6c092075e370bd56 Mon Sep 17 00:00:00 2001
From: Yokozuna59 <u.yokozuna@gmail.com>
Date: Wed, 28 Jun 2023 03:11:01 +0300
Subject: [PATCH 101/187] add `coverage:cypress:clean` script

---
 package.json | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 0d8b25d40..1653ef0d4 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
     "build:watch": "pnpm build:vite --watch",
     "build": "pnpm run -r clean && pnpm build:types && pnpm build:vite",
     "dev": "concurrently \"pnpm build:vite --watch\" \"ts-node-esm .vite/server.ts\"",
-    "dev:coverage": "VITE_COVERAGE=true pnpm dev",
+    "dev:coverage": "pnpm coverage:cypress:clean && VITE_COVERAGE=true pnpm dev",
     "release": "pnpm build",
     "lint": "eslint --cache --cache-strategy content --ignore-path .gitignore . && pnpm lint:jison && prettier --cache --check .",
     "lint:fix": "eslint --cache --cache-strategy content --fix --ignore-path .gitignore . && prettier --write . && ts-node-esm scripts/fixCSpell.ts",
@@ -31,7 +31,8 @@
     "cypress": "cypress run",
     "cypress:open": "cypress open",
     "e2e": "start-server-and-test dev http://localhost:9000/ cypress",
-    "e2e:coverage": "VITE_COVERAGE=true pnpm e2e",
+    "coverage:cypress:clean": "rimraf .nyc_output coverage/cypress",
+    "e2e:coverage": "pnpm coverage:cypress:clean && VITE_COVERAGE=true pnpm e2e",
     "coverage:merge": "ts-node-esm scripts/coverage.ts",
     "coverage": "pnpm test:coverage --run && pnpm e2e:coverage && pnpm coverage:merge",
     "ci": "vitest run",
@@ -124,6 +125,7 @@
     "node": "18.16.1"
   },
   "nyc": {
-    "report-dir": "coverage/cypress"
+    "report-dir": "coverage/cypress",
+    "temp-directory": "./coverage/.nyc_output"
   }
 }

From 346daa2327ee944bb974909acef7fc27bd53fe80 Mon Sep 17 00:00:00 2001
From: Yokozuna59 <u.yokozuna@gmail.com>
Date: Wed, 28 Jun 2023 03:12:46 +0300
Subject: [PATCH 102/187] prettierignore .nyc_output

---
 .prettierignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.prettierignore b/.prettierignore
index 2ab91f93e..b50a94e84 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -6,3 +6,4 @@ coverage
 pnpm-lock.yaml
 stats
 packages/mermaid/src/docs/.vitepress/components.d.ts
+.nyc_output

From 191309a79d102df35d4182bd68b29c710537832e Mon Sep 17 00:00:00 2001
From: Yokozuna59 <u.yokozuna@gmail.com>
Date: Wed, 28 Jun 2023 03:13:33 +0300
Subject: [PATCH 103/187] run lint:fix

---
 package.json                                            | 3 +--
 packages/mermaid/src/assignWithDepth.js                 | 2 +-
 packages/mermaid/src/diagrams/state/stateRenderer-v2.js | 2 +-
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 1653ef0d4..8bd1b8127 100644
--- a/package.json
+++ b/package.json
@@ -125,7 +125,6 @@
     "node": "18.16.1"
   },
   "nyc": {
-    "report-dir": "coverage/cypress",
-    "temp-directory": "./coverage/.nyc_output"
+    "report-dir": "coverage/cypress"
   }
 }
diff --git a/packages/mermaid/src/assignWithDepth.js b/packages/mermaid/src/assignWithDepth.js
index 898481c30..6f2e706ab 100644
--- a/packages/mermaid/src/assignWithDepth.js
+++ b/packages/mermaid/src/assignWithDepth.js
@@ -20,7 +20,7 @@
  *   of src to dst in order.
  * @param {any} dst - The destination of the merge
  * @param {any} src - The source object(s) to merge into destination
- * @param {{ depth: number; clobber: boolean }} [config={ depth: 2, clobber: false }] - Depth: depth
+ * @param {{ depth: number; clobber: boolean }} [config] - Depth: depth
  *   to traverse within src and dst for merging - clobber: should dissimilar types clobber (default:
  *   { depth: 2, clobber: false }). Default is `{ depth: 2, clobber: false }`
  * @returns {any}
diff --git a/packages/mermaid/src/diagrams/state/stateRenderer-v2.js b/packages/mermaid/src/diagrams/state/stateRenderer-v2.js
index 20ae0d112..592cb43cc 100644
--- a/packages/mermaid/src/diagrams/state/stateRenderer-v2.js
+++ b/packages/mermaid/src/diagrams/state/stateRenderer-v2.js
@@ -358,7 +358,7 @@ const setupDoc = (g, parentParsedItem, doc, diagramStates, diagramDb, altFlag) =
  * Look through all of the documents (docs) in the parsedItems
  * Because is a _document_ direction, the default direction is not necessarily the same as the overall default _diagram_ direction.
  * @param {object[]} parsedItem - the parsed statement item to look through
- * @param [defaultDir=DEFAULT_NESTED_DOC_DIR] - the direction to use if none is found
+ * @param [defaultDir] - the direction to use if none is found
  * @returns {string}
  */
 const getDir = (parsedItem, defaultDir = DEFAULT_NESTED_DOC_DIR) => {

From 777f6d9749411e28b8575aef17ea95c9f3431ab2 Mon Sep 17 00:00:00 2001
From: Random Bits <mnienow@pm.me>
Date: Tue, 27 Jun 2023 21:28:36 -0500
Subject: [PATCH 104/187] Add Standard Notes extension in integrations page

---
 packages/mermaid/src/docs/ecosystem/integrations.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/mermaid/src/docs/ecosystem/integrations.md b/packages/mermaid/src/docs/ecosystem/integrations.md
index 336ae22f5..e64cf1a13 100644
--- a/packages/mermaid/src/docs/ecosystem/integrations.md
+++ b/packages/mermaid/src/docs/ecosystem/integrations.md
@@ -155,6 +155,8 @@ They also serve as proof of concept, for the variety of things that can be built
   - [Nano Mermaid](https://github.com/Yash-Singh1/nano-mermaid)
 - [CKEditor](https://github.com/ckeditor/ckeditor5)
   - [CKEditor 5 Mermaid plugin](https://github.com/ckeditor/ckeditor5-mermaid)
+- [Standard Notes](https://standardnotes.com/)
+  - [sn-mermaid](https://github.com/nienow/sn-mermaid)
 
 ## Document Generation
 

From c11ac644a178ddf1956337f918351e82ec6d594e Mon Sep 17 00:00:00 2001
From: sidharthv96 <sidharthv96@users.noreply.github.com>
Date: Wed, 28 Jun 2023 07:39:44 +0000
Subject: [PATCH 105/187] Update docs

---
 docs/ecosystem/integrations.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/docs/ecosystem/integrations.md b/docs/ecosystem/integrations.md
index 10041525d..896a23c56 100644
--- a/docs/ecosystem/integrations.md
+++ b/docs/ecosystem/integrations.md
@@ -161,6 +161,8 @@ They also serve as proof of concept, for the variety of things that can be built
   - [Nano Mermaid](https://github.com/Yash-Singh1/nano-mermaid)
 - [CKEditor](https://github.com/ckeditor/ckeditor5)
   - [CKEditor 5 Mermaid plugin](https://github.com/ckeditor/ckeditor5-mermaid)
+- [Standard Notes](https://standardnotes.com/)
+  - [sn-mermaid](https://github.com/nienow/sn-mermaid)
 
 ## Document Generation
 

From 0d833fb4ce2d2c48b4f6523d5beb5bbb52815ea8 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Wed, 28 Jun 2023 23:28:23 +0530
Subject: [PATCH 106/187] Use v8 coverage

---
 package.json   |   2 +-
 pnpm-lock.yaml | 156 ++++++++++++++++++++++++++++++++++++++++++++++---
 vite.config.ts |   2 +-
 3 files changed, 150 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index 8bd1b8127..e6bd516a9 100644
--- a/package.json
+++ b/package.json
@@ -78,7 +78,7 @@
     "@types/rollup-plugin-visualizer": "^4.2.1",
     "@typescript-eslint/eslint-plugin": "^5.59.0",
     "@typescript-eslint/parser": "^5.59.0",
-    "@vitest/coverage-istanbul": "^0.32.2",
+    "@vitest/coverage-v8": "^0.32.2",
     "@vitest/spy": "^0.32.2",
     "@vitest/ui": "^0.32.2",
     "concurrently": "^8.0.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2f1ea7a43..1a316dd7f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -62,7 +62,7 @@ importers:
       '@typescript-eslint/parser':
         specifier: ^5.59.0
         version: 5.59.0(eslint@8.39.0)(typescript@5.1.3)
-      '@vitest/coverage-istanbul':
+      '@vitest/coverage-v8':
         specifier: ^0.32.2
         version: 0.32.2(vitest@0.32.2)
       '@vitest/spy':
@@ -451,6 +451,31 @@ importers:
         specifier: ^7.0.0
         version: 7.0.0
 
+  packages/mermaid/src/vitepress:
+    dependencies:
+      '@vueuse/core':
+        specifier: ^10.1.0
+        version: 10.1.0(vue@3.2.47)
+      vue:
+        specifier: ^3.2.47
+        version: 3.2.47
+    devDependencies:
+      pathe:
+        specifier: ^1.1.0
+        version: 1.1.0
+      unocss:
+        specifier: ^0.53.0
+        version: 0.53.0(postcss@8.4.23)(vite@4.3.9)
+      unplugin-vue-components:
+        specifier: ^0.25.0
+        version: 0.25.0(rollup@2.79.1)(vue@3.2.47)
+      vite:
+        specifier: ^4.3.3
+        version: 4.3.9(@types/node@18.16.0)
+      vitepress:
+        specifier: 1.0.0-beta.2
+        version: 1.0.0-beta.2(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0)
+
   tests/webpack:
     dependencies:
       '@mermaid-js/mermaid-example-diagram':
@@ -3482,7 +3507,7 @@ packages:
       slash: 3.0.0
       string-length: 4.0.2
       strip-ansi: 6.0.1
-      v8-to-istanbul: 9.0.1
+      v8-to-istanbul: 9.1.0
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -4660,6 +4685,17 @@ packages:
       - vite
     dev: true
 
+  /@unocss/astro@0.53.0(vite@4.3.9):
+    resolution: {integrity: sha512-8bR7ysIMZEOpcjd/cVmogcABSFDYPjUqMnbflv44p1A2/deemo9CIkpRARoq/96NQuzWJsKhKodcQodExZcqiA==}
+    dependencies:
+      '@unocss/core': 0.53.0
+      '@unocss/reset': 0.53.0
+      '@unocss/vite': 0.53.0(vite@4.3.9)
+    transitivePeerDependencies:
+      - rollup
+      - vite
+    dev: true
+
   /@unocss/cli@0.53.0(rollup@2.79.1):
     resolution: {integrity: sha512-9WNBHy8m8tMqwcp7mUhebRUBvHQfbx01CMe5cAFLmUYtJULM+8IjJxqERkaAZyyoOXf1TNO2v1dFAmCwhMRCLQ==}
     engines: {node: '>=14'}
@@ -4838,6 +4874,26 @@ packages:
       - rollup
     dev: true
 
+  /@unocss/vite@0.53.0(vite@4.3.9):
+    resolution: {integrity: sha512-JoZhKVNruRjfySMVg/zNJbLEn/NTXj29Wf0SN4++xnGKrSapkPzYC46psL5bm5N5v4SHdpepTCoonC3FWCY6Fw==}
+    peerDependencies:
+      vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0
+    dependencies:
+      '@ampproject/remapping': 2.2.1
+      '@rollup/pluginutils': 5.0.2(rollup@2.79.1)
+      '@unocss/config': 0.53.0
+      '@unocss/core': 0.53.0
+      '@unocss/inspector': 0.53.0
+      '@unocss/scope': 0.53.0
+      '@unocss/transformer-directives': 0.53.0
+      chokidar: 3.5.3
+      fast-glob: 3.2.12
+      magic-string: 0.30.0
+      vite: 4.3.9(@types/node@18.16.0)
+    transitivePeerDependencies:
+      - rollup
+    dev: true
+
   /@vite-pwa/vitepress@0.2.0(vite-plugin-pwa@0.16.0):
     resolution: {integrity: sha512-dVQVaP6NB9woCFe4UASUqRp7uwBQJOVXlJlqK4krqXcbb3NuXIXIWOnU7HLpJnHqZj5U/81gKtLN6gs5gJBwiQ==}
     peerDependencies:
@@ -4879,17 +4935,22 @@ packages:
       vue: 3.3.4
     dev: true
 
-  /@vitest/coverage-istanbul@0.32.2(vitest@0.32.2):
-    resolution: {integrity: sha512-B5VSvfzwTsDt9HjFmQ4sZ2tQHivmHJpAoG/BJwNNQeBtSCSdY1L6tfCjwZLo7ryOmZEDA3ck/DAmHCUZqa+MWA==}
+  /@vitest/coverage-v8@0.32.2(vitest@0.32.2):
+    resolution: {integrity: sha512-/+V3nB3fyeuuSeKxCfi6XmWjDIxpky7AWSkGVfaMjAk7di8igBwRsThLjultwIZdTDH1RAxpjmCXEfSqsMFZOA==}
     peerDependencies:
       vitest: '>=0.32.0 <1'
     dependencies:
+      '@ampproject/remapping': 2.2.1
+      '@bcoe/v8-coverage': 0.2.3
       istanbul-lib-coverage: 3.2.0
-      istanbul-lib-instrument: 5.2.1
       istanbul-lib-report: 3.0.0
       istanbul-lib-source-maps: 4.0.1
       istanbul-reports: 3.1.5
+      magic-string: 0.30.0
+      picocolors: 1.0.0
+      std-env: 3.3.2
       test-exclude: 6.0.0
+      v8-to-istanbul: 9.1.0
       vitest: 0.32.2(@vitest/ui@0.32.2)(jsdom@22.0.0)
     transitivePeerDependencies:
       - supports-color
@@ -8983,7 +9044,7 @@ packages:
     dependencies:
       foreground-child: 3.1.1
       jackspeak: 2.1.1
-      minimatch: 9.0.0
+      minimatch: 9.0.1
       minipass: 5.0.0
       path-scurry: 1.7.0
     dev: true
@@ -14575,6 +14636,42 @@ packages:
       - vite
     dev: true
 
+  /unocss@0.53.0(postcss@8.4.23)(vite@4.3.9):
+    resolution: {integrity: sha512-kY4h5ERiDYlSnL2X+hbDfh+uaF7QNouy7j51GOTUr3Q0aaWehaNd05b15SjHrab559dEC0mYfrSEdh/DnCK1cw==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@unocss/webpack': 0.53.0
+    peerDependenciesMeta:
+      '@unocss/webpack':
+        optional: true
+    dependencies:
+      '@unocss/astro': 0.53.0(vite@4.3.9)
+      '@unocss/cli': 0.53.0(rollup@2.79.1)
+      '@unocss/core': 0.53.0
+      '@unocss/extractor-arbitrary-variants': 0.53.0
+      '@unocss/postcss': 0.53.0(postcss@8.4.23)
+      '@unocss/preset-attributify': 0.53.0
+      '@unocss/preset-icons': 0.53.0
+      '@unocss/preset-mini': 0.53.0
+      '@unocss/preset-tagify': 0.53.0
+      '@unocss/preset-typography': 0.53.0
+      '@unocss/preset-uno': 0.53.0
+      '@unocss/preset-web-fonts': 0.53.0
+      '@unocss/preset-wind': 0.53.0
+      '@unocss/reset': 0.53.0
+      '@unocss/transformer-attributify-jsx': 0.53.0
+      '@unocss/transformer-attributify-jsx-babel': 0.53.0
+      '@unocss/transformer-compile-class': 0.53.0
+      '@unocss/transformer-directives': 0.53.0
+      '@unocss/transformer-variant-group': 0.53.0
+      '@unocss/vite': 0.53.0(vite@4.3.9)
+    transitivePeerDependencies:
+      - postcss
+      - rollup
+      - supports-color
+      - vite
+    dev: true
+
   /unpipe@1.0.0:
     resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
     engines: {node: '>= 0.8'}
@@ -14700,8 +14797,8 @@ packages:
   /v8-compile-cache-lib@3.0.1:
     resolution: {integrity: sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==}
 
-  /v8-to-istanbul@9.0.1:
-    resolution: {integrity: sha512-74Y4LqY74kLE6IFyIjPtkSTWzUZmj8tdHT9Ii/26dvQ6K9Dl2NbEfj0XgU2sHCtKgt5VupqhlO/5aWuqS+IY1w==}
+  /v8-to-istanbul@9.1.0:
+    resolution: {integrity: sha512-6z3GW9x8G1gd+JIIgQQQxXuiJtCXeAjp6RaPEPLv62mH3iPHPxV6W3robxtCzNErRo6ZwTmzWhsbNvjyEBKzKA==}
     engines: {node: '>=10.12.0'}
     dependencies:
       '@jridgewell/trace-mapping': 0.3.17
@@ -14944,6 +15041,49 @@ packages:
       - terser
     dev: true
 
+  /vitepress@1.0.0-beta.2(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0):
+    resolution: {integrity: sha512-DBXYjtYbm3W1IPPJ2TiCaK/XK+o/2XmL2+jslOGKm+txcbmG0kbeB+vadC5tCUZA9NdA+9Ywj3M4548c7t/SDg==}
+    hasBin: true
+    dependencies:
+      '@docsearch/css': 3.5.1
+      '@docsearch/js': 3.5.1(@algolia/client-search@4.14.2)(search-insights@2.6.0)
+      '@vitejs/plugin-vue': 4.2.3(vite@4.3.9)(vue@3.3.4)
+      '@vue/devtools-api': 6.5.0
+      '@vueuse/core': 10.1.2(vue@3.3.4)
+      '@vueuse/integrations': 10.1.2(focus-trap@7.4.3)(vue@3.3.4)
+      body-scroll-lock: 4.0.0-beta.0
+      focus-trap: 7.4.3
+      mark.js: 8.11.1
+      minisearch: 6.1.0
+      shiki: 0.14.2
+      vite: 4.3.9(@types/node@18.16.0)
+      vue: 3.3.4
+    transitivePeerDependencies:
+      - '@algolia/client-search'
+      - '@types/node'
+      - '@types/react'
+      - '@vue/composition-api'
+      - async-validator
+      - axios
+      - change-case
+      - drauu
+      - fuse.js
+      - idb-keyval
+      - jwt-decode
+      - less
+      - nprogress
+      - qrcode
+      - react
+      - react-dom
+      - sass
+      - search-insights
+      - sortablejs
+      - stylus
+      - sugarss
+      - terser
+      - universal-cookie
+    dev: true
+
   /vitepress@1.0.0-beta.3(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0):
     resolution: {integrity: sha512-GR5Pvr/o343NN1M4Na1shhDYZRrQbjmLq7WE0lla0H8iDPAsHE8agTHLWfu3FWx+3q2KA29sv16+0O9RQKGjlA==}
     hasBin: true
diff --git a/vite.config.ts b/vite.config.ts
index bff9a30c4..36d08351e 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -17,7 +17,7 @@ export default defineConfig({
     // TODO: should we move this to a mermaid-core package?
     setupFiles: ['packages/mermaid/src/tests/setup.ts'],
     coverage: {
-      provider: 'istanbul',
+      provider: 'v8',
       reporter: ['text', 'json', 'html', 'lcov'],
       reportsDirectory: './coverage/vitest',
       exclude: ['**/node_modules/**', '**/tests/**', '**/__mocks__/**'],

From 83bda9febdcd6ca5483a2372a4732658843459cb Mon Sep 17 00:00:00 2001
From: Alex Mooney <alexmmooney@gmail.com>
Date: Wed, 28 Jun 2023 14:37:08 -0700
Subject: [PATCH 107/187] Correct the Gantt milestones example

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

diff --git a/packages/mermaid/src/docs/syntax/gantt.md b/packages/mermaid/src/docs/syntax/gantt.md
index cecaf52cb..5674091d7 100644
--- a/packages/mermaid/src/docs/syntax/gantt.md
+++ b/packages/mermaid/src/docs/syntax/gantt.md
@@ -88,12 +88,12 @@ You can add milestones to the diagrams. Milestones differ from tasks as they rep
 
 ```mermaid-example
 gantt
-dateFormat HH:mm
-axisFormat %H:%M
-Initial milestone : milestone, m1, 17:49,2min
-taska2 : 10min
-taska3 : 5min
-Final milestone : milestone, m2, 18:14, 2min
+    dateFormat HH:mm
+    axisFormat %H:%M
+    Initial milestone : milestone, m1, 17:49, 2m
+    Task A : 10m
+    Task B : 5m
+    Final milestone : milestone, m2, 18:08, 4m
 ```
 
 ## Setting dates

From 491f8c125986273ee613029f7c230bf73d3e0ccb Mon Sep 17 00:00:00 2001
From: Alex Mooney <alexmmooney@gmail.com>
Date: Wed, 28 Jun 2023 15:14:28 -0700
Subject: [PATCH 108/187] Clean up some spacing in examples

---
 packages/mermaid/src/docs/syntax/gantt.md | 33 +++++++++++------------
 1 file changed, 16 insertions(+), 17 deletions(-)

diff --git a/packages/mermaid/src/docs/syntax/gantt.md b/packages/mermaid/src/docs/syntax/gantt.md
index 5674091d7..710b39e52 100644
--- a/packages/mermaid/src/docs/syntax/gantt.md
+++ b/packages/mermaid/src/docs/syntax/gantt.md
@@ -19,13 +19,13 @@ Mermaid can render Gantt diagrams as SVG, PNG or a MarkDown link that can be pas
 ```mermaid-example
 gantt
     title A Gantt Diagram
-    dateFormat  YYYY-MM-DD
+    dateFormat YYYY-MM-DD
     section Section
-    A task           :a1, 2014-01-01, 30d
-    Another task     :after a1  , 20d
+        A task          :a1, 2014-01-01, 30d
+        Another task    :after a1, 20d
     section Another
-    Task in sec      :2014-01-12  , 12d
-    another task      : 24d
+        Task in Another :2014-01-12, 12d
+        another task    :24d
 ```
 
 ## Syntax
@@ -66,10 +66,10 @@ gantt
 It is possible to set multiple dependencies separated by space:
 
 ```mermaid-example
-    gantt
-        apple :a, 2017-07-20, 1w
-        banana :crit, b, 2017-07-23, 1d
-        cherry :active, c, after b a, 1d
+gantt
+    apple :a, 2017-07-20, 1w
+    banana :crit, b, 2017-07-23, 1d
+    cherry :active, c, after b a, 1d
 ```
 
 ### Title
@@ -214,15 +214,14 @@ Comments can be entered within a gantt chart, which will be ignored by the parse
 ```mermaid
 gantt
     title A Gantt Diagram
-    %% this is a comment
-    dateFormat  YYYY-MM-DD
+    %% This is a comment
+    dateFormat YYYY-MM-DD
     section Section
-    A task           :a1, 2014-01-01, 30d
-    Another task     :after a1  , 20d
+        A task          :a1, 2014-01-01, 30d
+        Another task    :after a1, 20d
     section Another
-    Task in sec      :2014-01-12  , 12d
-    another task      : 24d
-
+        Task in Another :2014-01-12, 12d
+        another task    :24d
 ```
 
 ## Styling
@@ -350,7 +349,7 @@ Beginner's tip—a full example using interactive links in an html context:
       dateFormat  YYYY-MM-DD
 
       section Clickable
-      Visit mermaidjs           :active, cl1, 2014-01-07, 3d
+      Visit mermaidjs         :active, cl1, 2014-01-07, 3d
       Print arguments         :cl2, after cl1, 3d
       Print task              :cl3, after cl2, 3d
 

From 47db1a3c9f9849c387a562f65575c47d25c10e40 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Thu, 29 Jun 2023 10:36:21 +0530
Subject: [PATCH 109/187] Cleanup

---
 packages/mermaid/src/diagrams/class/classRenderer-v2.ts | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/mermaid/src/diagrams/class/classRenderer-v2.ts b/packages/mermaid/src/diagrams/class/classRenderer-v2.ts
index 7892d2208..6197fe8ac 100644
--- a/packages/mermaid/src/diagrams/class/classRenderer-v2.ts
+++ b/packages/mermaid/src/diagrams/class/classRenderer-v2.ts
@@ -101,10 +101,7 @@ export const addClasses = function (
       /**
        * Variable for storing the classes for the vertex
        */
-      let cssClassStr = '';
-      if (vertex.cssClasses.length > 0) {
-        cssClassStr = cssClassStr + ' ' + vertex.cssClasses.join(' ');
-      }
+      const cssClassStr = vertex.cssClasses.join(' ');
 
       const styles = { labelStyle: '', style: '' }; //getStylesFromArray(vertex.styles);
 

From 85fdbab6b9fbed19c2a354fe7bb3bc581affea4d Mon Sep 17 00:00:00 2001
From: sidharthv96 <sidharthv96@users.noreply.github.com>
Date: Thu, 29 Jun 2023 05:16:38 +0000
Subject: [PATCH 110/187] Update docs

---
 docs/syntax/gantt.md | 88 ++++++++++++++++++++++----------------------
 1 file changed, 43 insertions(+), 45 deletions(-)

diff --git a/docs/syntax/gantt.md b/docs/syntax/gantt.md
index 091cdeabe..8e64a268a 100644
--- a/docs/syntax/gantt.md
+++ b/docs/syntax/gantt.md
@@ -25,25 +25,25 @@ Mermaid can render Gantt diagrams as SVG, PNG or a MarkDown link that can be pas
 ```mermaid-example
 gantt
     title A Gantt Diagram
-    dateFormat  YYYY-MM-DD
+    dateFormat YYYY-MM-DD
     section Section
-    A task           :a1, 2014-01-01, 30d
-    Another task     :after a1  , 20d
+        A task          :a1, 2014-01-01, 30d
+        Another task    :after a1, 20d
     section Another
-    Task in sec      :2014-01-12  , 12d
-    another task      : 24d
+        Task in Another :2014-01-12, 12d
+        another task    :24d
 ```
 
 ```mermaid
 gantt
     title A Gantt Diagram
-    dateFormat  YYYY-MM-DD
+    dateFormat YYYY-MM-DD
     section Section
-    A task           :a1, 2014-01-01, 30d
-    Another task     :after a1  , 20d
+        A task          :a1, 2014-01-01, 30d
+        Another task    :after a1, 20d
     section Another
-    Task in sec      :2014-01-12  , 12d
-    another task      : 24d
+        Task in Another :2014-01-12, 12d
+        another task    :24d
 ```
 
 ## Syntax
@@ -117,17 +117,17 @@ gantt
 It is possible to set multiple dependencies separated by space:
 
 ```mermaid-example
-    gantt
-        apple :a, 2017-07-20, 1w
-        banana :crit, b, 2017-07-23, 1d
-        cherry :active, c, after b a, 1d
+gantt
+    apple :a, 2017-07-20, 1w
+    banana :crit, b, 2017-07-23, 1d
+    cherry :active, c, after b a, 1d
 ```
 
 ```mermaid
-    gantt
-        apple :a, 2017-07-20, 1w
-        banana :crit, b, 2017-07-23, 1d
-        cherry :active, c, after b a, 1d
+gantt
+    apple :a, 2017-07-20, 1w
+    banana :crit, b, 2017-07-23, 1d
+    cherry :active, c, after b a, 1d
 ```
 
 ### Title
@@ -146,22 +146,22 @@ You can add milestones to the diagrams. Milestones differ from tasks as they rep
 
 ```mermaid-example
 gantt
-dateFormat HH:mm
-axisFormat %H:%M
-Initial milestone : milestone, m1, 17:49,2min
-taska2 : 10min
-taska3 : 5min
-Final milestone : milestone, m2, 18:14, 2min
+    dateFormat HH:mm
+    axisFormat %H:%M
+    Initial milestone : milestone, m1, 17:49, 2m
+    Task A : 10m
+    Task B : 5m
+    Final milestone : milestone, m2, 18:08, 4m
 ```
 
 ```mermaid
 gantt
-dateFormat HH:mm
-axisFormat %H:%M
-Initial milestone : milestone, m1, 17:49,2min
-taska2 : 10min
-taska3 : 5min
-Final milestone : milestone, m2, 18:14, 2min
+    dateFormat HH:mm
+    axisFormat %H:%M
+    Initial milestone : milestone, m1, 17:49, 2m
+    Task A : 10m
+    Task B : 5m
+    Final milestone : milestone, m2, 18:08, 4m
 ```
 
 ## Setting dates
@@ -296,29 +296,27 @@ Comments can be entered within a gantt chart, which will be ignored by the parse
 ```mermaid-example
 gantt
     title A Gantt Diagram
-    %% this is a comment
-    dateFormat  YYYY-MM-DD
+    %% This is a comment
+    dateFormat YYYY-MM-DD
     section Section
-    A task           :a1, 2014-01-01, 30d
-    Another task     :after a1  , 20d
+        A task          :a1, 2014-01-01, 30d
+        Another task    :after a1, 20d
     section Another
-    Task in sec      :2014-01-12  , 12d
-    another task      : 24d
-
+        Task in Another :2014-01-12, 12d
+        another task    :24d
 ```
 
 ```mermaid
 gantt
     title A Gantt Diagram
-    %% this is a comment
-    dateFormat  YYYY-MM-DD
+    %% This is a comment
+    dateFormat YYYY-MM-DD
     section Section
-    A task           :a1, 2014-01-01, 30d
-    Another task     :after a1  , 20d
+        A task          :a1, 2014-01-01, 30d
+        Another task    :after a1, 20d
     section Another
-    Task in sec      :2014-01-12  , 12d
-    another task      : 24d
-
+        Task in Another :2014-01-12, 12d
+        another task    :24d
 ```
 
 ## Styling
@@ -440,7 +438,7 @@ Beginner's tip—a full example using interactive links in an html context:
       dateFormat  YYYY-MM-DD
 
       section Clickable
-      Visit mermaidjs           :active, cl1, 2014-01-07, 3d
+      Visit mermaidjs         :active, cl1, 2014-01-07, 3d
       Print arguments         :cl2, after cl1, 3d
       Print task              :cl3, after cl2, 3d
 

From a712e618886d2a46668f21c6afe189e40bcc596b Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Thu, 29 Jun 2023 14:06:08 +0300
Subject: [PATCH 111/187] Loading avatars in parallel & started sankey
 documentation

---
 docker-compose.yml                            |   1 +
 .../docs/.vitepress/scripts/fetch-avatars.ts  |  11 +-
 packages/mermaid/src/docs/package.json        |   2 +-
 packages/mermaid/src/docs/syntax/sankey.md    | 184 ++++++++++++++++++
 4 files changed, 193 insertions(+), 5 deletions(-)
 create mode 100644 packages/mermaid/src/docs/syntax/sankey.md

diff --git a/docker-compose.yml b/docker-compose.yml
index 43fa5485f..49fe0f3e8 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -15,6 +15,7 @@ services:
       - root_npm:/root/.npm
     ports:
       - 9000:9000
+      - 3333:3333
 volumes:
   root_cache:
   root_local:
diff --git a/packages/mermaid/src/docs/.vitepress/scripts/fetch-avatars.ts b/packages/mermaid/src/docs/.vitepress/scripts/fetch-avatars.ts
index bbea31bc1..47f371fee 100644
--- a/packages/mermaid/src/docs/.vitepress/scripts/fetch-avatars.ts
+++ b/packages/mermaid/src/docs/.vitepress/scripts/fetch-avatars.ts
@@ -18,7 +18,7 @@ async function download(url: string, fileName: URL) {
     const image = await fetch(url);
     await writeFile(fileName, Buffer.from(await image.arrayBuffer()));
   } catch (error) {
-    console.error(error);
+    console.error('failed to load', url, error);
   }
 }
 
@@ -26,10 +26,13 @@ async function fetchAvatars() {
   await mkdir(fileURLToPath(new URL(getAvatarPath('none'))).replace('none.png', ''), {
     recursive: true,
   });
+
   contributors = JSON.parse(await readFile(pathContributors, { encoding: 'utf-8' }));
-  for (const name of contributors) {
-    await download(`https://github.com/${name}.png?size=100`, getAvatarPath(name));
-  }
+  let avatars = contributors.map((name) => {
+    download(`https://github.com/${name}.png?size=100`, getAvatarPath(name));
+  });
+
+  await Promise.all(avatars);
 }
 
 fetchAvatars();
diff --git a/packages/mermaid/src/docs/package.json b/packages/mermaid/src/docs/package.json
index f24f9f4bc..34be89bd2 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": "pnpm prefetch && vitepress --port 3333 --host",
     "build": "pnpm prefetch && vitepress build",
     "build-no-prefetch": "vitepress build",
     "serve": "vitepress serve",
diff --git a/packages/mermaid/src/docs/syntax/sankey.md b/packages/mermaid/src/docs/syntax/sankey.md
new file mode 100644
index 000000000..a6aa8e5a9
--- /dev/null
+++ b/packages/mermaid/src/docs/syntax/sankey.md
@@ -0,0 +1,184 @@
+# Sankey diagrams
+
+> A sankey diagram is a visualization used to depict a flow from one set of values to another.
+> This is an experimental diagram. Its syntax are very close to plain CSV, but highly likely
+> to be extended in the nearest future.
+
+The things being connected are called nodes and the connections are called links.
+
+## Example
+
+Code:
+
+```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 it is that a user types `sankey-beta` first, then pastes raw CSV below and get the result.
+
+It is implemented according CSV standard as [described here](https://www.ietf.org/rfc/rfc4180.txt) with subtle differences:
+
+- CSV must contain 3 columns only
+- It is allowed to have empty lines without comma separators for visual purposes
+
+```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
+```
+
+If you need your title to have a comma, wrap it in double quotes
+
+
+"Hello, Mister Anderson"
+

From 408c32781e458b26cbeb482ae49f55e609eccd12 Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Thu, 29 Jun 2023 15:24:09 +0300
Subject: [PATCH 112/187] Contributors fetching failure must not hinder docs
 development

---
 .../.vitepress/scripts/fetch-contributors.ts  | 36 +++++-----
 pnpm-lock.yaml                                | 68 ++-----------------
 run                                           |  2 +-
 3 files changed, 27 insertions(+), 79 deletions(-)

diff --git a/packages/mermaid/src/docs/.vitepress/scripts/fetch-contributors.ts b/packages/mermaid/src/docs/.vitepress/scripts/fetch-contributors.ts
index fd5409d0f..a29ef3324 100644
--- a/packages/mermaid/src/docs/.vitepress/scripts/fetch-contributors.ts
+++ b/packages/mermaid/src/docs/.vitepress/scripts/fetch-contributors.ts
@@ -10,23 +10,25 @@ interface Contributor {
 
 async function fetchContributors() {
   const collaborators: string[] = [];
-  let page = 1;
-  let data: Contributor[] = [];
-  do {
-    const response = await fetch(
-      `https://api.github.com/repos/mermaid-js/mermaid/contributors?per_page=100&page=${page}`,
-      {
-        method: 'GET',
-        headers: {
-          'content-type': 'application/json',
-        },
-      }
-    );
-    data = await response.json();
-    collaborators.push(...data.map((i) => i.login));
-    console.log(`Fetched page ${page}`);
-    page++;
-  } while (data.length === 100);
+  try {
+    let page = 1;
+    let data: Contributor[] = [];
+    do {
+      const response = await fetch(
+        `https://api.github.com/repos/mermaid-js/mermaid/contributors?per_page=100&page=${page}`,
+        {
+          method: 'GET',
+          headers: {
+            'content-type': 'application/json',
+          },
+        }
+      );
+      data = await response.json();
+      collaborators.push(...data.map((i) => i.login));
+      console.log(`Fetched page ${page}`);
+      page++;
+    } while (data.length === 100);
+  } catch (e) { /* contributors fetching failure must not hinder docs development */ }
   return collaborators.filter((name) => !name.includes('[bot]'));
 }
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 052e5eec9..200e6115a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -506,13 +506,13 @@ importers:
         version: 4.3.9(@types/node@18.16.0)
       vite-plugin-pwa:
         specifier: ^0.16.0
-        version: 0.16.0(vite@4.3.9)(workbox-build@7.0.0)(workbox-window@6.5.4)
+        version: 0.16.0(vite@4.3.9)(workbox-build@7.0.0)(workbox-window@7.0.0)
       vitepress:
-        specifier: 1.0.0-beta.2
-        version: 1.0.0-beta.2(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0)
+        specifier: 1.0.0-beta.3
+        version: 1.0.0-beta.3(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0)
       workbox-window:
-        specifier: ^6.5.4
-        version: 6.5.4
+        specifier: ^7.0.0
+        version: 7.0.0
 
   tests/webpack:
     dependencies:
@@ -14980,7 +14980,7 @@ packages:
       - supports-color
     dev: true
 
-  /vite-plugin-pwa@0.16.0(vite@4.3.9)(workbox-build@7.0.0)(workbox-window@6.5.4):
+  /vite-plugin-pwa@0.16.0(vite@4.3.9)(workbox-build@7.0.0)(workbox-window@7.0.0):
     resolution: {integrity: sha512-E+AQRzHxqNU4ZhEeR8X37/foZB+ezJEhXauE/mcf1UITY6k2Pa1dtlFl+BQu57fTdiVlWim5S0Qy44Yap93Dkg==}
     engines: {node: '>=16.0.0'}
     peerDependencies:
@@ -14993,7 +14993,7 @@ packages:
       pretty-bytes: 6.1.0
       vite: 4.3.9(@types/node@18.16.0)
       workbox-build: 7.0.0
-      workbox-window: 6.5.4
+      workbox-window: 7.0.0
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -15143,49 +15143,6 @@ packages:
       - terser
     dev: true
 
-  /vitepress@1.0.0-beta.2(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0):
-    resolution: {integrity: sha512-DBXYjtYbm3W1IPPJ2TiCaK/XK+o/2XmL2+jslOGKm+txcbmG0kbeB+vadC5tCUZA9NdA+9Ywj3M4548c7t/SDg==}
-    hasBin: true
-    dependencies:
-      '@docsearch/css': 3.5.1
-      '@docsearch/js': 3.5.1(@algolia/client-search@4.14.2)(search-insights@2.6.0)
-      '@vitejs/plugin-vue': 4.2.3(vite@4.3.9)(vue@3.3.4)
-      '@vue/devtools-api': 6.5.0
-      '@vueuse/core': 10.1.2(vue@3.3.4)
-      '@vueuse/integrations': 10.1.2(focus-trap@7.4.3)(vue@3.3.4)
-      body-scroll-lock: 4.0.0-beta.0
-      focus-trap: 7.4.3
-      mark.js: 8.11.1
-      minisearch: 6.1.0
-      shiki: 0.14.2
-      vite: 4.3.9(@types/node@18.16.0)
-      vue: 3.3.4
-    transitivePeerDependencies:
-      - '@algolia/client-search'
-      - '@types/node'
-      - '@types/react'
-      - '@vue/composition-api'
-      - async-validator
-      - axios
-      - change-case
-      - drauu
-      - fuse.js
-      - idb-keyval
-      - jwt-decode
-      - less
-      - nprogress
-      - qrcode
-      - react
-      - react-dom
-      - sass
-      - search-insights
-      - sortablejs
-      - stylus
-      - sugarss
-      - terser
-      - universal-cookie
-    dev: true
-
   /vitepress@1.0.0-beta.3(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0):
     resolution: {integrity: sha512-GR5Pvr/o343NN1M4Na1shhDYZRrQbjmLq7WE0lla0H8iDPAsHE8agTHLWfu3FWx+3q2KA29sv16+0O9RQKGjlA==}
     hasBin: true
@@ -15851,10 +15808,6 @@ packages:
       workbox-core: 7.0.0
     dev: true
 
-  /workbox-core@6.5.4:
-    resolution: {integrity: sha512-OXYb+m9wZm8GrORlV2vBbE5EC1FKu71GGp0H4rjmxmF4/HLbMCoTFws87M3dFwgpmg0v00K++PImpNQ6J5NQ6Q==}
-    dev: true
-
   /workbox-core@7.0.0:
     resolution: {integrity: sha512-81JkAAZtfVP8darBpfRTovHg8DGAVrKFgHpOArZbdFd78VqHr5Iw65f2guwjE2NlCFbPFDoez3D3/6ZvhI/rwQ==}
     dev: true
@@ -15929,13 +15882,6 @@ packages:
     resolution: {integrity: sha512-SWfEouQfjRiZ7GNABzHUKUyj8pCoe+RwjfOIajcx6J5mtgKkN+t8UToHnpaJL5UVVOf5YhJh+OHhbVNIHe+LVA==}
     dev: true
 
-  /workbox-window@6.5.4:
-    resolution: {integrity: sha512-HnLZJDwYBE+hpG25AQBO8RUWBJRaCsI9ksQJEp3aCOFCaG5kqaToAYXFRAHxzRluM2cQbGzdQF5rjKPWPA1fug==}
-    dependencies:
-      '@types/trusted-types': 2.0.2
-      workbox-core: 6.5.4
-    dev: true
-
   /workbox-window@7.0.0:
     resolution: {integrity: sha512-j7P/bsAWE/a7sxqTzXo3P2ALb1reTfZdvVp6OJ/uLr/C2kZAMvjeWGm8V4htQhor7DOvYg0sSbFN2+flT5U0qA==}
     dependencies:
diff --git a/run b/run
index 18a544312..ecc6bb02b 100755
--- a/run
+++ b/run
@@ -20,7 +20,7 @@ $RUN --service-ports mermaid sh -c "npx pnpm run dev"
 ;;
 
 docs:dev)
-$RUN --service-ports mermaid sh -c "npx pnpm --filter mermaid run docs:dev"
+$RUN --service-ports mermaid sh -c "cd packages/mermaid/src/docs && npx pnpm prefetch && npx vitepress --port 3333 --host"
 ;;
 
 help)

From 8e3f8b1a57b5fb4ab277ff235961a9ef768871ca Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Thu, 29 Jun 2023 15:39:50 +0300
Subject: [PATCH 113/187] Fixes after review

---
 .../mermaid/src/diagrams/sankey/sankeyDB.ts   |  9 ++++----
 .../src/diagrams/sankey/sankeyRenderer.ts     | 22 ++++++++++---------
 .../mermaid/src/docs/.vitepress/config.ts     |  1 +
 3 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts
index 1b6864af9..1921e1b85 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyDB.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyDB.ts
@@ -43,12 +43,11 @@ class SankeyNode {
 
 const findOrCreateNode = (ID: string): SankeyNode => {
   ID = common.sanitizeText(ID, configApi.getConfig());
-  if (nodesMap[ID]) {
-    return nodesMap[ID];
-  }
 
-  nodesMap[ID] = new SankeyNode(ID);
-  nodes.push(nodesMap[ID]);
+  if (!nodesMap[ID]) {
+    nodesMap[ID] = new SankeyNode(ID);
+    nodes.push(nodesMap[ID]);
+  }
   return nodesMap[ID];
 };
 
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
index cb3092f55..780144be0 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
@@ -20,6 +20,17 @@ import { configureSvgSize } from '../../setupGraphViewbox.js';
 import { Uid } from '../../rendering-util/uid.js';
 import { SankeyLinkColor, SankeyNodeAlignment } from '../../config.type.js';
 
+// Map config options to alignment functions
+const alignmentsMap: Record<
+  SankeyNodeAlignment,
+  (node: d3SankeyNode<object, object>, n: number) => number
+> = {
+  [SankeyNodeAlignment.left]: d3SankeyLeft,
+  [SankeyNodeAlignment.right]: d3SankeyRight,
+  [SankeyNodeAlignment.center]: d3SankeyCenter,
+  [SankeyNodeAlignment.justify]: d3SankeyJustify,
+};
+
 /**
  * Draws Sankey diagram.
  *
@@ -73,16 +84,7 @@ export const draw = function (text: string, id: string, _version: string, diagOb
   // @ts-ignore TODO: db should be coerced to sankey DB type
   const graph = diagObj.db.getGraph();
 
-  // Map config options to alignment functions
-  const alignmentsMap: Record<
-    SankeyNodeAlignment,
-    (node: d3SankeyNode<object, object>, n: number) => number
-  > = {
-    [SankeyNodeAlignment.left]: d3SankeyLeft,
-    [SankeyNodeAlignment.right]: d3SankeyRight,
-    [SankeyNodeAlignment.center]: d3SankeyCenter,
-    [SankeyNodeAlignment.justify]: d3SankeyJustify,
-  };
+  // Get alignment function
   const nodeAlign = alignmentsMap[nodeAlignment];
 
   // Construct and configure a Sankey generator
diff --git a/packages/mermaid/src/docs/.vitepress/config.ts b/packages/mermaid/src/docs/.vitepress/config.ts
index 8fceb810b..2b2914ca3 100644
--- a/packages/mermaid/src/docs/.vitepress/config.ts
+++ b/packages/mermaid/src/docs/.vitepress/config.ts
@@ -138,6 +138,7 @@ function sidebarSyntax() {
         { text: 'Mindmaps 🔥', link: '/syntax/mindmap' },
         { text: 'Timeline 🔥', link: '/syntax/timeline' },
         { text: 'Zenuml 🔥', link: '/syntax/zenuml' },
+        { text: 'Sankey 🔥', link: '/syntax/sankey' },
         { text: 'Other Examples', link: '/syntax/examples' },
       ],
     },

From 95a436595ee6e18900cedd980ccde80d4b47de92 Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Thu, 29 Jun 2023 16:44:33 +0300
Subject: [PATCH 114/187] Let it be as it was in dev branch

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

diff --git a/packages/mermaid/src/docs/package.json b/packages/mermaid/src/docs/package.json
index 34be89bd2..f24f9f4bc 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": "pnpm prefetch && vitepress --port 3333 --host",
+    "dev": "vitepress --port 3333 --open",
     "build": "pnpm prefetch && vitepress build",
     "build-no-prefetch": "vitepress build",
     "serve": "vitepress serve",

From e24dce10a293571f57618677ec90956e8a2e2731 Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Thu, 29 Jun 2023 19:51:46 +0300
Subject: [PATCH 115/187] Added sankey documentation

---
 packages/mermaid/src/docs/syntax/sankey.md | 253 ++++++++++++++-------
 run                                        |   4 +-
 2 files changed, 168 insertions(+), 89 deletions(-)

diff --git a/packages/mermaid/src/docs/syntax/sankey.md b/packages/mermaid/src/docs/syntax/sankey.md
index a6aa8e5a9..66c8a742f 100644
--- a/packages/mermaid/src/docs/syntax/sankey.md
+++ b/packages/mermaid/src/docs/syntax/sankey.md
@@ -1,87 +1,16 @@
 # Sankey diagrams
 
 > A sankey diagram is a visualization used to depict a flow from one set of values to another.
-> This is an experimental diagram. Its syntax are very close to plain CSV, but highly likely
-> to be extended in the nearest future.
+
+::: warning
+This is an experimental diagram. Its syntax are very close to plain CSV, but it is to be extended in the nearest future.
+:::
 
 The things being connected are called nodes and the connections are called links.
 
 ## Example
 
-Code:
-
-```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
-```
+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
@@ -156,29 +85,177 @@ Wave,Electricity grid,19.013
 Wind,Electricity grid,289.366
 ```
 
-## Syntax
-
-The idea behind it is that a user types `sankey-beta` first, then pastes raw CSV below and get the result.
-
-It is implemented according CSV standard as [described here](https://www.ietf.org/rfc/rfc4180.txt) with subtle differences:
-
-- CSV must contain 3 columns only
-- It is allowed to have empty lines without comma separators for visual purposes
+::: 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
+```
+:::
+
+
+## Syntax
+
+The idea behind syntax is that a user types `sankey-beta` keyword first, then pastes raw CSV below and get the result.
+
+It is implements standard as [described here](https://www.ietf.org/rfc/rfc4180.txt) with subtle **differences**:
+
+- CSV must contain **3 columns only**
+- It is **allowed** to have **empty lines** without comma separators for visual purposes
+
+### Empty lines
+
+CSV does not support empty lines (without comma delimeters) by default. But you can add them if needed.
+
+```mermaid-example
+sankey-beta
+
+Bio-conversion,Liquid,0.597
+Bio-conversion,Losses,26.862
+
 Bio-conversion,Solid,280.322
 Bio-conversion,Gas,81.144
 ```
 
-If you need your title to have a comma, wrap it in double quotes
+```mermaid
+sankey-beta
 
+Bio-conversion,Liquid,0.597
+Bio-conversion,Losses,26.862
 
-"Hello, Mister Anderson"
+Bio-conversion,Solid,280.322
+Bio-conversion,Gas,81.144
+```
 
+### Commas
+
+If you need to have a comma, wrap it in double quotes:
+
+```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:
+
+```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
+```
+
+### Coloring and Фlignment
+
+You can change graph layout by setting `nodeAlignment` to:
+
+* `justify`
+* `center`
+* `left`
+* `right`
+
+And adjust coloring of the links by setting `linkColor` to one of those:
+
+* `source`
+* `target`
+* `gradient`
+* hex code of color, like `#a1a1a1`
+
+```html
+  <script>
+    const config = {
+      startOnLoad: true,
+      securityLevel: "loose",
+      sankey: {
+        linkColor: "source",
+        nodeAlignment: "left"
+      }
+    };
+    mermaid.initialize(config);
+  </script>
+```
\ No newline at end of file
diff --git a/run b/run
index ecc6bb02b..88af16418 100755
--- a/run
+++ b/run
@@ -24,6 +24,8 @@ $RUN --service-ports mermaid sh -c "cd packages/mermaid/src/docs && npx pnpm pre
 ;;
 
 help)
+
+# Alignment of help message must be as it is, it will be nice looking when printed
 usage=$(
 cat <<EOF
 Run commands within docker containers.
@@ -48,7 +50,7 @@ Examples of frequiently used commands:
 
 $name pnpm add                # Add package, 'run add d3-sankey'
 $name pnpm prettier --write   # Prettify a file 'run prettier <path-to-file>'
-                              #   git diff --name-only develop | xargs run pnpm prettier --write
+                            #   git diff --name-only develop | xargs run pnpm prettier --write
 $name pnpm test               # Run unit tests
 $name pnpm vitest             # Run watcher for unit tests
 $name pnpm e2e                # Run integration tests

From 9177350a390e2cc06910580e42a0afd1fbe15887 Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Thu, 29 Jun 2023 20:16:25 +0300
Subject: [PATCH 116/187] Fixed double quotes, docs, demo and added more
 examples to run script

---
 demos/sankey.html                             | 50 +++++++++++++++----
 .../src/diagrams/sankey/parser/energy.csv     |  2 +-
 .../src/diagrams/sankey/parser/sankey.jison   |  4 +-
 packages/mermaid/src/docs/syntax/sankey.md    |  2 +-
 run                                           | 17 ++++---
 5 files changed, 56 insertions(+), 19 deletions(-)

diff --git a/demos/sankey.html b/demos/sankey.html
index 72ca84e44..22e34cad3 100644
--- a/demos/sankey.html
+++ b/demos/sankey.html
@@ -18,20 +18,48 @@
     <h2>Energy flow</h2>
     <pre class="mermaid">
       sankey-beta
-      
-      Agricultural 'waste',Bio-conversion,124.729
+
+      %% There are leading and trailing spaces, do not crop
+          Agricultural 'waste',Bio-conversion,124.729   
+      %% line with a comment
+
+      %% Normal line
       Bio-conversion,Liquid,0.597
+
+      %% Line with unquoted sankey keyword
+      sankey,target,10
+
+      %% Quoted sankey keyword
+      "sankey",target,10
+
+      %% Another normal line
       Bio-conversion,Losses,26.862
-      Bio-conversion,Solid,280.322
+
+      %% Line with integer amount
+      Bio-conversion,Solid,280
+
+      %% Some blank lines in the middle of CSV
+
+
+      %% Another normal line
       Bio-conversion,Gas,81.144
-      Biofuel imports,Liquid,35
-      Biomass imports,Solid,35
+
+      %% Quoted line
+      "Biofuel imports",Liquid,35
+
+      %% Quoted line with escaped quotes inside
+      """Biomass imports""",Solid,35
+
+      %% Lines containing commas inside
+      %% Quoted and unquoted values should be equal in terms of graph
+      "District heating","Heating and cooling, commercial",22.505
+      District heating,"Heating and cooling, homes",46.184
+
+      %% A bunch of lines, normal CSV
       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
@@ -85,8 +113,12 @@
       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
+      """Wave""",Electricity grid,19.013
+      """Wind""",Electricity grid,289.366
+
+      %% lines at the end, do not remove
+
+
     </pre>
 
     <script type="module">
diff --git a/packages/mermaid/src/diagrams/sankey/parser/energy.csv b/packages/mermaid/src/diagrams/sankey/parser/energy.csv
index 8b8182252..d9a8fac9a 100644
--- a/packages/mermaid/src/diagrams/sankey/parser/energy.csv
+++ b/packages/mermaid/src/diagrams/sankey/parser/energy.csv
@@ -93,7 +93,7 @@ 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
+"""Wind""",Electricity grid,289.366
 
 %% lines at the end, do not remove
 
diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
index b0d994eb3..b11f8a87b 100644
--- a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
+++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
@@ -50,8 +50,8 @@ opt_eof: EOF | ;
 
 record
   : field\[source] COMMA field\[target] COMMA field\[value] {
-      const source = yy.findOrCreateNode($source.trim());
-      const target = yy.findOrCreateNode($target.trim());
+      const source = yy.findOrCreateNode($source.trim().replaceAll('""', '"'));
+      const target = yy.findOrCreateNode($target.trim().replaceAll('""', '"'));
       const value = parseFloat($value.trim());
       yy.addLink(source,target,value);
     } // parse only 3 fields, this is not part of CSV standard
diff --git a/packages/mermaid/src/docs/syntax/sankey.md b/packages/mermaid/src/docs/syntax/sankey.md
index 66c8a742f..89c5ce742 100644
--- a/packages/mermaid/src/docs/syntax/sankey.md
+++ b/packages/mermaid/src/docs/syntax/sankey.md
@@ -230,7 +230,7 @@ Pumped heat,"Heating and cooling ""homes""",193.026
 Pumped heat,"Heating and cooling, ""commercial""",70.672
 ```
 
-### Coloring and Фlignment
+### Coloring and Alignment
 
 You can change graph layout by setting `nodeAlignment` to:
 
diff --git a/run b/run
index 88af16418..3509be7a7 100755
--- a/run
+++ b/run
@@ -28,13 +28,18 @@ help)
 # Alignment of help message must be as it is, it will be nice looking when printed
 usage=$(
 cat <<EOF
-Run commands within docker containers.
 
-Development quick start guide:
+Welcome to Mermaid Local Docker Development
+Script for runnign commands within docker containers.
+__________________________________________________________________________________________
+
+\033[1mDevelopment quick start guide\033[0m:
 
 \033[1m$name pnpm install\033[0m            # Install packages
 \033[1m$name dev\033[0m                     # Run dev server with examples, open http://localhost:9000
-\033[1m$name docs:dev\033[0m                # For docs contributions, open http://localhost:3333
+\033[1m$name pnpm build\033[0m              # Prepare it for production
+\033[1m$name docs:dev\033[0m                # Then add documentation, open http://localhost:3333
+__________________________________________________________________________________________
 
 Commands:
 
@@ -45,16 +50,16 @@ $name docs:dev                # For docs contributions, open http://localhost:33
 $name sh                      # Open 'sh' inside docker container for development
 
 $name help                    # Show this help
+__________________________________________________________________________________________
 
 Examples of frequiently used commands:
 
 $name pnpm add                # Add package, 'run add d3-sankey'
-$name pnpm prettier --write   # Prettify a file 'run prettier <path-to-file>'
-                            #   git diff --name-only develop | xargs run pnpm prettier --write
+$name pnpm prettier --write   # Prettify a file 'run prettier <path-to-file>', e.g.:
+                            #   'git diff --name-only develop | xargs run pnpm prettier --write'
 $name pnpm test               # Run unit tests
 $name pnpm vitest             # Run watcher for unit tests
 $name pnpm e2e                # Run integration tests
-$name pnpm -w run lint:fix
 EOF
 )
 

From 06cb0c3be99e33b2e558bd45b79e8a6688718657 Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Thu, 29 Jun 2023 20:22:06 +0300
Subject: [PATCH 117/187] Fixed package json

---
 package.json                               | 2 --
 packages/mermaid/package.json              | 1 +
 packages/mermaid/src/docs/syntax/sankey.md | 2 ++
 pnpm-lock.yaml                             | 9 +++------
 4 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 370abca59..e6bd516a9 100644
--- a/package.json
+++ b/package.json
@@ -67,8 +67,6 @@
     "@cypress/code-coverage": "^3.10.7",
     "@rollup/plugin-typescript": "^11.1.1",
     "@types/cors": "^2.8.13",
-    "@types/d3": "^7.4.0",
-    "@types/d3-sankey": "^0.12.1",
     "@types/eslint": "^8.37.0",
     "@types/express": "^4.17.17",
     "@types/js-yaml": "^4.0.5",
diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index 142efcfcc..6f2b62e29 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -76,6 +76,7 @@
   "devDependencies": {
     "@types/cytoscape": "^3.19.9",
     "@types/d3": "^7.4.0",
+    "@types/d3-sankey": "^0.12.1",
     "@types/d3-selection": "^3.0.5",
     "@types/dompurify": "^3.0.2",
     "@types/jsdom": "^21.1.1",
diff --git a/packages/mermaid/src/docs/syntax/sankey.md b/packages/mermaid/src/docs/syntax/sankey.md
index 89c5ce742..8b13556a2 100644
--- a/packages/mermaid/src/docs/syntax/sankey.md
+++ b/packages/mermaid/src/docs/syntax/sankey.md
@@ -230,6 +230,8 @@ Pumped heat,"Heating and cooling ""homes""",193.026
 Pumped heat,"Heating and cooling, ""commercial""",70.672
 ```
 
+## Configuration
+
 ### Coloring and Alignment
 
 You can change graph layout by setting `nodeAlignment` to:
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0bb56ebf3..24aa820e6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -25,12 +25,6 @@ importers:
       '@types/cors':
         specifier: ^2.8.13
         version: 2.8.13
-      '@types/d3':
-        specifier: ^7.4.0
-        version: 7.4.0
-      '@types/d3-sankey':
-        specifier: ^0.12.1
-        version: 0.12.1
       '@types/eslint':
         specifier: ^8.37.0
         version: 8.37.0
@@ -260,6 +254,9 @@ importers:
       '@types/d3':
         specifier: ^7.4.0
         version: 7.4.0
+      '@types/d3-sankey':
+        specifier: ^0.12.1
+        version: 0.12.1
       '@types/d3-selection':
         specifier: ^3.0.5
         version: 3.0.5

From b2f6858ff714bec302774be4a7dc42ae0c6f935c Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Thu, 29 Jun 2023 20:23:10 +0300
Subject: [PATCH 118/187] Prettier

---
 .../.vitepress/scripts/fetch-contributors.ts  |  4 +-
 packages/mermaid/src/docs/syntax/sankey.md    | 43 ++++++++++---------
 2 files changed, 25 insertions(+), 22 deletions(-)

diff --git a/packages/mermaid/src/docs/.vitepress/scripts/fetch-contributors.ts b/packages/mermaid/src/docs/.vitepress/scripts/fetch-contributors.ts
index a29ef3324..a810fc30f 100644
--- a/packages/mermaid/src/docs/.vitepress/scripts/fetch-contributors.ts
+++ b/packages/mermaid/src/docs/.vitepress/scripts/fetch-contributors.ts
@@ -28,7 +28,9 @@ async function fetchContributors() {
       console.log(`Fetched page ${page}`);
       page++;
     } while (data.length === 100);
-  } catch (e) { /* contributors fetching failure must not hinder docs development */ }
+  } catch (e) {
+    /* contributors fetching failure must not hinder docs development */
+  }
   return collaborators.filter((name) => !name.includes('[bot]'));
 }
 
diff --git a/packages/mermaid/src/docs/syntax/sankey.md b/packages/mermaid/src/docs/syntax/sankey.md
index 8b13556a2..97806d725 100644
--- a/packages/mermaid/src/docs/syntax/sankey.md
+++ b/packages/mermaid/src/docs/syntax/sankey.md
@@ -159,8 +159,8 @@ UK land based bioenergy,Bio-conversion,182.01
 Wave,Electricity grid,19.013
 Wind,Electricity grid,289.366
 ```
-:::
 
+:::
 
 ## Syntax
 
@@ -214,6 +214,7 @@ Pumped heat,"Heating and cooling, commercial",70.672
 ```
 
 ### Double quotes
+
 If you need to have double quote, put a pair of them:
 
 ```mermaid-example
@@ -236,28 +237,28 @@ Pumped heat,"Heating and cooling, ""commercial""",70.672
 
 You can change graph layout by setting `nodeAlignment` to:
 
-* `justify`
-* `center`
-* `left`
-* `right`
+- `justify`
+- `center`
+- `left`
+- `right`
 
 And adjust coloring of the links by setting `linkColor` to one of those:
 
-* `source`
-* `target`
-* `gradient`
-* hex code of color, like `#a1a1a1`
+- `source`
+- `target`
+- `gradient`
+- hex code of color, like `#a1a1a1`
 
 ```html
-  <script>
-    const config = {
-      startOnLoad: true,
-      securityLevel: "loose",
-      sankey: {
-        linkColor: "source",
-        nodeAlignment: "left"
-      }
-    };
-    mermaid.initialize(config);
-  </script>
-```
\ No newline at end of file
+<script>
+  const config = {
+    startOnLoad: true,
+    securityLevel: 'loose',
+    sankey: {
+      linkColor: 'source',
+      nodeAlignment: 'left',
+    },
+  };
+  mermaid.initialize(config);
+</script>
+```

From 36df7260cc73e53e28d06768dfd8e2c2bebf8d39 Mon Sep 17 00:00:00 2001
From: nirname <nirname@users.noreply.github.com>
Date: Thu, 29 Jun 2023 17:32:39 +0000
Subject: [PATCH 119/187] Update docs

---
 docs/syntax/sankey.md | 464 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 464 insertions(+)
 create mode 100644 docs/syntax/sankey.md

diff --git a/docs/syntax/sankey.md b/docs/syntax/sankey.md
new file mode 100644
index 000000000..2eaf9b8cc
--- /dev/null
+++ b/docs/syntax/sankey.md
@@ -0,0 +1,464 @@
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/sankey.md](../../packages/mermaid/src/docs/syntax/sankey.md).
+
+# Sankey diagrams
+
+> A sankey diagram is a visualization used to depict a flow from one set of values to another.
+
+::: warning
+This is an experimental diagram. Its syntax are very close to plain CSV, but it is to be extended in the nearest future.
+:::
+
+The things being connected are called nodes and the connections are called links.
+
+## Example
+
+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-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
+```
+
+::: 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.
+
+It is implements standard as [described here](https://www.ietf.org/rfc/rfc4180.txt) with subtle **differences**:
+
+- CSV must contain **3 columns only**
+- It is **allowed** to have **empty lines** without comma separators for visual purposes
+
+### Empty lines
+
+CSV does not support empty lines (without comma delimeters) by default. But you can add them if needed.
+
+```mermaid-example
+sankey-beta
+
+Bio-conversion,Liquid,0.597
+Bio-conversion,Losses,26.862
+
+Bio-conversion,Solid,280.322
+Bio-conversion,Gas,81.144
+```
+
+```mermaid
+sankey-beta
+
+Bio-conversion,Liquid,0.597
+Bio-conversion,Losses,26.862
+
+Bio-conversion,Solid,280.322
+Bio-conversion,Gas,81.144
+```
+
+```mermaid-example
+sankey-beta
+
+Bio-conversion,Liquid,0.597
+Bio-conversion,Losses,26.862
+
+Bio-conversion,Solid,280.322
+Bio-conversion,Gas,81.144
+```
+
+```mermaid
+sankey-beta
+
+Bio-conversion,Liquid,0.597
+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:
+
+```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
+```
+
+```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:
+
+```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
+```
+
+```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
+
+### Coloring and Alignment
+
+You can change graph layout by setting `nodeAlignment` to:
+
+- `justify`
+- `center`
+- `left`
+- `right`
+
+And adjust coloring of the links by setting `linkColor` to one of those:
+
+- `source`
+- `target`
+- `gradient`
+- hex code of color, like `#a1a1a1`
+
+```html
+<script>
+  const config = {
+    startOnLoad: true,
+    securityLevel: 'loose',
+    sankey: {
+      linkColor: 'source',
+      nodeAlignment: 'left',
+    },
+  };
+  mermaid.initialize(config);
+</script>
+```

From 163a4b819b3402f17babffa2c73e3eadb1ba5ef8 Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Thu, 29 Jun 2023 21:00:41 +0300
Subject: [PATCH 120/187] Trigger build in GA


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 121/187] 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 a1dfc3dac994525fd06b6452759c24c3e5e0dc5f Mon Sep 17 00:00:00 2001
From: Pascal Knecht <pascal@addere.ch>
Date: Fri, 30 Jun 2023 11:59:40 +0200
Subject: [PATCH 122/187] Fix Typo

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

diff --git a/packages/mermaid/src/docs/syntax/stateDiagram.md b/packages/mermaid/src/docs/syntax/stateDiagram.md
index 248146993..f35796b13 100644
--- a/packages/mermaid/src/docs/syntax/stateDiagram.md
+++ b/packages/mermaid/src/docs/syntax/stateDiagram.md
@@ -304,7 +304,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 453b337e6e0e6f02357293764c27c29c236fe848 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Fri, 30 Jun 2023 13:10:22 +0200
Subject: [PATCH 123/187] Updated mermaid version to 10.2.4

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

diff --git a/package.json b/package.json
index e6bd516a9..738d1796a 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "mermaid-monorepo",
   "private": true,
-  "version": "10.2.3",
+  "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",
diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index 8e7e9696d..033359ee0 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "10.2.3",
+  "version": "10.2.4",
   "description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "type": "module",
   "module": "./dist/mermaid.core.mjs",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1a316dd7f..10daa4cb6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,9 +1,5 @@
 lockfileVersion: '6.0'
 
-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false
-
 importers:
 
   .:
@@ -451,31 +447,6 @@ importers:
         specifier: ^7.0.0
         version: 7.0.0
 
-  packages/mermaid/src/vitepress:
-    dependencies:
-      '@vueuse/core':
-        specifier: ^10.1.0
-        version: 10.1.0(vue@3.2.47)
-      vue:
-        specifier: ^3.2.47
-        version: 3.2.47
-    devDependencies:
-      pathe:
-        specifier: ^1.1.0
-        version: 1.1.0
-      unocss:
-        specifier: ^0.53.0
-        version: 0.53.0(postcss@8.4.23)(vite@4.3.9)
-      unplugin-vue-components:
-        specifier: ^0.25.0
-        version: 0.25.0(rollup@2.79.1)(vue@3.2.47)
-      vite:
-        specifier: ^4.3.3
-        version: 4.3.9(@types/node@18.16.0)
-      vitepress:
-        specifier: 1.0.0-beta.2
-        version: 1.0.0-beta.2(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0)
-
   tests/webpack:
     dependencies:
       '@mermaid-js/mermaid-example-diagram':
@@ -4685,17 +4656,6 @@ packages:
       - vite
     dev: true
 
-  /@unocss/astro@0.53.0(vite@4.3.9):
-    resolution: {integrity: sha512-8bR7ysIMZEOpcjd/cVmogcABSFDYPjUqMnbflv44p1A2/deemo9CIkpRARoq/96NQuzWJsKhKodcQodExZcqiA==}
-    dependencies:
-      '@unocss/core': 0.53.0
-      '@unocss/reset': 0.53.0
-      '@unocss/vite': 0.53.0(vite@4.3.9)
-    transitivePeerDependencies:
-      - rollup
-      - vite
-    dev: true
-
   /@unocss/cli@0.53.0(rollup@2.79.1):
     resolution: {integrity: sha512-9WNBHy8m8tMqwcp7mUhebRUBvHQfbx01CMe5cAFLmUYtJULM+8IjJxqERkaAZyyoOXf1TNO2v1dFAmCwhMRCLQ==}
     engines: {node: '>=14'}
@@ -4874,26 +4834,6 @@ packages:
       - rollup
     dev: true
 
-  /@unocss/vite@0.53.0(vite@4.3.9):
-    resolution: {integrity: sha512-JoZhKVNruRjfySMVg/zNJbLEn/NTXj29Wf0SN4++xnGKrSapkPzYC46psL5bm5N5v4SHdpepTCoonC3FWCY6Fw==}
-    peerDependencies:
-      vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0
-    dependencies:
-      '@ampproject/remapping': 2.2.1
-      '@rollup/pluginutils': 5.0.2(rollup@2.79.1)
-      '@unocss/config': 0.53.0
-      '@unocss/core': 0.53.0
-      '@unocss/inspector': 0.53.0
-      '@unocss/scope': 0.53.0
-      '@unocss/transformer-directives': 0.53.0
-      chokidar: 3.5.3
-      fast-glob: 3.2.12
-      magic-string: 0.30.0
-      vite: 4.3.9(@types/node@18.16.0)
-    transitivePeerDependencies:
-      - rollup
-    dev: true
-
   /@vite-pwa/vitepress@0.2.0(vite-plugin-pwa@0.16.0):
     resolution: {integrity: sha512-dVQVaP6NB9woCFe4UASUqRp7uwBQJOVXlJlqK4krqXcbb3NuXIXIWOnU7HLpJnHqZj5U/81gKtLN6gs5gJBwiQ==}
     peerDependencies:
@@ -14636,42 +14576,6 @@ packages:
       - vite
     dev: true
 
-  /unocss@0.53.0(postcss@8.4.23)(vite@4.3.9):
-    resolution: {integrity: sha512-kY4h5ERiDYlSnL2X+hbDfh+uaF7QNouy7j51GOTUr3Q0aaWehaNd05b15SjHrab559dEC0mYfrSEdh/DnCK1cw==}
-    engines: {node: '>=14'}
-    peerDependencies:
-      '@unocss/webpack': 0.53.0
-    peerDependenciesMeta:
-      '@unocss/webpack':
-        optional: true
-    dependencies:
-      '@unocss/astro': 0.53.0(vite@4.3.9)
-      '@unocss/cli': 0.53.0(rollup@2.79.1)
-      '@unocss/core': 0.53.0
-      '@unocss/extractor-arbitrary-variants': 0.53.0
-      '@unocss/postcss': 0.53.0(postcss@8.4.23)
-      '@unocss/preset-attributify': 0.53.0
-      '@unocss/preset-icons': 0.53.0
-      '@unocss/preset-mini': 0.53.0
-      '@unocss/preset-tagify': 0.53.0
-      '@unocss/preset-typography': 0.53.0
-      '@unocss/preset-uno': 0.53.0
-      '@unocss/preset-web-fonts': 0.53.0
-      '@unocss/preset-wind': 0.53.0
-      '@unocss/reset': 0.53.0
-      '@unocss/transformer-attributify-jsx': 0.53.0
-      '@unocss/transformer-attributify-jsx-babel': 0.53.0
-      '@unocss/transformer-compile-class': 0.53.0
-      '@unocss/transformer-directives': 0.53.0
-      '@unocss/transformer-variant-group': 0.53.0
-      '@unocss/vite': 0.53.0(vite@4.3.9)
-    transitivePeerDependencies:
-      - postcss
-      - rollup
-      - supports-color
-      - vite
-    dev: true
-
   /unpipe@1.0.0:
     resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
     engines: {node: '>= 0.8'}
@@ -15041,49 +14945,6 @@ packages:
       - terser
     dev: true
 
-  /vitepress@1.0.0-beta.2(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0):
-    resolution: {integrity: sha512-DBXYjtYbm3W1IPPJ2TiCaK/XK+o/2XmL2+jslOGKm+txcbmG0kbeB+vadC5tCUZA9NdA+9Ywj3M4548c7t/SDg==}
-    hasBin: true
-    dependencies:
-      '@docsearch/css': 3.5.1
-      '@docsearch/js': 3.5.1(@algolia/client-search@4.14.2)(search-insights@2.6.0)
-      '@vitejs/plugin-vue': 4.2.3(vite@4.3.9)(vue@3.3.4)
-      '@vue/devtools-api': 6.5.0
-      '@vueuse/core': 10.1.2(vue@3.3.4)
-      '@vueuse/integrations': 10.1.2(focus-trap@7.4.3)(vue@3.3.4)
-      body-scroll-lock: 4.0.0-beta.0
-      focus-trap: 7.4.3
-      mark.js: 8.11.1
-      minisearch: 6.1.0
-      shiki: 0.14.2
-      vite: 4.3.9(@types/node@18.16.0)
-      vue: 3.3.4
-    transitivePeerDependencies:
-      - '@algolia/client-search'
-      - '@types/node'
-      - '@types/react'
-      - '@vue/composition-api'
-      - async-validator
-      - axios
-      - change-case
-      - drauu
-      - fuse.js
-      - idb-keyval
-      - jwt-decode
-      - less
-      - nprogress
-      - qrcode
-      - react
-      - react-dom
-      - sass
-      - search-insights
-      - sortablejs
-      - stylus
-      - sugarss
-      - terser
-      - universal-cookie
-    dev: true
-
   /vitepress@1.0.0-beta.3(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0):
     resolution: {integrity: sha512-GR5Pvr/o343NN1M4Na1shhDYZRrQbjmLq7WE0lla0H8iDPAsHE8agTHLWfu3FWx+3q2KA29sv16+0O9RQKGjlA==}
     hasBin: true
@@ -16045,3 +15906,7 @@ packages:
   /zwitch@2.0.2:
     resolution: {integrity: sha512-JZxotl7SxAJH0j7dN4pxsTV6ZLXoLdGME+PsjkL/DaBrVryK9kTGq06GfKrwcSOqypP+fdXGoCHE36b99fWVoA==}
     dev: true
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false

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 124/187] 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 959a773b6409f67ab2958a4b73b2ac541ad59495 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Sat, 1 Jul 2023 00:28:37 +0530
Subject: [PATCH 125/187] Add threshold

---
 codecov.yaml | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/codecov.yaml b/codecov.yaml
index b268d6680..91ae0771b 100644
--- a/codecov.yaml
+++ b/codecov.yaml
@@ -4,3 +4,9 @@ comment:
   require_changes: false # if true: only post the comment if coverage changes
   require_base: no # [yes :: must have a base report to post]
   require_head: yes # [yes :: must have a head report to post]
+
+coverage:
+  status:
+    project:
+      default:
+        threshold: 1%

From 04d79b16c3ebd647d0247f55cfc921ee5feb0b45 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Sat, 1 Jul 2023 00:30:27 +0530
Subject: [PATCH 126/187] Fix 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 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 127/187] 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 64f5d344657ae0ac3bdf62e45616243b99fb9341 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Sat, 1 Jul 2023 00:30:27 +0530
Subject: [PATCH 128/187] Fix 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 b90c8402cb617380c773df0d270a919dda0b6ee8 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Sat, 1 Jul 2023 00:38:10 +0530
Subject: [PATCH 129/187] Set default branch in codecov

---
 codecov.yaml | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/codecov.yaml b/codecov.yaml
index 91ae0771b..d33925afc 100644
--- a/codecov.yaml
+++ b/codecov.yaml
@@ -1,3 +1,6 @@
+codecov:
+  branch: develop
+
 comment:
   layout: 'reach, diff, flags, files'
   behavior: default

From ae4d81cdfdff748408bfd04d1eb382f8698d402a Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Sat, 1 Jul 2023 00:39:01 +0530
Subject: [PATCH 130/187] move codecov

---
 codecov.yaml => .github/codecov.yaml | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename codecov.yaml => .github/codecov.yaml (100%)

diff --git a/codecov.yaml b/.github/codecov.yaml
similarity index 100%
rename from codecov.yaml
rename to .github/codecov.yaml

From a62719826a3a125e005be5e2749906275c84cb64 Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Sat, 1 Jul 2023 16:17:25 +0300
Subject: [PATCH 131/187] Docker+Cypress, better run, removed unused syntax

Added cypress container (from their official image),
may be reconsidered later to choose our own
The only minor problem is node JS version mistmatch
package.json 18.16.0
docker-compose mermaid 18.16.1
docker-compose cypress 18.16.0

Host option in cypress docker container must be removed
in favor of possible configuration option.
http://localhost:9000 are currently hard-coded, that is bad

Updated ./run script with better documentation
and added some styles too it as well

Started sankey.spec.js as an example
---
 cypress/integration/rendering/sankey.spec.js  |  12 ++
 docker-compose.yml                            |  15 +++
 .../diagrams/sankey/parser/sankey-arrow.jison | 105 ------------------
 .../sankey/parser/sankey-arrow.spec.js        | 101 -----------------
 run                                           |  59 ++++++----
 5 files changed, 65 insertions(+), 227 deletions(-)
 delete mode 100644 packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.jison
 delete mode 100644 packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.spec.js

diff --git a/cypress/integration/rendering/sankey.spec.js b/cypress/integration/rendering/sankey.spec.js
index eb25edf0f..f411f6819 100644
--- a/cypress/integration/rendering/sankey.spec.js
+++ b/cypress/integration/rendering/sankey.spec.js
@@ -11,4 +11,16 @@ describe('Sankey Diagram', () => {
       {}
     );
   });
+
+  describe('Changes link color', function () {
+    beforeAll(() => {
+      let conf = {
+        sankey: {
+          linkColor: 'source',
+        }
+      };
+  
+      mermaidAPI.initialize(conf);
+    });
+  });
 });
diff --git a/docker-compose.yml b/docker-compose.yml
index 49fe0f3e8..8a60d829b 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -16,6 +16,21 @@ services:
     ports:
       - 9000:9000
       - 3333:3333
+  cypress:
+    image: cypress/base:18.16.0
+    stdin_open: true
+    tty: true
+    working_dir: /mermaid
+    mem_limit: '2G'
+    environment:
+      - NODE_OPTIONS=--max_old_space_size=2048
+    volumes:
+      - ./:/mermaid
+      - root_cache:/root/.cache
+      - root_local:/root/.local
+      - root_npm:/root/.npm
+    network_mode: host
+
 volumes:
   root_cache:
   root_local:
diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.jison b/packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.jison
deleted file mode 100644
index 181953d95..000000000
--- a/packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.jison
+++ /dev/null
@@ -1,105 +0,0 @@
-/** mermaid */
-%lex
-TOKEN \w+
-NUM \d+(.\d+)?
-
-%options case-insensitive
-%options easy_keword_rules
-
-%s link_value
-
-%x attributes
-%x attr_value
-%x string
-
-%%
-//--------------------------------------------------------------
-// skip all whitespace EXCEPT newlines, but not within a string
-//--------------------------------------------------------------
-
-<INITIAL,link_value,attributes,attr_value>[^\S\r\n]+   {}
-
-//--------------
-// basic tokens
-//--------------
-
-(<<EOF>>|[\n;])+                            { return 'EOS'; } // end of statement is semicolon ; new line \n or end of file
-"sankey-beta"                               { return 'SANKEY'; }
-<INITIAL>{TOKEN}                            { return 'NODE_ID'; }
-<link_value>{NUM}                           { return 'AMOUNT'; }
-"->"                                        {
-                                              if(this.topState()!=='link_value') this.pushState('link_value');
-                                              else this.popState();
-                                              return 'ARROW';
-                                            }
-//------------
-// attributes
-//------------
-
-"["                                         { this.pushState('attributes'); return 'OPEN_ATTRIBUTES'; }
-<attributes>"]"                             { this.popState(); return 'CLOSE_ATTRIBUTES'; }
-<attributes>{TOKEN}                         { return 'ATTRIBUTE'; }
-<attributes>\=                              { this.pushState('attr_value'); return 'EQUAL'; }
-<attr_value>{TOKEN}                         { this.popState(); return 'VALUE'; }
-
-//------------
-// strings
-//------------
-
-<INITIAL,attributes,attr_value>\"           { this.pushState('string'); return 'OPEN_STRING'; }
-<string>(?!\\)\"                            {
-                                              if(this.topState()==='string') this.popState();
-                                              if(this.topState()==='attr_value') this.popState();
-                                              return 'CLOSE_STRING';
-                                            }
-<string>([^"\\]|\\\"|\\\\)+                 { return 'STRING'; }
-
-/lex
-
-%start start
-%left ARROW
-
-%% // language grammar
-
-start
-  : EOS SANKEY document
-  | SANKEY document
-  ;
-
-document
-  : line document
-  |
-  ;
-
-line
-  : node optional_attributes EOS
-  | stream optional_attributes EOS
-  | EOS
-  ;
-
-optional_attributes: OPEN_ATTRIBUTES attributes CLOSE_ATTRIBUTES | ;
-
-attributes: attribute attributes | ;
-attribute: ATTRIBUTE EQUAL value | ATTRIBUTE;
-
-value: VALUE | OPEN_STRING STRING CLOSE_STRING;
-
-stream
-  : node\[source] ARROW amount ARROW tail\[target] {
-      $$=$source;
-      yy.addLink($source, $target, $amount);
-    }
-  ;
-
-tail
-  : stream { $$ = $stream }
-  | node { $$ = $node; }
-    ;
-
-amount: AMOUNT { $$=parseFloat($AMOUNT); };
-
-node
-  : NODE_ID { $$ = yy.findOrCreateNode($NODE_ID); }
-  | OPEN_STRING STRING\[node_label] CLOSE_STRING { $$ = yy.findOrCreateNode($node_label); }
-  ;
-
diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.spec.js b/packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.spec.js
deleted file mode 100644
index a180b9a28..000000000
--- a/packages/mermaid/src/diagrams/sankey/parser/sankey-arrow.spec.js
+++ /dev/null
@@ -1,101 +0,0 @@
-// @ts-ignore: jison doesn't export types
-import sankey from './sankey-arrow.jison';
-import db from '../sankeyDB.js';
-
-describe('sankey-beta diagram', function () {
-  describe('when parsing an info graph it', function () {
-    beforeEach(function () {
-      sankey.parser.yy = db;
-      sankey.parser.yy.clear();
-    });
-
-    it('recognizes its type', () => {
-      const str = `sankey-beta`;
-
-      sankey.parser.parse(str);
-    });
-
-    it('recognizes one flow', () => {
-      const str = `
-      sankey-beta
-      node_a -> 30 -> node_b -> 20 -> node_c
-      `;
-
-      sankey.parser.parse(str);
-    });
-
-    it('recognizes multiple flows', () => {
-      const str = `
-      sankey-beta
-      node_a -> 30 -> node_b -> 12 -> node_e
-      node_c -> 30 -> node_d -> 12 -> node_e
-      node_c -> 40 -> node_e -> 12 -> node_q
-      `;
-
-      sankey.parser.parse(str);
-    });
-
-    it('parses node as a string', () => {
-      const str = `
-      sankey-beta
-      "node a" -> 30 -> "node b" -> 12 -> "node e"
-      "node c" -> 30 -> "node d" -> 12 -> "node e"
-      "node c" -> 40 -> "node e" -> 12 -> "node q"
-      `;
-
-      sankey.parser.parse(str);
-    });
-
-    describe('while attributes parsing', () => {
-      it('recognized node and attribute ids starting with numbers', () => {
-        const str = `
-        sankey-beta
-        1st -> 200 -> 2nd -> 180 -> 3rd;
-        `;
-
-        sankey.parser.parse(str);
-      });
-
-      it('parses different quotless variations', () => {
-        const str = `
-        sankey-beta
-        node[]
-        
-        node[attr=1]
-        node_a -> 30 -> node_b
-        node[attrWithoutValue]
-        node[attr = 3]
-        node[attr1 = 23413 attr2=1234]
-        node[x1dfqowie attr1 = 23413 attr2]
-        `;
-
-        sankey.parser.parse(str);
-      });
-
-      it('parses strings as values', () => {
-        const str = `
-        sankey-beta
-        node[title="hello, how are you?"]
-        node[title="hello, mister \\"sankey-beta\\", backslash for you \\\\"]
-        `;
-
-        sankey.parser.parse(str);
-      });
-
-      it('parses real example', () => {
-        const str = `
-        sankey-beta
-
-        "Agricultural 'waste'"      ->      124.729  -> "Bio-conversion"
-        "Bio-conversion"            ->      0.597    -> "Liquid"
-        "Bio-conversion"            ->      26.862   -> "Losses"
-        "Bio-conversion"            ->      280.322  -> "Solid"
-        "Bio-conversion"            ->      81.144   -> "Gas"
-        "Biofuel imports"           ->      35       -> "Liquid"
-        `;
-
-        sankey.parser.parse(str);
-      });
-    });
-  });
-});
diff --git a/run b/run
index 3509be7a7..55a0a849e 100755
--- a/run
+++ b/run
@@ -1,6 +1,13 @@
 #!/bin/bash
 RUN="docker-compose run --rm"
 
+ansi()          { echo -e "\e[${1}m${*:2}\e[0m"; }
+bold()          { ansi 1 "$@"; }
+# italic()        { ansi 3 "$@"; }
+underline()     { ansi 4 "$@"; }
+# strikethrough() { ansi 9 "$@"; }
+# red()           { ansi 31 "$@"; }
+
 name=$(basename $0)
 command=$1
 args=${@:2}
@@ -12,7 +19,7 @@ $RUN mermaid sh -c "npx $args"
 ;;
 
 pnpm)
-$RUN mermaid sh -c "npx $command $args"
+$RUN mermaid sh -c "npx pnpm $args"
 ;;
 
 dev)
@@ -23,43 +30,53 @@ docs:dev)
 $RUN --service-ports mermaid sh -c "cd packages/mermaid/src/docs && npx pnpm prefetch && npx vitepress --port 3333 --host"
 ;;
 
+cypress)
+$RUN cypress npm run cypress $args
+;;
+
 help)
 
 # Alignment of help message must be as it is, it will be nice looking when printed
 usage=$(
 cat <<EOF
 
-Welcome to Mermaid Local Docker Development
-Script for runnign commands within docker containers.
+$(bold MERMAID LOCAL DOCKER DEVELOPMENT)
+
+Welcome! Thank you for joining development.
+This is a script for running commands within docker containers at ease.
 __________________________________________________________________________________________
 
-\033[1mDevelopment quick start guide\033[0m:
+Development quick start guide:
 
-\033[1m$name pnpm install\033[0m            # Install packages
-\033[1m$name dev\033[0m                     # Run dev server with examples, open http://localhost:9000
-\033[1m$name pnpm build\033[0m              # Prepare it for production
-\033[1m$name docs:dev\033[0m                # Then add documentation, open http://localhost:3333
+$(bold ./$name pnpm install)                 # Install packages
+$(bold ./$name dev)                          # Run dev server with examples, open http://localhost:9000
+$(bold ./$name pnpm vitest)                  # Run watcher for unit tests
+$(bold ./$name cypress)                      # Run integration tests (after starting dev server)
+$(bold ./$name pnpm build)                   # Prepare it for production
+$(bold ./$name docs:dev)                     # Then add documentation, open http://localhost:3333
 __________________________________________________________________________________________
 
 Commands:
 
-$name pnpm                    # Run any 'pnpm' command
-$name dev                     # Run dev server with examples, open http://localhost:9000
-$name docs:dev                # For docs contributions, open http://localhost:3333
-
-$name sh                      # Open 'sh' inside docker container for development
-
-$name help                    # Show this help
+$(bold ./$name pnpm)                         # Run any 'pnpm' command
+$(bold ./$name dev)                          # Run dev server with examples, open http://localhost:9000
+$(bold ./$name docs:dev)                     # For docs contributions, open http://localhost:3333
+$(bold ./$name cypress)                      # Run integration tests
+$(bold ./$name sh)                           # Open 'sh' inside docker container for development
+$(bold ./$name help)                         # Show this help
 __________________________________________________________________________________________
 
 Examples of frequiently used commands:
 
-$name pnpm add                # Add package, 'run add d3-sankey'
-$name pnpm prettier --write   # Prettify a file 'run prettier <path-to-file>', e.g.:
-                            #   'git diff --name-only develop | xargs run pnpm prettier --write'
-$name pnpm test               # Run unit tests
-$name pnpm vitest             # Run watcher for unit tests
-$name pnpm e2e                # Run integration tests
+$(bold ./$name pnpm add --filter mermaid) $(underline package)
+        Add package to mermaid
+
+$(bold git diff --name-only develop \| xargs ./$name pnpm prettier --write)
+        Prettify everything you added so far
+
+$(bold ./$name cypress run -- --spec cypress/integration/rendering/)$(underline test.ts)
+        Run specific test in cypress\n
+
 EOF
 )
 

From 4570f824f7e6fb37d35ee0667f9c14d7ce870914 Mon Sep 17 00:00:00 2001
From: Ibrahim Wassouf <ib981347@dal.ca>
Date: Sat, 1 Jul 2023 15:45:48 -0300
Subject: [PATCH 132/187] Fix relative link to theme variables list

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

diff --git a/docs/config/theming.md b/docs/config/theming.md
index 580afb488..63271a39b 100644
--- a/docs/config/theming.md
+++ b/docs/config/theming.md
@@ -73,9 +73,9 @@ To make a custom theme, modify `themeVariables` via `init`.
 
 You will need to use the [base](#available-themes) theme as it is the only modifiable theme.
 
-| Parameter      | Description                          | Type   | Properties                                                                                          |
-| -------------- | ------------------------------------ | ------ | --------------------------------------------------------------------------------------------------- |
-| themeVariables | Modifiable with the `init` directive | Object | `primaryColor`, `primaryTextColor`, `lineColor` ([see full list](#theme-variables-reference-table)) |
+| Parameter      | Description                          | Type   | Properties                                                                          |
+| -------------- | ------------------------------------ | ------ | ----------------------------------------------------------------------------------- |
+| themeVariables | Modifiable with the `init` directive | Object | `primaryColor`, `primaryTextColor`, `lineColor` ([see full list](#theme-variables)) |
 
 Example of modifying `themeVariables` using the `init` directive:
 
diff --git a/packages/mermaid/src/docs/config/theming.md b/packages/mermaid/src/docs/config/theming.md
index 0e4571d15..0e0853283 100644
--- a/packages/mermaid/src/docs/config/theming.md
+++ b/packages/mermaid/src/docs/config/theming.md
@@ -55,9 +55,9 @@ To make a custom theme, modify `themeVariables` via `init`.
 
 You will need to use the [base](#available-themes) theme as it is the only modifiable theme.
 
-| Parameter      | Description                          | Type   | Properties                                                                                          |
-| -------------- | ------------------------------------ | ------ | --------------------------------------------------------------------------------------------------- |
-| themeVariables | Modifiable with the `init` directive | Object | `primaryColor`, `primaryTextColor`, `lineColor` ([see full list](#theme-variables-reference-table)) |
+| Parameter      | Description                          | Type   | Properties                                                                          |
+| -------------- | ------------------------------------ | ------ | ----------------------------------------------------------------------------------- |
+| themeVariables | Modifiable with the `init` directive | Object | `primaryColor`, `primaryTextColor`, `lineColor` ([see full list](#theme-variables)) |
 
 Example of modifying `themeVariables` using the `init` directive:
 

From 084b765e9f89abe7171768f9649f0485861fbeee Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Sun, 2 Jul 2023 01:10:06 +0300
Subject: [PATCH 133/187] Added tests for colors and fully setup cypress in
 Docker

---
 cypress/integration/rendering/sankey.spec.js  | 26 ------
 cypress/integration/rendering/sankey.spec.ts  | 85 +++++++++++++++++++
 demos/sankey.html                             | 48 ++---------
 docker-compose.yml                            |  9 +-
 .../src/diagrams/sankey/sankeyRenderer.ts     |  5 +-
 run                                           |  9 +-
 6 files changed, 106 insertions(+), 76 deletions(-)
 delete mode 100644 cypress/integration/rendering/sankey.spec.js
 create mode 100644 cypress/integration/rendering/sankey.spec.ts

diff --git a/cypress/integration/rendering/sankey.spec.js b/cypress/integration/rendering/sankey.spec.js
deleted file mode 100644
index f411f6819..000000000
--- a/cypress/integration/rendering/sankey.spec.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import { imgSnapshotTest } from '../../helpers/util.js';
-
-describe('Sankey Diagram', () => {
-  it('should render a simple example', () => {
-    imgSnapshotTest(
-      `
-      sankey-beta
-      
-      a,b,10
-      `,
-      {}
-    );
-  });
-
-  describe('Changes link color', function () {
-    beforeAll(() => {
-      let conf = {
-        sankey: {
-          linkColor: 'source',
-        }
-      };
-  
-      mermaidAPI.initialize(conf);
-    });
-  });
-});
diff --git a/cypress/integration/rendering/sankey.spec.ts b/cypress/integration/rendering/sankey.spec.ts
new file mode 100644
index 000000000..de10338e8
--- /dev/null
+++ b/cypress/integration/rendering/sankey.spec.ts
@@ -0,0 +1,85 @@
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
+
+describe('Sankey Diagram', () => {
+  it('should render a simple example', () => {
+    imgSnapshotTest(
+      `
+      sankey-beta
+      
+      sourceNode,targetNode,10
+      `,
+      {}
+    );
+  });
+
+  describe('when given a linkColor', function () {
+    it('links should be the same color as source node', () => {
+      renderGraph(
+        `
+        sankey-beta
+        
+        sourceNode,targetNode,10
+        `,
+        {
+          sankey: { linkColor: 'source' },
+        }
+      );
+
+      cy.get('.link path').then((link) => {
+        cy.get('.node[id="node-1"] rect').should(node =>
+          expect(link.attr('stroke')).to.equal(node.attr('fill'))
+        );
+      });
+    });
+
+    it('should change link color to hex code', () => {
+      renderGraph(
+        `
+        sankey-beta
+        a,b,10
+        `,
+        {
+          sankey: { linkColor: '#636465' },
+        }
+      );
+
+      cy.get('.link path').should((link) => {
+        expect(link.attr('stroke')).to.equal('#636465');
+      });
+    });
+
+    it('links should be the same color as target node', () => {
+      renderGraph(
+        `
+        sankey-beta
+        sourceNode,targetNode,10
+        `,
+        {
+          sankey: { linkColor: 'target' },
+        }
+      );
+
+      cy.get('.link path').then((link) => {
+        cy.get('.node[id="node-2"] rect').should(node =>
+          expect(link.attr('stroke')).to.equal(node.attr('fill'))
+        );
+      });
+    });
+
+    it('links must be gradient', () => {
+      renderGraph(
+        `
+        sankey-beta
+        sourceNode,targetNode,10
+        `,
+        {
+          sankey: { linkColor: 'gradient' },
+        }
+      );
+
+      cy.get('.link path').should((link) => {
+        expect(link.attr('stroke')).to.equal('url(#linearGradient-3)');
+      });
+    });
+  });
+});
diff --git a/demos/sankey.html b/demos/sankey.html
index 22e34cad3..c8cdc1e7e 100644
--- a/demos/sankey.html
+++ b/demos/sankey.html
@@ -19,47 +19,19 @@
     <pre class="mermaid">
       sankey-beta
 
-      %% There are leading and trailing spaces, do not crop
-          Agricultural 'waste',Bio-conversion,124.729   
-      %% line with a comment
-
-      %% Normal line
+      Agricultural 'waste',Bio-conversion,124.729
       Bio-conversion,Liquid,0.597
-
-      %% Line with unquoted sankey keyword
-      sankey,target,10
-
-      %% Quoted sankey keyword
-      "sankey",target,10
-
-      %% Another normal line
       Bio-conversion,Losses,26.862
-
-      %% Line with integer amount
-      Bio-conversion,Solid,280
-
-      %% Some blank lines in the middle of CSV
-
-
-      %% Another normal line
+      Bio-conversion,Solid,280.322
       Bio-conversion,Gas,81.144
-
-      %% Quoted line
-      "Biofuel imports",Liquid,35
-
-      %% Quoted line with escaped quotes inside
-      """Biomass imports""",Solid,35
-
-      %% Lines containing commas inside
-      %% Quoted and unquoted values should be equal in terms of graph
-      "District heating","Heating and cooling, commercial",22.505
-      District heating,"Heating and cooling, homes",46.184
-
-      %% A bunch of lines, normal CSV
+      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
@@ -113,12 +85,8 @@
       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
-
-      %% lines at the end, do not remove
-
-
+      Wave,Electricity grid,19.013
+      Wind,Electricity grid,289.366
     </pre>
 
     <script type="module">
diff --git a/docker-compose.yml b/docker-compose.yml
index 8a60d829b..c881d0473 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -17,18 +17,17 @@ services:
       - 9000:9000
       - 3333:3333
   cypress:
-    image: cypress/base:18.16.0
+    image: cypress/included:12.16.0
     stdin_open: true
     tty: true
     working_dir: /mermaid
     mem_limit: '2G'
+    entrypoint: cypress
     environment:
-      - NODE_OPTIONS=--max_old_space_size=2048
+      - DISPLAY
     volumes:
       - ./:/mermaid
-      - root_cache:/root/.cache
-      - root_local:/root/.local
-      - root_npm:/root/.npm
+      - /tmp/.X11-unix:/tmp/.X11-unix
     network_mode: host
 
 volumes:
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
index 780144be0..e6e18f113 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts
@@ -117,6 +117,7 @@ export const draw = function (text: string, id: string, _version: string, diagOb
     .data(graph.nodes)
     .join('g')
     .attr('class', 'node')
+    .attr('id', (d: any) => (d.uid = Uid.next('node-')).id)
     .attr('transform', function (d: any) {
       return 'translate(' + d.x0 + ',' + d.y0 + ')';
     })
@@ -183,10 +184,10 @@ export const draw = function (text: string, id: string, _version: string, diagOb
       coloring = (d: any) => d.uid;
       break;
     case SankeyLinkColor.source:
-      coloring = (d: any) => d.source.id;
+      coloring = (d: any) => colorScheme(d.source.id);
       break;
     case SankeyLinkColor.target:
-      coloring = (d: any) => d.target.id;
+      coloring = (d: any) => colorScheme(d.target.id);
       break;
     default:
       coloring = linkColor;
diff --git a/run b/run
index 55a0a849e..d9f669cab 100755
--- a/run
+++ b/run
@@ -31,7 +31,7 @@ $RUN --service-ports mermaid sh -c "cd packages/mermaid/src/docs && npx pnpm pre
 ;;
 
 cypress)
-$RUN cypress npm run cypress $args
+$RUN cypress $args
 ;;
 
 help)
@@ -42,7 +42,7 @@ cat <<EOF
 
 $(bold MERMAID LOCAL DOCKER DEVELOPMENT)
 
-Welcome! Thank you for joining development.
+Welcome! Thank you for joining the development.
 This is a script for running commands within docker containers at ease.
 __________________________________________________________________________________________
 
@@ -74,7 +74,10 @@ $(bold ./$name pnpm add --filter mermaid) $(underline package)
 $(bold git diff --name-only develop \| xargs ./$name pnpm prettier --write)
         Prettify everything you added so far
 
-$(bold ./$name cypress run -- --spec cypress/integration/rendering/)$(underline test.ts)
+$(bold ./$name cypress open --project .)
+        Open cypress interactive GUI
+
+$(bold ./$name cypress run --spec cypress/integration/rendering/)$(underline test.spec.ts)
         Run specific test in cypress\n
 
 EOF

From 8ed2ee30ecabdef8e73df0e7ab3496c13637c507 Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Sun, 2 Jul 2023 02:15:23 +0300
Subject: [PATCH 134/187] Sankey alignment tests

---
 cypress/integration/rendering/sankey.spec.ts | 155 +++++++++++++------
 demos/sankey.html                            |   1 +
 2 files changed, 108 insertions(+), 48 deletions(-)

diff --git a/cypress/integration/rendering/sankey.spec.ts b/cypress/integration/rendering/sankey.spec.ts
index de10338e8..ded23a045 100644
--- a/cypress/integration/rendering/sankey.spec.ts
+++ b/cypress/integration/rendering/sankey.spec.ts
@@ -13,73 +13,132 @@ describe('Sankey Diagram', () => {
   });
 
   describe('when given a linkColor', function () {
-    it('links should be the same color as source node', () => {
-      renderGraph(
-        `
-        sankey-beta
-        
-        sourceNode,targetNode,10
-        `,
-        {
-          sankey: { linkColor: 'source' },
-        }
-      );
-
-      cy.get('.link path').then((link) => {
-        cy.get('.node[id="node-1"] rect').should(node =>
-          expect(link.attr('stroke')).to.equal(node.attr('fill'))
-        );
-      });
+    this.beforeAll(() => {
+      cy.wrap(
+        `sankey-beta
+      a,b,10
+      `
+      ).as('graph');
     });
 
-    it('should change link color to hex code', () => {
-      renderGraph(
-        `
-        sankey-beta
-        a,b,10
-        `,
-        {
-          sankey: { linkColor: '#636465' },
-        }
-      );
+    it('links should use hex color', function () {
+      renderGraph(this.graph, { sankey: { linkColor: '#636465' } });
 
       cy.get('.link path').should((link) => {
         expect(link.attr('stroke')).to.equal('#636465');
       });
     });
 
-    it('links should be the same color as target node', () => {
-      renderGraph(
-        `
-        sankey-beta
-        sourceNode,targetNode,10
-        `,
-        {
-          sankey: { linkColor: 'target' },
-        }
-      );
+    it('links should be the same color as source node', function () {
+      renderGraph(this.graph, { sankey: { linkColor: 'source' } });
 
       cy.get('.link path').then((link) => {
-        cy.get('.node[id="node-2"] rect').should(node =>
+        cy.get('.node[id="node-1"] rect').should((node) =>
           expect(link.attr('stroke')).to.equal(node.attr('fill'))
         );
       });
     });
 
-    it('links must be gradient', () => {
-      renderGraph(
-        `
-        sankey-beta
-        sourceNode,targetNode,10
-        `,
-        {
-          sankey: { linkColor: 'gradient' },
-        }
-      );
+    it('links should be the same color as target node', function () {
+      renderGraph(this.graph, { sankey: { linkColor: 'target' } });
+
+      cy.get('.link path').then((link) => {
+        cy.get('.node[id="node-2"] rect').should((node) =>
+          expect(link.attr('stroke')).to.equal(node.attr('fill'))
+        );
+      });
+    });
+
+    it('links must be gradient', function () {
+      renderGraph(this.graph, { sankey: { linkColor: 'gradient' } });
 
       cy.get('.link path').should((link) => {
         expect(link.attr('stroke')).to.equal('url(#linearGradient-3)');
       });
     });
   });
+
+  describe('when given a nodeAlignment', function () {
+    this.beforeAll(() => {
+      cy.wrap(
+        `
+        sankey-beta
+        
+        a,b,8
+        b,c,8
+        c,d,8
+        d,e,8
+        
+        x,c,4
+        c,y,4  
+        `
+      ).as('graph');
+    });
+
+    this.afterEach(() => {
+      cy.get('.node[id="node-1"]').should((node) => {
+        expect(node.attr('x')).to.equal('0');
+      });
+      cy.get('.node[id="node-2"]').should((node) => {
+        expect(node.attr('x')).to.equal('100');
+      });
+      cy.get('.node[id="node-3"]').should((node) => {
+        expect(node.attr('x')).to.equal('200');
+      });
+      cy.get('.node[id="node-4"]').should((node) => {
+        expect(node.attr('x')).to.equal('300');
+      });
+      cy.get('.node[id="node-5"]').should((node) => {
+        expect(node.attr('x')).to.equal('400');
+      });
+    });
+
+    it('should justify nodes', function () {
+      renderGraph(this.graph, {
+        sankey: { nodeAlignment: 'justify', width: 410, useMaxWidth: false },
+      });
+      cy.get('.node[id="node-6"]').should((node) => {
+        expect(node.attr('x')).to.equal('0');
+      });
+      cy.get('.node[id="node-7"]').should((node) => {
+        expect(node.attr('x')).to.equal('400');
+      });
+    });
+
+    it('should align nodes left', function () {
+      renderGraph(this.graph, {
+        sankey: { nodeAlignment: 'left', width: 410, useMaxWidth: false },
+      });
+      cy.get('.node[id="node-6"]').should((node) => {
+        expect(node.attr('x')).to.equal('0');
+      });
+      cy.get('.node[id="node-7"]').should((node) => {
+        expect(node.attr('x')).to.equal('300');
+      });
+    });
+
+    it('should align nodes right', function () {
+      renderGraph(this.graph, {
+        sankey: { nodeAlignment: 'right', width: 410, useMaxWidth: false },
+      });
+      cy.get('.node[id="node-6"]').should((node) => {
+        expect(node.attr('x')).to.equal('100');
+      });
+      cy.get('.node[id="node-7"]').should((node) => {
+        expect(node.attr('x')).to.equal('400');
+      });
+    });
+    
+    it('should center nodes', function () {
+      renderGraph(this.graph, {
+        sankey: { nodeAlignment: 'center', width: 410, useMaxWidth: false },
+      });
+      cy.get('.node[id="node-6"]').should((node) => {
+        expect(node.attr('x')).to.equal('100');
+      });
+      cy.get('.node[id="node-7"]').should((node) => {
+        expect(node.attr('x')).to.equal('300');
+      });
+    });
+  });
 });
diff --git a/demos/sankey.html b/demos/sankey.html
index c8cdc1e7e..0c9679c65 100644
--- a/demos/sankey.html
+++ b/demos/sankey.html
@@ -100,6 +100,7 @@
           width: 1200,
           height: 600,
           linkColor: 'gradient',
+          nodeAlignment: 'justify',
         },
       });
     </script>

From abb7bb23d623f1717b220b75fdd27d5d6d5e8d32 Mon Sep 17 00:00:00 2001
From: Nikolay Rozhkov <nironame@gmail.com>
Date: Sun, 2 Jul 2023 02:34:22 +0300
Subject: [PATCH 135/187] More detailed sankey docs

---
 cypress/integration/rendering/sankey.spec.ts |  2 +-
 packages/mermaid/src/docs/syntax/sankey.md   | 76 +++++++++++++-------
 2 files changed, 53 insertions(+), 25 deletions(-)

diff --git a/cypress/integration/rendering/sankey.spec.ts b/cypress/integration/rendering/sankey.spec.ts
index ded23a045..e334b898b 100644
--- a/cypress/integration/rendering/sankey.spec.ts
+++ b/cypress/integration/rendering/sankey.spec.ts
@@ -128,7 +128,7 @@ describe('Sankey Diagram', () => {
         expect(node.attr('x')).to.equal('400');
       });
     });
-    
+
     it('should center nodes', function () {
       renderGraph(this.graph, {
         sankey: { nodeAlignment: 'center', width: 410, useMaxWidth: false },
diff --git a/packages/mermaid/src/docs/syntax/sankey.md b/packages/mermaid/src/docs/syntax/sankey.md
index 97806d725..32f3663b9 100644
--- a/packages/mermaid/src/docs/syntax/sankey.md
+++ b/packages/mermaid/src/docs/syntax/sankey.md
@@ -166,32 +166,54 @@ Wind,Electricity grid,289.366
 
 The idea behind syntax is that a user types `sankey-beta` keyword first, then pastes raw CSV below and get the result.
 
-It is implements standard as [described here](https://www.ietf.org/rfc/rfc4180.txt) with subtle **differences**:
+It implements CSV standard as [described here](https://www.ietf.org/rfc/rfc4180.txt) with subtle **differences**:
 
 - CSV must contain **3 columns only**
 - It is **allowed** to have **empty lines** without comma separators for visual purposes
 
-### Empty lines
+### Basic
 
-CSV does not support empty lines (without comma delimeters) by default. But you can add them if needed.
+It is implied that 3 columns inside CSV should represent `source`, `target` and `value` accordingly:
+
+```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:
 
 ```mermaid-example
 sankey-beta
 
-Bio-conversion,Liquid,0.597
 Bio-conversion,Losses,26.862
 
 Bio-conversion,Solid,280.322
+
 Bio-conversion,Gas,81.144
 ```
 
 ```mermaid
 sankey-beta
 
-Bio-conversion,Liquid,0.597
 Bio-conversion,Losses,26.862
 
 Bio-conversion,Solid,280.322
+
 Bio-conversion,Gas,81.144
 ```
 
@@ -213,41 +235,27 @@ Pumped heat,"Heating and cooling, homes",193.026
 Pumped heat,"Heating and cooling, commercial",70.672
 ```
 
-### Double quotes
+### Double Quotes
 
-If you need to have double quote, put a pair of them:
+If you need to have double quote, put a pair of them inside quoted string:
 
 ```mermaid-example
 sankey-beta
 
-Pumped heat,"Heating and cooling ""homes""",193.026
+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, ""homes""",193.026
 Pumped heat,"Heating and cooling, ""commercial""",70.672
 ```
 
 ## Configuration
 
-### Coloring and Alignment
-
-You can change graph layout by setting `nodeAlignment` to:
-
-- `justify`
-- `center`
-- `left`
-- `right`
-
-And adjust coloring of the links by setting `linkColor` to one of those:
-
-- `source`
-- `target`
-- `gradient`
-- hex code of color, like `#a1a1a1`
+You can customize link colors, node alignments and diagram dimensions.
 
 ```html
 <script>
@@ -255,6 +263,8 @@ And adjust coloring of the links by setting `linkColor` to one of those:
     startOnLoad: true,
     securityLevel: 'loose',
     sankey: {
+      width: 800,
+      height: 400,
       linkColor: 'source',
       nodeAlignment: 'left',
     },
@@ -262,3 +272,21 @@ And adjust coloring of the links by setting `linkColor` to one of those:
   mermaid.initialize(config);
 </script>
 ```
+
+### Links Coloring
+
+You can adjust links' color by setting `linkColor` to one of those:
+
+- `source` - link will be of a source node color
+- `target` - link will be of a target node color
+- `gradient` - link color will be smoothly transient between source and target node colors
+- hex code of color, like `#a1a1a1`
+
+### Node Alignment
+
+Graph layout can be changed by setting `nodeAlignment` to:
+
+- `justify`
+- `center`
+- `left`
+- `right`

From c327ea9f2194832760a00bdd1a0e72a64435cc8b Mon Sep 17 00:00:00 2001
From: nirname <nirname@users.noreply.github.com>
Date: Sat, 1 Jul 2023 23:38:02 +0000
Subject: [PATCH 136/187] Update docs

---
 docs/syntax/sankey.md | 102 ++++++++++++++++++++++++++++++------------
 1 file changed, 74 insertions(+), 28 deletions(-)

diff --git a/docs/syntax/sankey.md b/docs/syntax/sankey.md
index 2eaf9b8cc..bfbfc3621 100644
--- a/docs/syntax/sankey.md
+++ b/docs/syntax/sankey.md
@@ -318,52 +318,92 @@ Wind,Electricity grid,289.366
 
 The idea behind syntax is that a user types `sankey-beta` keyword first, then pastes raw CSV below and get the result.
 
-It is implements standard as [described here](https://www.ietf.org/rfc/rfc4180.txt) with subtle **differences**:
+It implements CSV standard as [described here](https://www.ietf.org/rfc/rfc4180.txt) with subtle **differences**:
 
 - CSV must contain **3 columns only**
 - It is **allowed** to have **empty lines** without comma separators for visual purposes
 
-### Empty lines
+### Basic
 
-CSV does not support empty lines (without comma delimeters) by default. But you can add them if needed.
+It is implied that 3 columns inside CSV should represent `source`, `target` and `value` accordingly:
+
+```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
+```
+
+```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:
 
 ```mermaid-example
 sankey-beta
 
-Bio-conversion,Liquid,0.597
 Bio-conversion,Losses,26.862
 
 Bio-conversion,Solid,280.322
+
 Bio-conversion,Gas,81.144
 ```
 
 ```mermaid
 sankey-beta
 
-Bio-conversion,Liquid,0.597
 Bio-conversion,Losses,26.862
 
 Bio-conversion,Solid,280.322
+
 Bio-conversion,Gas,81.144
 ```
 
 ```mermaid-example
 sankey-beta
 
-Bio-conversion,Liquid,0.597
 Bio-conversion,Losses,26.862
 
 Bio-conversion,Solid,280.322
+
 Bio-conversion,Gas,81.144
 ```
 
 ```mermaid
 sankey-beta
 
-Bio-conversion,Liquid,0.597
 Bio-conversion,Losses,26.862
 
 Bio-conversion,Solid,280.322
+
 Bio-conversion,Gas,81.144
 ```
 
@@ -399,55 +439,41 @@ Pumped heat,"Heating and cooling, homes",193.026
 Pumped heat,"Heating and cooling, commercial",70.672
 ```
 
-### Double quotes
+### Double Quotes
 
-If you need to have double quote, put a pair of them:
+If you need to have double quote, put a pair of them inside quoted string:
 
 ```mermaid-example
 sankey-beta
 
-Pumped heat,"Heating and cooling ""homes""",193.026
+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, ""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, ""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, ""homes""",193.026
 Pumped heat,"Heating and cooling, ""commercial""",70.672
 ```
 
 ## Configuration
 
-### Coloring and Alignment
-
-You can change graph layout by setting `nodeAlignment` to:
-
-- `justify`
-- `center`
-- `left`
-- `right`
-
-And adjust coloring of the links by setting `linkColor` to one of those:
-
-- `source`
-- `target`
-- `gradient`
-- hex code of color, like `#a1a1a1`
+You can customize link colors, node alignments and diagram dimensions.
 
 ```html
 <script>
@@ -455,6 +481,8 @@ And adjust coloring of the links by setting `linkColor` to one of those:
     startOnLoad: true,
     securityLevel: 'loose',
     sankey: {
+      width: 800,
+      height: 400,
       linkColor: 'source',
       nodeAlignment: 'left',
     },
@@ -462,3 +490,21 @@ And adjust coloring of the links by setting `linkColor` to one of those:
   mermaid.initialize(config);
 </script>
 ```
+
+### Links Coloring
+
+You can adjust links' color by setting `linkColor` to one of those:
+
+- `source` - link will be of a source node color
+- `target` - link will be of a target node color
+- `gradient` - link color will be smoothly transient between source and target node colors
+- hex code of color, like `#a1a1a1`
+
+### Node Alignment
+
+Graph layout can be changed by setting `nodeAlignment` to:
+
+- `justify`
+- `center`
+- `left`
+- `right`

From 4a95589b5aaa370793f7462856f5d4fe973c8814 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Sun, 2 Jul 2023 10:03:31 +0530
Subject: [PATCH 137/187] Add `merge_group` to CI triggers

---
 .github/workflows/build-docs.yml | 1 +
 .github/workflows/build.yml      | 1 +
 .github/workflows/checks.yml     | 3 ++-
 .github/workflows/e2e.yml        | 5 ++++-
 .github/workflows/lint.yml       | 3 ++-
 .github/workflows/test.yml       | 2 +-
 6 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/.github/workflows/build-docs.yml b/.github/workflows/build-docs.yml
index f3e440fce..b9e542cf8 100644
--- a/.github/workflows/build-docs.yml
+++ b/.github/workflows/build-docs.yml
@@ -2,6 +2,7 @@ name: Build Vitepress docs
 
 on:
   pull_request:
+  merge_group:
 
 permissions:
   contents: read
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 2a70b5901..49be6364a 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -2,6 +2,7 @@ name: Build
 
 on:
   push: {}
+  merge_group:
   pull_request:
     types:
       - opened
diff --git a/.github/workflows/checks.yml b/.github/workflows/checks.yml
index 396ff4e6e..df761325c 100644
--- a/.github/workflows/checks.yml
+++ b/.github/workflows/checks.yml
@@ -1,5 +1,6 @@
 on:
-  push: {}
+  push:
+  merge_group:
   pull_request:
     types:
       - opened
diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index 64637c5fb..c27425beb 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -1,6 +1,9 @@
 name: E2E
 
-on: [push, pull_request]
+on:
+  push:
+  pull_request:
+  merge_group:
 
 permissions:
   contents: read
diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
index d4bf4afe8..53b7f484d 100644
--- a/.github/workflows/lint.yml
+++ b/.github/workflows/lint.yml
@@ -1,7 +1,8 @@
 name: Lint
 
 on:
-  push: {}
+  push:
+  merge_group:
   pull_request:
     types:
       - opened
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 6bae6b71f..2d8c96165 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -1,6 +1,6 @@
 name: Unit Tests
 
-on: [push, pull_request]
+on: [push, pull_request, merge_group]
 
 permissions:
   contents: read

From 78377daf2f383c268a390f186935c28b7bc155fa Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Sun, 2 Jul 2023 10:14:35 +0530
Subject: [PATCH 138/187] Rename workflow jobs

---
 .github/workflows/build-docs.yml              | 3 +--
 .github/workflows/build.yml                   | 2 +-
 .github/workflows/check-readme-in-sync.yml    | 2 +-
 .github/workflows/checks.yml                  | 4 ++--
 .github/workflows/e2e-applitools.yml          | 2 +-
 .github/workflows/e2e.yml                     | 2 +-
 .github/workflows/publish-docs.yml            | 6 +++---
 .github/workflows/release-preview-publish.yml | 2 +-
 .github/workflows/test.yml                    | 8 +-------
 .github/workflows/update-browserlist.yml      | 2 +-
 10 files changed, 13 insertions(+), 20 deletions(-)

diff --git a/.github/workflows/build-docs.yml b/.github/workflows/build-docs.yml
index b9e542cf8..b25ff89cc 100644
--- a/.github/workflows/build-docs.yml
+++ b/.github/workflows/build-docs.yml
@@ -8,8 +8,7 @@ permissions:
   contents: read
 
 jobs:
-  # Build job
-  build:
+  build-docs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 49be6364a..eeb557ebb 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -13,7 +13,7 @@ permissions:
   contents: read
 
 jobs:
-  build:
+  build-mermaid:
     runs-on: ubuntu-latest
     strategy:
       matrix:
diff --git a/.github/workflows/check-readme-in-sync.yml b/.github/workflows/check-readme-in-sync.yml
index 13912e5b9..5a8ca319b 100644
--- a/.github/workflows/check-readme-in-sync.yml
+++ b/.github/workflows/check-readme-in-sync.yml
@@ -14,7 +14,7 @@ permissions:
   contents: read
 
 jobs:
-  check:
+  check-readme:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
diff --git a/.github/workflows/checks.yml b/.github/workflows/checks.yml
index df761325c..9f9f316c4 100644
--- a/.github/workflows/checks.yml
+++ b/.github/workflows/checks.yml
@@ -7,10 +7,10 @@ on:
       - synchronize
       - ready_for_review
 
-name: Static analysis
+name: Static analysis on Test files
 
 jobs:
-  test:
+  check-tests:
     runs-on: ubuntu-latest
     name: check tests
     if: github.repository_owner == 'mermaid-js'
diff --git a/.github/workflows/e2e-applitools.yml b/.github/workflows/e2e-applitools.yml
index 92f2f80b1..5b1943142 100644
--- a/.github/workflows/e2e-applitools.yml
+++ b/.github/workflows/e2e-applitools.yml
@@ -19,7 +19,7 @@ env:
   USE_APPLI: ${{ secrets.APPLITOOLS_API_KEY && 'true' || '' }}
 
 jobs:
-  test:
+  e2e-applitools:
     runs-on: ubuntu-latest
     strategy:
       matrix:
diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index c27425beb..9bcb1898c 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -9,7 +9,7 @@ permissions:
   contents: read
 
 jobs:
-  build:
+  e2e:
     runs-on: ubuntu-latest
     strategy:
       fail-fast: false
diff --git a/.github/workflows/publish-docs.yml b/.github/workflows/publish-docs.yml
index b556c1b1d..f63e58750 100644
--- a/.github/workflows/publish-docs.yml
+++ b/.github/workflows/publish-docs.yml
@@ -19,7 +19,7 @@ concurrency:
 
 jobs:
   # Build job
-  build:
+  build-docs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
@@ -48,11 +48,11 @@ jobs:
           path: packages/mermaid/src/vitepress/.vitepress/dist
 
   # Deployment job
-  deploy:
+  deploy-docs:
     environment:
       name: github-pages
     runs-on: ubuntu-latest
-    needs: build
+    needs: build-docs
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
diff --git a/.github/workflows/release-preview-publish.yml b/.github/workflows/release-preview-publish.yml
index 5f4936ab6..221e3836e 100644
--- a/.github/workflows/release-preview-publish.yml
+++ b/.github/workflows/release-preview-publish.yml
@@ -6,7 +6,7 @@ on:
       - 'release/**'
 
 jobs:
-  publish:
+  publish-preview:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 2d8c96165..e25502ee4 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -6,7 +6,7 @@ permissions:
   contents: read
 
 jobs:
-  build:
+  unit-test:
     runs-on: ubuntu-latest
     strategy:
       matrix:
@@ -49,9 +49,3 @@ jobs:
           name: mermaid-codecov
           fail_ci_if_error: true
           verbose: true
-      # Coveralls is throwing 500. Disabled for now.
-      # - name: Upload Coverage to Coveralls
-      #   uses: coverallsapp/github-action@v2
-      #   with:
-      #     github-token: ${{ secrets.GITHUB_TOKEN }}
-      #     flag-name: unit
diff --git a/.github/workflows/update-browserlist.yml b/.github/workflows/update-browserlist.yml
index 4155ec988..813a400b3 100644
--- a/.github/workflows/update-browserlist.yml
+++ b/.github/workflows/update-browserlist.yml
@@ -5,7 +5,7 @@ on:
   workflow_dispatch:
 
 jobs:
-  build:
+  update-browser-list:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3

From b55a9328f490ffa865858e8ce73607ec68f30710 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Sun, 2 Jul 2023 05:07:56 +0000
Subject: [PATCH 139/187] Update all patch dependencies

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

diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index 4ee118cef..62efec380 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -62,7 +62,7 @@
     "d3-sankey": "^0.12.3",
     "dagre-d3-es": "7.0.10",
     "dayjs": "^1.11.7",
-    "dompurify": "3.0.3",
+    "dompurify": "3.0.4",
     "elkjs": "^0.8.2",
     "khroma": "^2.0.0",
     "lodash-es": "^4.17.21",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3967ce135..9d28e9e50 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,5 +1,9 @@
 lockfileVersion: '6.0'
 
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
 importers:
 
   .:
@@ -218,8 +222,8 @@ importers:
         specifier: ^1.11.7
         version: 1.11.7
       dompurify:
-        specifier: 3.0.3
-        version: 3.0.3
+        specifier: 3.0.4
+        version: 3.0.4
       elkjs:
         specifier: ^0.8.2
         version: 0.8.2
@@ -459,58 +463,6 @@ importers:
         specifier: ^7.0.0
         version: 7.0.0
 
-  packages/mermaid/src/vitepress:
-    dependencies:
-      '@vueuse/core':
-        specifier: ^10.1.0
-        version: 10.1.0(vue@3.2.47)
-      jiti:
-        specifier: ^1.18.2
-        version: 1.18.2
-      vue:
-        specifier: ^3.2.47
-        version: 3.2.47
-    devDependencies:
-      '@iconify-json/carbon':
-        specifier: ^1.1.16
-        version: 1.1.16
-      '@unocss/reset':
-        specifier: ^0.53.0
-        version: 0.53.0
-      '@vite-pwa/vitepress':
-        specifier: ^0.2.0
-        version: 0.2.0(vite-plugin-pwa@0.16.0)
-      '@vitejs/plugin-vue':
-        specifier: ^4.2.1
-        version: 4.2.1(vite@4.3.9)(vue@3.2.47)
-      fast-glob:
-        specifier: ^3.2.12
-        version: 3.2.12
-      https-localhost:
-        specifier: ^4.7.1
-        version: 4.7.1
-      pathe:
-        specifier: ^1.1.0
-        version: 1.1.0
-      unocss:
-        specifier: ^0.53.0
-        version: 0.53.0(postcss@8.4.23)(rollup@2.79.1)(vite@4.3.9)
-      unplugin-vue-components:
-        specifier: ^0.25.0
-        version: 0.25.0(rollup@2.79.1)(vue@3.2.47)
-      vite:
-        specifier: ^4.3.3
-        version: 4.3.9(@types/node@18.16.0)
-      vite-plugin-pwa:
-        specifier: ^0.16.0
-        version: 0.16.0(vite@4.3.9)(workbox-build@7.0.0)(workbox-window@7.0.0)
-      vitepress:
-        specifier: 1.0.0-beta.3
-        version: 1.0.0-beta.3(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0)
-      workbox-window:
-        specifier: ^7.0.0
-        version: 7.0.0
-
   tests/webpack:
     dependencies:
       '@mermaid-js/mermaid-example-diagram':
@@ -4733,17 +4685,6 @@ packages:
       - vite
     dev: true
 
-  /@unocss/astro@0.53.0(rollup@2.79.1)(vite@4.3.9):
-    resolution: {integrity: sha512-8bR7ysIMZEOpcjd/cVmogcABSFDYPjUqMnbflv44p1A2/deemo9CIkpRARoq/96NQuzWJsKhKodcQodExZcqiA==}
-    dependencies:
-      '@unocss/core': 0.53.0
-      '@unocss/reset': 0.53.0
-      '@unocss/vite': 0.53.0(rollup@2.79.1)(vite@4.3.9)
-    transitivePeerDependencies:
-      - rollup
-      - vite
-    dev: true
-
   /@unocss/cli@0.53.0(rollup@2.79.1):
     resolution: {integrity: sha512-9WNBHy8m8tMqwcp7mUhebRUBvHQfbx01CMe5cAFLmUYtJULM+8IjJxqERkaAZyyoOXf1TNO2v1dFAmCwhMRCLQ==}
     engines: {node: '>=14'}
@@ -4922,26 +4863,6 @@ packages:
       - rollup
     dev: true
 
-  /@unocss/vite@0.53.0(rollup@2.79.1)(vite@4.3.9):
-    resolution: {integrity: sha512-JoZhKVNruRjfySMVg/zNJbLEn/NTXj29Wf0SN4++xnGKrSapkPzYC46psL5bm5N5v4SHdpepTCoonC3FWCY6Fw==}
-    peerDependencies:
-      vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0
-    dependencies:
-      '@ampproject/remapping': 2.2.1
-      '@rollup/pluginutils': 5.0.2(rollup@2.79.1)
-      '@unocss/config': 0.53.0
-      '@unocss/core': 0.53.0
-      '@unocss/inspector': 0.53.0
-      '@unocss/scope': 0.53.0
-      '@unocss/transformer-directives': 0.53.0
-      chokidar: 3.5.3
-      fast-glob: 3.2.12
-      magic-string: 0.30.0
-      vite: 4.3.9(@types/node@18.16.0)
-    transitivePeerDependencies:
-      - rollup
-    dev: true
-
   /@vite-pwa/vitepress@0.2.0(vite-plugin-pwa@0.16.0):
     resolution: {integrity: sha512-dVQVaP6NB9woCFe4UASUqRp7uwBQJOVXlJlqK4krqXcbb3NuXIXIWOnU7HLpJnHqZj5U/81gKtLN6gs5gJBwiQ==}
     peerDependencies:
@@ -4961,17 +4882,6 @@ packages:
       vue: 3.2.47
     dev: true
 
-  /@vitejs/plugin-vue@4.2.1(vite@4.3.9)(vue@3.2.47):
-    resolution: {integrity: sha512-ZTZjzo7bmxTRTkb8GSTwkPOYDIP7pwuyV+RV53c9PYUouwcbkIZIvWvNWlX2b1dYZqtOv7D6iUAnJLVNGcLrSw==}
-    engines: {node: ^14.18.0 || >=16.0.0}
-    peerDependencies:
-      vite: ^4.0.0
-      vue: ^3.2.25
-    dependencies:
-      vite: 4.3.9(@types/node@18.16.0)
-      vue: 3.2.47
-    dev: true
-
   /@vitejs/plugin-vue@4.2.3(vite@4.3.8)(vue@3.3.4):
     resolution: {integrity: sha512-R6JDUfiZbJA9cMiguQ7jxALsgiprjBeHL5ikpXfJCH62pPHtI+JdJ5xWj6Ev73yXSlYl86+blXn1kZHQ7uElxw==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -7847,8 +7757,8 @@ packages:
       domelementtype: 2.3.0
     dev: true
 
-  /dompurify@3.0.3:
-    resolution: {integrity: sha512-axQ9zieHLnAnHh0sfAamKYiqXMJAVwu+LM/alQ7WDagoWessyWvMSFyW65CqF3owufNu8HBcE4cM2Vflu7YWcQ==}
+  /dompurify@3.0.4:
+    resolution: {integrity: sha512-ae0mA+Qiqp6C29pqZX3fQgK+F91+F7wobM/v8DRzDqJdZJELXiFUx4PP4pK/mzUS0xkiSEx3Ncd9gr69jg3YsQ==}
     dev: false
 
   /domutils@3.0.1:
@@ -14722,42 +14632,6 @@ packages:
       - vite
     dev: true
 
-  /unocss@0.53.0(postcss@8.4.23)(rollup@2.79.1)(vite@4.3.9):
-    resolution: {integrity: sha512-kY4h5ERiDYlSnL2X+hbDfh+uaF7QNouy7j51GOTUr3Q0aaWehaNd05b15SjHrab559dEC0mYfrSEdh/DnCK1cw==}
-    engines: {node: '>=14'}
-    peerDependencies:
-      '@unocss/webpack': 0.53.0
-    peerDependenciesMeta:
-      '@unocss/webpack':
-        optional: true
-    dependencies:
-      '@unocss/astro': 0.53.0(rollup@2.79.1)(vite@4.3.9)
-      '@unocss/cli': 0.53.0(rollup@2.79.1)
-      '@unocss/core': 0.53.0
-      '@unocss/extractor-arbitrary-variants': 0.53.0
-      '@unocss/postcss': 0.53.0(postcss@8.4.23)
-      '@unocss/preset-attributify': 0.53.0
-      '@unocss/preset-icons': 0.53.0
-      '@unocss/preset-mini': 0.53.0
-      '@unocss/preset-tagify': 0.53.0
-      '@unocss/preset-typography': 0.53.0
-      '@unocss/preset-uno': 0.53.0
-      '@unocss/preset-web-fonts': 0.53.0
-      '@unocss/preset-wind': 0.53.0
-      '@unocss/reset': 0.53.0
-      '@unocss/transformer-attributify-jsx': 0.53.0
-      '@unocss/transformer-attributify-jsx-babel': 0.53.0
-      '@unocss/transformer-compile-class': 0.53.0
-      '@unocss/transformer-directives': 0.53.0
-      '@unocss/transformer-variant-group': 0.53.0
-      '@unocss/vite': 0.53.0(rollup@2.79.1)(vite@4.3.9)
-    transitivePeerDependencies:
-      - postcss
-      - rollup
-      - supports-color
-      - vite
-    dev: true
-
   /unpipe@1.0.0:
     resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
     engines: {node: '>= 0.8'}
@@ -14982,24 +14856,6 @@ packages:
       - supports-color
     dev: true
 
-  /vite-plugin-pwa@0.16.0(vite@4.3.9)(workbox-build@7.0.0)(workbox-window@7.0.0):
-    resolution: {integrity: sha512-E+AQRzHxqNU4ZhEeR8X37/foZB+ezJEhXauE/mcf1UITY6k2Pa1dtlFl+BQu57fTdiVlWim5S0Qy44Yap93Dkg==}
-    engines: {node: '>=16.0.0'}
-    peerDependencies:
-      vite: ^3.1.0 || ^4.0.0
-      workbox-build: ^7.0.0
-      workbox-window: ^7.0.0
-    dependencies:
-      debug: 4.3.4(supports-color@8.1.1)
-      fast-glob: 3.2.12
-      pretty-bytes: 6.1.0
-      vite: 4.3.9(@types/node@18.16.0)
-      workbox-build: 7.0.0
-      workbox-window: 7.0.0
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /vite@4.3.3(@types/node@18.16.0):
     resolution: {integrity: sha512-MwFlLBO4udZXd+VBcezo3u8mC77YQk+ik+fbc0GZWGgzfbPP+8Kf0fldhARqvSYmtIWoAJ5BXPClUbMTlqFxrA==}
     engines: {node: ^14.18.0 || >=16.0.0}

From 29c866b09a3333e149e6845a9a45d0834847eeb9 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Sun, 2 Jul 2023 13:22:00 +0530
Subject: [PATCH 140/187] Don't fail CI on codecov error

---
 .github/codecov.yaml       | 2 +-
 .github/workflows/e2e.yml  | 2 +-
 .github/workflows/test.yml | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/.github/codecov.yaml b/.github/codecov.yaml
index d33925afc..3db0811ad 100644
--- a/.github/codecov.yaml
+++ b/.github/codecov.yaml
@@ -12,4 +12,4 @@ coverage:
   status:
     project:
       default:
-        threshold: 1%
+        threshold: 2%
diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index 9bcb1898c..c204d5872 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -52,7 +52,7 @@ jobs:
           files: coverage/cypress/lcov.info
           flags: e2e
           name: mermaid-codecov
-          fail_ci_if_error: true
+          fail_ci_if_error: false
           verbose: true
       - name: Upload Artifacts
         uses: actions/upload-artifact@v3
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index e25502ee4..47b726bd1 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -47,5 +47,5 @@ jobs:
           files: ./coverage/vitest/lcov.info
           flags: unit
           name: mermaid-codecov
-          fail_ci_if_error: true
+          fail_ci_if_error: false
           verbose: true

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

From 12fe6ff26ec4fbb6518611a4a200373a73c01369 Mon Sep 17 00:00:00 2001
From: Lishid <lishid@gmail.com>
Date: Mon, 3 Jul 2023 18:56:00 -0700
Subject: [PATCH 148/187] 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 149/187] 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 150/187] 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 151/187] 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 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 152/187] 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 153/187] 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 154/187] 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 155/187] 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 156/187] 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 157/187] 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 158/187] 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 159/187] 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 160/187] 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 161/187] 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 162/187] 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 163/187] 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 164/187] 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 165/187] 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 166/187] 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 167/187] 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 168/187] 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 169/187] 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 170/187] 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 171/187] 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 172/187] 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 173/187] 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 174/187] 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 175/187] 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 176/187] 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 177/187] 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 178/187] 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 179/187] 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 180/187] 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 181/187] 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 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 182/187] 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 183/187] 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 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 184/187] 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 185/187] 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 186/187] 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 187/187] 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/*']