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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.js b/packages/mermaid/src/diagrams/flowchart/flowDb.js
index 32ffb3df0..ea8fa71d2 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowDb.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowDb.js
@@ -149,7 +149,6 @@ export const addSingleLink = function (_start, _end, type) {
   if (linkTextObj !== undefined) {
     edge.text = sanitizeText(linkTextObj.text.trim());
 
-    edge.text = edge.text.replaceAll('\\"', '"');
     // strip quotes if string starts and ends with a quote
     if (edge.text[0] === '"' && edge.text[edge.text.length - 1] === '"') {
       edge.text = edge.text.substring(1, edge.text.length - 1);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

diff --git a/packages/mermaid-zenuml/package.json b/packages/mermaid-zenuml/package.json
index d4186f05c..b907e2cba 100644
--- a/packages/mermaid-zenuml/package.json
+++ b/packages/mermaid-zenuml/package.json
@@ -33,7 +33,7 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@zenuml/core": "^3.0.3"
+    "@zenuml/core": "^3.0.6"
   },
   "devDependencies": {
     "mermaid": "workspace:^"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a68beacad..08487b802 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -413,8 +413,8 @@ importers:
   packages/mermaid-zenuml:
     dependencies:
       '@zenuml/core':
-        specifier: ^3.0.3
-        version: 3.0.3(ts-node@10.9.1)
+        specifier: ^3.0.6
+        version: 3.0.6(ts-node@10.9.1)
     devDependencies:
       mermaid:
         specifier: workspace:^
@@ -5738,14 +5738,14 @@ packages:
     resolution: {integrity: sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==}
     dev: true
 
-  /@zenuml/core@3.0.3(ts-node@10.9.1):
-    resolution: {integrity: sha512-Wp6yF5iERvGXrR3z/mNhQYP2uI54Bd7RQ2ZwA26Lca+tufj4X8pfqGVSORLqbUl4wjjdcwHc2RNT8AU+cz2NCg==}
+  /@zenuml/core@3.0.6(ts-node@10.9.1):
+    resolution: {integrity: sha512-azEBVrl+ClCPhII92TbzBUFcWhIjlOPdEHVzF6eZXs5Oy4JlrfldS5pAZBHCFL4riOBsjZ5sHHmQLQg9V07T4Q==}
     engines: {node: '>=12.0.0'}
     dependencies:
       '@types/assert': 1.5.6
       '@types/ramda': 0.28.25
       '@vue/compat': 3.3.4(vue@3.3.4)
-      antlr4: 4.13.0
+      antlr4: 4.11.0
       color-string: 1.9.1
       dom-to-image-more: 2.16.0
       file-saver: 2.0.5
@@ -6026,9 +6026,9 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
-  /antlr4@4.13.0:
-    resolution: {integrity: sha512-zooUbt+UscjnWyOrsuY/tVFL4rwrAGwOivpQmvmUDE22hy/lUA467Rc1rcixyRwcRUIXFYBwv7+dClDSHdmmew==}
-    engines: {node: '>=16'}
+  /antlr4@4.11.0:
+    resolution: {integrity: sha512-GUGlpE2JUjAN+G8G5vY+nOoeyNhHsXoIJwP1XF1oRw89vifA1K46T6SEkwLwr7drihN7I/lf0DIjKc4OZvBX8w==}
+    engines: {node: '>=14'}
     dev: false
 
   /any-promise@1.3.0:

From 646f7662d0d30a5505a3b8ec2cf21d90f10818b8 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Mon, 7 Aug 2023 15:12:37 +0530
Subject: [PATCH 71/85] chore: Remove comments, cleanup

Co-authored-by: Alois Klink <alois@aloisklink.com>
Co-authored-by: Nikolay Rozhkov <nironame@gmail.com>
Co-authored-by: Yokozuna59 <u.yokozuna@gmail.com>
---
 packages/mermaid/src/Diagram.ts                      | 12 +++++++-----
 .../src/diagrams/sequence/sequenceDiagram.spec.js    |  3 ---
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/packages/mermaid/src/Diagram.ts b/packages/mermaid/src/Diagram.ts
index f4b1e2c4f..4da0a3a66 100644
--- a/packages/mermaid/src/Diagram.ts
+++ b/packages/mermaid/src/Diagram.ts
@@ -7,6 +7,8 @@ import { UnknownDiagramError } from './errors.js';
 import { cleanupComments } from './diagram-api/comments.js';
 import type { DetailedError } from './utils.js';
 import type { MermaidConfig } from './config.type.js';
+import type { DiagramDefinition } from './diagram-api/types.js';
+import { D } from 'vitest/dist/types-198fd1d9.js';
 
 export type ParseErrorFunction = (err: string | DetailedError | unknown, hash?: any) => void;
 
@@ -16,10 +18,11 @@ export type ParseErrorFunction = (err: string | DetailedError | unknown, hash?:
  */
 export class Diagram {
   type = 'graph';
-  parser;
-  renderer;
-  db;
-  private init?: (config: MermaidConfig) => void;
+  parser: DiagramDefinition['parser'];
+  renderer: DiagramDefinition['renderer'];
+  db: DiagramDefinition['db'];
+  private init?: DiagramDefinition['init'];
+
   private detectError?: UnknownDiagramError;
   constructor(public text: string) {
     this.text += '\n';
@@ -62,7 +65,6 @@ export class Diagram {
     if (this.init) {
       const config = configApi.getConfig();
       this.init(config);
-      log.info('Initialized diagram ' + this.type, config);
     }
     this.parser.parse(this.text);
   }
diff --git a/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js b/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js
index 1b4c62e66..0b84fbe35 100644
--- a/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js
+++ b/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js
@@ -172,8 +172,6 @@ describe('more than one sequence diagram', () => {
 
 describe('when parsing a sequenceDiagram', function () {
   beforeEach(function () {
-    // diagram.db = sequenceDb;
-    //
     diagram = new Diagram(`
 sequenceDiagram
 Alice->Bob:Hello Bob, how are you?
@@ -2048,7 +2046,6 @@ describe('when rendering a sequenceDiagram with directives', () => {
 
   beforeEach(function () {
     mermaidAPI.reset();
-    // diagram.db = sequenceDb;
     diagram.renderer.bounds.init();
   });
 

From 4471001ef28159c3b05c81cd6f16054912de9cbb Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Tue, 8 Aug 2023 00:24:38 +0530
Subject: [PATCH 72/85] chore: remove comment

Co-authored-by: Alois Klink <alois@aloisklink.com>
---
 docs/config/setup/modules/mermaidAPI.md | 20 ++++++++++----------
 packages/mermaid/src/mermaidAPI.ts      |  1 -
 2 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/docs/config/setup/modules/mermaidAPI.md b/docs/config/setup/modules/mermaidAPI.md
index 72f18cace..6c8caf1ed 100644
--- a/docs/config/setup/modules/mermaidAPI.md
+++ b/docs/config/setup/modules/mermaidAPI.md
@@ -96,7 +96,7 @@ mermaid.initialize(config);
 
 #### Defined in
 
-[mermaidAPI.ts:667](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L667)
+[mermaidAPI.ts:666](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L666)
 
 ## Functions
 
@@ -127,7 +127,7 @@ Return the last node appended
 
 #### Defined in
 
-[mermaidAPI.ts:308](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L308)
+[mermaidAPI.ts:307](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L307)
 
 ---
 
@@ -153,7 +153,7 @@ the cleaned up svgCode
 
 #### Defined in
 
-[mermaidAPI.ts:256](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L256)
+[mermaidAPI.ts:255](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L255)
 
 ---
 
@@ -179,7 +179,7 @@ the string with all the user styles
 
 #### Defined in
 
-[mermaidAPI.ts:185](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L185)
+[mermaidAPI.ts:184](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L184)
 
 ---
 
@@ -202,7 +202,7 @@ the string with all the user styles
 
 #### Defined in
 
-[mermaidAPI.ts:233](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L233)
+[mermaidAPI.ts:232](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L232)
 
 ---
 
@@ -229,7 +229,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
 
 #### Defined in
 
-[mermaidAPI.ts:169](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L169)
+[mermaidAPI.ts:168](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L168)
 
 ---
 
@@ -249,7 +249,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
 
 #### Defined in
 
-[mermaidAPI.ts:155](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L155)
+[mermaidAPI.ts:154](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L154)
 
 ---
 
@@ -269,7 +269,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
 
 #### Defined in
 
-[mermaidAPI.ts:126](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L126)
+[mermaidAPI.ts:125](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L125)
 
 ---
 
@@ -295,7 +295,7 @@ Put the svgCode into an iFrame. Return the iFrame code
 
 #### Defined in
 
-[mermaidAPI.ts:287](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L287)
+[mermaidAPI.ts:286](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L286)
 
 ---
 
@@ -320,4 +320,4 @@ Remove any existing elements from the given document
 
 #### Defined in
 
-[mermaidAPI.ts:358](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L358)
+[mermaidAPI.ts:357](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L357)
diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts
index 5cbf0287e..807054e8a 100644
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -109,7 +109,6 @@ async function parse(text: string, parseOptions?: ParseOptions): Promise<boolean
   addDiagrams();
   try {
     await getDiagramFromText(text);
-    // diagram.parse();
   } catch (error) {
     if (parseOptions?.suppressErrors) {
       return false;

From 776b219c03d058313c7947f9adb788190d5e42e7 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Tue, 8 Aug 2023 00:31:17 +0530
Subject: [PATCH 73/85] chore: Minor cleanups

---
 packages/mermaid/src/Diagram.ts                | 7 +------
 packages/mermaid/src/diagram-api/diagramAPI.ts | 6 +++---
 2 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/packages/mermaid/src/Diagram.ts b/packages/mermaid/src/Diagram.ts
index 4da0a3a66..13fd3232b 100644
--- a/packages/mermaid/src/Diagram.ts
+++ b/packages/mermaid/src/Diagram.ts
@@ -6,9 +6,7 @@ import { extractFrontMatter } from './diagram-api/frontmatter.js';
 import { UnknownDiagramError } from './errors.js';
 import { cleanupComments } from './diagram-api/comments.js';
 import type { DetailedError } from './utils.js';
-import type { MermaidConfig } from './config.type.js';
 import type { DiagramDefinition } from './diagram-api/types.js';
-import { D } from 'vitest/dist/types-198fd1d9.js';
 
 export type ParseErrorFunction = (err: string | DetailedError | unknown, hash?: any) => void;
 
@@ -62,10 +60,7 @@ export class Diagram {
       throw this.detectError;
     }
     this.db.clear?.();
-    if (this.init) {
-      const config = configApi.getConfig();
-      this.init(config);
-    }
+    this.init?.(configApi.getConfig());
     this.parser.parse(this.text);
   }
 
diff --git a/packages/mermaid/src/diagram-api/diagramAPI.ts b/packages/mermaid/src/diagram-api/diagramAPI.ts
index 7e89d9cd7..3edd982bb 100644
--- a/packages/mermaid/src/diagram-api/diagramAPI.ts
+++ b/packages/mermaid/src/diagram-api/diagramAPI.ts
@@ -69,11 +69,11 @@ export const getDiagram = (name: string): DiagramDefinition => {
   if (name in diagrams) {
     return diagrams[name];
   }
-  throw new Error(`Diagram ${name} not found.`);
+  throw new DiagramNotFoundError(name);
 };
 
 export class DiagramNotFoundError extends Error {
-  constructor(message: string) {
-    super(`Diagram ${message} not found.`);
+  constructor(name: string) {
+    super(`Diagram ${name} not found.`);
   }
 }

From bae9a7c1b87aff6f2eef9720298267250b18ba37 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Tue, 8 Aug 2023 11:13:45 +0530
Subject: [PATCH 74/85] docs: Correct detectType filename

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

diff --git a/docs/community/newDiagram.md b/docs/community/newDiagram.md
index ba52999f4..5dd616e66 100644
--- a/docs/community/newDiagram.md
+++ b/docs/community/newDiagram.md
@@ -10,7 +10,7 @@
 
 #### Grammar
 
-This would be to define a jison grammar for the new diagram type. That should start with a way to identify that the text in the mermaid tag is a diagram of that type. Create a new folder under diagrams for your new diagram type and a parser folder in it. This leads us to step 2.
+This would be to define a JISON grammar for the new diagram type. That should start with a way to identify that the text in the mermaid tag is a diagram of that type. Create a new folder under diagrams for your new diagram type and a parser folder in it. This leads us to step 2.
 
 For instance:
 
@@ -60,7 +60,7 @@ Place the renderer in the diagram folder.
 
 ### Step 3: Detection of the new diagram type
 
-The second thing to do is to add the capability to detect the new diagram to type to the detectType in utils.js. The detection should return a key for the new diagram type.
+The second thing to do is to add the capability to detect the new diagram to type to the detectType in `diagram-api/detectType.ts`. The detection should return a key for the new diagram type.
 [This key will be used to as the aria roledescription](#aria-roledescription), so it should be a word that clearly describes the diagram type.
 For example, if your new diagram use a UML deployment diagram, a good key would be "UMLDeploymentDiagram" because assistive technologies such as a screen reader
 would voice that as "U-M-L Deployment diagram." Another good key would be "deploymentDiagram" because that would be voiced as "Deployment Diagram." A bad key would be "deployment" because that would not sufficiently describe the diagram.
diff --git a/packages/mermaid/src/docs/community/newDiagram.md b/packages/mermaid/src/docs/community/newDiagram.md
index 3393396ee..7fb47dd30 100644
--- a/packages/mermaid/src/docs/community/newDiagram.md
+++ b/packages/mermaid/src/docs/community/newDiagram.md
@@ -4,7 +4,7 @@
 
 #### Grammar
 
-This would be to define a jison grammar for the new diagram type. That should start with a way to identify that the text in the mermaid tag is a diagram of that type. Create a new folder under diagrams for your new diagram type and a parser folder in it. This leads us to step 2.
+This would be to define a JISON grammar for the new diagram type. That should start with a way to identify that the text in the mermaid tag is a diagram of that type. Create a new folder under diagrams for your new diagram type and a parser folder in it. This leads us to step 2.
 
 For instance:
 
@@ -55,7 +55,7 @@ Place the renderer in the diagram folder.
 
 ### Step 3: Detection of the new diagram type
 
-The second thing to do is to add the capability to detect the new diagram to type to the detectType in utils.js. The detection should return a key for the new diagram type.
+The second thing to do is to add the capability to detect the new diagram to type to the detectType in `diagram-api/detectType.ts`. The detection should return a key for the new diagram type.
 [This key will be used to as the aria roledescription](#aria-roledescription), so it should be a word that clearly describes the diagram type.
 For example, if your new diagram use a UML deployment diagram, a good key would be "UMLDeploymentDiagram" because assistive technologies such as a screen reader
 would voice that as "U-M-L Deployment diagram." Another good key would be "deploymentDiagram" because that would be voiced as "Deployment Diagram." A bad key would be "deployment" because that would not sufficiently describe the diagram.

From 776035553a661769055e2e5b4d3292e0a688a3ee Mon Sep 17 00:00:00 2001
From: Zaid Soomro <soomrozaid@gmail.com>
Date: Wed, 9 Aug 2023 01:04:04 -0600
Subject: [PATCH 75/85] Syntax Update CONTRIBUTING.md

---
 CONTRIBUTING.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index e8ac09325..307bd038b 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -64,7 +64,7 @@ eg: `feature/2945_state-diagram-new-arrow-florbs`, `bug/1123_fix_random_ugly_red
 
 Documentation is necessary for all non bugfix/refactoring changes.
 
-Only make changes to files are in [`/packages/mermaid/src/docs`](packages/mermaid/src/docs)
+Only make changes to files that are in [`/packages/mermaid/src/docs`](packages/mermaid/src/docs)
 
 **_DO NOT CHANGE FILES IN `/docs`_**
 

From 7742a6c485e1ceedd8dbe5de02d92d5df474e821 Mon Sep 17 00:00:00 2001
From: Alois Klink <alois@aloisklink.com>
Date: Wed, 9 Aug 2023 19:15:09 +0100
Subject: [PATCH 76/85] build(types): use prettier conf on config.types.ts

Currently, the `packages/mermaid/src/config.type.ts` types file
(auto-generated via `pnpm run --filter mermaid types:build-config`)
uses the default prettier config.

Instead, we should use the prettier config in the Mermaid repo, as it's
slightly different from the default prettier config.
---
 packages/mermaid/scripts/create-types-from-json-schema.mts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/mermaid/scripts/create-types-from-json-schema.mts b/packages/mermaid/scripts/create-types-from-json-schema.mts
index e81ea70ff..836aaa448 100644
--- a/packages/mermaid/scripts/create-types-from-json-schema.mts
+++ b/packages/mermaid/scripts/create-types-from-json-schema.mts
@@ -18,6 +18,7 @@ import { promisify } from 'node:util';
 
 import { load, JSON_SCHEMA } from 'js-yaml';
 import { compile, type JSONSchema } from 'json-schema-to-typescript';
+import prettier from 'prettier';
 
 import _Ajv2019, { type JSONSchemaType } from 'ajv/dist/2019.js';
 
@@ -207,6 +208,7 @@ async function generateTypescript(mermaidConfigSchema: JSONSchemaType<MermaidCon
     {
       additionalProperties: false, // in JSON Schema 2019-09, these are called `unevaluatedProperties`
       unreachableDefinitions: true, // definition for FontConfig is unreachable
+      style: (await prettier.resolveConfig('.')) ?? {},
     }
   );
 

From 0b9f6d1ff9cf2226e948e9371c11b15c6b09e3e6 Mon Sep 17 00:00:00 2001
From: Alois Klink <alois@aloisklink.com>
Date: Wed, 9 Aug 2023 19:22:30 +0100
Subject: [PATCH 77/85] style: format packages/mermaid/src/config.type.ts

Run `pnpm run --filter mermaid types:build-config` to format
the `packages/mermaid/src/config.type.ts` file with the new prettier
config.
---
 packages/mermaid/src/config.type.ts | 50 ++++++++++++++---------------
 1 file changed, 25 insertions(+), 25 deletions(-)

diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts
index df87e9c40..c378660ca 100644
--- a/packages/mermaid/src/config.type.ts
+++ b/packages/mermaid/src/config.type.ts
@@ -8,7 +8,7 @@
 /**
  * Configuration options to pass to the `dompurify` library.
  */
-export type DOMPurifyConfiguration = import("dompurify").Config;
+export type DOMPurifyConfiguration = import('dompurify').Config;
 /**
  * JavaScript function that returns a `FontConfig`.
  *
@@ -39,7 +39,7 @@ export type FontCalculator = () => Partial<FontConfig>;
  * This interface was referenced by `MermaidConfig`'s JSON-Schema
  * via the `definition` "SankeyLinkColor".
  */
-export type SankeyLinkColor = "source" | "target" | "gradient";
+export type SankeyLinkColor = 'source' | 'target' | 'gradient';
 /**
  * Controls the alignment of the Sankey diagrams.
  *
@@ -49,7 +49,7 @@ export type SankeyLinkColor = "source" | "target" | "gradient";
  * This interface was referenced by `MermaidConfig`'s JSON-Schema
  * via the `definition` "SankeyNodeAlignment".
  */
-export type SankeyNodeAlignment = "left" | "right" | "center" | "justify";
+export type SankeyNodeAlignment = 'left' | 'right' | 'center' | 'justify';
 /**
  * The font size to use
  */
@@ -61,7 +61,7 @@ export interface MermaidConfig {
    * You may also use `themeCSS` to override this value.
    *
    */
-  theme?: string | "default" | "forest" | "dark" | "neutral" | "null";
+  theme?: string | 'default' | 'forest' | 'dark' | 'neutral' | 'null';
   themeVariables?: any;
   themeCSS?: string;
   /**
@@ -88,12 +88,12 @@ export interface MermaidConfig {
     | 0
     | 2
     | 1
-    | "trace"
-    | "debug"
-    | "info"
-    | "warn"
-    | "error"
-    | "fatal"
+    | 'trace'
+    | 'debug'
+    | 'info'
+    | 'warn'
+    | 'error'
+    | 'fatal'
     | 3
     | 4
     | 5
@@ -101,7 +101,7 @@ export interface MermaidConfig {
   /**
    * Level of trust for parsed diagram
    */
-  securityLevel?: string | "strict" | "loose" | "antiscript" | "sandbox" | undefined;
+  securityLevel?: string | 'strict' | 'loose' | 'antiscript' | 'sandbox' | undefined;
   /**
    * Dictates whether mermaid starts on Page load
    */
@@ -689,11 +689,11 @@ export interface QuadrantChartConfig extends BaseDiagramConfig {
   /**
    * position of x-axis labels
    */
-  xAxisPosition?: "top" | "bottom";
+  xAxisPosition?: 'top' | 'bottom';
   /**
    * position of y-axis labels
    */
-  yAxisPosition?: "left" | "right";
+  yAxisPosition?: 'left' | 'right';
   /**
    * stroke width of edges of the box that are inside the quadrant
    */
@@ -723,7 +723,7 @@ export interface ErDiagramConfig extends BaseDiagramConfig {
   /**
    * Directional bias for layout of entities
    */
-  layoutDirection?: string | "TB" | "BT" | "LR" | "RL";
+  layoutDirection?: string | 'TB' | 'BT' | 'LR' | 'RL';
   /**
    * The minimum width of an entity box. Expressed in pixels.
    */
@@ -788,7 +788,7 @@ export interface StateDiagramConfig extends BaseDiagramConfig {
    * Decides which rendering engine that is to be used for the rendering.
    *
    */
-  defaultRenderer?: string | "dagre-d3" | "dagre-wrapper" | "elk";
+  defaultRenderer?: string | 'dagre-d3' | 'dagre-wrapper' | 'elk';
 }
 /**
  * This interface was referenced by `MermaidConfig`'s JSON-Schema
@@ -812,7 +812,7 @@ export interface ClassDiagramConfig extends BaseDiagramConfig {
    * Decides which rendering engine that is to be used for the rendering.
    *
    */
-  defaultRenderer?: string | "dagre-d3" | "dagre-wrapper" | "elk";
+  defaultRenderer?: string | 'dagre-d3' | 'dagre-wrapper' | 'elk';
   nodeSpacing?: number;
   rankSpacing?: number;
   /**
@@ -872,7 +872,7 @@ export interface JourneyDiagramConfig extends BaseDiagramConfig {
   /**
    * Multiline message alignment
    */
-  messageAlign?: string | "left" | "center" | "right";
+  messageAlign?: string | 'left' | 'center' | 'right';
   /**
    * Prolongs the edge of the diagram downwards.
    *
@@ -951,7 +951,7 @@ export interface TimelineDiagramConfig extends BaseDiagramConfig {
   /**
    * Multiline message alignment
    */
-  messageAlign?: string | "left" | "center" | "right";
+  messageAlign?: string | 'left' | 'center' | 'right';
   /**
    * Prolongs the edge of the diagram downwards.
    *
@@ -1062,12 +1062,12 @@ export interface GanttDiagramConfig extends BaseDiagramConfig {
    * Controls the display mode.
    *
    */
-  displayMode?: string | "compact";
+  displayMode?: string | 'compact';
   /**
    * On which day a week-based interval should start
    *
    */
-  weekday?: "monday" | "tuesday" | "wednesday" | "thursday" | "friday" | "saturday" | "sunday";
+  weekday?: 'monday' | 'tuesday' | 'wednesday' | 'thursday' | 'friday' | 'saturday' | 'sunday';
 }
 /**
  * The object containing configurations specific for sequence diagrams
@@ -1121,7 +1121,7 @@ export interface SequenceDiagramConfig extends BaseDiagramConfig {
   /**
    * Multiline message alignment
    */
-  messageAlign?: string | "left" | "center" | "right";
+  messageAlign?: string | 'left' | 'center' | 'right';
   /**
    * Mirror actors under diagram
    *
@@ -1178,7 +1178,7 @@ export interface SequenceDiagramConfig extends BaseDiagramConfig {
   /**
    * This sets the text alignment of actor-attached notes
    */
-  noteAlign?: string | "left" | "center" | "right";
+  noteAlign?: string | 'left' | 'center' | 'right';
   /**
    * This sets the font size of actor messages
    */
@@ -1254,7 +1254,7 @@ export interface FlowchartDiagramConfig extends BaseDiagramConfig {
    * Defines how mermaid renders curves for flowcharts.
    *
    */
-  curve?: string | "basis" | "linear" | "cardinal";
+  curve?: string | 'basis' | 'linear' | 'cardinal';
   /**
    * Represents the padding between the labels and the shape
    *
@@ -1266,7 +1266,7 @@ export interface FlowchartDiagramConfig extends BaseDiagramConfig {
    * Decides which rendering engine that is to be used for the rendering.
    *
    */
-  defaultRenderer?: string | "dagre-d3" | "dagre-wrapper" | "elk";
+  defaultRenderer?: string | 'dagre-d3' | 'dagre-wrapper' | 'elk';
   /**
    * Width of nodes where text is wrapped.
    *
@@ -1296,7 +1296,7 @@ export interface SankeyDiagramConfig extends BaseDiagramConfig {
    * See <https://github.com/d3/d3-sankey#alignments>.
    *
    */
-  nodeAlignment?: "left" | "right" | "center" | "justify";
+  nodeAlignment?: 'left' | 'right' | 'center' | 'justify';
   useMaxWidth?: boolean;
 }
 /**

From c55a0947be90ed966175a4d35428bf5b6ed515ba Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Thu, 10 Aug 2023 13:14:39 +0200
Subject: [PATCH 78/85] #2139 Applying user defined classes properly when
 calculating shape width

---
 cypress/platform/knsv2.html                   |  21 ++--
 packages/mermaid/src/dagre-wrapper/nodes.js   | 102 +++++++++++++++---
 .../mermaid/src/dagre-wrapper/shapes/util.js  |   2 +-
 3 files changed, 103 insertions(+), 22 deletions(-)

diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index 13de19ba0..f9a9f3756 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -58,12 +58,21 @@
   </head>
   <body>
     <pre id="diagram" class="mermaid">
----
-title: Simple flowchart with invisible edges
----
-flowchart TD
-A ~~~ B
-  </pre
+      flowchart
+        classDef mainCategories fill:#f9d5e5, stroke:#233d4d,stroke-width:2px, font-weight:bold;
+        CS(Customer Awareness Journey):::mainCategories
+      </pre
+    >
+    <pre id="diagram" class="mermaid">
+flowchart
+Node1:::class1 --> Node2:::class2
+Node1:::class1 --> Node3:::class2
+Node3 --> Node4((I am a circle)):::larger
+
+classDef class1 fill:lightblue
+classDef class2 fill:pink
+classDef larger font-size:30px,fill:yellow
+      </pre
     >
     <pre id="diagram" class="mermaid2">
 stateDiagram-v2
diff --git a/packages/mermaid/src/dagre-wrapper/nodes.js b/packages/mermaid/src/dagre-wrapper/nodes.js
index 6c6733358..e7988c8b5 100644
--- a/packages/mermaid/src/dagre-wrapper/nodes.js
+++ b/packages/mermaid/src/dagre-wrapper/nodes.js
@@ -8,8 +8,25 @@ import note from './shapes/note.js';
 import { parseMember } from '../diagrams/class/svgDraw.js';
 import { evaluate } from '../diagrams/common/common.js';
 
+const formatClass = (str) => {
+  if (str) {
+    return ' ' + str;
+  }
+  return '';
+};
+const getClassesFromNode = (node, otherClasses) => {
+  return `${otherClasses ? otherClasses : 'node default'}${formatClass(node.classes)} ${formatClass(
+    node.class
+  )}`;
+};
+
 const question = async (parent, node) => {
-  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
+  const { shapeSvg, bbox } = await labelHelper(
+    parent,
+    node,
+    getClassesFromNode(node, undefined),
+    true
+  );
 
   const w = bbox.width + node.padding;
   const h = bbox.height + node.padding;
@@ -70,7 +87,12 @@ const choice = (parent, node) => {
 };
 
 const hexagon = async (parent, node) => {
-  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
+  const { shapeSvg, bbox } = await labelHelper(
+    parent,
+    node,
+    getClassesFromNode(node, undefined),
+    true
+  );
 
   const f = 4;
   const h = bbox.height + node.padding;
@@ -97,7 +119,12 @@ const hexagon = async (parent, node) => {
 };
 
 const rect_left_inv_arrow = async (parent, node) => {
-  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
+  const { shapeSvg, bbox } = await labelHelper(
+    parent,
+    node,
+    getClassesFromNode(node, undefined),
+    true
+  );
 
   const w = bbox.width + node.padding;
   const h = bbox.height + node.padding;
@@ -123,7 +150,7 @@ const rect_left_inv_arrow = async (parent, node) => {
 };
 
 const lean_right = async (parent, node) => {
-  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
+  const { shapeSvg, bbox } = await labelHelper(parent, node, getClassesFromNode(node), true);
 
   const w = bbox.width + node.padding;
   const h = bbox.height + node.padding;
@@ -146,7 +173,12 @@ const lean_right = async (parent, node) => {
 };
 
 const lean_left = async (parent, node) => {
-  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
+  const { shapeSvg, bbox } = await labelHelper(
+    parent,
+    node,
+    getClassesFromNode(node, undefined),
+    true
+  );
 
   const w = bbox.width + node.padding;
   const h = bbox.height + node.padding;
@@ -169,7 +201,12 @@ const lean_left = async (parent, node) => {
 };
 
 const trapezoid = async (parent, node) => {
-  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
+  const { shapeSvg, bbox } = await labelHelper(
+    parent,
+    node,
+    getClassesFromNode(node, undefined),
+    true
+  );
 
   const w = bbox.width + node.padding;
   const h = bbox.height + node.padding;
@@ -192,7 +229,12 @@ const trapezoid = async (parent, node) => {
 };
 
 const inv_trapezoid = async (parent, node) => {
-  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
+  const { shapeSvg, bbox } = await labelHelper(
+    parent,
+    node,
+    getClassesFromNode(node, undefined),
+    true
+  );
 
   const w = bbox.width + node.padding;
   const h = bbox.height + node.padding;
@@ -215,7 +257,12 @@ const inv_trapezoid = async (parent, node) => {
 };
 
 const rect_right_inv_arrow = async (parent, node) => {
-  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
+  const { shapeSvg, bbox } = await labelHelper(
+    parent,
+    node,
+    getClassesFromNode(node, undefined),
+    true
+  );
 
   const w = bbox.width + node.padding;
   const h = bbox.height + node.padding;
@@ -239,7 +286,12 @@ const rect_right_inv_arrow = async (parent, node) => {
 };
 
 const cylinder = async (parent, node) => {
-  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
+  const { shapeSvg, bbox } = await labelHelper(
+    parent,
+    node,
+    getClassesFromNode(node, undefined),
+    true
+  );
 
   const w = bbox.width + node.padding;
   const rx = w / 2;
@@ -314,7 +366,7 @@ const rect = async (parent, node) => {
   const { shapeSvg, bbox, halfPadding } = await labelHelper(
     parent,
     node,
-    'node ' + node.classes,
+    'node ' + node.classes + ' ' + node.class,
     true
   );
 
@@ -360,7 +412,7 @@ const rect = async (parent, node) => {
 const labelRect = async (parent, node) => {
   const { shapeSvg } = await labelHelper(parent, node, 'label', true);
 
-  log.trace('Classes = ', node.classes);
+  log.trace('Classes = ', node.class);
   // add the rect
   const rect = shapeSvg.insert('rect', ':first-child');
 
@@ -545,7 +597,12 @@ const rectWithTitle = (parent, node) => {
 };
 
 const stadium = async (parent, node) => {
-  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
+  const { shapeSvg, bbox } = await labelHelper(
+    parent,
+    node,
+    getClassesFromNode(node, undefined),
+    true
+  );
 
   const h = bbox.height + node.padding;
   const w = bbox.width + h / 4 + node.padding;
@@ -571,7 +628,12 @@ const stadium = async (parent, node) => {
 };
 
 const circle = async (parent, node) => {
-  const { shapeSvg, bbox, halfPadding } = await labelHelper(parent, node, undefined, true);
+  const { shapeSvg, bbox, halfPadding } = await labelHelper(
+    parent,
+    node,
+    getClassesFromNode(node, undefined),
+    true
+  );
   const circle = shapeSvg.insert('circle', ':first-child');
 
   // center the circle around its coordinate
@@ -596,7 +658,12 @@ const circle = async (parent, node) => {
 };
 
 const doublecircle = async (parent, node) => {
-  const { shapeSvg, bbox, halfPadding } = await labelHelper(parent, node, undefined, true);
+  const { shapeSvg, bbox, halfPadding } = await labelHelper(
+    parent,
+    node,
+    getClassesFromNode(node, undefined),
+    true
+  );
   const gap = 5;
   const circleGroup = shapeSvg.insert('g', ':first-child');
   const outerCircle = circleGroup.insert('circle');
@@ -634,7 +701,12 @@ const doublecircle = async (parent, node) => {
 };
 
 const subroutine = async (parent, node) => {
-  const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
+  const { shapeSvg, bbox } = await labelHelper(
+    parent,
+    node,
+    getClassesFromNode(node, undefined),
+    true
+  );
 
   const w = bbox.width + node.padding;
   const h = bbox.height + node.padding;
diff --git a/packages/mermaid/src/dagre-wrapper/shapes/util.js b/packages/mermaid/src/dagre-wrapper/shapes/util.js
index 3eaedb4b9..95b82ddc0 100644
--- a/packages/mermaid/src/dagre-wrapper/shapes/util.js
+++ b/packages/mermaid/src/dagre-wrapper/shapes/util.js
@@ -13,6 +13,7 @@ export const labelHelper = async (parent, node, _classes, isNode) => {
   } else {
     classes = _classes;
   }
+
   // Add outer g element
   const shapeSvg = parent
     .insert('g')
@@ -49,7 +50,6 @@ export const labelHelper = async (parent, node, _classes, isNode) => {
       )
     );
   }
-
   // Get the size of the label
   let bbox = text.getBBox();
   const halfPadding = node.padding / 2;

From 46de343785775928d308ee8a1176f985068622ad Mon Sep 17 00:00:00 2001
From: Reda Al Sulais <u.yokozuna@gmail.com>
Date: Thu, 10 Aug 2023 22:00:24 +0300
Subject: [PATCH 79/85] standardized `error` diagram'

* remove empty `styles.js`
* use named imports/exports instead of default
* remove unnecessary data in diagram definition
---
 .../src/diagram-api/diagram-orchestration.ts  |   2 +-
 .../src/diagrams/error/errorDiagram.ts        |  22 +--
 .../src/diagrams/error/errorRenderer.ts       | 143 ++++++++----------
 packages/mermaid/src/diagrams/error/styles.js |   3 -
 packages/mermaid/src/mermaidAPI.ts            |   2 +-
 packages/mermaid/src/styles.spec.ts           |   2 -
 6 files changed, 69 insertions(+), 105 deletions(-)
 delete mode 100644 packages/mermaid/src/diagrams/error/styles.js

diff --git a/packages/mermaid/src/diagram-api/diagram-orchestration.ts b/packages/mermaid/src/diagram-api/diagram-orchestration.ts
index 9c03e27f3..8bec8b700 100644
--- a/packages/mermaid/src/diagram-api/diagram-orchestration.ts
+++ b/packages/mermaid/src/diagram-api/diagram-orchestration.ts
@@ -14,7 +14,7 @@ import classDiagramV2 from '../diagrams/class/classDetector-V2.js';
 import state from '../diagrams/state/stateDetector.js';
 import stateV2 from '../diagrams/state/stateDetector-V2.js';
 import journey from '../diagrams/user-journey/journeyDetector.js';
-import errorDiagram from '../diagrams/error/errorDiagram.js';
+import { diagram as errorDiagram } from '../diagrams/error/errorDiagram.js';
 import flowchartElk from '../diagrams/flowchart/elk/detector.js';
 import timeline from '../diagrams/timeline/detector.js';
 import mindmap from '../diagrams/mindmap/detector.js';
diff --git a/packages/mermaid/src/diagrams/error/errorDiagram.ts b/packages/mermaid/src/diagrams/error/errorDiagram.ts
index 76efdb0ae..8f0fcdf28 100644
--- a/packages/mermaid/src/diagrams/error/errorDiagram.ts
+++ b/packages/mermaid/src/diagrams/error/errorDiagram.ts
@@ -1,23 +1,13 @@
-import { DiagramDefinition } from '../../diagram-api/types.js';
-import styles from './styles.js';
-import renderer from './errorRenderer.js';
+import type { DiagramDefinition } from '../../diagram-api/types.js';
+import { renderer } from './errorRenderer.js';
+
 export const diagram: DiagramDefinition = {
-  db: {
-    clear: () => {
-      // Quite ok, clear needs to be there for error to work as a regular diagram
-    },
-  },
-  styles,
+  db: {},
   renderer,
   parser: {
     parser: { yy: {} },
-    parse: () => {
-      // no op
+    parse: (): void => {
+      return;
     },
   },
-  init: () => {
-    // no op
-  },
 };
-
-export default diagram;
diff --git a/packages/mermaid/src/diagrams/error/errorRenderer.ts b/packages/mermaid/src/diagrams/error/errorRenderer.ts
index aa0e9e816..b7049d4b7 100644
--- a/packages/mermaid/src/diagrams/error/errorRenderer.ts
+++ b/packages/mermaid/src/diagrams/error/errorRenderer.ts
@@ -1,100 +1,79 @@
-/** Created by knut on 14-12-11. */
-// @ts-ignore TODO: Investigate D3 issue
-import { select } from 'd3';
 import { log } from '../../logger.js';
-import { getErrorMessage } from '../../utils.js';
-
-/**
- * Merges the value of `conf` with the passed `cnf`
- *
- * @param cnf - Config to merge
- */
-export const setConf = function () {
-  // no-op
-};
+import type { Group, SVG } from '../../diagram-api/types.js';
+import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
+import { configureSvgSize } from '../../setupGraphViewbox.js';
 
 /**
  * Draws a an info picture in the tag with id: id based on the graph definition in text.
  *
  * @param _text - Mermaid graph definition.
  * @param id - The text for the error
- * @param mermaidVersion - The version
+ * @param version - The version
  */
-export const draw = (_text: string, id: string, mermaidVersion: string) => {
-  try {
-    log.debug('Renering svg for syntax error\n');
+export const draw = (_text: string, id: string, version: string) => {
+  log.debug('renering svg for syntax error\n');
 
-    const svg = select('#' + id);
+  const svg: SVG = selectSvgElement(id);
+  svg.attr('viewBox', '768 0 912 512');
+  configureSvgSize(svg, 100, 500, true);
 
-    const g = svg.append('g');
+  const g: Group = svg.append('g');
+  g.append('path')
+    .attr('class', 'error-icon')
+    .attr(
+      'd',
+      'm411.313,123.313c6.25-6.25 6.25-16.375 0-22.625s-16.375-6.25-22.625,0l-32,32-9.375,9.375-20.688-20.688c-12.484-12.5-32.766-12.5-45.25,0l-16,16c-1.261,1.261-2.304,2.648-3.31,4.051-21.739-8.561-45.324-13.426-70.065-13.426-105.867,0-192,86.133-192,192s86.133,192 192,192 192-86.133 192-192c0-24.741-4.864-48.327-13.426-70.065 1.402-1.007 2.79-2.049 4.051-3.31l16-16c12.5-12.492 12.5-32.758 0-45.25l-20.688-20.688 9.375-9.375 32.001-31.999zm-219.313,100.687c-52.938,0-96,43.063-96,96 0,8.836-7.164,16-16,16s-16-7.164-16-16c0-70.578 57.422-128 128-128 8.836,0 16,7.164 16,16s-7.164,16-16,16z'
+    );
 
-    g.append('path')
-      .attr('class', 'error-icon')
-      .attr(
-        'd',
-        'm411.313,123.313c6.25-6.25 6.25-16.375 0-22.625s-16.375-6.25-22.625,0l-32,32-9.375,9.375-20.688-20.688c-12.484-12.5-32.766-12.5-45.25,0l-16,16c-1.261,1.261-2.304,2.648-3.31,4.051-21.739-8.561-45.324-13.426-70.065-13.426-105.867,0-192,86.133-192,192s86.133,192 192,192 192-86.133 192-192c0-24.741-4.864-48.327-13.426-70.065 1.402-1.007 2.79-2.049 4.051-3.31l16-16c12.5-12.492 12.5-32.758 0-45.25l-20.688-20.688 9.375-9.375 32.001-31.999zm-219.313,100.687c-52.938,0-96,43.063-96,96 0,8.836-7.164,16-16,16s-16-7.164-16-16c0-70.578 57.422-128 128-128 8.836,0 16,7.164 16,16s-7.164,16-16,16z'
-      );
+  g.append('path')
+    .attr('class', 'error-icon')
+    .attr(
+      'd',
+      'm459.02,148.98c-6.25-6.25-16.375-6.25-22.625,0s-6.25,16.375 0,22.625l16,16c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688 6.25-6.25 6.25-16.375 0-22.625l-16.001-16z'
+    );
 
-    g.append('path')
-      .attr('class', 'error-icon')
-      .attr(
-        'd',
-        'm459.02,148.98c-6.25-6.25-16.375-6.25-22.625,0s-6.25,16.375 0,22.625l16,16c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688 6.25-6.25 6.25-16.375 0-22.625l-16.001-16z'
-      );
+  g.append('path')
+    .attr('class', 'error-icon')
+    .attr(
+      'd',
+      'm340.395,75.605c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688 6.25-6.25 6.25-16.375 0-22.625l-16-16c-6.25-6.25-16.375-6.25-22.625,0s-6.25,16.375 0,22.625l15.999,16z'
+    );
 
-    g.append('path')
-      .attr('class', 'error-icon')
-      .attr(
-        'd',
-        'm340.395,75.605c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688 6.25-6.25 6.25-16.375 0-22.625l-16-16c-6.25-6.25-16.375-6.25-22.625,0s-6.25,16.375 0,22.625l15.999,16z'
-      );
+  g.append('path')
+    .attr('class', 'error-icon')
+    .attr(
+      'd',
+      'm400,64c8.844,0 16-7.164 16-16v-32c0-8.836-7.156-16-16-16-8.844,0-16,7.164-16,16v32c0,8.836 7.156,16 16,16z'
+    );
 
-    g.append('path')
-      .attr('class', 'error-icon')
-      .attr(
-        'd',
-        'm400,64c8.844,0 16-7.164 16-16v-32c0-8.836-7.156-16-16-16-8.844,0-16,7.164-16,16v32c0,8.836 7.156,16 16,16z'
-      );
+  g.append('path')
+    .attr('class', 'error-icon')
+    .attr(
+      'd',
+      'm496,96.586h-32c-8.844,0-16,7.164-16,16 0,8.836 7.156,16 16,16h32c8.844,0 16-7.164 16-16 0-8.836-7.156-16-16-16z'
+    );
 
-    g.append('path')
-      .attr('class', 'error-icon')
-      .attr(
-        'd',
-        'm496,96.586h-32c-8.844,0-16,7.164-16,16 0,8.836 7.156,16 16,16h32c8.844,0 16-7.164 16-16 0-8.836-7.156-16-16-16z'
-      );
+  g.append('path')
+    .attr('class', 'error-icon')
+    .attr(
+      'd',
+      'm436.98,75.605c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688l32-32c6.25-6.25 6.25-16.375 0-22.625s-16.375-6.25-22.625,0l-32,32c-6.251,6.25-6.251,16.375-0.001,22.625z'
+    );
 
-    g.append('path')
-      .attr('class', 'error-icon')
-      .attr(
-        'd',
-        'm436.98,75.605c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688l32-32c6.25-6.25 6.25-16.375 0-22.625s-16.375-6.25-22.625,0l-32,32c-6.251,6.25-6.251,16.375-0.001,22.625z'
-      );
-
-    g.append('text') // text label for the x axis
-      .attr('class', 'error-text')
-      .attr('x', 1440)
-      .attr('y', 250)
-      .attr('font-size', '150px')
-      .style('text-anchor', 'middle')
-      .text('Syntax error in text');
-    g.append('text') // text label for the x axis
-      .attr('class', 'error-text')
-      .attr('x', 1250)
-      .attr('y', 400)
-      .attr('font-size', '100px')
-      .style('text-anchor', 'middle')
-      .text('mermaid version ' + mermaidVersion);
-
-    svg.attr('height', 100);
-    svg.attr('width', 500);
-    svg.attr('viewBox', '768 0 912 512');
-  } catch (e) {
-    log.error('Error while rendering info diagram');
-    log.error(getErrorMessage(e));
-  }
+  g.append('text') // text label for the x axis
+    .attr('class', 'error-text')
+    .attr('x', 1440)
+    .attr('y', 250)
+    .attr('font-size', '150px')
+    .style('text-anchor', 'middle')
+    .text('Syntax error in text');
+  g.append('text') // text label for the x axis
+    .attr('class', 'error-text')
+    .attr('x', 1250)
+    .attr('y', 400)
+    .attr('font-size', '100px')
+    .style('text-anchor', 'middle')
+    .text(`mermaid version ${version}`);
 };
 
-export default {
-  setConf,
-  draw,
-};
+export const renderer = { draw };
diff --git a/packages/mermaid/src/diagrams/error/styles.js b/packages/mermaid/src/diagrams/error/styles.js
deleted file mode 100644
index 0b0729813..000000000
--- a/packages/mermaid/src/diagrams/error/styles.js
+++ /dev/null
@@ -1,3 +0,0 @@
-const getStyles = () => ``;
-
-export default getStyles;
diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts
index 70b314daa..e0c280f63 100644
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -18,7 +18,7 @@ import { version } from '../package.json';
 import * as configApi from './config.js';
 import { addDiagrams } from './diagram-api/diagram-orchestration.js';
 import { Diagram, getDiagramFromText } from './Diagram.js';
-import errorRenderer from './diagrams/error/errorRenderer.js';
+import { renderer as errorRenderer } from './diagrams/error/errorRenderer.js';
 import { attachFunctions } from './interactionDb.js';
 import { log, setLogLevel } from './logger.js';
 import getStyles from './styles.js';
diff --git a/packages/mermaid/src/styles.spec.ts b/packages/mermaid/src/styles.spec.ts
index 51951f190..935341641 100644
--- a/packages/mermaid/src/styles.spec.ts
+++ b/packages/mermaid/src/styles.spec.ts
@@ -19,7 +19,6 @@ import classDiagram from './diagrams/class/styles.js';
 import flowchart from './diagrams/flowchart/styles.js';
 import flowchartElk from './diagrams/flowchart/elk/styles.js';
 import er from './diagrams/er/styles.js';
-import error from './diagrams/error/styles.js';
 import git from './diagrams/git/styles.js';
 import gantt from './diagrams/gantt/styles.js';
 import pie from './diagrams/pie/styles.js';
@@ -86,7 +85,6 @@ describe('styles', () => {
         c4,
         classDiagram,
         er,
-        error,
         flowchart,
         flowchartElk,
         gantt,

From 980a5ac8b54a0cb158bd980d1c8c88ee43de4f8e Mon Sep 17 00:00:00 2001
From: Reda Al Sulais <u.yokozuna@gmail.com>
Date: Thu, 10 Aug 2023 22:26:04 +0300
Subject: [PATCH 80/85] create `ParserDefinition` type

---
 packages/mermaid/src/diagram-api/diagramAPI.spec.ts |  7 ++++++-
 packages/mermaid/src/diagram-api/types.ts           |  9 +++++++--
 packages/mermaid/src/mermaid.spec.ts                | 10 +++++++---
 3 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/packages/mermaid/src/diagram-api/diagramAPI.spec.ts b/packages/mermaid/src/diagram-api/diagramAPI.spec.ts
index 49bde1a66..b437745cf 100644
--- a/packages/mermaid/src/diagram-api/diagramAPI.spec.ts
+++ b/packages/mermaid/src/diagram-api/diagramAPI.spec.ts
@@ -35,7 +35,12 @@ describe('DiagramAPI', () => {
       'loki',
       {
         db: {},
-        parser: {},
+        parser: {
+          parse: (_text) => {
+            return;
+          },
+          parser: { yy: {} },
+        },
         renderer: {},
         styles: {},
       },
diff --git a/packages/mermaid/src/diagram-api/types.ts b/packages/mermaid/src/diagram-api/types.ts
index 860e965ac..100b92e87 100644
--- a/packages/mermaid/src/diagram-api/types.ts
+++ b/packages/mermaid/src/diagram-api/types.ts
@@ -1,5 +1,5 @@
 import { Diagram } from '../Diagram.js';
-import { MermaidConfig } from '../config.type.js';
+import type { MermaidConfig } from '../config.type.js';
 import type * as d3 from 'd3';
 
 export interface InjectUtils {
@@ -27,7 +27,7 @@ export interface DiagramDB {
 export interface DiagramDefinition {
   db: DiagramDB;
   renderer: any;
-  parser: any;
+  parser: ParserDefinition;
   styles?: any;
   init?: (config: MermaidConfig) => void;
   injectUtils?: (
@@ -70,6 +70,11 @@ export type DrawDefinition = (
   diagramObject: Diagram
 ) => void;
 
+export interface ParserDefinition {
+  parse: (text: string) => void;
+  parser: { yy: DiagramDB };
+}
+
 /**
  * Type for function parse directive from diagram code.
  *
diff --git a/packages/mermaid/src/mermaid.spec.ts b/packages/mermaid/src/mermaid.spec.ts
index e27428545..0b4437d74 100644
--- a/packages/mermaid/src/mermaid.spec.ts
+++ b/packages/mermaid/src/mermaid.spec.ts
@@ -3,6 +3,7 @@ import { mermaidAPI } from './mermaidAPI.js';
 import './diagram-api/diagram-orchestration.js';
 import { addDiagrams } from './diagram-api/diagram-orchestration.js';
 import { beforeAll, describe, it, expect, vi } from 'vitest';
+import type { DiagramDefinition } from './diagram-api/types.js';
 
 beforeAll(async () => {
   addDiagrams();
@@ -92,13 +93,16 @@ describe('when using mermaid and ', () => {
 
     it('should defer diagram load based on parameter', async () => {
       let loaded = false;
-      const dummyDiagram = {
+      const dummyDiagram: DiagramDefinition = {
         db: {},
         renderer: () => {
           // do nothing
         },
-        parser: () => {
-          // do nothing
+        parser: {
+          parse: (_text) => {
+            return;
+          },
+          parser: { yy: {} },
         },
         styles: () => {
           // do nothing

From 9ab048c7e9e193080cf00aba531863a9cae92ae7 Mon Sep 17 00:00:00 2001
From: Reda Al Sulais <u.yokozuna@gmail.com>
Date: Fri, 11 Aug 2023 00:55:31 +0300
Subject: [PATCH 81/85] use default export in `error` diagram

---
 packages/mermaid/src/diagram-api/diagram-orchestration.ts | 2 +-
 packages/mermaid/src/diagrams/error/errorDiagram.ts       | 4 +++-
 packages/mermaid/src/diagrams/error/errorRenderer.ts      | 2 ++
 packages/mermaid/src/mermaidAPI.ts                        | 2 +-
 4 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/mermaid/src/diagram-api/diagram-orchestration.ts b/packages/mermaid/src/diagram-api/diagram-orchestration.ts
index 8bec8b700..9c03e27f3 100644
--- a/packages/mermaid/src/diagram-api/diagram-orchestration.ts
+++ b/packages/mermaid/src/diagram-api/diagram-orchestration.ts
@@ -14,7 +14,7 @@ import classDiagramV2 from '../diagrams/class/classDetector-V2.js';
 import state from '../diagrams/state/stateDetector.js';
 import stateV2 from '../diagrams/state/stateDetector-V2.js';
 import journey from '../diagrams/user-journey/journeyDetector.js';
-import { diagram as errorDiagram } from '../diagrams/error/errorDiagram.js';
+import errorDiagram from '../diagrams/error/errorDiagram.js';
 import flowchartElk from '../diagrams/flowchart/elk/detector.js';
 import timeline from '../diagrams/timeline/detector.js';
 import mindmap from '../diagrams/mindmap/detector.js';
diff --git a/packages/mermaid/src/diagrams/error/errorDiagram.ts b/packages/mermaid/src/diagrams/error/errorDiagram.ts
index 8f0fcdf28..284dfd744 100644
--- a/packages/mermaid/src/diagrams/error/errorDiagram.ts
+++ b/packages/mermaid/src/diagrams/error/errorDiagram.ts
@@ -1,7 +1,7 @@
 import type { DiagramDefinition } from '../../diagram-api/types.js';
 import { renderer } from './errorRenderer.js';
 
-export const diagram: DiagramDefinition = {
+const diagram: DiagramDefinition = {
   db: {},
   renderer,
   parser: {
@@ -11,3 +11,5 @@ export const diagram: DiagramDefinition = {
     },
   },
 };
+
+export default diagram;
diff --git a/packages/mermaid/src/diagrams/error/errorRenderer.ts b/packages/mermaid/src/diagrams/error/errorRenderer.ts
index b7049d4b7..ebe0d0d73 100644
--- a/packages/mermaid/src/diagrams/error/errorRenderer.ts
+++ b/packages/mermaid/src/diagrams/error/errorRenderer.ts
@@ -77,3 +77,5 @@ export const draw = (_text: string, id: string, version: string) => {
 };
 
 export const renderer = { draw };
+
+export default renderer;
diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts
index e0c280f63..70b314daa 100644
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -18,7 +18,7 @@ import { version } from '../package.json';
 import * as configApi from './config.js';
 import { addDiagrams } from './diagram-api/diagram-orchestration.js';
 import { Diagram, getDiagramFromText } from './Diagram.js';
-import { renderer as errorRenderer } from './diagrams/error/errorRenderer.js';
+import errorRenderer from './diagrams/error/errorRenderer.js';
 import { attachFunctions } from './interactionDb.js';
 import { log, setLogLevel } from './logger.js';
 import getStyles from './styles.js';

From c938c7a438589a16c2309d348cee4996ebac7202 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Fri, 11 Aug 2023 13:57:26 +0200
Subject: [PATCH 82/85] Fix for interim issue with classes in state diagrams

---
 packages/mermaid/src/diagrams/state/stateRenderer-v2.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/mermaid/src/diagrams/state/stateRenderer-v2.js b/packages/mermaid/src/diagrams/state/stateRenderer-v2.js
index 990048ec7..1c9b2d1d3 100644
--- a/packages/mermaid/src/diagrams/state/stateRenderer-v2.js
+++ b/packages/mermaid/src/diagrams/state/stateRenderer-v2.js
@@ -84,6 +84,7 @@ export const setConf = function (cnf) {
  * @returns {object} ClassDef styles (a Map with keys = strings, values = )
  */
 export const getClasses = function (text, diagramObj) {
+  diagramObj.db.extract(diagramObj.db.getRootDocV2());
   return diagramObj.db.getClasses();
 };
 

From c5e7e6040c78eab4e8c2043d3436bade17aefad3 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Fri, 11 Aug 2023 13:58:19 +0200
Subject: [PATCH 83/85] Adding new flowchart tests related to issue #2139

---
 .../rendering/flowchart-v2.spec.js            | 27 ++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js
index 0f4b079c9..aac4a31b1 100644
--- a/cypress/integration/rendering/flowchart-v2.spec.js
+++ b/cypress/integration/rendering/flowchart-v2.spec.js
@@ -449,7 +449,7 @@ flowchart TD
       { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
   });
-  it('65: text-color from classes', () => {
+  it('65-1: text-color from classes', () => {
     imgSnapshotTest(
       `
       flowchart LR
@@ -460,6 +460,31 @@ flowchart TD
       { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
   });
+  it('65-2: bold text from classes', () => {
+    imgSnapshotTest(
+      `
+      flowchart
+        classDef cat fill:#f9d5e5, stroke:#233d4d,stroke-width:2px, font-weight:bold;
+        CS(A long bold text to be viewed):::cat
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+  it('65-3: bigger font from classes', () => {
+    imgSnapshotTest(
+      `
+flowchart
+  Node1:::class1 --> Node2:::class2
+  Node1:::class1 --> Node3:::class2
+  Node3 --> Node4((I am a circle)):::larger
+
+  classDef class1 fill:lightblue
+  classDef class2 fill:pink
+  classDef larger font-size:30px,fill:yellow
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
   it('66: More nested subgraph cases (TB)', () => {
     imgSnapshotTest(
       `

From 493023118f6dea74e7d1a943852d17474219a71d Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Fri, 11 Aug 2023 13:59:16 +0200
Subject: [PATCH 84/85] Fix for broker error diagram related #4178

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

diff --git a/packages/mermaid/src/diagrams/error/errorRenderer.ts b/packages/mermaid/src/diagrams/error/errorRenderer.ts
index ebe0d0d73..e3be13497 100644
--- a/packages/mermaid/src/diagrams/error/errorRenderer.ts
+++ b/packages/mermaid/src/diagrams/error/errorRenderer.ts
@@ -14,8 +14,8 @@ export const draw = (_text: string, id: string, version: string) => {
   log.debug('renering svg for syntax error\n');
 
   const svg: SVG = selectSvgElement(id);
-  svg.attr('viewBox', '768 0 912 512');
-  configureSvgSize(svg, 100, 500, true);
+  svg.attr('viewBox', '0 0 1912 512');
+  configureSvgSize(svg, 100, 512, true);
 
   const g: Group = svg.append('g');
   g.append('path')

From a0b80f5490f812ccbc74d6246f2ecc39b03db147 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Fri, 11 Aug 2023 14:03:56 +0200
Subject: [PATCH 85/85] Version update and adjusted error diagram

---
 packages/mermaid/package.json                        | 2 +-
 packages/mermaid/src/diagrams/error/errorRenderer.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index 21c0e4d12..1230c6d3c 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "10.3.0",
+  "version": "10.3.1",
   "description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "type": "module",
   "module": "./dist/mermaid.core.mjs",
diff --git a/packages/mermaid/src/diagrams/error/errorRenderer.ts b/packages/mermaid/src/diagrams/error/errorRenderer.ts
index e3be13497..a8e738e5f 100644
--- a/packages/mermaid/src/diagrams/error/errorRenderer.ts
+++ b/packages/mermaid/src/diagrams/error/errorRenderer.ts
@@ -14,7 +14,7 @@ export const draw = (_text: string, id: string, version: string) => {
   log.debug('renering svg for syntax error\n');
 
   const svg: SVG = selectSvgElement(id);
-  svg.attr('viewBox', '0 0 1912 512');
+  svg.attr('viewBox', '0 0 2412 512');
   configureSvgSize(svg, 100, 512, true);
 
   const g: Group = svg.append('g');
