From 6e4e529af2073285085ae5da364d6491f2408d23 Mon Sep 17 00:00:00 2001
From: Billiam <billiamthesecond@gmail.com>
Date: Fri, 24 Feb 2023 18:02:32 -0600
Subject: [PATCH 01/88] feat(pie): adding outer border, text position options

---
 cypress/integration/rendering/pie.spec.js        | 16 ++++++++++++++++
 packages/mermaid/src/config.type.ts              |  5 ++++-
 packages/mermaid/src/diagrams/pie/pieRenderer.js | 16 +++++++++++++++-
 packages/mermaid/src/diagrams/pie/styles.js      |  4 ++++
 packages/mermaid/src/themes/theme-base.js        |  1 +
 packages/mermaid/src/themes/theme-dark.js        |  1 +
 packages/mermaid/src/themes/theme-default.js     |  1 +
 packages/mermaid/src/themes/theme-forest.js      |  1 +
 packages/mermaid/src/themes/theme-neutral.js     |  1 +
 9 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/cypress/integration/rendering/pie.spec.js b/cypress/integration/rendering/pie.spec.js
index 019fa41af6..8b65c8a429 100644
--- a/cypress/integration/rendering/pie.spec.js
+++ b/cypress/integration/rendering/pie.spec.js
@@ -75,4 +75,20 @@ describe('Pie Chart', () => {
       expect(svg).to.not.have.attr('style');
     });
   });
+
+  it('should render a pie diagram with given outside stroke width', () => {
+    renderGraph(
+      `
+    pie title Sports in Sweden
+       "Bandy" : 40
+       "Ice-Hockey" : 80
+       "Football" : 90
+      `,
+      { pie: { outerBorderWidth: 5 } }
+    );
+    cy.get('.pieOuterCircle').should((circle) => {
+      const strokeWidth = parseFloat(circle.attr('stroke-width'));
+      expect(strokeWidth).to.eq(5);
+    });
+  });
 });
diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts
index c835ee4405..13df21eaaa 100644
--- a/packages/mermaid/src/config.type.ts
+++ b/packages/mermaid/src/config.type.ts
@@ -222,7 +222,10 @@ export interface MindmapDiagramConfig extends BaseDiagramConfig {
   maxNodeWidth: number;
 }
 
-export type PieDiagramConfig = BaseDiagramConfig;
+export interface PieDiagramConfig extends BaseDiagramConfig {
+  outerBorderWidth?: number;
+  textPosition?: number;
+}
 
 export interface ErDiagramConfig extends BaseDiagramConfig {
   titleTopMargin?: number;
diff --git a/packages/mermaid/src/diagrams/pie/pieRenderer.js b/packages/mermaid/src/diagrams/pie/pieRenderer.js
index 83f301207a..34510138a4 100644
--- a/packages/mermaid/src/diagrams/pie/pieRenderer.js
+++ b/packages/mermaid/src/diagrams/pie/pieRenderer.js
@@ -88,6 +88,9 @@ export const draw = (txt, id, _version, diagObj) => {
       themeVariables.pie12,
     ];
 
+    var textPosition = conf.pie.textPosition == null ? 0.5 : conf.pie.textPosition;
+    var outerBorderWidth = conf.pie.outerBorderWidth == null ? 2 : conf.pie.outerBorderWidth;
+
     // Set the color scale
     var color = scaleOrdinal().range(myGeneratedColors);
 
@@ -111,6 +114,17 @@ export const draw = (txt, id, _version, diagObj) => {
 
     // Shape helper to build arcs:
     var arcGenerator = arc().innerRadius(0).outerRadius(radius);
+    var labelArcGenerator = arc()
+      .innerRadius(radius * textPosition)
+      .outerRadius(radius * textPosition);
+
+    svg
+      .append('circle')
+      .attr('cx', 0)
+      .attr('cy', 0)
+      .attr('r', radius + outerBorderWidth / 2)
+      .attr('stroke-width', outerBorderWidth)
+      .attr('class', 'pieOuterCircle');
 
     // Build the pie chart: each part of the pie is a path that we build using the arc function.
     svg
@@ -135,7 +149,7 @@ export const draw = (txt, id, _version, diagObj) => {
         return ((d.data.value / sum) * 100).toFixed(0) + '%';
       })
       .attr('transform', function (d) {
-        return 'translate(' + arcGenerator.centroid(d) + ')';
+        return 'translate(' + labelArcGenerator.centroid(d) + ')';
       })
       .style('text-anchor', 'middle')
       .attr('class', 'slice');
diff --git a/packages/mermaid/src/diagrams/pie/styles.js b/packages/mermaid/src/diagrams/pie/styles.js
index 8544501a3d..0bf6fb0b6e 100644
--- a/packages/mermaid/src/diagrams/pie/styles.js
+++ b/packages/mermaid/src/diagrams/pie/styles.js
@@ -5,6 +5,10 @@ const getStyles = (options) =>
     stroke-width : ${options.pieStrokeWidth};
     opacity : ${options.pieOpacity};
   }
+  .pieOuterCircle{
+    stroke: ${options.pieOuterStrokeColor};
+    fill: none;
+  }
   .pieTitleText {
     text-anchor: middle;
     font-size: ${options.pieTitleTextSize};
diff --git a/packages/mermaid/src/themes/theme-base.js b/packages/mermaid/src/themes/theme-base.js
index 8ff544febb..be35832205 100644
--- a/packages/mermaid/src/themes/theme-base.js
+++ b/packages/mermaid/src/themes/theme-base.js
@@ -212,6 +212,7 @@ class Theme {
     this.pieLegendTextColor = this.pieLegendTextColor || this.taskTextDarkColor;
     this.pieStrokeColor = this.pieStrokeColor || 'black';
     this.pieStrokeWidth = this.pieStrokeWidth || '2px';
+    this.pieOuterStrokeColor = this.pieOuterStrokeColor || 'black';
     this.pieOpacity = this.pieOpacity || '0.7';
 
     /* requirement-diagram */
diff --git a/packages/mermaid/src/themes/theme-dark.js b/packages/mermaid/src/themes/theme-dark.js
index af21b4f13a..68eeee2389 100644
--- a/packages/mermaid/src/themes/theme-dark.js
+++ b/packages/mermaid/src/themes/theme-dark.js
@@ -222,6 +222,7 @@ class Theme {
     this.pieLegendTextColor = this.pieLegendTextColor || this.taskTextDarkColor;
     this.pieStrokeColor = this.pieStrokeColor || 'black';
     this.pieStrokeWidth = this.pieStrokeWidth || '2px';
+    this.pieOuterStrokeColor = this.pieOuterStrokeColor || 'black';
     this.pieOpacity = this.pieOpacity || '0.7';
 
     /* class */
diff --git a/packages/mermaid/src/themes/theme-default.js b/packages/mermaid/src/themes/theme-default.js
index 391c0298f1..b4ed3129ef 100644
--- a/packages/mermaid/src/themes/theme-default.js
+++ b/packages/mermaid/src/themes/theme-default.js
@@ -244,6 +244,7 @@ class Theme {
     this.pieLegendTextColor = this.pieLegendTextColor || this.taskTextDarkColor;
     this.pieStrokeColor = this.pieStrokeColor || 'black';
     this.pieStrokeWidth = this.pieStrokeWidth || '2px';
+    this.pieOuterStrokeColor = this.pieOuterStrokeColor || 'black';
     this.pieOpacity = this.pieOpacity || '0.7';
 
     /* requirement-diagram */
diff --git a/packages/mermaid/src/themes/theme-forest.js b/packages/mermaid/src/themes/theme-forest.js
index 59adc91392..722a25cab8 100644
--- a/packages/mermaid/src/themes/theme-forest.js
+++ b/packages/mermaid/src/themes/theme-forest.js
@@ -213,6 +213,7 @@ class Theme {
     this.pieLegendTextColor = this.pieLegendTextColor || this.taskTextDarkColor;
     this.pieStrokeColor = this.pieStrokeColor || 'black';
     this.pieStrokeWidth = this.pieStrokeWidth || '2px';
+    this.pieOuterStrokeColor = this.pieOuterStrokeColor || 'black';
     this.pieOpacity = this.pieOpacity || '0.7';
 
     /* requirement-diagram */
diff --git a/packages/mermaid/src/themes/theme-neutral.js b/packages/mermaid/src/themes/theme-neutral.js
index e7a136c6bf..9217fa266f 100644
--- a/packages/mermaid/src/themes/theme-neutral.js
+++ b/packages/mermaid/src/themes/theme-neutral.js
@@ -243,6 +243,7 @@ class Theme {
     this.pieLegendTextColor = this.pieLegendTextColor || this.taskTextDarkColor;
     this.pieStrokeColor = this.pieStrokeColor || 'black';
     this.pieStrokeWidth = this.pieStrokeWidth || '2px';
+    this.pieOuterStrokeColor = this.pieOuterStrokeColor || 'black';
     this.pieOpacity = this.pieOpacity || '0.7';
 
     /* requirement-diagram */

From a2855931d2e1df63e3a33efb5537068418adc560 Mon Sep 17 00:00:00 2001
From: Billiam <Billiam@users.noreply.github.com>
Date: Fri, 24 Feb 2023 22:21:51 -0600
Subject: [PATCH 02/88] Update packages/mermaid/src/diagrams/pie/pieRenderer.js

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

diff --git a/packages/mermaid/src/diagrams/pie/pieRenderer.js b/packages/mermaid/src/diagrams/pie/pieRenderer.js
index 34510138a4..df1e3cf993 100644
--- a/packages/mermaid/src/diagrams/pie/pieRenderer.js
+++ b/packages/mermaid/src/diagrams/pie/pieRenderer.js
@@ -88,8 +88,8 @@ export const draw = (txt, id, _version, diagObj) => {
       themeVariables.pie12,
     ];
 
-    var textPosition = conf.pie.textPosition == null ? 0.5 : conf.pie.textPosition;
-    var outerBorderWidth = conf.pie.outerBorderWidth == null ? 2 : conf.pie.outerBorderWidth;
+    const textPosition = conf.pie?.textPosition ?? 0.5;
+    const outerBorderWidth = conf.pie?.outerBorderWidth ?? 2;
 
     // Set the color scale
     var color = scaleOrdinal().range(myGeneratedColors);

From b079fb471082621dca1ad80b9949e1b9906d7c15 Mon Sep 17 00:00:00 2001
From: Billiam <billiamthesecond@gmail.com>
Date: Sat, 25 Feb 2023 15:42:18 -0600
Subject: [PATCH 03/88] fixup! feat(pie): adding outer border, text position
 options

---
 cypress/integration/rendering/pie.spec.js  | 12 ++++++++++++
 demos/pie.html                             |  1 +
 docs/config/setup/modules/defaultConfig.md |  2 +-
 docs/syntax/pie.md                         | 11 +++++++++++
 packages/mermaid/src/defaultConfig.ts      | 18 ++++++++++++++++++
 packages/mermaid/src/docs/syntax/pie.md    | 10 ++++++++++
 6 files changed, 53 insertions(+), 1 deletion(-)

diff --git a/cypress/integration/rendering/pie.spec.js b/cypress/integration/rendering/pie.spec.js
index 8b65c8a429..d955606edd 100644
--- a/cypress/integration/rendering/pie.spec.js
+++ b/cypress/integration/rendering/pie.spec.js
@@ -91,4 +91,16 @@ describe('Pie Chart', () => {
       expect(strokeWidth).to.eq(5);
     });
   });
+
+  it('should render a pie diagram when text-position is set', () => {
+    imgSnapshotTest(
+      `
+        pie
+          "Dogs": 50
+          "Cats": 25
+        `,
+      { logLevel: 1, pie: { textPosition: 0.9 } }
+    );
+    cy.get('svg');
+  });
 });
diff --git a/demos/pie.html b/demos/pie.html
index 333ef94917..8cc49272cf 100644
--- a/demos/pie.html
+++ b/demos/pie.html
@@ -26,6 +26,7 @@ <h1>Pie chart demos</h1>
 
     <hr />
     <pre class="mermaid">
+    %%{init: {"pie": {"textPosition": 0.8, "outerBorderWidth": 5}} }%%
     pie
       title Key elements in Product X
         accTitle: Key elements in Product X
diff --git a/docs/config/setup/modules/defaultConfig.md b/docs/config/setup/modules/defaultConfig.md
index 302bd51e14..3542867581 100644
--- a/docs/config/setup/modules/defaultConfig.md
+++ b/docs/config/setup/modules/defaultConfig.md
@@ -14,7 +14,7 @@
 
 #### Defined in
 
-[defaultConfig.ts:2084](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L2084)
+[defaultConfig.ts:2102](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L2102)
 
 ---
 
diff --git a/docs/syntax/pie.md b/docs/syntax/pie.md
index 63f371e87c..73bd662206 100644
--- a/docs/syntax/pie.md
+++ b/docs/syntax/pie.md
@@ -48,6 +48,7 @@ Drawing a pie chart is really simple in mermaid.
 ## Example
 
 ```mermaid-example
+%%{init: {"pie": {"textPosition": 0.8, "outerBorderWidth": 5}} }%%
 pie showData
     title Key elements in Product X
     "Calcium" : 42.96
@@ -57,6 +58,7 @@ pie showData
 ```
 
 ```mermaid
+%%{init: {"pie": {"textPosition": 0.8, "outerBorderWidth": 5}} }%%
 pie showData
     title Key elements in Product X
     "Calcium" : 42.96
@@ -64,3 +66,12 @@ pie showData
     "Magnesium" : 10.01
     "Iron" :  5
 ```
+
+## Configuration
+
+Possible pie diagram configuration parameters:
+
+| Parameter          | Description                                                                                                  | Default value |
+| ------------------ | ------------------------------------------------------------------------------------------------------------ | ------------- |
+| `outerBorderWidth` | The border width of the pie diagram's outside circle                                                         | `2`           |
+| `textPosition`     | The axial position of the pie slice labels, from 0.0 at the center to 1.0 at the outside edge of the circle. | `0.5`         |
diff --git a/packages/mermaid/src/defaultConfig.ts b/packages/mermaid/src/defaultConfig.ts
index ec741e9080..ecc7b54a53 100644
--- a/packages/mermaid/src/defaultConfig.ts
+++ b/packages/mermaid/src/defaultConfig.ts
@@ -1247,6 +1247,24 @@ const config: Partial<MermaidConfig> = {
      * Default value: true
      */
     useMaxWidth: true,
+
+    /**
+     * | Parameter        | Description                                | Type    | Required | Values             |
+     * | ---------------- | ------------------------------------------ | ------- | -------- | ------------------ |
+     * | outerBorderWidth | Border width of the diagram's outer circle | Integer | Optional | Any Positive Value |
+     *
+     * **Notes:** Default value: 2
+     */
+    outerBorderWidth: 2,
+
+    /**
+     * | Parameter    | Description                                                                      | Type    | Required | Values              |
+     * | ------------ | -------------------------------------------------------------------------------- | ------- | -------- | ------------------- |
+     * | textPosition | Axial position of slice's label from zero at the center to 1 at the outside edge | Number  | Optional | Decimal from 0 to 1 |
+     *
+     * **Notes:** Default value: 0.5
+     */
+    textPosition: 0.5,
   },
 
   /** The object containing configurations specific for req diagrams */
diff --git a/packages/mermaid/src/docs/syntax/pie.md b/packages/mermaid/src/docs/syntax/pie.md
index 2fe8c3e544..a18161c3fa 100644
--- a/packages/mermaid/src/docs/syntax/pie.md
+++ b/packages/mermaid/src/docs/syntax/pie.md
@@ -35,6 +35,7 @@ Drawing a pie chart is really simple in mermaid.
 ## Example
 
 ```mermaid-example
+%%{init: {"pie": {"textPosition": 0.8, "outerBorderWidth": 5}} }%%
 pie showData
     title Key elements in Product X
     "Calcium" : 42.96
@@ -42,3 +43,12 @@ pie showData
     "Magnesium" : 10.01
     "Iron" :  5
 ```
+
+## Configuration
+
+Possible pie diagram configuration parameters:
+
+| Parameter          | Description                                                                                                  | Default value |
+| ------------------ | ------------------------------------------------------------------------------------------------------------ | ------------- |
+| `outerBorderWidth` | The border width of the pie diagram's outside circle                                                         | `2`           |
+| `textPosition`     | The axial position of the pie slice labels, from 0.0 at the center to 1.0 at the outside edge of the circle. | `0.5`         |

From 3bed70a0c5ffb9e1948aae63688d343ac355647d Mon Sep 17 00:00:00 2001
From: Billiam <billiamthesecond@gmail.com>
Date: Sat, 25 Feb 2023 15:47:38 -0600
Subject: [PATCH 04/88] fixup! fixup! feat(pie): adding outer border, text
 position options

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

diff --git a/cypress/integration/rendering/pie.spec.js b/cypress/integration/rendering/pie.spec.js
index d955606edd..da236ee014 100644
--- a/cypress/integration/rendering/pie.spec.js
+++ b/cypress/integration/rendering/pie.spec.js
@@ -92,7 +92,7 @@ describe('Pie Chart', () => {
     });
   });
 
-  it('should render a pie diagram when text-position is set', () => {
+  it('should render a pie diagram when textPosition is set', () => {
     imgSnapshotTest(
       `
         pie

From 73ce4998630fb63fd1d4459b5b3f13bba99888d3 Mon Sep 17 00:00:00 2001
From: Laura Ceconi <laura.cec@hotmail.com>
Date: Tue, 28 Feb 2023 18:53:03 +0100
Subject: [PATCH 05/88] Fix: add require entry in package.json

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

diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index b20a8e6ebe..64eff3f091 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -7,6 +7,7 @@
   "types": "./dist/mermaid.d.ts",
   "exports": {
     ".": {
+      "require": "./dist/mermaid.esm.mjs",
       "types": "./dist/mermaid.d.ts",
       "import": "./dist/mermaid.core.mjs"
     },

From 82f5b4ca3957f728e705fb237eec9caf3360e756 Mon Sep 17 00:00:00 2001
From: Billiam <billiamthesecond@gmail.com>
Date: Tue, 28 Feb 2023 13:27:09 -0600
Subject: [PATCH 06/88] Move pie outerStrokeWidth to theme variables, update
 docs

---
 cypress/integration/rendering/pie.spec.js     |  2 +-
 demos/pie.html                                |  2 +-
 docs/config/setup/modules/defaultConfig.md    |  2 +-
 docs/config/theming.md                        | 28 +++++++++++++++++++
 docs/syntax/pie.md                            | 11 ++++----
 packages/mermaid/src/config.type.ts           |  1 -
 packages/mermaid/src/defaultConfig.ts         | 13 ++-------
 .../mermaid/src/diagrams/pie/pieRenderer.js   |  9 +++---
 packages/mermaid/src/diagrams/pie/styles.js   |  1 +
 packages/mermaid/src/docs/config/theming.md   | 28 +++++++++++++++++++
 packages/mermaid/src/docs/syntax/pie.md       |  9 +++---
 packages/mermaid/src/themes/theme-base.js     |  1 +
 packages/mermaid/src/themes/theme-dark.js     |  1 +
 packages/mermaid/src/themes/theme-default.js  |  1 +
 packages/mermaid/src/themes/theme-forest.js   |  1 +
 packages/mermaid/src/themes/theme-neutral.js  |  1 +
 16 files changed, 81 insertions(+), 30 deletions(-)

diff --git a/cypress/integration/rendering/pie.spec.js b/cypress/integration/rendering/pie.spec.js
index da236ee014..a40890fc52 100644
--- a/cypress/integration/rendering/pie.spec.js
+++ b/cypress/integration/rendering/pie.spec.js
@@ -84,7 +84,7 @@ describe('Pie Chart', () => {
        "Ice-Hockey" : 80
        "Football" : 90
       `,
-      { pie: { outerBorderWidth: 5 } }
+      { theme: 'base', themeVariables: { pieOuterStrokeWidth: '5px' } }
     );
     cy.get('.pieOuterCircle').should((circle) => {
       const strokeWidth = parseFloat(circle.attr('stroke-width'));
diff --git a/demos/pie.html b/demos/pie.html
index 8cc49272cf..467b0d1f3f 100644
--- a/demos/pie.html
+++ b/demos/pie.html
@@ -26,7 +26,7 @@ <h1>Pie chart demos</h1>
 
     <hr />
     <pre class="mermaid">
-    %%{init: {"pie": {"textPosition": 0.8, "outerBorderWidth": 5}} }%%
+    %%{init: {"pie": {"textPosition": 0.9}, "themeVariables": {"pieOuterStrokeWidth": "5px"}} }%%
     pie
       title Key elements in Product X
         accTitle: Key elements in Product X
diff --git a/docs/config/setup/modules/defaultConfig.md b/docs/config/setup/modules/defaultConfig.md
index 3542867581..3b2e338424 100644
--- a/docs/config/setup/modules/defaultConfig.md
+++ b/docs/config/setup/modules/defaultConfig.md
@@ -14,7 +14,7 @@
 
 #### Defined in
 
-[defaultConfig.ts:2102](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L2102)
+[defaultConfig.ts:2093](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L2093)
 
 ---
 
diff --git a/docs/config/theming.md b/docs/config/theming.md
index 014ac13745..580afb4887 100644
--- a/docs/config/theming.md
+++ b/docs/config/theming.md
@@ -261,6 +261,34 @@ The theming engine will only recognize hex colors and not color names. So, the v
 | activationBkgColor    | secondaryColor                 | Activation Background Color |
 | sequenceNumberColor   | calculated from lineColor      | Sequence Number Color       |
 
+## Pie Diagram Variables
+
+| Variable            | Default value                  | Description                                |
+| ------------------- | ------------------------------ | ------------------------------------------ |
+| pie1                | primaryColor                   | Fill for 1st section in pie diagram        |
+| pie2                | secondaryColor                 | Fill for 2nd section in pie diagram        |
+| pie3                | calculated from tertiary       | Fill for 3rd section in pie diagram        |
+| pie4                | calculated from primaryColor   | Fill for 4th section in pie diagram        |
+| pie5                | calculated from secondaryColor | Fill for 5th section in pie diagram        |
+| pie6                | calculated from tertiaryColor  | Fill for 6th section in pie diagram        |
+| pie7                | calculated from primaryColor   | Fill for 7th section in pie diagram        |
+| pie8                | calculated from primaryColor   | Fill for 8th section in pie diagram        |
+| pie9                | calculated from primaryColor   | Fill for 9th section in pie diagram        |
+| pie10               | calculated from primaryColor   | Fill for 10th section in pie diagram       |
+| pie11               | calculated from primaryColor   | Fill for 11th section in pie diagram       |
+| pie12               | calculated from primaryColor   | Fill for 12th section in pie diagram       |
+| pieTitleTextSize    | 25px                           | Title text size                            |
+| pieTitleTextColor   | taskTextDarkColor              | Title text color                           |
+| pieSectionTextSize  | 17px                           | Text size of individual section labels     |
+| pieSectionTextColor | textColor                      | Text color of individual section labels    |
+| pieLegendTextSize   | 17px                           | Text size of labels in diagram legend      |
+| pieLegendTextColor  | taskTextDarkColor              | Text color of labels in diagram legend     |
+| pieStrokeColor      | black                          | Border color of individual pie sections    |
+| pieStrokeWidth      | 2px                            | Border width of individual pie sections    |
+| pieOuterStrokeWidth | 2px                            | Border width of pie diagram's outer circle |
+| pieOuterStrokeColor | black                          | Border color of pie diagram's outer circle |
+| pieOpacity          | 0.7                            | Opacity of individual pie sections         |
+
 ## State Colors
 
 | Variable      | Default value    | Description                                  |
diff --git a/docs/syntax/pie.md b/docs/syntax/pie.md
index 73bd662206..8b1de3856a 100644
--- a/docs/syntax/pie.md
+++ b/docs/syntax/pie.md
@@ -48,7 +48,7 @@ Drawing a pie chart is really simple in mermaid.
 ## Example
 
 ```mermaid-example
-%%{init: {"pie": {"textPosition": 0.8, "outerBorderWidth": 5}} }%%
+%%{init: {"pie": {"textPosition": 0.5}, "themeVariables": {"pieOuterStrokeWidth": "5px"}} }%%
 pie showData
     title Key elements in Product X
     "Calcium" : 42.96
@@ -58,7 +58,7 @@ pie showData
 ```
 
 ```mermaid
-%%{init: {"pie": {"textPosition": 0.8, "outerBorderWidth": 5}} }%%
+%%{init: {"pie": {"textPosition": 0.5}, "themeVariables": {"pieOuterStrokeWidth": "5px"}} }%%
 pie showData
     title Key elements in Product X
     "Calcium" : 42.96
@@ -71,7 +71,6 @@ pie showData
 
 Possible pie diagram configuration parameters:
 
-| Parameter          | Description                                                                                                  | Default value |
-| ------------------ | ------------------------------------------------------------------------------------------------------------ | ------------- |
-| `outerBorderWidth` | The border width of the pie diagram's outside circle                                                         | `2`           |
-| `textPosition`     | The axial position of the pie slice labels, from 0.0 at the center to 1.0 at the outside edge of the circle. | `0.5`         |
+| Parameter      | Description                                                                                                  | Default value |
+| -------------- | ------------------------------------------------------------------------------------------------------------ | ------------- |
+| `textPosition` | The axial position of the pie slice labels, from 0.0 at the center to 1.0 at the outside edge of the circle. | `0.75`        |
diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts
index 13df21eaaa..beed194e44 100644
--- a/packages/mermaid/src/config.type.ts
+++ b/packages/mermaid/src/config.type.ts
@@ -223,7 +223,6 @@ export interface MindmapDiagramConfig extends BaseDiagramConfig {
 }
 
 export interface PieDiagramConfig extends BaseDiagramConfig {
-  outerBorderWidth?: number;
   textPosition?: number;
 }
 
diff --git a/packages/mermaid/src/defaultConfig.ts b/packages/mermaid/src/defaultConfig.ts
index ecc7b54a53..666efc3649 100644
--- a/packages/mermaid/src/defaultConfig.ts
+++ b/packages/mermaid/src/defaultConfig.ts
@@ -1248,23 +1248,14 @@ const config: Partial<MermaidConfig> = {
      */
     useMaxWidth: true,
 
-    /**
-     * | Parameter        | Description                                | Type    | Required | Values             |
-     * | ---------------- | ------------------------------------------ | ------- | -------- | ------------------ |
-     * | outerBorderWidth | Border width of the diagram's outer circle | Integer | Optional | Any Positive Value |
-     *
-     * **Notes:** Default value: 2
-     */
-    outerBorderWidth: 2,
-
     /**
      * | Parameter    | Description                                                                      | Type    | Required | Values              |
      * | ------------ | -------------------------------------------------------------------------------- | ------- | -------- | ------------------- |
      * | textPosition | Axial position of slice's label from zero at the center to 1 at the outside edge | Number  | Optional | Decimal from 0 to 1 |
      *
-     * **Notes:** Default value: 0.5
+     * **Notes:** Default value: 0.75
      */
-    textPosition: 0.5,
+    textPosition: 0.75,
   },
 
   /** The object containing configurations specific for req diagrams */
diff --git a/packages/mermaid/src/diagrams/pie/pieRenderer.js b/packages/mermaid/src/diagrams/pie/pieRenderer.js
index df1e3cf993..9b25f5f43c 100644
--- a/packages/mermaid/src/diagrams/pie/pieRenderer.js
+++ b/packages/mermaid/src/diagrams/pie/pieRenderer.js
@@ -3,6 +3,7 @@ import { select, scaleOrdinal, pie as d3pie, arc } from 'd3';
 import { log } from '../../logger';
 import { configureSvgSize } from '../../setupGraphViewbox';
 import * as configApi from '../../config';
+import { parseFontSize } from '../../utils';
 
 let conf = configApi.getConfig();
 
@@ -88,8 +89,9 @@ export const draw = (txt, id, _version, diagObj) => {
       themeVariables.pie12,
     ];
 
-    const textPosition = conf.pie?.textPosition ?? 0.5;
-    const outerBorderWidth = conf.pie?.outerBorderWidth ?? 2;
+    const textPosition = conf.pie?.textPosition ?? 0.75;
+    let [outerStrokeWidth] = parseFontSize(themeVariables.pieOuterStrokeWidth);
+    outerStrokeWidth ??= 2;
 
     // Set the color scale
     var color = scaleOrdinal().range(myGeneratedColors);
@@ -122,8 +124,7 @@ export const draw = (txt, id, _version, diagObj) => {
       .append('circle')
       .attr('cx', 0)
       .attr('cy', 0)
-      .attr('r', radius + outerBorderWidth / 2)
-      .attr('stroke-width', outerBorderWidth)
+      .attr('r', radius + outerStrokeWidth / 2)
       .attr('class', 'pieOuterCircle');
 
     // Build the pie chart: each part of the pie is a path that we build using the arc function.
diff --git a/packages/mermaid/src/diagrams/pie/styles.js b/packages/mermaid/src/diagrams/pie/styles.js
index 0bf6fb0b6e..6f0f600061 100644
--- a/packages/mermaid/src/diagrams/pie/styles.js
+++ b/packages/mermaid/src/diagrams/pie/styles.js
@@ -7,6 +7,7 @@ const getStyles = (options) =>
   }
   .pieOuterCircle{
     stroke: ${options.pieOuterStrokeColor};
+    stroke-width: ${options.pieOuterStrokeWidth};
     fill: none;
   }
   .pieTitleText {
diff --git a/packages/mermaid/src/docs/config/theming.md b/packages/mermaid/src/docs/config/theming.md
index da021f7f89..0e4571d15f 100644
--- a/packages/mermaid/src/docs/config/theming.md
+++ b/packages/mermaid/src/docs/config/theming.md
@@ -183,6 +183,34 @@ The theming engine will only recognize hex colors and not color names. So, the v
 | activationBkgColor    | secondaryColor                 | Activation Background Color |
 | sequenceNumberColor   | calculated from lineColor      | Sequence Number Color       |
 
+## Pie Diagram Variables
+
+| Variable            | Default value                  | Description                                |
+| ------------------- | ------------------------------ | ------------------------------------------ |
+| pie1                | primaryColor                   | Fill for 1st section in pie diagram        |
+| pie2                | secondaryColor                 | Fill for 2nd section in pie diagram        |
+| pie3                | calculated from tertiary       | Fill for 3rd section in pie diagram        |
+| pie4                | calculated from primaryColor   | Fill for 4th section in pie diagram        |
+| pie5                | calculated from secondaryColor | Fill for 5th section in pie diagram        |
+| pie6                | calculated from tertiaryColor  | Fill for 6th section in pie diagram        |
+| pie7                | calculated from primaryColor   | Fill for 7th section in pie diagram        |
+| pie8                | calculated from primaryColor   | Fill for 8th section in pie diagram        |
+| pie9                | calculated from primaryColor   | Fill for 9th section in pie diagram        |
+| pie10               | calculated from primaryColor   | Fill for 10th section in pie diagram       |
+| pie11               | calculated from primaryColor   | Fill for 11th section in pie diagram       |
+| pie12               | calculated from primaryColor   | Fill for 12th section in pie diagram       |
+| pieTitleTextSize    | 25px                           | Title text size                            |
+| pieTitleTextColor   | taskTextDarkColor              | Title text color                           |
+| pieSectionTextSize  | 17px                           | Text size of individual section labels     |
+| pieSectionTextColor | textColor                      | Text color of individual section labels    |
+| pieLegendTextSize   | 17px                           | Text size of labels in diagram legend      |
+| pieLegendTextColor  | taskTextDarkColor              | Text color of labels in diagram legend     |
+| pieStrokeColor      | black                          | Border color of individual pie sections    |
+| pieStrokeWidth      | 2px                            | Border width of individual pie sections    |
+| pieOuterStrokeWidth | 2px                            | Border width of pie diagram's outer circle |
+| pieOuterStrokeColor | black                          | Border color of pie diagram's outer circle |
+| pieOpacity          | 0.7                            | Opacity of individual pie sections         |
+
 ## State Colors
 
 | Variable      | Default value    | Description                                  |
diff --git a/packages/mermaid/src/docs/syntax/pie.md b/packages/mermaid/src/docs/syntax/pie.md
index a18161c3fa..81ec720c4f 100644
--- a/packages/mermaid/src/docs/syntax/pie.md
+++ b/packages/mermaid/src/docs/syntax/pie.md
@@ -35,7 +35,7 @@ Drawing a pie chart is really simple in mermaid.
 ## Example
 
 ```mermaid-example
-%%{init: {"pie": {"textPosition": 0.8, "outerBorderWidth": 5}} }%%
+%%{init: {"pie": {"textPosition": 0.5}, "themeVariables": {"pieOuterStrokeWidth": "5px"}} }%%
 pie showData
     title Key elements in Product X
     "Calcium" : 42.96
@@ -48,7 +48,6 @@ pie showData
 
 Possible pie diagram configuration parameters:
 
-| Parameter          | Description                                                                                                  | Default value |
-| ------------------ | ------------------------------------------------------------------------------------------------------------ | ------------- |
-| `outerBorderWidth` | The border width of the pie diagram's outside circle                                                         | `2`           |
-| `textPosition`     | The axial position of the pie slice labels, from 0.0 at the center to 1.0 at the outside edge of the circle. | `0.5`         |
+| Parameter      | Description                                                                                                  | Default value |
+| -------------- | ------------------------------------------------------------------------------------------------------------ | ------------- |
+| `textPosition` | The axial position of the pie slice labels, from 0.0 at the center to 1.0 at the outside edge of the circle. | `0.75`        |
diff --git a/packages/mermaid/src/themes/theme-base.js b/packages/mermaid/src/themes/theme-base.js
index be35832205..fff03ff146 100644
--- a/packages/mermaid/src/themes/theme-base.js
+++ b/packages/mermaid/src/themes/theme-base.js
@@ -212,6 +212,7 @@ class Theme {
     this.pieLegendTextColor = this.pieLegendTextColor || this.taskTextDarkColor;
     this.pieStrokeColor = this.pieStrokeColor || 'black';
     this.pieStrokeWidth = this.pieStrokeWidth || '2px';
+    this.pieOuterStrokeWidth = this.pieOuterStrokeWidth ?? '2px';
     this.pieOuterStrokeColor = this.pieOuterStrokeColor || 'black';
     this.pieOpacity = this.pieOpacity || '0.7';
 
diff --git a/packages/mermaid/src/themes/theme-dark.js b/packages/mermaid/src/themes/theme-dark.js
index 68eeee2389..b77f0e569a 100644
--- a/packages/mermaid/src/themes/theme-dark.js
+++ b/packages/mermaid/src/themes/theme-dark.js
@@ -222,6 +222,7 @@ class Theme {
     this.pieLegendTextColor = this.pieLegendTextColor || this.taskTextDarkColor;
     this.pieStrokeColor = this.pieStrokeColor || 'black';
     this.pieStrokeWidth = this.pieStrokeWidth || '2px';
+    this.pieOuterStrokeWidth = this.pieOuterStrokeWidth ?? '2px';
     this.pieOuterStrokeColor = this.pieOuterStrokeColor || 'black';
     this.pieOpacity = this.pieOpacity || '0.7';
 
diff --git a/packages/mermaid/src/themes/theme-default.js b/packages/mermaid/src/themes/theme-default.js
index b4ed3129ef..74b972edcb 100644
--- a/packages/mermaid/src/themes/theme-default.js
+++ b/packages/mermaid/src/themes/theme-default.js
@@ -244,6 +244,7 @@ class Theme {
     this.pieLegendTextColor = this.pieLegendTextColor || this.taskTextDarkColor;
     this.pieStrokeColor = this.pieStrokeColor || 'black';
     this.pieStrokeWidth = this.pieStrokeWidth || '2px';
+    this.pieOuterStrokeWidth = this.pieOuterStrokeWidth ?? '2px';
     this.pieOuterStrokeColor = this.pieOuterStrokeColor || 'black';
     this.pieOpacity = this.pieOpacity || '0.7';
 
diff --git a/packages/mermaid/src/themes/theme-forest.js b/packages/mermaid/src/themes/theme-forest.js
index 722a25cab8..d0e1565de2 100644
--- a/packages/mermaid/src/themes/theme-forest.js
+++ b/packages/mermaid/src/themes/theme-forest.js
@@ -213,6 +213,7 @@ class Theme {
     this.pieLegendTextColor = this.pieLegendTextColor || this.taskTextDarkColor;
     this.pieStrokeColor = this.pieStrokeColor || 'black';
     this.pieStrokeWidth = this.pieStrokeWidth || '2px';
+    this.pieOuterStrokeWidth = this.pieOuterStrokeWidth ?? '2px';
     this.pieOuterStrokeColor = this.pieOuterStrokeColor || 'black';
     this.pieOpacity = this.pieOpacity || '0.7';
 
diff --git a/packages/mermaid/src/themes/theme-neutral.js b/packages/mermaid/src/themes/theme-neutral.js
index 9217fa266f..34bf5e0da5 100644
--- a/packages/mermaid/src/themes/theme-neutral.js
+++ b/packages/mermaid/src/themes/theme-neutral.js
@@ -243,6 +243,7 @@ class Theme {
     this.pieLegendTextColor = this.pieLegendTextColor || this.taskTextDarkColor;
     this.pieStrokeColor = this.pieStrokeColor || 'black';
     this.pieStrokeWidth = this.pieStrokeWidth || '2px';
+    this.pieOuterStrokeWidth = this.pieOuterStrokeWidth ?? '2px';
     this.pieOuterStrokeColor = this.pieOuterStrokeColor || 'black';
     this.pieOpacity = this.pieOpacity || '0.7';
 

From c3064f396c0af619bb4700b26732cab077248a0d Mon Sep 17 00:00:00 2001
From: Billiam <billiamthesecond@gmail.com>
Date: Tue, 28 Feb 2023 13:44:09 -0600
Subject: [PATCH 07/88] fixup! Move pie outerStrokeWidth to theme variables,
 update docs

---
 packages/mermaid/src/themes/theme-base.js    | 2 +-
 packages/mermaid/src/themes/theme-dark.js    | 2 +-
 packages/mermaid/src/themes/theme-default.js | 2 +-
 packages/mermaid/src/themes/theme-forest.js  | 2 +-
 packages/mermaid/src/themes/theme-neutral.js | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/mermaid/src/themes/theme-base.js b/packages/mermaid/src/themes/theme-base.js
index fff03ff146..01f8a9c0b4 100644
--- a/packages/mermaid/src/themes/theme-base.js
+++ b/packages/mermaid/src/themes/theme-base.js
@@ -212,7 +212,7 @@ class Theme {
     this.pieLegendTextColor = this.pieLegendTextColor || this.taskTextDarkColor;
     this.pieStrokeColor = this.pieStrokeColor || 'black';
     this.pieStrokeWidth = this.pieStrokeWidth || '2px';
-    this.pieOuterStrokeWidth = this.pieOuterStrokeWidth ?? '2px';
+    this.pieOuterStrokeWidth = this.pieOuterStrokeWidth || '2px';
     this.pieOuterStrokeColor = this.pieOuterStrokeColor || 'black';
     this.pieOpacity = this.pieOpacity || '0.7';
 
diff --git a/packages/mermaid/src/themes/theme-dark.js b/packages/mermaid/src/themes/theme-dark.js
index b77f0e569a..9585a2e27c 100644
--- a/packages/mermaid/src/themes/theme-dark.js
+++ b/packages/mermaid/src/themes/theme-dark.js
@@ -222,7 +222,7 @@ class Theme {
     this.pieLegendTextColor = this.pieLegendTextColor || this.taskTextDarkColor;
     this.pieStrokeColor = this.pieStrokeColor || 'black';
     this.pieStrokeWidth = this.pieStrokeWidth || '2px';
-    this.pieOuterStrokeWidth = this.pieOuterStrokeWidth ?? '2px';
+    this.pieOuterStrokeWidth = this.pieOuterStrokeWidth || '2px';
     this.pieOuterStrokeColor = this.pieOuterStrokeColor || 'black';
     this.pieOpacity = this.pieOpacity || '0.7';
 
diff --git a/packages/mermaid/src/themes/theme-default.js b/packages/mermaid/src/themes/theme-default.js
index 74b972edcb..c91029de37 100644
--- a/packages/mermaid/src/themes/theme-default.js
+++ b/packages/mermaid/src/themes/theme-default.js
@@ -244,7 +244,7 @@ class Theme {
     this.pieLegendTextColor = this.pieLegendTextColor || this.taskTextDarkColor;
     this.pieStrokeColor = this.pieStrokeColor || 'black';
     this.pieStrokeWidth = this.pieStrokeWidth || '2px';
-    this.pieOuterStrokeWidth = this.pieOuterStrokeWidth ?? '2px';
+    this.pieOuterStrokeWidth = this.pieOuterStrokeWidth || '2px';
     this.pieOuterStrokeColor = this.pieOuterStrokeColor || 'black';
     this.pieOpacity = this.pieOpacity || '0.7';
 
diff --git a/packages/mermaid/src/themes/theme-forest.js b/packages/mermaid/src/themes/theme-forest.js
index d0e1565de2..96d6c35c11 100644
--- a/packages/mermaid/src/themes/theme-forest.js
+++ b/packages/mermaid/src/themes/theme-forest.js
@@ -213,7 +213,7 @@ class Theme {
     this.pieLegendTextColor = this.pieLegendTextColor || this.taskTextDarkColor;
     this.pieStrokeColor = this.pieStrokeColor || 'black';
     this.pieStrokeWidth = this.pieStrokeWidth || '2px';
-    this.pieOuterStrokeWidth = this.pieOuterStrokeWidth ?? '2px';
+    this.pieOuterStrokeWidth = this.pieOuterStrokeWidth || '2px';
     this.pieOuterStrokeColor = this.pieOuterStrokeColor || 'black';
     this.pieOpacity = this.pieOpacity || '0.7';
 
diff --git a/packages/mermaid/src/themes/theme-neutral.js b/packages/mermaid/src/themes/theme-neutral.js
index 34bf5e0da5..8bb5ff6935 100644
--- a/packages/mermaid/src/themes/theme-neutral.js
+++ b/packages/mermaid/src/themes/theme-neutral.js
@@ -243,7 +243,7 @@ class Theme {
     this.pieLegendTextColor = this.pieLegendTextColor || this.taskTextDarkColor;
     this.pieStrokeColor = this.pieStrokeColor || 'black';
     this.pieStrokeWidth = this.pieStrokeWidth || '2px';
-    this.pieOuterStrokeWidth = this.pieOuterStrokeWidth ?? '2px';
+    this.pieOuterStrokeWidth = this.pieOuterStrokeWidth || '2px';
     this.pieOuterStrokeColor = this.pieOuterStrokeColor || 'black';
     this.pieOpacity = this.pieOpacity || '0.7';
 

From 8810b378b39a7d1f94d4b607d262444ddb855047 Mon Sep 17 00:00:00 2001
From: Billiam <billiamthesecond@gmail.com>
Date: Tue, 28 Feb 2023 13:48:50 -0600
Subject: [PATCH 08/88] fixup! fixup! Move pie outerStrokeWidth to theme
 variables, update docs

---
 cypress/integration/rendering/pie.spec.js | 17 -----------------
 1 file changed, 17 deletions(-)

diff --git a/cypress/integration/rendering/pie.spec.js b/cypress/integration/rendering/pie.spec.js
index a40890fc52..8a89a0cde5 100644
--- a/cypress/integration/rendering/pie.spec.js
+++ b/cypress/integration/rendering/pie.spec.js
@@ -75,23 +75,6 @@ describe('Pie Chart', () => {
       expect(svg).to.not.have.attr('style');
     });
   });
-
-  it('should render a pie diagram with given outside stroke width', () => {
-    renderGraph(
-      `
-    pie title Sports in Sweden
-       "Bandy" : 40
-       "Ice-Hockey" : 80
-       "Football" : 90
-      `,
-      { theme: 'base', themeVariables: { pieOuterStrokeWidth: '5px' } }
-    );
-    cy.get('.pieOuterCircle').should((circle) => {
-      const strokeWidth = parseFloat(circle.attr('stroke-width'));
-      expect(strokeWidth).to.eq(5);
-    });
-  });
-
   it('should render a pie diagram when textPosition is set', () => {
     imgSnapshotTest(
       `

From 51c6462f1da279afe9274a880d01e3b80223ee7c Mon Sep 17 00:00:00 2001
From: Ted Marozzi <edwardmarozzi@gmail.com>
Date: Thu, 2 Mar 2023 19:17:14 +1100
Subject: [PATCH 09/88] feat: expose the diagram api

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

diff --git a/docs/config/setup/modules/mermaidAPI.md b/docs/config/setup/modules/mermaidAPI.md
index 5bedb89549..5394a7e76c 100644
--- a/docs/config/setup/modules/mermaidAPI.md
+++ b/docs/config/setup/modules/mermaidAPI.md
@@ -31,7 +31,7 @@ Renames and re-exports [mermaidAPI](mermaidAPI.md#mermaidapi)
 
 ### mermaidAPI
 
-• `Const` **mermaidAPI**: `Readonly`<{ `defaultConfig`: `MermaidConfig` = configApi.defaultConfig; `getConfig`: () => `MermaidConfig` = configApi.getConfig; `getSiteConfig`: () => `MermaidConfig` = configApi.getSiteConfig; `globalReset`: () => `void` ; `initialize`: (`options`: `MermaidConfig`) => `void` ; `parse`: (`text`: `string`, `parseOptions?`: [`ParseOptions`](../interfaces/mermaidAPI.ParseOptions.md)) => `Promise`<`boolean` | `void`> ; `parseDirective`: (`p`: `any`, `statement`: `string`, `context`: `string`, `type`: `string`) => `void` ; `render`: (`id`: `string`, `text`: `string`, `svgContainingElement?`: `Element`) => `Promise`<[`RenderResult`](../interfaces/mermaidAPI.RenderResult.md)> ; `reset`: () => `void` ; `setConfig`: (`conf`: `MermaidConfig`) => `MermaidConfig` = configApi.setConfig; `updateSiteConfig`: (`conf`: `MermaidConfig`) => `MermaidConfig` = configApi.updateSiteConfig }>
+• `Const` **mermaidAPI**: `Readonly`<{ `defaultConfig`: `MermaidConfig` = configApi.defaultConfig; `getConfig`: () => `MermaidConfig` = configApi.getConfig; `getDiagramFromText`: (`text`: `string`) => `Promise`<`Diagram`> ; `getSiteConfig`: () => `MermaidConfig` = configApi.getSiteConfig; `globalReset`: () => `void` ; `initialize`: (`options`: `MermaidConfig`) => `void` ; `parse`: (`text`: `string`, `parseOptions?`: [`ParseOptions`](../interfaces/mermaidAPI.ParseOptions.md)) => `Promise`<`boolean` | `void`> ; `parseDirective`: (`p`: `any`, `statement`: `string`, `context`: `string`, `type`: `string`) => `void` ; `render`: (`id`: `string`, `text`: `string`, `svgContainingElement?`: `Element`) => `Promise`<[`RenderResult`](../interfaces/mermaidAPI.RenderResult.md)> ; `reset`: () => `void` ; `setConfig`: (`conf`: `MermaidConfig`) => `MermaidConfig` = configApi.setConfig; `updateSiteConfig`: (`conf`: `MermaidConfig`) => `MermaidConfig` = configApi.updateSiteConfig }>
 
 ## mermaidAPI configuration defaults
 
diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts
index 191fc672bd..b5c3236ff6 100644
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -663,6 +663,7 @@ export const mermaidAPI = Object.freeze({
   render,
   parse,
   parseDirective,
+  getDiagramFromText,
   initialize,
   getConfig: configApi.getConfig,
   setConfig: configApi.setConfig,

From e603840395cfa29e1fc4203b84edd2261f526307 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 3 Mar 2023 11:55:18 +0530
Subject: [PATCH 10/88] Update bug_report.yml

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

diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml
index 3ddf86ea5e..1d1724a5ec 100644
--- a/.github/ISSUE_TEMPLATE/bug_report.yml
+++ b/.github/ISSUE_TEMPLATE/bug_report.yml
@@ -51,18 +51,10 @@ body:
       label: Setup
       description: |-
         Please fill out the below info.
-        Note that you only need to fill out one and not both sections.
+        Note that you only need to fill out the relevant section
       value: |-
-        **Desktop**
-
-        - OS and Version: [Windows, Linux, Mac, ...]
+        - Mermaid version: 
         - Browser and Version: [Chrome, Edge, Firefox]
-
-        **Smartphone**
-
-        - Device: [Samsung, iPhone, ...]
-        - OS and Version: [Android, iOS, ...]
-        - Browser and Version: [Chrome, Safari, ...]
   - type: textarea
     attributes:
       label: Additional Context

From 4d1d1c36de1276f179d653b073553e02878f530e Mon Sep 17 00:00:00 2001
From: ischanx <ischanx@foxmail.com>
Date: Sat, 4 Mar 2023 00:06:03 +0800
Subject: [PATCH 11/88] fix(squence): getBBox() returns zero

---
 packages/mermaid/src/utils.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/mermaid/src/utils.ts b/packages/mermaid/src/utils.ts
index 69d0ac2ef4..0c4b9d1a8c 100644
--- a/packages/mermaid/src/utils.ts
+++ b/packages/mermaid/src/utils.ts
@@ -772,6 +772,9 @@ export const calculateTextDimensions: (
           .style('font-family', fontFamily);
 
         const bBox = (textElem._groups || textElem)[0][0].getBBox();
+        if (bBox.width === 0 && bBox.height === 0) {
+          throw new Error('svg element not in render tree');
+        }
         dim.width = Math.round(Math.max(dim.width, bBox.width));
         cheight = Math.round(bBox.height);
         dim.height += cheight;

From 43762c4d7f85030269d570ff3eca0cb93d2c0155 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Sun, 5 Mar 2023 00:22:02 +0530
Subject: [PATCH 12/88] fix(#1066): Return true if parse is success.

---
 docs/config/setup/modules/mermaidAPI.md | 20 ++++++++++----------
 packages/mermaid/src/mermaidAPI.spec.ts |  2 +-
 packages/mermaid/src/mermaidAPI.ts      | 13 +++++--------
 3 files changed, 16 insertions(+), 19 deletions(-)

diff --git a/docs/config/setup/modules/mermaidAPI.md b/docs/config/setup/modules/mermaidAPI.md
index 5bedb89549..5f57b830c3 100644
--- a/docs/config/setup/modules/mermaidAPI.md
+++ b/docs/config/setup/modules/mermaidAPI.md
@@ -95,7 +95,7 @@ mermaid.initialize(config);
 
 #### Defined in
 
-[mermaidAPI.ts:662](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L662)
+[mermaidAPI.ts:659](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L659)
 
 ## Functions
 
@@ -126,7 +126,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:305](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L305)
 
 ---
 
@@ -152,7 +152,7 @@ the cleaned up svgCode
 
 #### Defined in
 
-[mermaidAPI.ts:259](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L259)
+[mermaidAPI.ts:256](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L256)
 
 ---
 
@@ -178,7 +178,7 @@ the string with all the user styles
 
 #### Defined in
 
-[mermaidAPI.ts:188](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L188)
+[mermaidAPI.ts:185](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L185)
 
 ---
 
@@ -201,7 +201,7 @@ the string with all the user styles
 
 #### Defined in
 
-[mermaidAPI.ts:236](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L236)
+[mermaidAPI.ts:233](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L233)
 
 ---
 
@@ -228,7 +228,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
 
 #### Defined in
 
-[mermaidAPI.ts:172](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L172)
+[mermaidAPI.ts:169](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L169)
 
 ---
 
@@ -248,7 +248,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
 
 #### Defined in
 
-[mermaidAPI.ts:152](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L152)
+[mermaidAPI.ts:149](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L149)
 
 ---
 
@@ -268,7 +268,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
 
 #### Defined in
 
-[mermaidAPI.ts:123](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L123)
+[mermaidAPI.ts:120](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L120)
 
 ---
 
@@ -294,7 +294,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:284](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L284)
 
 ---
 
@@ -319,4 +319,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:355](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L355)
diff --git a/packages/mermaid/src/mermaidAPI.spec.ts b/packages/mermaid/src/mermaidAPI.spec.ts
index 1d54332fc7..edd2d47bb9 100644
--- a/packages/mermaid/src/mermaidAPI.spec.ts
+++ b/packages/mermaid/src/mermaidAPI.spec.ts
@@ -689,7 +689,7 @@ describe('mermaidAPI', () => {
     it('resolves for valid definition', async () => {
       await expect(
         mermaidAPI.parse('graph TD;A--x|text including URL space|B;')
-      ).resolves.not.toThrow();
+      ).resolves.toBeTruthy();
     });
     it('returns true for valid definition with silent option', async () => {
       await expect(
diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts
index 191fc672bd..b2a2458b98 100644
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -101,19 +101,16 @@ export interface RenderResult {
 
 async function parse(text: string, parseOptions?: ParseOptions): Promise<boolean | void> {
   addDiagrams();
-  let error;
   try {
     const diagram = await getDiagramFromText(text);
     diagram.parse();
-  } catch (err) {
-    error = err;
-  }
-  if (parseOptions?.suppressErrors) {
-    return error === undefined;
-  }
-  if (error) {
+  } catch (error) {
+    if (parseOptions?.suppressErrors) {
+      return false;
+    }
     throw error;
   }
+  return true;
 }
 
 /**

From c5a5a22b729db157f45def07c3e70b611195e161 Mon Sep 17 00:00:00 2001
From: Ted Marozzi <38032037+ted-marozzi@users.noreply.github.com>
Date: Sun, 5 Mar 2023 14:33:46 +1100
Subject: [PATCH 13/88] Update integrations.md to include Mermaid Flow

the interative visual mermaid editor!
---
 packages/mermaid/src/docs/ecosystem/integrations.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/mermaid/src/docs/ecosystem/integrations.md b/packages/mermaid/src/docs/ecosystem/integrations.md
index 7275806649..799d649bde 100644
--- a/packages/mermaid/src/docs/ecosystem/integrations.md
+++ b/packages/mermaid/src/docs/ecosystem/integrations.md
@@ -14,6 +14,7 @@ They also serve as proof of concept, for the variety of things that can be built
 - [Gitea](https://gitea.io) (**Native support**)
 - [Azure Devops](https://docs.microsoft.com/en-us/azure/devops/project/wiki/wiki-markdown-guidance?view=azure-devops#add-mermaid-diagrams-to-a-wiki-page) (**Native support**)
 - [Tuleap](https://docs.tuleap.org/user-guide/writing-in-tuleap.html#graphs) (**Native support**)
+- [Mermaid Flow Visual Editor](www.mermaidflow.app) (**Native support**)
 - [Deepdwn](https://billiam.itch.io/deepdwn) (**Native support**)
 - [Joplin](https://joplinapp.org) (**Native support**)
 - [Swimm](https://swimm.io) (**Native support**)

From 55ebfadb323869444eb3eea989277553940e086f Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Sun, 5 Mar 2023 11:19:40 +0530
Subject: [PATCH 14/88] Update packages/mermaid/src/mermaidAPI.ts

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

diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts
index b2a2458b98..18488ed997 100644
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -99,7 +99,7 @@ export interface RenderResult {
  * @throws Error if the diagram is invalid and parseOptions.suppressErrors is false.
  */
 
-async function parse(text: string, parseOptions?: ParseOptions): Promise<boolean | void> {
+async function parse(text: string, parseOptions?: ParseOptions): Promise<boolean> {
   addDiagrams();
   try {
     const diagram = await getDiagramFromText(text);

From f7f6cc73f52fcedbcfec3010c6e8af7992509e89 Mon Sep 17 00:00:00 2001
From: sidharthv96 <sidharthv96@users.noreply.github.com>
Date: Sun, 5 Mar 2023 05:52:51 +0000
Subject: [PATCH 15/88] Update docs

---
 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 5f57b830c3..4802ec808c 100644
--- a/docs/config/setup/modules/mermaidAPI.md
+++ b/docs/config/setup/modules/mermaidAPI.md
@@ -31,7 +31,7 @@ Renames and re-exports [mermaidAPI](mermaidAPI.md#mermaidapi)
 
 ### mermaidAPI
 
-• `Const` **mermaidAPI**: `Readonly`<{ `defaultConfig`: `MermaidConfig` = configApi.defaultConfig; `getConfig`: () => `MermaidConfig` = configApi.getConfig; `getSiteConfig`: () => `MermaidConfig` = configApi.getSiteConfig; `globalReset`: () => `void` ; `initialize`: (`options`: `MermaidConfig`) => `void` ; `parse`: (`text`: `string`, `parseOptions?`: [`ParseOptions`](../interfaces/mermaidAPI.ParseOptions.md)) => `Promise`<`boolean` | `void`> ; `parseDirective`: (`p`: `any`, `statement`: `string`, `context`: `string`, `type`: `string`) => `void` ; `render`: (`id`: `string`, `text`: `string`, `svgContainingElement?`: `Element`) => `Promise`<[`RenderResult`](../interfaces/mermaidAPI.RenderResult.md)> ; `reset`: () => `void` ; `setConfig`: (`conf`: `MermaidConfig`) => `MermaidConfig` = configApi.setConfig; `updateSiteConfig`: (`conf`: `MermaidConfig`) => `MermaidConfig` = configApi.updateSiteConfig }>
+• `Const` **mermaidAPI**: `Readonly`<{ `defaultConfig`: `MermaidConfig` = configApi.defaultConfig; `getConfig`: () => `MermaidConfig` = configApi.getConfig; `getSiteConfig`: () => `MermaidConfig` = configApi.getSiteConfig; `globalReset`: () => `void` ; `initialize`: (`options`: `MermaidConfig`) => `void` ; `parse`: (`text`: `string`, `parseOptions?`: [`ParseOptions`](../interfaces/mermaidAPI.ParseOptions.md)) => `Promise`<`boolean`> ; `parseDirective`: (`p`: `any`, `statement`: `string`, `context`: `string`, `type`: `string`) => `void` ; `render`: (`id`: `string`, `text`: `string`, `svgContainingElement?`: `Element`) => `Promise`<[`RenderResult`](../interfaces/mermaidAPI.RenderResult.md)> ; `reset`: () => `void` ; `setConfig`: (`conf`: `MermaidConfig`) => `MermaidConfig` = configApi.setConfig; `updateSiteConfig`: (`conf`: `MermaidConfig`) => `MermaidConfig` = configApi.updateSiteConfig }>
 
 ## mermaidAPI configuration defaults
 

From d65d4fc39f14c73c8b6196c49d1715e2f095c3b0 Mon Sep 17 00:00:00 2001
From: Ted Marozzi <edwardmarozzi@gmail.com>
Date: Mon, 6 Mar 2023 04:44:47 +1100
Subject: [PATCH 16/88] fix: invalid url and generate docs

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

diff --git a/docs/ecosystem/integrations.md b/docs/ecosystem/integrations.md
index 3db4a17bc3..a9b7b974d2 100644
--- a/docs/ecosystem/integrations.md
+++ b/docs/ecosystem/integrations.md
@@ -20,6 +20,7 @@ They also serve as proof of concept, for the variety of things that can be built
 - [Gitea](https://gitea.io) (**Native support**)
 - [Azure Devops](https://docs.microsoft.com/en-us/azure/devops/project/wiki/wiki-markdown-guidance?view=azure-devops#add-mermaid-diagrams-to-a-wiki-page) (**Native support**)
 - [Tuleap](https://docs.tuleap.org/user-guide/writing-in-tuleap.html#graphs) (**Native support**)
+- [Mermaid Flow Visual Editor](https://www.mermaidflow.app) (**Native support**)
 - [Deepdwn](https://billiam.itch.io/deepdwn) (**Native support**)
 - [Joplin](https://joplinapp.org) (**Native support**)
 - [Swimm](https://swimm.io) (**Native support**)
diff --git a/packages/mermaid/src/docs/ecosystem/integrations.md b/packages/mermaid/src/docs/ecosystem/integrations.md
index 799d649bde..6550d5ef77 100644
--- a/packages/mermaid/src/docs/ecosystem/integrations.md
+++ b/packages/mermaid/src/docs/ecosystem/integrations.md
@@ -14,7 +14,7 @@ They also serve as proof of concept, for the variety of things that can be built
 - [Gitea](https://gitea.io) (**Native support**)
 - [Azure Devops](https://docs.microsoft.com/en-us/azure/devops/project/wiki/wiki-markdown-guidance?view=azure-devops#add-mermaid-diagrams-to-a-wiki-page) (**Native support**)
 - [Tuleap](https://docs.tuleap.org/user-guide/writing-in-tuleap.html#graphs) (**Native support**)
-- [Mermaid Flow Visual Editor](www.mermaidflow.app) (**Native support**)
+- [Mermaid Flow Visual Editor](https://www.mermaidflow.app) (**Native support**)
 - [Deepdwn](https://billiam.itch.io/deepdwn) (**Native support**)
 - [Joplin](https://joplinapp.org) (**Native support**)
 - [Swimm](https://swimm.io) (**Native support**)

From 8027a0c55db2a86e495a8223ff37960cb41b234a Mon Sep 17 00:00:00 2001
From: Ted Marozzi <edwardmarozzi@gmail.com>
Date: Mon, 6 Mar 2023 04:55:59 +1100
Subject: [PATCH 17/88] make clearer

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

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index b0320b36e1..150a223416 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -55,6 +55,8 @@ The documentation is written in **Markdown**. For more information about Markdow
 The source files for the project documentation are located in the [`/packages/mermaid/src/docs`](packages/mermaid/src/docs) directory. This is where you should make changes.
 The files under `/packages/mermaid/src/docs` are processed to generate the published documentation, and the resulting files are put into the `/docs` directory.
 
+After editing files in the [`/packages/mermaid/src/docs`](packages/mermaid/src/docs) directory, be sure to run `pnpm install` and `pnpm run --filter mermaid docs:build` locally to build the `/docs` directory.
+
 ```mermaid
 flowchart LR
   classDef default fill:#fff,color:black,stroke:black

From 649e6820ccb1974b6a7314ac0cd3c621d64d8c8b Mon Sep 17 00:00:00 2001
From: Ted Marozzi <edwardmarozzi@gmail.com>
Date: Mon, 6 Mar 2023 05:18:33 +1100
Subject: [PATCH 18/88] feat: improve documentation

---
 packages/mermaid/src/Diagram.ts | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/packages/mermaid/src/Diagram.ts b/packages/mermaid/src/Diagram.ts
index 1e7539aeb3..3010ce1302 100644
--- a/packages/mermaid/src/Diagram.ts
+++ b/packages/mermaid/src/Diagram.ts
@@ -7,6 +7,11 @@ import { UnknownDiagramError } from './errors';
 import { DetailedError } from './utils';
 
 export type ParseErrorFunction = (err: string | DetailedError | unknown, hash?: any) => void;
+
+/**
+ * An object representing a parsed mermaid diagram definition.
+ * @privateRemarks This is exported as part of the public mermaidAPI.
+ */
 export class Diagram {
   type = 'graph';
   parser;
@@ -68,6 +73,15 @@ export class Diagram {
   }
 }
 
+/**
+ * Parse the text asynchronously and generate a Diagram object asynchronously.
+ * **Warning:** This function may be changed in the future.
+ * @alpha
+ * @param text - The mermaid diagram definition.
+ * @returns A the Promise of a Diagram object.
+ * @throws {@link UnknownDiagramError} if the diagram type can not be found.
+ * @privateRemarks This is exported as part of the public mermaidAPI.
+ */
 export const getDiagramFromText = async (text: string): Promise<Diagram> => {
   const type = detectType(text, configApi.getConfig());
   try {

From 969088187cd012539879d59f3a85763d73475031 Mon Sep 17 00:00:00 2001
From: Ted Marozzi <edwardmarozzi@gmail.com>
Date: Mon, 6 Mar 2023 05:28:34 +1100
Subject: [PATCH 19/88] feat: added internal label

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

diff --git a/packages/mermaid/src/Diagram.ts b/packages/mermaid/src/Diagram.ts
index 3010ce1302..79d7da63ab 100644
--- a/packages/mermaid/src/Diagram.ts
+++ b/packages/mermaid/src/Diagram.ts
@@ -77,6 +77,7 @@ export class Diagram {
  * Parse the text asynchronously and generate a Diagram object asynchronously.
  * **Warning:** This function may be changed in the future.
  * @alpha
+ * @internal
  * @param text - The mermaid diagram definition.
  * @returns A the Promise of a Diagram object.
  * @throws {@link UnknownDiagramError} if the diagram type can not be found.

From 526e8fa1ad34ff9d4334dfb92c2a1bb435364f29 Mon Sep 17 00:00:00 2001
From: Pedro Reyes <prodtos2@gmail.com>
Date: Sun, 5 Mar 2023 15:55:54 -0300
Subject: [PATCH 20/88] Expose detectType function

---
 packages/mermaid/src/mermaid.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/mermaid/src/mermaid.ts b/packages/mermaid/src/mermaid.ts
index 52727d30b5..bd99877b68 100644
--- a/packages/mermaid/src/mermaid.ts
+++ b/packages/mermaid/src/mermaid.ts
@@ -7,7 +7,11 @@ import { MermaidConfig } from './config.type';
 import { log } from './logger';
 import utils from './utils';
 import { mermaidAPI, ParseOptions, RenderResult } from './mermaidAPI';
-import { registerLazyLoadedDiagrams, loadRegisteredDiagrams } from './diagram-api/detectType';
+import {
+  registerLazyLoadedDiagrams,
+  loadRegisteredDiagrams,
+  detectType,
+} from './diagram-api/detectType';
 import type { ParseErrorFunction } from './Diagram';
 import { isDetailedError } from './utils';
 import type { DetailedError } from './utils';
@@ -400,6 +404,7 @@ const mermaid: {
   initialize: typeof initialize;
   contentLoaded: typeof contentLoaded;
   setParseErrorHandler: typeof setParseErrorHandler;
+  detectType: typeof detectType;
 } = {
   startOnLoad: true,
   mermaidAPI,
@@ -412,6 +417,7 @@ const mermaid: {
   parseError: undefined,
   contentLoaded,
   setParseErrorHandler,
+  detectType,
 };
 
 export default mermaid;

From 44d806e7f5ed961bb78c265f93d98801e8f6a1c2 Mon Sep 17 00:00:00 2001
From: Ted Marozzi <38032037+ted-marozzi@users.noreply.github.com>
Date: Mon, 6 Mar 2023 10:17:43 +1100
Subject: [PATCH 21/88] Update Diagram.ts

---
 packages/mermaid/src/Diagram.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/mermaid/src/Diagram.ts b/packages/mermaid/src/Diagram.ts
index 79d7da63ab..27cfbec008 100644
--- a/packages/mermaid/src/Diagram.ts
+++ b/packages/mermaid/src/Diagram.ts
@@ -76,7 +76,6 @@ export class Diagram {
 /**
  * Parse the text asynchronously and generate a Diagram object asynchronously.
  * **Warning:** This function may be changed in the future.
- * @alpha
  * @internal
  * @param text - The mermaid diagram definition.
  * @returns A the Promise of a Diagram object.

From 72c94b6e6e8e8f77e88d5780e8b9e76e14caf13f Mon Sep 17 00:00:00 2001
From: Ted Marozzi <38032037+ted-marozzi@users.noreply.github.com>
Date: Mon, 6 Mar 2023 10:19:06 +1100
Subject: [PATCH 22/88] Update Diagram.ts

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

diff --git a/packages/mermaid/src/Diagram.ts b/packages/mermaid/src/Diagram.ts
index 27cfbec008..3010ce1302 100644
--- a/packages/mermaid/src/Diagram.ts
+++ b/packages/mermaid/src/Diagram.ts
@@ -76,7 +76,7 @@ export class Diagram {
 /**
  * Parse the text asynchronously and generate a Diagram object asynchronously.
  * **Warning:** This function may be changed in the future.
- * @internal
+ * @alpha
  * @param text - The mermaid diagram definition.
  * @returns A the Promise of a Diagram object.
  * @throws {@link UnknownDiagramError} if the diagram type can not be found.

From 6c2c28940b15d758bed8fb1ca912353809d38b62 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Mon, 6 Mar 2023 02:32:05 +0000
Subject: [PATCH 23/88] chore(deps): update all non-major dependencies

---
 .github/workflows/link-checker.yml |   2 +-
 package.json                       |  10 +-
 pnpm-lock.yaml                     | 228 ++++++++---------------------
 3 files changed, 69 insertions(+), 171 deletions(-)

diff --git a/.github/workflows/link-checker.yml b/.github/workflows/link-checker.yml
index 566548ecfb..15259b5183 100644
--- a/.github/workflows/link-checker.yml
+++ b/.github/workflows/link-checker.yml
@@ -35,7 +35,7 @@ jobs:
           restore-keys: cache-lychee-
 
       - name: Link Checker
-        uses: lycheeverse/lychee-action@v1.5.4
+        uses: lycheeverse/lychee-action@v1.6.1
         with:
           args: --verbose --no-progress --cache --max-cache-age 1d packages/mermaid/src/docs/**/*.md README.md README.zh-CN.md
           fail: true
diff --git a/package.json b/package.json
index 7b2114746d..f63b8c7f53 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "version": "10.0.2",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "type": "module",
-  "packageManager": "pnpm@7.27.0",
+  "packageManager": "pnpm@7.29.0",
   "keywords": [
     "diagram",
     "markdown",
@@ -70,9 +70,9 @@
     "@types/rollup-plugin-visualizer": "^4.2.1",
     "@typescript-eslint/eslint-plugin": "^5.48.2",
     "@typescript-eslint/parser": "^5.48.2",
-    "@vitest/coverage-c8": "^0.28.4",
-    "@vitest/spy": "^0.28.4",
-    "@vitest/ui": "^0.28.4",
+    "@vitest/coverage-c8": "^0.29.0",
+    "@vitest/spy": "^0.29.0",
+    "@vitest/ui": "^0.29.0",
     "concurrently": "^7.5.0",
     "cors": "^2.8.5",
     "coveralls": "^3.1.1",
@@ -109,7 +109,7 @@
     "ts-node": "^10.9.1",
     "typescript": "^4.8.4",
     "vite": "^4.1.1",
-    "vitest": "^0.28.5"
+    "vitest": "^0.29.0"
   },
   "volta": {
     "node": "18.14.0"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2c16c19654..10fb0ea6aa 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -53,14 +53,14 @@ importers:
         specifier: ^5.48.2
         version: 5.48.2_yygwinqv3a2io74xmwofqb7uka
       '@vitest/coverage-c8':
-        specifier: ^0.28.4
-        version: 0.28.4_vun5xzxu3tkrssf3erdbijyyki
+        specifier: ^0.29.0
+        version: 0.29.2_vitest@0.29.2
       '@vitest/spy':
-        specifier: ^0.28.4
-        version: 0.28.4
+        specifier: ^0.29.0
+        version: 0.29.2
       '@vitest/ui':
-        specifier: ^0.28.4
-        version: 0.28.4
+        specifier: ^0.29.0
+        version: 0.29.2
       concurrently:
         specifier: ^7.5.0
         version: 7.5.0
@@ -170,8 +170,8 @@ importers:
         specifier: ^4.1.1
         version: 4.1.1_@types+node@18.11.9
       vitest:
-        specifier: ^0.28.5
-        version: 0.28.5_vun5xzxu3tkrssf3erdbijyyki
+        specifier: ^0.29.0
+        version: 0.29.2_hjnfa4mohew6fc4mnpzgbfyvpa
 
   packages/mermaid:
     dependencies:
@@ -3432,73 +3432,41 @@ packages:
       vue: 3.2.45
     dev: true
 
-  /@vitest/coverage-c8/0.28.4_vun5xzxu3tkrssf3erdbijyyki:
-    resolution: {integrity: sha512-btelLBxaWhHnywXRQxDlrvPhGdnuIaD3XulsxcZRIcnpLPbFu39dNTT0IYu2QWP2ZZrV0AmNtdLIfD4c77zMAg==}
+  /@vitest/coverage-c8/0.29.2_vitest@0.29.2:
+    resolution: {integrity: sha512-NmD3WirQCeQjjKfHu4iEq18DVOBFbLn9TKVdMpyi5YW2EtnS+K22/WE+9/wRrepOhyeTxuEFgxUVkCAE1GhbnQ==}
+    peerDependencies:
+      vitest: '>=0.29.0 <1'
     dependencies:
-      c8: 7.12.0
+      c8: 7.13.0
       picocolors: 1.0.0
       std-env: 3.3.2
-      vitest: 0.28.4_vun5xzxu3tkrssf3erdbijyyki
-    transitivePeerDependencies:
-      - '@edge-runtime/vm'
-      - '@vitest/browser'
-      - '@vitest/ui'
-      - happy-dom
-      - jsdom
-      - less
-      - sass
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
+      vitest: 0.29.2_hjnfa4mohew6fc4mnpzgbfyvpa
     dev: true
 
-  /@vitest/expect/0.28.4:
-    resolution: {integrity: sha512-JqK0NZ4brjvOSL8hXAnIsfi+jxDF7rH/ZWCGCt0FAqRnVFc1hXsfwXksQvEnKqD84avRt3gmeXoK4tNbmkoVsQ==}
+  /@vitest/expect/0.29.2:
+    resolution: {integrity: sha512-wjrdHB2ANTch3XKRhjWZN0UueFocH0cQbi2tR5Jtq60Nb3YOSmakjdAvUa2JFBu/o8Vjhj5cYbcMXkZxn1NzmA==}
     dependencies:
-      '@vitest/spy': 0.28.4
-      '@vitest/utils': 0.28.4
+      '@vitest/spy': 0.29.2
+      '@vitest/utils': 0.29.2
       chai: 4.3.7
     dev: true
 
-  /@vitest/expect/0.28.5:
-    resolution: {integrity: sha512-gqTZwoUTwepwGIatnw4UKpQfnoyV0Z9Czn9+Lo2/jLIt4/AXLTn+oVZxlQ7Ng8bzcNkR+3DqLJ08kNr8jRmdNQ==}
+  /@vitest/runner/0.29.2:
+    resolution: {integrity: sha512-A1P65f5+6ru36AyHWORhuQBJrOOcmDuhzl5RsaMNFe2jEkoj0faEszQS4CtPU/LxUYVIazlUtZTY0OEZmyZBnA==}
     dependencies:
-      '@vitest/spy': 0.28.5
-      '@vitest/utils': 0.28.5
-      chai: 4.3.7
-    dev: true
-
-  /@vitest/runner/0.28.4:
-    resolution: {integrity: sha512-Q8UV6GjDvBSTfUoq0QXVCNpNOUrWu4P2qvRq7ssJWzn0+S0ojbVOxEjMt+8a32X6SdkhF8ak+2nkppsqV0JyNQ==}
-    dependencies:
-      '@vitest/utils': 0.28.4
+      '@vitest/utils': 0.29.2
       p-limit: 4.0.0
       pathe: 1.1.0
     dev: true
 
-  /@vitest/runner/0.28.5:
-    resolution: {integrity: sha512-NKkHtLB+FGjpp5KmneQjTcPLWPTDfB7ie+MmF1PnUBf/tGe2OjGxWyB62ySYZ25EYp9krR5Bw0YPLS/VWh1QiA==}
-    dependencies:
-      '@vitest/utils': 0.28.5
-      p-limit: 4.0.0
-      pathe: 1.1.0
-    dev: true
-
-  /@vitest/spy/0.28.4:
-    resolution: {integrity: sha512-8WuhfXLlvCXpNXEGJW6Gc+IKWI32435fQJLh43u70HnZ1otJOa2Cmg2Wy2Aym47ZnNCP4NolF+8cUPwd0MigKQ==}
-    dependencies:
-      tinyspy: 1.0.2
-    dev: true
-
-  /@vitest/spy/0.28.5:
-    resolution: {integrity: sha512-7if6rsHQr9zbmvxN7h+gGh2L9eIIErgf8nSKYDlg07HHimCxp4H6I/X/DPXktVPPLQfiZ1Cw2cbDIx9fSqDjGw==}
+  /@vitest/spy/0.29.2:
+    resolution: {integrity: sha512-Hc44ft5kaAytlGL2PyFwdAsufjbdOvHklwjNy/gy/saRbg9Kfkxfh+PklLm1H2Ib/p586RkQeNFKYuJInUssyw==}
     dependencies:
       tinyspy: 1.0.2
     dev: true
 
-  /@vitest/ui/0.28.4:
-    resolution: {integrity: sha512-LQfCCFc17n49mwtraV9/NAWl2DUqJS/9ZEa3fqJjoYO+HowdseQ5jvWflpzliCyfrIAh6cXVo1bNzHnDXe0cbw==}
+  /@vitest/ui/0.29.2:
+    resolution: {integrity: sha512-GpCExCMptrS1z3Xf6kz35Xdvjc2eTBy9OIIwW3HjePVxw9Q++ZoEaIBVimRTTGzSe40XiAI/ZyR0H0Ya9brqLA==}
     dependencies:
       fast-glob: 3.2.12
       flatted: 3.2.7
@@ -3507,18 +3475,8 @@ packages:
       sirv: 2.0.2
     dev: true
 
-  /@vitest/utils/0.28.4:
-    resolution: {integrity: sha512-l2QztOLdc2LkR+w/lP52RGh8hW+Ul4KESmCAgVE8q737I7e7bQoAfkARKpkPJ4JQtGpwW4deqlj1732VZD7TFw==}
-    dependencies:
-      cli-truncate: 3.1.0
-      diff: 5.1.0
-      loupe: 2.3.6
-      picocolors: 1.0.0
-      pretty-format: 27.5.1
-    dev: true
-
-  /@vitest/utils/0.28.5:
-    resolution: {integrity: sha512-UyZdYwdULlOa4LTUSwZ+Paz7nBHGTT72jKwdFSV4IjHF1xsokp+CabMdhjvVhYwkLfO88ylJT46YMilnkSARZA==}
+  /@vitest/utils/0.29.2:
+    resolution: {integrity: sha512-F14/Uc+vCdclStS2KEoXJlOLAEyqRhnw0gM27iXw9bMTcyKRPJrQ+rlC6XZ125GIPvvKYMPpVxNhiou6PsEeYQ==}
     dependencies:
       cli-truncate: 3.1.0
       diff: 5.1.0
@@ -4202,7 +4160,7 @@ packages:
   /axios/0.21.4_debug@4.3.2:
     resolution: {integrity: sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==}
     dependencies:
-      follow-redirects: 1.15.2_debug@4.3.4
+      follow-redirects: 1.15.2_debug@4.3.2
     transitivePeerDependencies:
       - debug
     dev: true
@@ -4431,8 +4389,8 @@ packages:
     engines: {node: '>= 0.8'}
     dev: true
 
-  /c8/7.12.0:
-    resolution: {integrity: sha512-CtgQrHOkyxr5koX1wEUmN/5cfDa2ckbHRA4Gy5LAL0zaCFtVWJS5++n+w4/sr2GWGerBxgTjpKeDclk/Qk6W/A==}
+  /c8/7.13.0:
+    resolution: {integrity: sha512-/NL4hQTv1gBL6J6ei80zu3IiTrmePDKXKXOTLpHvcIWZTVYQlDhVWjjWvkhICylE8EwwnMVzDZugCvdx0/DIIA==}
     engines: {node: '>=10.12.0'}
     hasBin: true
     dependencies:
@@ -6774,6 +6732,28 @@ packages:
     resolution: {integrity: sha512-XGozTsMPYkm+6b5QL3Z9wQcJjNYxp0CYn3U1gO7dwD6PAqU1SVWZxI9CCg3z+ml3YfqdPnrBehaBrnH2AGKbNA==}
     dev: true
 
+  /follow-redirects/1.15.2:
+    resolution: {integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      debug: '*'
+    peerDependenciesMeta:
+      debug:
+        optional: true
+    dev: true
+
+  /follow-redirects/1.15.2_debug@4.3.2:
+    resolution: {integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      debug: '*'
+    peerDependenciesMeta:
+      debug:
+        optional: true
+    dependencies:
+      debug: 4.3.2
+    dev: true
+
   /follow-redirects/1.15.2_debug@4.3.4:
     resolution: {integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==}
     engines: {node: '>=4.0'}
@@ -7323,7 +7303,7 @@ packages:
     engines: {node: '>=8.0.0'}
     dependencies:
       eventemitter3: 4.0.7
-      follow-redirects: 1.15.2_debug@4.3.4
+      follow-redirects: 1.15.2
       requires-port: 1.0.0
     transitivePeerDependencies:
       - debug
@@ -11697,8 +11677,8 @@ packages:
       vfile-message: 3.1.2
     dev: true
 
-  /vite-node/0.28.4_@types+node@18.11.9:
-    resolution: {integrity: sha512-KM0Q0uSG/xHHKOJvVHc5xDBabgt0l70y7/lWTR7Q0pR5/MrYxadT+y32cJOE65FfjGmJgxpVEEY+69btJgcXOQ==}
+  /vite-node/0.29.2_@types+node@18.11.9:
+    resolution: {integrity: sha512-5oe1z6wzI3gkvc4yOBbDBbgpiWiApvuN4P55E8OI131JGrSuo4X3SOZrNmZYo4R8Zkze/dhi572blX0zc+6SdA==}
     engines: {node: '>=v14.16.0'}
     hasBin: true
     dependencies:
@@ -11707,31 +11687,6 @@ packages:
       mlly: 1.1.0
       pathe: 1.1.0
       picocolors: 1.0.0
-      source-map: 0.6.1
-      source-map-support: 0.5.21
-      vite: 4.1.1_@types+node@18.11.9
-    transitivePeerDependencies:
-      - '@types/node'
-      - less
-      - sass
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
-    dev: true
-
-  /vite-node/0.28.5_@types+node@18.11.9:
-    resolution: {integrity: sha512-LmXb9saMGlrMZbXTvOveJKwMTBTNUH66c8rJnQ0ZPNX+myPEol64+szRzXtV5ORb0Hb/91yq+/D3oERoyAt6LA==}
-    engines: {node: '>=v14.16.0'}
-    hasBin: true
-    dependencies:
-      cac: 6.7.14
-      debug: 4.3.4
-      mlly: 1.1.0
-      pathe: 1.1.0
-      picocolors: 1.0.0
-      source-map: 0.6.1
-      source-map-support: 0.5.21
       vite: 4.1.1_@types+node@18.11.9
     transitivePeerDependencies:
       - '@types/node'
@@ -11853,65 +11808,8 @@ packages:
       - terser
     dev: true
 
-  /vitest/0.28.4_vun5xzxu3tkrssf3erdbijyyki:
-    resolution: {integrity: sha512-sfWIy0AdlbyGRhunm+TLQEJrFH9XuRPdApfubsyLcDbCRrUX717BRQKInTgzEfyl2Ipi1HWoHB84Nqtcwxogcg==}
-    engines: {node: '>=v14.16.0'}
-    hasBin: true
-    peerDependencies:
-      '@edge-runtime/vm': '*'
-      '@vitest/browser': '*'
-      '@vitest/ui': '*'
-      happy-dom: '*'
-      jsdom: '*'
-    peerDependenciesMeta:
-      '@edge-runtime/vm':
-        optional: true
-      '@vitest/browser':
-        optional: true
-      '@vitest/ui':
-        optional: true
-      happy-dom:
-        optional: true
-      jsdom:
-        optional: true
-    dependencies:
-      '@types/chai': 4.3.4
-      '@types/chai-subset': 1.3.3
-      '@types/node': 18.11.9
-      '@vitest/expect': 0.28.4
-      '@vitest/runner': 0.28.4
-      '@vitest/spy': 0.28.4
-      '@vitest/ui': 0.28.4
-      '@vitest/utils': 0.28.4
-      acorn: 8.8.1
-      acorn-walk: 8.2.0
-      cac: 6.7.14
-      chai: 4.3.7
-      debug: 4.3.4
-      jsdom: 21.1.0
-      local-pkg: 0.4.2
-      pathe: 1.1.0
-      picocolors: 1.0.0
-      source-map: 0.6.1
-      std-env: 3.3.2
-      strip-literal: 1.0.0
-      tinybench: 2.3.1
-      tinypool: 0.3.1
-      tinyspy: 1.0.2
-      vite: 4.1.1_@types+node@18.11.9
-      vite-node: 0.28.4_@types+node@18.11.9
-      why-is-node-running: 2.2.2
-    transitivePeerDependencies:
-      - less
-      - sass
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
-    dev: true
-
-  /vitest/0.28.5_vun5xzxu3tkrssf3erdbijyyki:
-    resolution: {integrity: sha512-pyCQ+wcAOX7mKMcBNkzDwEHRGqQvHUl0XnoHR+3Pb1hytAHISgSxv9h0gUiSiYtISXUU3rMrKiKzFYDrI6ZIHA==}
+  /vitest/0.29.2_hjnfa4mohew6fc4mnpzgbfyvpa:
+    resolution: {integrity: sha512-ydK9IGbAvoY8wkg29DQ4ivcVviCaUi3ivuPKfZEVddMTenFHUfB8EEDXQV8+RasEk1ACFLgMUqAaDuQ/Nk+mQA==}
     engines: {node: '>=v14.16.0'}
     hasBin: true
     peerDependencies:
@@ -11935,11 +11833,11 @@ packages:
       '@types/chai': 4.3.4
       '@types/chai-subset': 1.3.3
       '@types/node': 18.11.9
-      '@vitest/expect': 0.28.5
-      '@vitest/runner': 0.28.5
-      '@vitest/spy': 0.28.5
-      '@vitest/ui': 0.28.4
-      '@vitest/utils': 0.28.5
+      '@vitest/expect': 0.29.2
+      '@vitest/runner': 0.29.2
+      '@vitest/spy': 0.29.2
+      '@vitest/ui': 0.29.2
+      '@vitest/utils': 0.29.2
       acorn: 8.8.1
       acorn-walk: 8.2.0
       cac: 6.7.14
@@ -11956,7 +11854,7 @@ packages:
       tinypool: 0.3.1
       tinyspy: 1.0.2
       vite: 4.1.1_@types+node@18.11.9
-      vite-node: 0.28.5_@types+node@18.11.9
+      vite-node: 0.29.2_@types+node@18.11.9
       why-is-node-running: 2.2.2
     transitivePeerDependencies:
       - less

From e9d49e6b9810eca2418c89a033fb7f196df76bbe Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Mon, 6 Mar 2023 06:25:39 +0000
Subject: [PATCH 24/88] fix(deps): update all non-major dependencies

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

diff --git a/package.json b/package.json
index f63b8c7f53..89de959498 100644
--- a/package.json
+++ b/package.json
@@ -112,6 +112,6 @@
     "vitest": "^0.29.0"
   },
   "volta": {
-    "node": "18.14.0"
+    "node": "18.14.2"
   }
 }
diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index fbf8c0d2db..10081e7f3a 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -58,7 +58,7 @@
     "d3": "^7.4.0",
     "dagre-d3-es": "7.0.9",
     "dayjs": "^1.11.7",
-    "dompurify": "2.4.3",
+    "dompurify": "2.4.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 10fb0ea6aa..56a0533968 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -197,8 +197,8 @@ importers:
         specifier: ^1.11.7
         version: 1.11.7
       dompurify:
-        specifier: 2.4.3
-        version: 2.4.3
+        specifier: 2.4.5
+        version: 2.4.5
       elkjs:
         specifier: ^0.8.2
         version: 0.8.2
@@ -5890,8 +5890,8 @@ packages:
       domelementtype: 2.3.0
     dev: true
 
-  /dompurify/2.4.3:
-    resolution: {integrity: sha512-q6QaLcakcRjebxjg8/+NP+h0rPfatOgOzc46Fst9VAA3jF2ApfKBNKMzdP4DYTqtUMXSCd5pRS/8Po/OmoCHZQ==}
+  /dompurify/2.4.5:
+    resolution: {integrity: sha512-jggCCd+8Iqp4Tsz0nIvpcb22InKEBrGz5dw3EQJMs8HPJDsKbFIO3STYtAvCfDx26Muevn1MHVI0XxjgFfmiSA==}
     dev: false
 
   /domutils/3.0.1:

From 8f0cb695e7c700c64b922f675fdfc77635896058 Mon Sep 17 00:00:00 2001
From: Laura Ceconi <laura.cec@hotmail.com>
Date: Mon, 6 Mar 2023 12:15:22 +0100
Subject: [PATCH 25/88] chore: add default entry to exports

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

diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index 64eff3f091..65bc496151 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -7,9 +7,9 @@
   "types": "./dist/mermaid.d.ts",
   "exports": {
     ".": {
-      "require": "./dist/mermaid.esm.mjs",
       "types": "./dist/mermaid.d.ts",
-      "import": "./dist/mermaid.core.mjs"
+      "import": "./dist/mermaid.core.mjs",
+      "default": "./dist/mermaid.core.mjs"
     },
     "./*": "./*"
   },

From 878c9f1d9db8c964669b3e99364eac611659e41e Mon Sep 17 00:00:00 2001
From: Pedro Reyes <prodtos2@gmail.com>
Date: Mon, 6 Mar 2023 19:32:34 -0300
Subject: [PATCH 26/88] Add documentation for exposed detectType function

---
 docs/config/usage.md                      | 17 +++++++++++++++++
 packages/mermaid/src/docs/config/usage.md | 17 +++++++++++++++++
 2 files changed, 34 insertions(+)

diff --git a/docs/config/usage.md b/docs/config/usage.md
index 190ef21978..1069ffa5f7 100644
--- a/docs/config/usage.md
+++ b/docs/config/usage.md
@@ -247,6 +247,23 @@ The example below show an outline of how this could be used. The example just lo
 </script>
 ```
 
+To determine the type of diagram present in a given text, you can utilize the `mermaid.detectType` function, as demonstrated in the example below.
+
+```html
+<script type="module">
+  import mermaid from './mermaid.esm.mjs';
+  const graphDefinition = `sequenceDiagram
+    Pumbaa->>Timon:I ate like a pig.
+    Timon->>Pumbaa:Pumbaa, you ARE a pig.`;
+  try {
+    const type = mermaid.detectType(graphDefinition);
+    console.log(type); // 'sequence'
+  } catch (error) {
+    // UnknownDiagramError
+  }
+</script>
+```
+
 ### Binding events
 
 Sometimes the generated graph also has defined interactions like tooltip and click events. When using the API one must
diff --git a/packages/mermaid/src/docs/config/usage.md b/packages/mermaid/src/docs/config/usage.md
index c740239526..211a06af71 100644
--- a/packages/mermaid/src/docs/config/usage.md
+++ b/packages/mermaid/src/docs/config/usage.md
@@ -244,6 +244,23 @@ The example below show an outline of how this could be used. The example just lo
 </script>
 ```
 
+To determine the type of diagram present in a given text, you can utilize the `mermaid.detectType` function, as demonstrated in the example below.
+
+```html
+<script type="module">
+  import mermaid from './mermaid.esm.mjs';
+  const graphDefinition = `sequenceDiagram
+    Pumbaa->>Timon:I ate like a pig.
+    Timon->>Pumbaa:Pumbaa, you ARE a pig.`;
+  try {
+    const type = mermaid.detectType(graphDefinition);
+    console.log(type); // 'sequence'
+  } catch (error) {
+    // UnknownDiagramError
+  }
+</script>
+```
+
 ### Binding events
 
 Sometimes the generated graph also has defined interactions like tooltip and click events. When using the API one must

From f0a73696f532c193627c2d207c5177e641fb2e28 Mon Sep 17 00:00:00 2001
From: Alois Klink <alois@aloisklink.com>
Date: Mon, 6 Mar 2023 22:57:22 +0000
Subject: [PATCH 27/88] ci(e2e): skip caching in actions/setup-node

Skip caching `pnpm` in `actions/setup-node`,
because the `cypress-io/github-action` natively supports caching `pnpm`,
as of [cypress-io/github-action@v4.2.0][1].

[1]: https://github.com/cypress-io/github-action/releases/tag/v4.2.0
---
 .github/workflows/e2e.yml | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index aff5852dbb..f877ca265b 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -21,11 +21,7 @@ jobs:
 
       - name: Setup Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v3
-        # Need to skip setup if Cypress run is skipped, otherwise an error
-        # is thrown since the pnpm cache step fails
-        if: ${{ ( env.CYPRESS_RECORD_KEY != '' ) || ( matrix.containers == 1 ) }}
         with:
-          cache: pnpm
           node-version: ${{ matrix.node-version }}
 
       # Install NPM dependencies, cache them correctly

From a17463307b08516b3de6c7faacfa3bf3ff9f18ac Mon Sep 17 00:00:00 2001
From: Matthias <matthias-endler@gmx.net>
Date: Tue, 7 Mar 2023 12:51:24 +0100
Subject: [PATCH 28/88] Clean up list of ignored links

The removed links work again.
---
 .github/workflows/link-checker.yml                  | 10 +++++++++-
 .lycheeignore                                       |  8 --------
 docs/ecosystem/integrations.md                      |  2 +-
 packages/mermaid/src/docs/ecosystem/integrations.md |  2 +-
 4 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/.github/workflows/link-checker.yml b/.github/workflows/link-checker.yml
index 15259b5183..b2c17f9fc8 100644
--- a/.github/workflows/link-checker.yml
+++ b/.github/workflows/link-checker.yml
@@ -14,6 +14,7 @@ on:
   pull_request:
     branches:
       - master
+  workflow_dispatch:
   schedule:
     # * is a special character in YAML so you have to quote this string
     - cron: '30 8 * * *'
@@ -37,7 +38,14 @@ jobs:
       - name: Link Checker
         uses: lycheeverse/lychee-action@v1.6.1
         with:
-          args: --verbose --no-progress --cache --max-cache-age 1d packages/mermaid/src/docs/**/*.md README.md README.zh-CN.md
+          args: >-
+            --verbose
+            --no-progress
+            --cache
+            --max-cache-age 1d
+            packages/mermaid/src/docs/**/*.md
+            README.md
+            README.zh-CN.md
           fail: true
           jobSummary: true
         env:
diff --git a/.lycheeignore b/.lycheeignore
index 4c781f6a01..5f7b9679e7 100644
--- a/.lycheeignore
+++ b/.lycheeignore
@@ -4,16 +4,8 @@
 # Network error: Forbidden
 https://codepen.io
 
-# Network error: The certificate was not trusted
-https://mkdocs.org/
-https://osawards.com/javascript/#nominees
-https://osawards.com/javascript/2019
-
 # 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/*
-
-# Network error: 502, since few days
-https://bundlephobia.com/
diff --git a/docs/ecosystem/integrations.md b/docs/ecosystem/integrations.md
index a9b7b974d2..dd92f45db1 100644
--- a/docs/ecosystem/integrations.md
+++ b/docs/ecosystem/integrations.md
@@ -150,7 +150,7 @@ They also serve as proof of concept, for the variety of things that can be built
   - [remark-mermaid](https://github.com/temando/remark-mermaid)
 - [jSDoc](https://jsdoc.app/)
   - [jsdoc-mermaid](https://github.com/Jellyvision/jsdoc-mermaid)
-- [MkDocs](https://mkdocs.org)
+- [MkDocs](https://www.mkdocs.org)
   - [mkdocs-mermaid2-plugin](https://github.com/fralau/mkdocs-mermaid2-plugin)
   - [mkdocs-material](https://github.com/squidfunk/mkdocs-material), check the [docs](https://squidfunk.github.io/mkdocs-material/reference/diagrams/)
 - [Type Doc](https://typedoc.org/)
diff --git a/packages/mermaid/src/docs/ecosystem/integrations.md b/packages/mermaid/src/docs/ecosystem/integrations.md
index 6550d5ef77..5d7ab257c5 100644
--- a/packages/mermaid/src/docs/ecosystem/integrations.md
+++ b/packages/mermaid/src/docs/ecosystem/integrations.md
@@ -144,7 +144,7 @@ They also serve as proof of concept, for the variety of things that can be built
   - [remark-mermaid](https://github.com/temando/remark-mermaid)
 - [jSDoc](https://jsdoc.app/)
   - [jsdoc-mermaid](https://github.com/Jellyvision/jsdoc-mermaid)
-- [MkDocs](https://mkdocs.org)
+- [MkDocs](https://www.mkdocs.org)
   - [mkdocs-mermaid2-plugin](https://github.com/fralau/mkdocs-mermaid2-plugin)
   - [mkdocs-material](https://github.com/squidfunk/mkdocs-material), check the [docs](https://squidfunk.github.io/mkdocs-material/reference/diagrams/)
 - [Type Doc](https://typedoc.org/)

From 58d4ba0d8f76b689448fbabbd24323ef3bdaf33c Mon Sep 17 00:00:00 2001
From: Alois Klink <alois@aloisklink.com>
Date: Thu, 9 Mar 2023 16:45:39 +0000
Subject: [PATCH 29/88] test(e2e): fix gantt `todayMarker` tests

The gantt diagram that were supposed to test whether
`todayMarker off` works wasn't working properly, because
`todayMarker on` wasn't working (i.e. the test never failed).

I've fixed this issue, and added a test that checks whether
`todayMarker on` works.

Fixes: https://github.com/mermaid-js/mermaid/issues/4198
---
 cypress/integration/rendering/gantt.spec.js | 24 +++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/cypress/integration/rendering/gantt.spec.js b/cypress/integration/rendering/gantt.spec.js
index c0156eee36..b01a15809a 100644
--- a/cypress/integration/rendering/gantt.spec.js
+++ b/cypress/integration/rendering/gantt.spec.js
@@ -133,6 +133,24 @@ describe('Gantt diagram', () => {
     );
   });
 
+  it('should default to showing today marker', () => {
+    // This test only works if the environment thinks today is 1010-10-10
+    imgSnapshotTest(
+      `
+      gantt
+        title Show today marker (vertical line should be visible)
+        dateFormat YYYY-MM-DD
+        axisFormat %d
+        %% Should default to being on
+        %% todayMarker on
+        section Section1
+         Yesterday: 1010-10-09, 1d
+         Today: 1010-10-10, 1d
+      `,
+      {}
+    );
+  });
+
   it('should hide today marker', () => {
     imgSnapshotTest(
       `
@@ -142,7 +160,8 @@ describe('Gantt diagram', () => {
         axisFormat %d
         todayMarker off
         section Section1
-         Today: 1, -1h
+         Yesterday: 1010-10-09, 1d
+         Today: 1010-10-10, 1d
       `,
       {}
     );
@@ -157,7 +176,8 @@ describe('Gantt diagram', () => {
       axisFormat %d
       todayMarker stroke-width:5px,stroke:#00f,opacity:0.5
       section Section1
-       Today: 1, -1h
+       Yesterday: 1010-10-09, 1d
+       Today: 1010-10-10, 1d
       `,
       {}
     );

From 160fe0f97149160134a0071cb632468d30952410 Mon Sep 17 00:00:00 2001
From: Robert Weinmeister <develop@weinmeister.org>
Date: Fri, 10 Mar 2023 10:05:59 +0100
Subject: [PATCH 30/88] Updated DokuWiki plugin for Mermaid integration

The plugin Mermaid for DokuWiki replaces the no longer supported plugin flowcharts.
---
 packages/mermaid/src/docs/ecosystem/integrations.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mermaid/src/docs/ecosystem/integrations.md b/packages/mermaid/src/docs/ecosystem/integrations.md
index 5d7ab257c5..ac8f2659b8 100644
--- a/packages/mermaid/src/docs/ecosystem/integrations.md
+++ b/packages/mermaid/src/docs/ecosystem/integrations.md
@@ -83,7 +83,7 @@ They also serve as proof of concept, for the variety of things that can be built
 - [FosWiki](https://foswiki.org)
   - [Mermaid Plugin](https://foswiki.org/Extensions/MermaidPlugin)
 - [DokuWiki](https://dokuwiki.org)
-  - [Flowcharts](https://www.dokuwiki.org/plugin:flowcharts?s[]=mermaid)
+  - [Mermaid Plugin](https://www.dokuwiki.org/plugin:mermaid)
   - [ComboStrap](https://combostrap.com/mermaid)
 - [TiddlyWiki](https://tiddlywiki.com/)
   - [mermaid-tw5: full js library](https://github.com/efurlanm/mermaid-tw5)

From 2e174bb3b6d27f809d345b4006e7c6f44b57156a Mon Sep 17 00:00:00 2001
From: Andrew Clarkson <94328514+andrew-clarkson@users.noreply.github.com>
Date: Fri, 10 Mar 2023 13:12:21 -0500
Subject: [PATCH 31/88] v smol fixes while reading thru docs

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

diff --git a/packages/mermaid/src/docs/config/Tutorials.md b/packages/mermaid/src/docs/config/Tutorials.md
index e07635641a..875f152459 100644
--- a/packages/mermaid/src/docs/config/Tutorials.md
+++ b/packages/mermaid/src/docs/config/Tutorials.md
@@ -1,6 +1,6 @@
 # Tutorials
 
-This is list of publicly available Tutorials for using Mermaid.JS . This is intended as a basic introduction for the use of the Live Editor for generating diagrams, and deploying Mermaid.JS through HTML.
+This is a list of publicly available Tutorials for using Mermaid.JS and is intended as a basic introduction for the use of the Live Editor for generating diagrams, and deploying Mermaid.JS through HTML.
 
 **Note that these tutorials might display an older interface, but the usage of the live-editor will largely be the same.**
 

From 708633f6390665b683b8031902befb2abd49d69b Mon Sep 17 00:00:00 2001
From: Andrew Clarkson <94328514+andrew-clarkson@users.noreply.github.com>
Date: Fri, 10 Mar 2023 13:25:14 -0500
Subject: [PATCH 32/88] Remove duplication in "A hexagon node"

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

diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md
index 6997ca0888..42c7cbf5b1 100644
--- a/packages/mermaid/src/docs/syntax/flowchart.md
+++ b/packages/mermaid/src/docs/syntax/flowchart.md
@@ -129,13 +129,6 @@ flowchart LR
     id1{{This is the text in the box}}
 ```
 
-Render:
-
-```mermaid
-flowchart LR
-    id1{{This is the text in the box}}
-```
-
 ### Parallelogram
 
 ```mermaid-example

From 273a9e7ad6706ce808135aba99862e4ce511e5fe Mon Sep 17 00:00:00 2001
From: sidharthv96 <sidharthv96@users.noreply.github.com>
Date: Fri, 10 Mar 2023 19:53:13 +0000
Subject: [PATCH 33/88] Update docs

---
 docs/config/Tutorials.md       |  2 +-
 docs/ecosystem/integrations.md |  2 +-
 docs/syntax/flowchart.md       | 12 ------------
 3 files changed, 2 insertions(+), 14 deletions(-)

diff --git a/docs/config/Tutorials.md b/docs/config/Tutorials.md
index 7dda898013..7b1530eaa8 100644
--- a/docs/config/Tutorials.md
+++ b/docs/config/Tutorials.md
@@ -6,7 +6,7 @@
 
 # Tutorials
 
-This is list of publicly available Tutorials for using Mermaid.JS . This is intended as a basic introduction for the use of the Live Editor for generating diagrams, and deploying Mermaid.JS through HTML.
+This is a list of publicly available Tutorials for using Mermaid.JS and is intended as a basic introduction for the use of the Live Editor for generating diagrams, and deploying Mermaid.JS through HTML.
 
 **Note that these tutorials might display an older interface, but the usage of the live-editor will largely be the same.**
 
diff --git a/docs/ecosystem/integrations.md b/docs/ecosystem/integrations.md
index dd92f45db1..3a9b7cd749 100644
--- a/docs/ecosystem/integrations.md
+++ b/docs/ecosystem/integrations.md
@@ -89,7 +89,7 @@ They also serve as proof of concept, for the variety of things that can be built
 - [FosWiki](https://foswiki.org)
   - [Mermaid Plugin](https://foswiki.org/Extensions/MermaidPlugin)
 - [DokuWiki](https://dokuwiki.org)
-  - [Flowcharts](https://www.dokuwiki.org/plugin:flowcharts?s[]=mermaid)
+  - [Mermaid Plugin](https://www.dokuwiki.org/plugin:mermaid)
   - [ComboStrap](https://combostrap.com/mermaid)
 - [TiddlyWiki](https://tiddlywiki.com/)
   - [mermaid-tw5: full js library](https://github.com/efurlanm/mermaid-tw5)
diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md
index 547847f54f..c2c04f7500 100644
--- a/docs/syntax/flowchart.md
+++ b/docs/syntax/flowchart.md
@@ -195,18 +195,6 @@ flowchart LR
     id1{{This is the text in the box}}
 ```
 
-Render:
-
-```mermaid-example
-flowchart LR
-    id1{{This is the text in the box}}
-```
-
-```mermaid
-flowchart LR
-    id1{{This is the text in the box}}
-```
-
 ### Parallelogram
 
 ```mermaid-example

From 4b462d717cc906263d974c318542021a5c529f3c Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Mon, 13 Mar 2023 01:57:22 +0000
Subject: [PATCH 34/88] chore(deps): update node.js to v18.15.0

---
 package.json   |   2 +-
 pnpm-lock.yaml | 622 ++++++++++++++++++++-----------------------------
 2 files changed, 253 insertions(+), 371 deletions(-)

diff --git a/package.json b/package.json
index 89de959498..ebb630a1e6 100644
--- a/package.json
+++ b/package.json
@@ -112,6 +112,6 @@
     "vitest": "^0.29.0"
   },
   "volta": {
-    "node": "18.14.2"
+    "node": "18.15.0"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a7a3a68e42..6f0df7231b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,387 +1,269 @@
-lockfileVersion: 5.4-inlineSpecifiers
+lockfileVersion: 5.4
 
 importers:
 
   .:
+    specifiers:
+      '@applitools/eyes-cypress': ^3.27.6
+      '@commitlint/cli': ^17.2.0
+      '@commitlint/config-conventional': ^17.2.0
+      '@cspell/eslint-plugin': ^6.14.2
+      '@types/cors': ^2.8.13
+      '@types/eslint': ^8.4.10
+      '@types/express': ^4.17.17
+      '@types/js-yaml': ^4.0.5
+      '@types/jsdom': ^21.0.0
+      '@types/lodash': ^4.14.188
+      '@types/mdast': ^3.0.10
+      '@types/node': ^18.11.9
+      '@types/prettier': ^2.7.1
+      '@types/rollup-plugin-visualizer': ^4.2.1
+      '@typescript-eslint/eslint-plugin': ^5.48.2
+      '@typescript-eslint/parser': ^5.48.2
+      '@vitest/coverage-c8': ^0.29.0
+      '@vitest/spy': ^0.29.0
+      '@vitest/ui': ^0.29.0
+      concurrently: ^7.5.0
+      cors: ^2.8.5
+      coveralls: ^3.1.1
+      cypress: ^12.0.0
+      cypress-image-snapshot: ^4.0.1
+      esbuild: ^0.17.0
+      eslint: ^8.32.0
+      eslint-config-prettier: ^8.6.0
+      eslint-plugin-cypress: ^2.12.1
+      eslint-plugin-html: ^7.1.0
+      eslint-plugin-jest: ^27.1.5
+      eslint-plugin-jsdoc: ^39.6.2
+      eslint-plugin-json: ^3.1.0
+      eslint-plugin-lodash: ^7.4.0
+      eslint-plugin-markdown: ^3.0.0
+      eslint-plugin-no-only-tests: ^3.1.0
+      eslint-plugin-tsdoc: ^0.2.17
+      eslint-plugin-unicorn: ^45.0.0
+      express: ^4.18.2
+      globby: ^13.1.2
+      husky: ^8.0.2
+      jest: ^29.3.1
+      jison: ^0.4.18
+      js-yaml: ^4.1.0
+      jsdom: ^21.0.0
+      lint-staged: ^13.0.3
+      path-browserify: ^1.0.1
+      pnpm: ^7.15.0
+      prettier: ^2.7.1
+      prettier-plugin-jsdoc: ^0.4.2
+      rimraf: ^4.0.0
+      rollup-plugin-visualizer: ^5.8.3
+      start-server-and-test: ^1.15.4
+      ts-node: ^10.9.1
+      typescript: ^4.8.4
+      vite: ^4.1.1
+      vitest: ^0.29.0
     devDependencies:
-      '@applitools/eyes-cypress':
-        specifier: ^3.27.6
-        version: 3.27.6
-      '@commitlint/cli':
-        specifier: ^17.2.0
-        version: 17.2.0
-      '@commitlint/config-conventional':
-        specifier: ^17.2.0
-        version: 17.2.0
-      '@cspell/eslint-plugin':
-        specifier: ^6.14.2
-        version: 6.14.2
-      '@types/cors':
-        specifier: ^2.8.13
-        version: 2.8.13
-      '@types/eslint':
-        specifier: ^8.4.10
-        version: 8.4.10
-      '@types/express':
-        specifier: ^4.17.17
-        version: 4.17.17
-      '@types/js-yaml':
-        specifier: ^4.0.5
-        version: 4.0.5
-      '@types/jsdom':
-        specifier: ^21.0.0
-        version: 21.1.0
-      '@types/lodash':
-        specifier: ^4.14.188
-        version: 4.14.188
-      '@types/mdast':
-        specifier: ^3.0.10
-        version: 3.0.10
-      '@types/node':
-        specifier: ^18.11.9
-        version: 18.11.9
-      '@types/prettier':
-        specifier: ^2.7.1
-        version: 2.7.1
-      '@types/rollup-plugin-visualizer':
-        specifier: ^4.2.1
-        version: 4.2.1
-      '@typescript-eslint/eslint-plugin':
-        specifier: ^5.48.2
-        version: 5.48.2_iljmjqxcygjq3saipl7gerxpvi
-      '@typescript-eslint/parser':
-        specifier: ^5.48.2
-        version: 5.48.2_yygwinqv3a2io74xmwofqb7uka
-      '@vitest/coverage-c8':
-        specifier: ^0.29.0
-        version: 0.29.2_vitest@0.29.2
-      '@vitest/spy':
-        specifier: ^0.29.0
-        version: 0.29.2
-      '@vitest/ui':
-        specifier: ^0.29.0
-        version: 0.29.2
-      concurrently:
-        specifier: ^7.5.0
-        version: 7.5.0
-      cors:
-        specifier: ^2.8.5
-        version: 2.8.5
-      coveralls:
-        specifier: ^3.1.1
-        version: 3.1.1
-      cypress:
-        specifier: ^12.0.0
-        version: 12.5.1
-      cypress-image-snapshot:
-        specifier: ^4.0.1
-        version: 4.0.1_cypress@12.5.1+jest@29.3.1
-      esbuild:
-        specifier: ^0.17.0
-        version: 0.17.0
-      eslint:
-        specifier: ^8.32.0
-        version: 8.32.0
-      eslint-config-prettier:
-        specifier: ^8.6.0
-        version: 8.6.0_eslint@8.32.0
-      eslint-plugin-cypress:
-        specifier: ^2.12.1
-        version: 2.12.1_eslint@8.32.0
-      eslint-plugin-html:
-        specifier: ^7.1.0
-        version: 7.1.0
-      eslint-plugin-jest:
-        specifier: ^27.1.5
-        version: 27.1.5_5rcd23qw3h5vuffwo2owxb3hw4
-      eslint-plugin-jsdoc:
-        specifier: ^39.6.2
-        version: 39.6.2_eslint@8.32.0
-      eslint-plugin-json:
-        specifier: ^3.1.0
-        version: 3.1.0
-      eslint-plugin-lodash:
-        specifier: ^7.4.0
-        version: 7.4.0_eslint@8.32.0
-      eslint-plugin-markdown:
-        specifier: ^3.0.0
-        version: 3.0.0_eslint@8.32.0
-      eslint-plugin-no-only-tests:
-        specifier: ^3.1.0
-        version: 3.1.0
-      eslint-plugin-tsdoc:
-        specifier: ^0.2.17
-        version: 0.2.17
-      eslint-plugin-unicorn:
-        specifier: ^45.0.0
-        version: 45.0.0_eslint@8.32.0
-      express:
-        specifier: ^4.18.2
-        version: 4.18.2
-      globby:
-        specifier: ^13.1.2
-        version: 13.1.2
-      husky:
-        specifier: ^8.0.2
-        version: 8.0.2
-      jest:
-        specifier: ^29.3.1
-        version: 29.3.1_odkjkoia5xunhxkdrka32ib6vi
-      jison:
-        specifier: ^0.4.18
-        version: 0.4.18
-      js-yaml:
-        specifier: ^4.1.0
-        version: 4.1.0
-      jsdom:
-        specifier: ^21.0.0
-        version: 21.1.0
-      lint-staged:
-        specifier: ^13.0.3
-        version: 13.0.3
-      path-browserify:
-        specifier: ^1.0.1
-        version: 1.0.1
-      pnpm:
-        specifier: ^7.15.0
-        version: 7.15.0
-      prettier:
-        specifier: ^2.7.1
-        version: 2.7.1
-      prettier-plugin-jsdoc:
-        specifier: ^0.4.2
-        version: 0.4.2_prettier@2.7.1
-      rimraf:
-        specifier: ^4.0.0
-        version: 4.1.2
-      rollup-plugin-visualizer:
-        specifier: ^5.8.3
-        version: 5.8.3
-      start-server-and-test:
-        specifier: ^1.15.4
-        version: 1.15.4
-      ts-node:
-        specifier: ^10.9.1
-        version: 10.9.1_cbe7ovvae6zqfnmtgctpgpys54
-      typescript:
-        specifier: ^4.8.4
-        version: 4.8.4
-      vite:
-        specifier: ^4.1.1
-        version: 4.1.1_@types+node@18.11.9
-      vitest:
-        specifier: ^0.29.0
-        version: 0.29.2_hjnfa4mohew6fc4mnpzgbfyvpa
+      '@applitools/eyes-cypress': 3.27.6
+      '@commitlint/cli': 17.2.0
+      '@commitlint/config-conventional': 17.2.0
+      '@cspell/eslint-plugin': 6.14.2
+      '@types/cors': 2.8.13
+      '@types/eslint': 8.4.10
+      '@types/express': 4.17.17
+      '@types/js-yaml': 4.0.5
+      '@types/jsdom': 21.1.0
+      '@types/lodash': 4.14.188
+      '@types/mdast': 3.0.10
+      '@types/node': 18.11.9
+      '@types/prettier': 2.7.1
+      '@types/rollup-plugin-visualizer': 4.2.1
+      '@typescript-eslint/eslint-plugin': 5.48.2_iljmjqxcygjq3saipl7gerxpvi
+      '@typescript-eslint/parser': 5.48.2_yygwinqv3a2io74xmwofqb7uka
+      '@vitest/coverage-c8': 0.29.2_vitest@0.29.2
+      '@vitest/spy': 0.29.2
+      '@vitest/ui': 0.29.2
+      concurrently: 7.5.0
+      cors: 2.8.5
+      coveralls: 3.1.1
+      cypress: 12.5.1
+      cypress-image-snapshot: 4.0.1_cypress@12.5.1+jest@29.3.1
+      esbuild: 0.17.0
+      eslint: 8.32.0
+      eslint-config-prettier: 8.6.0_eslint@8.32.0
+      eslint-plugin-cypress: 2.12.1_eslint@8.32.0
+      eslint-plugin-html: 7.1.0
+      eslint-plugin-jest: 27.1.5_5rcd23qw3h5vuffwo2owxb3hw4
+      eslint-plugin-jsdoc: 39.6.2_eslint@8.32.0
+      eslint-plugin-json: 3.1.0
+      eslint-plugin-lodash: 7.4.0_eslint@8.32.0
+      eslint-plugin-markdown: 3.0.0_eslint@8.32.0
+      eslint-plugin-no-only-tests: 3.1.0
+      eslint-plugin-tsdoc: 0.2.17
+      eslint-plugin-unicorn: 45.0.0_eslint@8.32.0
+      express: 4.18.2
+      globby: 13.1.2
+      husky: 8.0.2
+      jest: 29.3.1_odkjkoia5xunhxkdrka32ib6vi
+      jison: 0.4.18
+      js-yaml: 4.1.0
+      jsdom: 21.1.0
+      lint-staged: 13.0.3
+      path-browserify: 1.0.1
+      pnpm: 7.15.0
+      prettier: 2.7.1
+      prettier-plugin-jsdoc: 0.4.2_prettier@2.7.1
+      rimraf: 4.1.2
+      rollup-plugin-visualizer: 5.8.3
+      start-server-and-test: 1.15.4
+      ts-node: 10.9.1_cbe7ovvae6zqfnmtgctpgpys54
+      typescript: 4.8.4
+      vite: 4.1.1_@types+node@18.11.9
+      vitest: 0.29.2_hjnfa4mohew6fc4mnpzgbfyvpa
 
   packages/mermaid:
-    dependencies:
-      '@braintree/sanitize-url':
-        specifier: ^6.0.0
-        version: 6.0.0
-      cytoscape:
-        specifier: ^3.23.0
-        version: 3.23.0
-      cytoscape-cose-bilkent:
-        specifier: ^4.1.0
-        version: 4.1.0_cytoscape@3.23.0
-      cytoscape-fcose:
-        specifier: ^2.1.0
-        version: 2.1.0_cytoscape@3.23.0
-      d3:
-        specifier: ^7.4.0
-        version: 7.8.2
-      dagre-d3-es:
-        specifier: 7.0.9
-        version: 7.0.9
-      dayjs:
-        specifier: ^1.11.7
-        version: 1.11.7
-      dompurify:
-        specifier: 2.4.5
-        version: 2.4.5
-      elkjs:
-        specifier: ^0.8.2
-        version: 0.8.2
-      khroma:
-        specifier: ^2.0.0
-        version: 2.0.0
-      lodash-es:
-        specifier: ^4.17.21
-        version: 4.17.21
-      non-layered-tidy-tree-layout:
-        specifier: ^2.0.2
-        version: 2.0.2
-      stylis:
-        specifier: ^4.1.2
-        version: 4.1.2
-      ts-dedent:
-        specifier: ^2.2.0
-        version: 2.2.0
-      uuid:
-        specifier: ^9.0.0
-        version: 9.0.0
-      web-worker:
-        specifier: ^1.2.0
-        version: 1.2.0
+    specifiers:
+      '@braintree/sanitize-url': ^6.0.0
+      '@types/cytoscape': ^3.19.9
+      '@types/d3': ^7.4.0
+      '@types/dompurify': ^2.4.0
+      '@types/jsdom': ^21.0.0
+      '@types/lodash-es': ^4.17.6
+      '@types/micromatch': ^4.0.2
+      '@types/prettier': ^2.7.1
+      '@types/stylis': ^4.0.2
+      '@types/uuid': ^9.0.0
+      '@typescript-eslint/eslint-plugin': ^5.42.1
+      '@typescript-eslint/parser': ^5.42.1
+      chokidar: ^3.5.3
+      concurrently: ^7.5.0
+      coveralls: ^3.1.1
+      cpy-cli: ^4.2.0
+      cspell: ^6.14.3
+      cytoscape: ^3.23.0
+      cytoscape-cose-bilkent: ^4.1.0
+      cytoscape-fcose: ^2.1.0
+      d3: ^7.4.0
+      dagre-d3-es: 7.0.9
+      dayjs: ^1.11.7
+      dompurify: 2.4.5
+      elkjs: ^0.8.2
+      globby: ^13.1.2
+      jison: ^0.4.18
+      js-base64: ^3.7.2
+      jsdom: ^21.0.0
+      khroma: ^2.0.0
+      lodash-es: ^4.17.21
+      micromatch: ^4.0.5
+      non-layered-tidy-tree-layout: ^2.0.2
+      path-browserify: ^1.0.1
+      prettier: ^2.7.1
+      remark: ^14.0.2
+      remark-frontmatter: ^4.0.1
+      remark-gfm: ^3.0.1
+      rimraf: ^4.0.0
+      start-server-and-test: ^1.14.0
+      stylis: ^4.1.2
+      ts-dedent: ^2.2.0
+      typedoc: ^0.23.18
+      typedoc-plugin-markdown: ^3.13.6
+      typescript: ^4.8.4
+      unist-util-flatmap: ^1.0.0
+      uuid: ^9.0.0
+      vitepress: ^1.0.0-alpha.46
+      vitepress-plugin-search: ^1.0.4-alpha.19
+      web-worker: ^1.2.0
+    dependencies:
+      '@braintree/sanitize-url': 6.0.0
+      cytoscape: 3.23.0
+      cytoscape-cose-bilkent: 4.1.0_cytoscape@3.23.0
+      cytoscape-fcose: 2.1.0_cytoscape@3.23.0
+      d3: 7.8.2
+      dagre-d3-es: 7.0.9
+      dayjs: 1.11.7
+      dompurify: 2.4.5
+      elkjs: 0.8.2
+      khroma: 2.0.0
+      lodash-es: 4.17.21
+      non-layered-tidy-tree-layout: 2.0.2
+      stylis: 4.1.2
+      ts-dedent: 2.2.0
+      uuid: 9.0.0
+      web-worker: 1.2.0
     devDependencies:
-      '@types/cytoscape':
-        specifier: ^3.19.9
-        version: 3.19.9
-      '@types/d3':
-        specifier: ^7.4.0
-        version: 7.4.0
-      '@types/dompurify':
-        specifier: ^2.4.0
-        version: 2.4.0
-      '@types/jsdom':
-        specifier: ^21.0.0
-        version: 21.1.0
-      '@types/lodash-es':
-        specifier: ^4.17.6
-        version: 4.17.6
-      '@types/micromatch':
-        specifier: ^4.0.2
-        version: 4.0.2
-      '@types/prettier':
-        specifier: ^2.7.1
-        version: 2.7.1
-      '@types/stylis':
-        specifier: ^4.0.2
-        version: 4.0.2
-      '@types/uuid':
-        specifier: ^9.0.0
-        version: 9.0.0
-      '@typescript-eslint/eslint-plugin':
-        specifier: ^5.42.1
-        version: 5.42.1_qxgr6oy2qtsmmpo3f6iejuryuq
-      '@typescript-eslint/parser':
-        specifier: ^5.42.1
-        version: 5.42.1_yygwinqv3a2io74xmwofqb7uka
-      chokidar:
-        specifier: ^3.5.3
-        version: 3.5.3
-      concurrently:
-        specifier: ^7.5.0
-        version: 7.5.0
-      coveralls:
-        specifier: ^3.1.1
-        version: 3.1.1
-      cpy-cli:
-        specifier: ^4.2.0
-        version: 4.2.0
-      cspell:
-        specifier: ^6.14.3
-        version: 6.14.3
-      globby:
-        specifier: ^13.1.2
-        version: 13.1.2
-      jison:
-        specifier: ^0.4.18
-        version: 0.4.18
-      js-base64:
-        specifier: ^3.7.2
-        version: 3.7.2
-      jsdom:
-        specifier: ^21.0.0
-        version: 21.1.0
-      micromatch:
-        specifier: ^4.0.5
-        version: 4.0.5
-      path-browserify:
-        specifier: ^1.0.1
-        version: 1.0.1
-      prettier:
-        specifier: ^2.7.1
-        version: 2.7.1
-      remark:
-        specifier: ^14.0.2
-        version: 14.0.2
-      remark-frontmatter:
-        specifier: ^4.0.1
-        version: 4.0.1
-      remark-gfm:
-        specifier: ^3.0.1
-        version: 3.0.1
-      rimraf:
-        specifier: ^4.0.0
-        version: 4.1.2
-      start-server-and-test:
-        specifier: ^1.14.0
-        version: 1.14.0
-      typedoc:
-        specifier: ^0.23.18
-        version: 0.23.18_typescript@4.8.4
-      typedoc-plugin-markdown:
-        specifier: ^3.13.6
-        version: 3.13.6_typedoc@0.23.18
-      typescript:
-        specifier: ^4.8.4
-        version: 4.8.4
-      unist-util-flatmap:
-        specifier: ^1.0.0
-        version: 1.0.0
-      vitepress:
-        specifier: ^1.0.0-alpha.46
-        version: 1.0.0-alpha.46_tbpndr44ulefs3hehwpi2mkf2y
-      vitepress-plugin-search:
-        specifier: ^1.0.4-alpha.19
-        version: 1.0.4-alpha.19_g67lr3vgasogkevpbew55lljzq
+      '@types/cytoscape': 3.19.9
+      '@types/d3': 7.4.0
+      '@types/dompurify': 2.4.0
+      '@types/jsdom': 21.1.0
+      '@types/lodash-es': 4.17.6
+      '@types/micromatch': 4.0.2
+      '@types/prettier': 2.7.1
+      '@types/stylis': 4.0.2
+      '@types/uuid': 9.0.0
+      '@typescript-eslint/eslint-plugin': 5.42.1_qxgr6oy2qtsmmpo3f6iejuryuq
+      '@typescript-eslint/parser': 5.42.1_yygwinqv3a2io74xmwofqb7uka
+      chokidar: 3.5.3
+      concurrently: 7.5.0
+      coveralls: 3.1.1
+      cpy-cli: 4.2.0
+      cspell: 6.14.3
+      globby: 13.1.2
+      jison: 0.4.18
+      js-base64: 3.7.2
+      jsdom: 21.1.0
+      micromatch: 4.0.5
+      path-browserify: 1.0.1
+      prettier: 2.7.1
+      remark: 14.0.2
+      remark-frontmatter: 4.0.1
+      remark-gfm: 3.0.1
+      rimraf: 4.1.2
+      start-server-and-test: 1.14.0
+      typedoc: 0.23.18_typescript@4.8.4
+      typedoc-plugin-markdown: 3.13.6_typedoc@0.23.18
+      typescript: 4.8.4
+      unist-util-flatmap: 1.0.0
+      vitepress: 1.0.0-alpha.46_tbpndr44ulefs3hehwpi2mkf2y
+      vitepress-plugin-search: 1.0.4-alpha.19_g67lr3vgasogkevpbew55lljzq
 
   packages/mermaid-example-diagram:
-    dependencies:
-      '@braintree/sanitize-url':
-        specifier: ^6.0.0
-        version: 6.0.0
-      cytoscape:
-        specifier: ^3.23.0
-        version: 3.23.0
-      cytoscape-cose-bilkent:
-        specifier: ^4.1.0
-        version: 4.1.0_cytoscape@3.23.0
-      cytoscape-fcose:
-        specifier: ^2.1.0
-        version: 2.1.0_cytoscape@3.23.0
-      d3:
-        specifier: ^7.0.0
-        version: 7.8.2
-      khroma:
-        specifier: ^2.0.0
-        version: 2.0.0
-      non-layered-tidy-tree-layout:
-        specifier: ^2.0.2
-        version: 2.0.2
+    specifiers:
+      '@braintree/sanitize-url': ^6.0.0
+      '@types/cytoscape': ^3.19.9
+      concurrently: ^7.5.0
+      cytoscape: ^3.23.0
+      cytoscape-cose-bilkent: ^4.1.0
+      cytoscape-fcose: ^2.1.0
+      d3: ^7.0.0
+      khroma: ^2.0.0
+      mermaid: workspace:*
+      non-layered-tidy-tree-layout: ^2.0.2
+      rimraf: ^4.0.0
+    dependencies:
+      '@braintree/sanitize-url': 6.0.0
+      cytoscape: 3.23.0
+      cytoscape-cose-bilkent: 4.1.0_cytoscape@3.23.0
+      cytoscape-fcose: 2.1.0_cytoscape@3.23.0
+      d3: 7.8.2
+      khroma: 2.0.0
+      non-layered-tidy-tree-layout: 2.0.2
     devDependencies:
-      '@types/cytoscape':
-        specifier: ^3.19.9
-        version: 3.19.9
-      concurrently:
-        specifier: ^7.5.0
-        version: 7.5.0
-      mermaid:
-        specifier: workspace:*
-        version: link:../mermaid
-      rimraf:
-        specifier: ^4.0.0
-        version: 4.1.2
+      '@types/cytoscape': 3.19.9
+      concurrently: 7.5.0
+      mermaid: link:../mermaid
+      rimraf: 4.1.2
 
   tests/webpack:
-    dependencies:
-      '@mermaid-js/mermaid-example-diagram':
-        specifier: workspace:*
-        version: link:../../packages/mermaid-example-diagram
-      mermaid:
-        specifier: workspace:*
-        version: link:../../packages/mermaid
+    specifiers:
+      '@mermaid-js/mermaid-example-diagram': workspace:*
+      mermaid: workspace:*
+      webpack: ^5.74.0
+      webpack-cli: ^4.10.0
+      webpack-dev-server: ^4.11.1
+    dependencies:
+      '@mermaid-js/mermaid-example-diagram': link:../../packages/mermaid-example-diagram
+      mermaid: link:../../packages/mermaid
     devDependencies:
-      webpack:
-        specifier: ^5.74.0
-        version: 5.75.0_webpack-cli@4.10.0
-      webpack-cli:
-        specifier: ^4.10.0
-        version: 4.10.0_uaydpeuxkjjcxdbyfgk36cjdxi
-      webpack-dev-server:
-        specifier: ^4.11.1
-        version: 4.11.1_pda42hcaj7d62cr262fr632kue
+      webpack: 5.75.0_webpack-cli@4.10.0
+      webpack-cli: 4.10.0_uaydpeuxkjjcxdbyfgk36cjdxi
+      webpack-dev-server: 4.11.1_pda42hcaj7d62cr262fr632kue
 
 packages:
 

From f3a9f81bfb16345397fe1ff2c53209d96c052e7c Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Mon, 13 Mar 2023 04:46:08 +0000
Subject: [PATCH 35/88] fix(deps): update all non-major dependencies

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

diff --git a/package.json b/package.json
index ebb630a1e6..0203cbe50b 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "version": "10.0.2",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "type": "module",
-  "packageManager": "pnpm@7.29.0",
+  "packageManager": "pnpm@7.29.1",
   "keywords": [
     "diagram",
     "markdown",
diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index e40912c295..3c9ff1ed4e 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -57,7 +57,7 @@
     "cytoscape-cose-bilkent": "^4.1.0",
     "cytoscape-fcose": "^2.1.0",
     "d3": "^7.4.0",
-    "dagre-d3-es": "7.0.9",
+    "dagre-d3-es": "7.0.10",
     "dayjs": "^1.11.7",
     "dompurify": "2.4.5",
     "elkjs": "^0.8.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6f0df7231b..ef69a17060 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,269 +1,387 @@
-lockfileVersion: 5.4
+lockfileVersion: 5.4-inlineSpecifiers
 
 importers:
 
   .:
-    specifiers:
-      '@applitools/eyes-cypress': ^3.27.6
-      '@commitlint/cli': ^17.2.0
-      '@commitlint/config-conventional': ^17.2.0
-      '@cspell/eslint-plugin': ^6.14.2
-      '@types/cors': ^2.8.13
-      '@types/eslint': ^8.4.10
-      '@types/express': ^4.17.17
-      '@types/js-yaml': ^4.0.5
-      '@types/jsdom': ^21.0.0
-      '@types/lodash': ^4.14.188
-      '@types/mdast': ^3.0.10
-      '@types/node': ^18.11.9
-      '@types/prettier': ^2.7.1
-      '@types/rollup-plugin-visualizer': ^4.2.1
-      '@typescript-eslint/eslint-plugin': ^5.48.2
-      '@typescript-eslint/parser': ^5.48.2
-      '@vitest/coverage-c8': ^0.29.0
-      '@vitest/spy': ^0.29.0
-      '@vitest/ui': ^0.29.0
-      concurrently: ^7.5.0
-      cors: ^2.8.5
-      coveralls: ^3.1.1
-      cypress: ^12.0.0
-      cypress-image-snapshot: ^4.0.1
-      esbuild: ^0.17.0
-      eslint: ^8.32.0
-      eslint-config-prettier: ^8.6.0
-      eslint-plugin-cypress: ^2.12.1
-      eslint-plugin-html: ^7.1.0
-      eslint-plugin-jest: ^27.1.5
-      eslint-plugin-jsdoc: ^39.6.2
-      eslint-plugin-json: ^3.1.0
-      eslint-plugin-lodash: ^7.4.0
-      eslint-plugin-markdown: ^3.0.0
-      eslint-plugin-no-only-tests: ^3.1.0
-      eslint-plugin-tsdoc: ^0.2.17
-      eslint-plugin-unicorn: ^45.0.0
-      express: ^4.18.2
-      globby: ^13.1.2
-      husky: ^8.0.2
-      jest: ^29.3.1
-      jison: ^0.4.18
-      js-yaml: ^4.1.0
-      jsdom: ^21.0.0
-      lint-staged: ^13.0.3
-      path-browserify: ^1.0.1
-      pnpm: ^7.15.0
-      prettier: ^2.7.1
-      prettier-plugin-jsdoc: ^0.4.2
-      rimraf: ^4.0.0
-      rollup-plugin-visualizer: ^5.8.3
-      start-server-and-test: ^1.15.4
-      ts-node: ^10.9.1
-      typescript: ^4.8.4
-      vite: ^4.1.1
-      vitest: ^0.29.0
     devDependencies:
-      '@applitools/eyes-cypress': 3.27.6
-      '@commitlint/cli': 17.2.0
-      '@commitlint/config-conventional': 17.2.0
-      '@cspell/eslint-plugin': 6.14.2
-      '@types/cors': 2.8.13
-      '@types/eslint': 8.4.10
-      '@types/express': 4.17.17
-      '@types/js-yaml': 4.0.5
-      '@types/jsdom': 21.1.0
-      '@types/lodash': 4.14.188
-      '@types/mdast': 3.0.10
-      '@types/node': 18.11.9
-      '@types/prettier': 2.7.1
-      '@types/rollup-plugin-visualizer': 4.2.1
-      '@typescript-eslint/eslint-plugin': 5.48.2_iljmjqxcygjq3saipl7gerxpvi
-      '@typescript-eslint/parser': 5.48.2_yygwinqv3a2io74xmwofqb7uka
-      '@vitest/coverage-c8': 0.29.2_vitest@0.29.2
-      '@vitest/spy': 0.29.2
-      '@vitest/ui': 0.29.2
-      concurrently: 7.5.0
-      cors: 2.8.5
-      coveralls: 3.1.1
-      cypress: 12.5.1
-      cypress-image-snapshot: 4.0.1_cypress@12.5.1+jest@29.3.1
-      esbuild: 0.17.0
-      eslint: 8.32.0
-      eslint-config-prettier: 8.6.0_eslint@8.32.0
-      eslint-plugin-cypress: 2.12.1_eslint@8.32.0
-      eslint-plugin-html: 7.1.0
-      eslint-plugin-jest: 27.1.5_5rcd23qw3h5vuffwo2owxb3hw4
-      eslint-plugin-jsdoc: 39.6.2_eslint@8.32.0
-      eslint-plugin-json: 3.1.0
-      eslint-plugin-lodash: 7.4.0_eslint@8.32.0
-      eslint-plugin-markdown: 3.0.0_eslint@8.32.0
-      eslint-plugin-no-only-tests: 3.1.0
-      eslint-plugin-tsdoc: 0.2.17
-      eslint-plugin-unicorn: 45.0.0_eslint@8.32.0
-      express: 4.18.2
-      globby: 13.1.2
-      husky: 8.0.2
-      jest: 29.3.1_odkjkoia5xunhxkdrka32ib6vi
-      jison: 0.4.18
-      js-yaml: 4.1.0
-      jsdom: 21.1.0
-      lint-staged: 13.0.3
-      path-browserify: 1.0.1
-      pnpm: 7.15.0
-      prettier: 2.7.1
-      prettier-plugin-jsdoc: 0.4.2_prettier@2.7.1
-      rimraf: 4.1.2
-      rollup-plugin-visualizer: 5.8.3
-      start-server-and-test: 1.15.4
-      ts-node: 10.9.1_cbe7ovvae6zqfnmtgctpgpys54
-      typescript: 4.8.4
-      vite: 4.1.1_@types+node@18.11.9
-      vitest: 0.29.2_hjnfa4mohew6fc4mnpzgbfyvpa
+      '@applitools/eyes-cypress':
+        specifier: ^3.27.6
+        version: 3.27.6
+      '@commitlint/cli':
+        specifier: ^17.2.0
+        version: 17.2.0
+      '@commitlint/config-conventional':
+        specifier: ^17.2.0
+        version: 17.2.0
+      '@cspell/eslint-plugin':
+        specifier: ^6.14.2
+        version: 6.14.2
+      '@types/cors':
+        specifier: ^2.8.13
+        version: 2.8.13
+      '@types/eslint':
+        specifier: ^8.4.10
+        version: 8.4.10
+      '@types/express':
+        specifier: ^4.17.17
+        version: 4.17.17
+      '@types/js-yaml':
+        specifier: ^4.0.5
+        version: 4.0.5
+      '@types/jsdom':
+        specifier: ^21.0.0
+        version: 21.1.0
+      '@types/lodash':
+        specifier: ^4.14.188
+        version: 4.14.188
+      '@types/mdast':
+        specifier: ^3.0.10
+        version: 3.0.10
+      '@types/node':
+        specifier: ^18.11.9
+        version: 18.11.9
+      '@types/prettier':
+        specifier: ^2.7.1
+        version: 2.7.1
+      '@types/rollup-plugin-visualizer':
+        specifier: ^4.2.1
+        version: 4.2.1
+      '@typescript-eslint/eslint-plugin':
+        specifier: ^5.48.2
+        version: 5.48.2_iljmjqxcygjq3saipl7gerxpvi
+      '@typescript-eslint/parser':
+        specifier: ^5.48.2
+        version: 5.48.2_yygwinqv3a2io74xmwofqb7uka
+      '@vitest/coverage-c8':
+        specifier: ^0.29.0
+        version: 0.29.2_vitest@0.29.2
+      '@vitest/spy':
+        specifier: ^0.29.0
+        version: 0.29.2
+      '@vitest/ui':
+        specifier: ^0.29.0
+        version: 0.29.2
+      concurrently:
+        specifier: ^7.5.0
+        version: 7.5.0
+      cors:
+        specifier: ^2.8.5
+        version: 2.8.5
+      coveralls:
+        specifier: ^3.1.1
+        version: 3.1.1
+      cypress:
+        specifier: ^12.0.0
+        version: 12.5.1
+      cypress-image-snapshot:
+        specifier: ^4.0.1
+        version: 4.0.1_cypress@12.5.1+jest@29.3.1
+      esbuild:
+        specifier: ^0.17.0
+        version: 0.17.0
+      eslint:
+        specifier: ^8.32.0
+        version: 8.32.0
+      eslint-config-prettier:
+        specifier: ^8.6.0
+        version: 8.6.0_eslint@8.32.0
+      eslint-plugin-cypress:
+        specifier: ^2.12.1
+        version: 2.12.1_eslint@8.32.0
+      eslint-plugin-html:
+        specifier: ^7.1.0
+        version: 7.1.0
+      eslint-plugin-jest:
+        specifier: ^27.1.5
+        version: 27.1.5_5rcd23qw3h5vuffwo2owxb3hw4
+      eslint-plugin-jsdoc:
+        specifier: ^39.6.2
+        version: 39.6.2_eslint@8.32.0
+      eslint-plugin-json:
+        specifier: ^3.1.0
+        version: 3.1.0
+      eslint-plugin-lodash:
+        specifier: ^7.4.0
+        version: 7.4.0_eslint@8.32.0
+      eslint-plugin-markdown:
+        specifier: ^3.0.0
+        version: 3.0.0_eslint@8.32.0
+      eslint-plugin-no-only-tests:
+        specifier: ^3.1.0
+        version: 3.1.0
+      eslint-plugin-tsdoc:
+        specifier: ^0.2.17
+        version: 0.2.17
+      eslint-plugin-unicorn:
+        specifier: ^45.0.0
+        version: 45.0.0_eslint@8.32.0
+      express:
+        specifier: ^4.18.2
+        version: 4.18.2
+      globby:
+        specifier: ^13.1.2
+        version: 13.1.2
+      husky:
+        specifier: ^8.0.2
+        version: 8.0.2
+      jest:
+        specifier: ^29.3.1
+        version: 29.3.1_odkjkoia5xunhxkdrka32ib6vi
+      jison:
+        specifier: ^0.4.18
+        version: 0.4.18
+      js-yaml:
+        specifier: ^4.1.0
+        version: 4.1.0
+      jsdom:
+        specifier: ^21.0.0
+        version: 21.1.0
+      lint-staged:
+        specifier: ^13.0.3
+        version: 13.0.3
+      path-browserify:
+        specifier: ^1.0.1
+        version: 1.0.1
+      pnpm:
+        specifier: ^7.15.0
+        version: 7.15.0
+      prettier:
+        specifier: ^2.7.1
+        version: 2.7.1
+      prettier-plugin-jsdoc:
+        specifier: ^0.4.2
+        version: 0.4.2_prettier@2.7.1
+      rimraf:
+        specifier: ^4.0.0
+        version: 4.1.2
+      rollup-plugin-visualizer:
+        specifier: ^5.8.3
+        version: 5.8.3
+      start-server-and-test:
+        specifier: ^1.15.4
+        version: 1.15.4
+      ts-node:
+        specifier: ^10.9.1
+        version: 10.9.1_cbe7ovvae6zqfnmtgctpgpys54
+      typescript:
+        specifier: ^4.8.4
+        version: 4.8.4
+      vite:
+        specifier: ^4.1.1
+        version: 4.1.1_@types+node@18.11.9
+      vitest:
+        specifier: ^0.29.0
+        version: 0.29.2_hjnfa4mohew6fc4mnpzgbfyvpa
 
   packages/mermaid:
-    specifiers:
-      '@braintree/sanitize-url': ^6.0.0
-      '@types/cytoscape': ^3.19.9
-      '@types/d3': ^7.4.0
-      '@types/dompurify': ^2.4.0
-      '@types/jsdom': ^21.0.0
-      '@types/lodash-es': ^4.17.6
-      '@types/micromatch': ^4.0.2
-      '@types/prettier': ^2.7.1
-      '@types/stylis': ^4.0.2
-      '@types/uuid': ^9.0.0
-      '@typescript-eslint/eslint-plugin': ^5.42.1
-      '@typescript-eslint/parser': ^5.42.1
-      chokidar: ^3.5.3
-      concurrently: ^7.5.0
-      coveralls: ^3.1.1
-      cpy-cli: ^4.2.0
-      cspell: ^6.14.3
-      cytoscape: ^3.23.0
-      cytoscape-cose-bilkent: ^4.1.0
-      cytoscape-fcose: ^2.1.0
-      d3: ^7.4.0
-      dagre-d3-es: 7.0.9
-      dayjs: ^1.11.7
-      dompurify: 2.4.5
-      elkjs: ^0.8.2
-      globby: ^13.1.2
-      jison: ^0.4.18
-      js-base64: ^3.7.2
-      jsdom: ^21.0.0
-      khroma: ^2.0.0
-      lodash-es: ^4.17.21
-      micromatch: ^4.0.5
-      non-layered-tidy-tree-layout: ^2.0.2
-      path-browserify: ^1.0.1
-      prettier: ^2.7.1
-      remark: ^14.0.2
-      remark-frontmatter: ^4.0.1
-      remark-gfm: ^3.0.1
-      rimraf: ^4.0.0
-      start-server-and-test: ^1.14.0
-      stylis: ^4.1.2
-      ts-dedent: ^2.2.0
-      typedoc: ^0.23.18
-      typedoc-plugin-markdown: ^3.13.6
-      typescript: ^4.8.4
-      unist-util-flatmap: ^1.0.0
-      uuid: ^9.0.0
-      vitepress: ^1.0.0-alpha.46
-      vitepress-plugin-search: ^1.0.4-alpha.19
-      web-worker: ^1.2.0
-    dependencies:
-      '@braintree/sanitize-url': 6.0.0
-      cytoscape: 3.23.0
-      cytoscape-cose-bilkent: 4.1.0_cytoscape@3.23.0
-      cytoscape-fcose: 2.1.0_cytoscape@3.23.0
-      d3: 7.8.2
-      dagre-d3-es: 7.0.9
-      dayjs: 1.11.7
-      dompurify: 2.4.5
-      elkjs: 0.8.2
-      khroma: 2.0.0
-      lodash-es: 4.17.21
-      non-layered-tidy-tree-layout: 2.0.2
-      stylis: 4.1.2
-      ts-dedent: 2.2.0
-      uuid: 9.0.0
-      web-worker: 1.2.0
+    dependencies:
+      '@braintree/sanitize-url':
+        specifier: ^6.0.0
+        version: 6.0.0
+      cytoscape:
+        specifier: ^3.23.0
+        version: 3.23.0
+      cytoscape-cose-bilkent:
+        specifier: ^4.1.0
+        version: 4.1.0_cytoscape@3.23.0
+      cytoscape-fcose:
+        specifier: ^2.1.0
+        version: 2.1.0_cytoscape@3.23.0
+      d3:
+        specifier: ^7.4.0
+        version: 7.8.2
+      dagre-d3-es:
+        specifier: 7.0.10
+        version: 7.0.10
+      dayjs:
+        specifier: ^1.11.7
+        version: 1.11.7
+      dompurify:
+        specifier: 2.4.5
+        version: 2.4.5
+      elkjs:
+        specifier: ^0.8.2
+        version: 0.8.2
+      khroma:
+        specifier: ^2.0.0
+        version: 2.0.0
+      lodash-es:
+        specifier: ^4.17.21
+        version: 4.17.21
+      non-layered-tidy-tree-layout:
+        specifier: ^2.0.2
+        version: 2.0.2
+      stylis:
+        specifier: ^4.1.2
+        version: 4.1.2
+      ts-dedent:
+        specifier: ^2.2.0
+        version: 2.2.0
+      uuid:
+        specifier: ^9.0.0
+        version: 9.0.0
+      web-worker:
+        specifier: ^1.2.0
+        version: 1.2.0
     devDependencies:
-      '@types/cytoscape': 3.19.9
-      '@types/d3': 7.4.0
-      '@types/dompurify': 2.4.0
-      '@types/jsdom': 21.1.0
-      '@types/lodash-es': 4.17.6
-      '@types/micromatch': 4.0.2
-      '@types/prettier': 2.7.1
-      '@types/stylis': 4.0.2
-      '@types/uuid': 9.0.0
-      '@typescript-eslint/eslint-plugin': 5.42.1_qxgr6oy2qtsmmpo3f6iejuryuq
-      '@typescript-eslint/parser': 5.42.1_yygwinqv3a2io74xmwofqb7uka
-      chokidar: 3.5.3
-      concurrently: 7.5.0
-      coveralls: 3.1.1
-      cpy-cli: 4.2.0
-      cspell: 6.14.3
-      globby: 13.1.2
-      jison: 0.4.18
-      js-base64: 3.7.2
-      jsdom: 21.1.0
-      micromatch: 4.0.5
-      path-browserify: 1.0.1
-      prettier: 2.7.1
-      remark: 14.0.2
-      remark-frontmatter: 4.0.1
-      remark-gfm: 3.0.1
-      rimraf: 4.1.2
-      start-server-and-test: 1.14.0
-      typedoc: 0.23.18_typescript@4.8.4
-      typedoc-plugin-markdown: 3.13.6_typedoc@0.23.18
-      typescript: 4.8.4
-      unist-util-flatmap: 1.0.0
-      vitepress: 1.0.0-alpha.46_tbpndr44ulefs3hehwpi2mkf2y
-      vitepress-plugin-search: 1.0.4-alpha.19_g67lr3vgasogkevpbew55lljzq
+      '@types/cytoscape':
+        specifier: ^3.19.9
+        version: 3.19.9
+      '@types/d3':
+        specifier: ^7.4.0
+        version: 7.4.0
+      '@types/dompurify':
+        specifier: ^2.4.0
+        version: 2.4.0
+      '@types/jsdom':
+        specifier: ^21.0.0
+        version: 21.1.0
+      '@types/lodash-es':
+        specifier: ^4.17.6
+        version: 4.17.6
+      '@types/micromatch':
+        specifier: ^4.0.2
+        version: 4.0.2
+      '@types/prettier':
+        specifier: ^2.7.1
+        version: 2.7.1
+      '@types/stylis':
+        specifier: ^4.0.2
+        version: 4.0.2
+      '@types/uuid':
+        specifier: ^9.0.0
+        version: 9.0.0
+      '@typescript-eslint/eslint-plugin':
+        specifier: ^5.42.1
+        version: 5.42.1_qxgr6oy2qtsmmpo3f6iejuryuq
+      '@typescript-eslint/parser':
+        specifier: ^5.42.1
+        version: 5.42.1_yygwinqv3a2io74xmwofqb7uka
+      chokidar:
+        specifier: ^3.5.3
+        version: 3.5.3
+      concurrently:
+        specifier: ^7.5.0
+        version: 7.5.0
+      coveralls:
+        specifier: ^3.1.1
+        version: 3.1.1
+      cpy-cli:
+        specifier: ^4.2.0
+        version: 4.2.0
+      cspell:
+        specifier: ^6.14.3
+        version: 6.14.3
+      globby:
+        specifier: ^13.1.2
+        version: 13.1.2
+      jison:
+        specifier: ^0.4.18
+        version: 0.4.18
+      js-base64:
+        specifier: ^3.7.2
+        version: 3.7.2
+      jsdom:
+        specifier: ^21.0.0
+        version: 21.1.0
+      micromatch:
+        specifier: ^4.0.5
+        version: 4.0.5
+      path-browserify:
+        specifier: ^1.0.1
+        version: 1.0.1
+      prettier:
+        specifier: ^2.7.1
+        version: 2.7.1
+      remark:
+        specifier: ^14.0.2
+        version: 14.0.2
+      remark-frontmatter:
+        specifier: ^4.0.1
+        version: 4.0.1
+      remark-gfm:
+        specifier: ^3.0.1
+        version: 3.0.1
+      rimraf:
+        specifier: ^4.0.0
+        version: 4.1.2
+      start-server-and-test:
+        specifier: ^1.14.0
+        version: 1.14.0
+      typedoc:
+        specifier: ^0.23.18
+        version: 0.23.18_typescript@4.8.4
+      typedoc-plugin-markdown:
+        specifier: ^3.13.6
+        version: 3.13.6_typedoc@0.23.18
+      typescript:
+        specifier: ^4.8.4
+        version: 4.8.4
+      unist-util-flatmap:
+        specifier: ^1.0.0
+        version: 1.0.0
+      vitepress:
+        specifier: ^1.0.0-alpha.46
+        version: 1.0.0-alpha.46_tbpndr44ulefs3hehwpi2mkf2y
+      vitepress-plugin-search:
+        specifier: ^1.0.4-alpha.19
+        version: 1.0.4-alpha.19_g67lr3vgasogkevpbew55lljzq
 
   packages/mermaid-example-diagram:
-    specifiers:
-      '@braintree/sanitize-url': ^6.0.0
-      '@types/cytoscape': ^3.19.9
-      concurrently: ^7.5.0
-      cytoscape: ^3.23.0
-      cytoscape-cose-bilkent: ^4.1.0
-      cytoscape-fcose: ^2.1.0
-      d3: ^7.0.0
-      khroma: ^2.0.0
-      mermaid: workspace:*
-      non-layered-tidy-tree-layout: ^2.0.2
-      rimraf: ^4.0.0
-    dependencies:
-      '@braintree/sanitize-url': 6.0.0
-      cytoscape: 3.23.0
-      cytoscape-cose-bilkent: 4.1.0_cytoscape@3.23.0
-      cytoscape-fcose: 2.1.0_cytoscape@3.23.0
-      d3: 7.8.2
-      khroma: 2.0.0
-      non-layered-tidy-tree-layout: 2.0.2
+    dependencies:
+      '@braintree/sanitize-url':
+        specifier: ^6.0.0
+        version: 6.0.0
+      cytoscape:
+        specifier: ^3.23.0
+        version: 3.23.0
+      cytoscape-cose-bilkent:
+        specifier: ^4.1.0
+        version: 4.1.0_cytoscape@3.23.0
+      cytoscape-fcose:
+        specifier: ^2.1.0
+        version: 2.1.0_cytoscape@3.23.0
+      d3:
+        specifier: ^7.0.0
+        version: 7.8.2
+      khroma:
+        specifier: ^2.0.0
+        version: 2.0.0
+      non-layered-tidy-tree-layout:
+        specifier: ^2.0.2
+        version: 2.0.2
     devDependencies:
-      '@types/cytoscape': 3.19.9
-      concurrently: 7.5.0
-      mermaid: link:../mermaid
-      rimraf: 4.1.2
+      '@types/cytoscape':
+        specifier: ^3.19.9
+        version: 3.19.9
+      concurrently:
+        specifier: ^7.5.0
+        version: 7.5.0
+      mermaid:
+        specifier: workspace:*
+        version: link:../mermaid
+      rimraf:
+        specifier: ^4.0.0
+        version: 4.1.2
 
   tests/webpack:
-    specifiers:
-      '@mermaid-js/mermaid-example-diagram': workspace:*
-      mermaid: workspace:*
-      webpack: ^5.74.0
-      webpack-cli: ^4.10.0
-      webpack-dev-server: ^4.11.1
-    dependencies:
-      '@mermaid-js/mermaid-example-diagram': link:../../packages/mermaid-example-diagram
-      mermaid: link:../../packages/mermaid
+    dependencies:
+      '@mermaid-js/mermaid-example-diagram':
+        specifier: workspace:*
+        version: link:../../packages/mermaid-example-diagram
+      mermaid:
+        specifier: workspace:*
+        version: link:../../packages/mermaid
     devDependencies:
-      webpack: 5.75.0_webpack-cli@4.10.0
-      webpack-cli: 4.10.0_uaydpeuxkjjcxdbyfgk36cjdxi
-      webpack-dev-server: 4.11.1_pda42hcaj7d62cr262fr632kue
+      webpack:
+        specifier: ^5.74.0
+        version: 5.75.0_webpack-cli@4.10.0
+      webpack-cli:
+        specifier: ^4.10.0
+        version: 4.10.0_uaydpeuxkjjcxdbyfgk36cjdxi
+      webpack-dev-server:
+        specifier: ^4.11.1
+        version: 4.11.1_pda42hcaj7d62cr262fr632kue
 
 packages:
 
@@ -5471,8 +5589,8 @@ packages:
       d3-zoom: 3.0.0
     dev: false
 
-  /dagre-d3-es/7.0.9:
-    resolution: {integrity: sha512-rYR4QfVmy+sR44IBDvVtcAmOReGBvRCWDpO2QjYwqgh9yijw6eSHBqaPG/LIOEy7aBsniLvtMW6pg19qJhq60w==}
+  /dagre-d3-es/7.0.10:
+    resolution: {integrity: sha512-qTCQmEhcynucuaZgY5/+ti3X/rnszKZhEQH/ZdWdtP1tA/y3VoHJzcVrO9pjjJCNpigfscAtoUB5ONcd2wNn0A==}
     dependencies:
       d3: 7.8.2
       lodash-es: 4.17.21

From 853d9b7f981fde279dafc7f32e931579f75b6a48 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Tue, 14 Mar 2023 13:52:20 +0100
Subject: [PATCH 36/88] #4220 Create text utility functions handling new lines
 and applying them on mindmap

---
 cypress/platform/knsv2.html                   |  15 +-
 .../mermaid/src/dagre-wrapper/createLabel.js  |   8 +-
 .../mermaid/src/diagrams/mindmap/mindmapDb.js |   2 +-
 .../src/diagrams/mindmap/parser/mindmap.jison |   4 +
 .../mermaid/src/diagrams/mindmap/svgDraw.js   |  51 ++++--
 .../mermaid/src/rendering-util/createText.js  | 161 ++++++++++++++++++
 6 files changed, 219 insertions(+), 22 deletions(-)
 create mode 100644 packages/mermaid/src/rendering-util/createText.js

diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index fccd65004b..36f481a08d 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -54,7 +54,7 @@
     </style>
   </head>
   <body>
-    <pre id="diagram" class="mermaid">
+    <pre id="diagram" class="mermaid2">
 %%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
 graph BT
 a{The cat in the hat} -- 1o --> b
@@ -66,12 +66,13 @@
 b --> d(The dog in the hog)
 c --> d
     </pre>
-    <pre id="diagram" class="mermaid2">
-flowchart-elk TB
-      a --> b
-      a --> c
-      b --> d
-      c --> d
+    <pre id="diagram" class="mermaid">
+mindmap
+    id1["`Start
+second line 😎`"]
+      id2[Child]
+      id3[Child]
+      id4[Child]
     </pre>
     <pre id="diagram" class="mermaid2">
 %%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
diff --git a/packages/mermaid/src/dagre-wrapper/createLabel.js b/packages/mermaid/src/dagre-wrapper/createLabel.js
index af5032096b..ff7834c4f3 100644
--- a/packages/mermaid/src/dagre-wrapper/createLabel.js
+++ b/packages/mermaid/src/dagre-wrapper/createLabel.js
@@ -41,7 +41,13 @@ function addHtmlLabel(node) {
   div.attr('xmlns', 'http://www.w3.org/1999/xhtml');
   return fo.node();
 }
-
+/**
+ * @param _vertexText
+ * @param style
+ * @param isTitle
+ * @param isNode
+ * @deprecated svg-util/createText instead
+ */
 const createLabel = (_vertexText, style, isTitle, isNode) => {
   let vertexText = _vertexText || '';
   if (typeof vertexText === 'object') {
diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapDb.js b/packages/mermaid/src/diagrams/mindmap/mindmapDb.js
index 71aa449d92..7585029cfe 100644
--- a/packages/mermaid/src/diagrams/mindmap/mindmapDb.js
+++ b/packages/mermaid/src/diagrams/mindmap/mindmapDb.js
@@ -33,7 +33,7 @@ export const addNode = (level, id, descr, type) => {
     id: cnt++,
     nodeId: sanitizeText(id),
     level,
-    descr: sanitizeText(descr),
+    descr: sanitizeText(descr).replace(/\n/g, '<br />'),
     type,
     children: [],
     width: getConfig().mindmap.maxNodeWidth,
diff --git a/packages/mermaid/src/diagrams/mindmap/parser/mindmap.jison b/packages/mermaid/src/diagrams/mindmap/parser/mindmap.jison
index d2f6bbf1af..84a6191cf3 100644
--- a/packages/mermaid/src/diagrams/mindmap/parser/mindmap.jison
+++ b/packages/mermaid/src/diagrams/mindmap/parser/mindmap.jison
@@ -12,6 +12,7 @@
 %}
 %x NODE
 %x NSTR
+%x NSTR2
 %x ICON
 %x CLASS
 
@@ -41,6 +42,9 @@
 // !(-\()            return 'NODE_ID';
 [^\(\[\n\-\)\{\}]+         return 'NODE_ID';
 <<EOF>>            return 'EOF';
+<NODE>["][`]          { this.begin("NSTR2");}
+<NSTR2>[^`"]+        { return "NODE_DESCR";}
+<NSTR2>[`]["]          { this.popState();}
 <NODE>["]          { yy.getLogger().trace('Starting NSTR');this.begin("NSTR");}
 <NSTR>[^"]+        { yy.getLogger().trace('description:', yytext); return "NODE_DESCR";}
 <NSTR>["]          {this.popState();}
diff --git a/packages/mermaid/src/diagrams/mindmap/svgDraw.js b/packages/mermaid/src/diagrams/mindmap/svgDraw.js
index 2b1aa021e2..2c3dcca569 100644
--- a/packages/mermaid/src/diagrams/mindmap/svgDraw.js
+++ b/packages/mermaid/src/diagrams/mindmap/svgDraw.js
@@ -1,5 +1,6 @@
 import { select } from 'd3';
 import * as db from './mindmapDb';
+import { createText, setSize } from '../../rendering-util/createText';
 const MAX_SECTIONS = 12;
 
 /**
@@ -11,7 +12,7 @@ function wrap(text, width) {
     var text = select(this),
       words = text
         .text()
-        .split(/(\s+|<br>)/)
+        .split(/(\s+|<br\/>)/)
         .reverse(),
       word,
       line = [],
@@ -28,10 +29,10 @@ function wrap(text, width) {
       word = words[words.length - 1 - j];
       line.push(word);
       tspan.text(line.join(' ').trim());
-      if (tspan.node().getComputedTextLength() > width || word === '<br>') {
+      if (tspan.node().getComputedTextLength() > width || word === '<br/>') {
         line.pop();
         tspan.text(line.join(' ').trim());
-        if (word === '<br>') {
+        if (word === '<br/>') {
           line = [''];
         } else {
           line = [word];
@@ -203,6 +204,7 @@ const roundedRectBkg = function (elem, node) {
  * @returns {number} The height nodes dom element
  */
 export const drawNode = function (elem, node, fullSection, conf) {
+  const htmlLabels = false;
   const section = fullSection % (MAX_SECTIONS - 1);
   const nodeElem = elem.append('g');
   node.section = section;
@@ -215,15 +217,29 @@ export const drawNode = function (elem, node, fullSection, conf) {
 
   // Create the wrapped text element
   const textElem = nodeElem.append('g');
-  const txt = textElem
-    .append('text')
-    .text(node.descr)
-    .attr('dy', '1em')
-    .attr('alignment-baseline', 'middle')
-    .attr('dominant-baseline', 'middle')
-    .attr('text-anchor', 'middle')
-    .call(wrap, node.width);
-  const bbox = txt.node().getBBox();
+
+  const newEl = createText(textElem, node.descr, { useHtmlLabels: htmlLabels });
+  const txt = textElem.node().appendChild(newEl);
+  // const txt = textElem.append(newEl);
+  // const txt = textElem
+  //   .append('text')
+  //   .text(node.descr)
+  //   .attr('dy', '1em')
+  //   .attr('alignment-baseline', 'middle')
+  //   .attr('dominant-baseline', 'middle')
+  //   .attr('text-anchor', 'middle')
+  //   .call(wrap, node.width);
+  // const newerEl = textElem.node().appendChild(newEl);
+  // setSize(textElem);
+  if (!htmlLabels) {
+    textElem
+      .attr('dy', '1em')
+      .attr('alignment-baseline', 'middle')
+      .attr('dominant-baseline', 'middle')
+      .attr('text-anchor', 'middle');
+  }
+  // .call(wrap, node.width);
+  const bbox = textElem.node().getBBox();
   const fontSize = conf.fontSize.replace ? conf.fontSize.replace('px', '') : conf.fontSize;
   node.height = bbox.height + fontSize * 1.1 * 0.5 + node.padding;
   node.width = bbox.width + 2 * node.padding;
@@ -267,7 +283,16 @@ export const drawNode = function (elem, node, fullSection, conf) {
       );
     }
   } else {
-    textElem.attr('transform', 'translate(' + node.width / 2 + ', ' + node.padding / 2 + ')');
+    if (!htmlLabels) {
+      const dx = node.width / 2;
+      const dy = node.padding / 2;
+      textElem.attr('transform', 'translate(' + dx + ', ' + dy + ')');
+      // textElem.attr('transform', 'translate(' + node.width / 2 + ', ' + node.padding / 2 + ')');
+    } else {
+      const dx = (node.width - bbox.width) / 2;
+      const dy = (node.height - bbox.height) / 2;
+      textElem.attr('transform', 'translate(' + dx + ', ' + dy + ')');
+    }
   }
 
   switch (node.type) {
diff --git a/packages/mermaid/src/rendering-util/createText.js b/packages/mermaid/src/rendering-util/createText.js
new file mode 100644
index 0000000000..58e0f54a75
--- /dev/null
+++ b/packages/mermaid/src/rendering-util/createText.js
@@ -0,0 +1,161 @@
+import { select } from 'd3';
+import { log } from '../logger';
+import { getConfig } from '../config';
+import { evaluate } from '../diagrams/common/common';
+import { decodeEntities } from '../mermaidAPI';
+
+/**
+ * @param dom
+ * @param styleFn
+ */
+function applyStyle(dom, styleFn) {
+  if (styleFn) {
+    dom.attr('style', styleFn);
+  }
+}
+
+/**
+ * @param element
+ * @param {any} node
+ * @returns {SVGForeignObjectElement} Node
+ */
+function addHtmlSpan(element, node) {
+  const fo = element.append('foreignObject');
+  const newEl = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
+  const div = fo.append('xhtml:div');
+
+  const label = node.label;
+  const labelClass = node.isNode ? 'nodeLabel' : 'edgeLabel';
+  div.html(
+    '<span class="' +
+      labelClass +
+      '" ' +
+      (node.labelStyle ? 'style="' + node.labelStyle + '"' : '') +
+      '>' +
+      label +
+      '</span>'
+  );
+
+  applyStyle(div, node.labelStyle);
+  div.style('display', 'inline-block');
+  const bbox = div.node().getBoundingClientRect();
+  fo.style('width', bbox.width);
+  fo.style('height', bbox.height);
+
+  const divNode = div.node();
+  window.divNode = divNode;
+  // Fix for firefox
+  div.style('white-space', 'nowrap');
+  div.attr('xmlns', 'http://www.w3.org/1999/xhtml');
+  return fo.node();
+}
+
+/**
+ * @param {string} text The text to be wrapped
+ * @param {number} width The max width of the text
+ */
+function wrap(text, width) {
+  text.each(function () {
+    var text = select(this),
+      words = text
+        .text()
+        .split(/(\s+|<br\/>)/)
+        .reverse(),
+      word,
+      line = [],
+      lineHeight = 1.1, // ems
+      y = text.attr('y'),
+      dy = parseFloat(text.attr('dy')),
+      tspan = text
+        .text(null)
+        .append('tspan')
+        .attr('x', 0)
+        .attr('y', y)
+        .attr('dy', dy + 'em');
+    for (let j = 0; j < words.length; j++) {
+      word = words[words.length - 1 - j];
+      line.push(word);
+      tspan.text(line.join(' ').trim());
+      if (tspan.node().getComputedTextLength() > width || word === '<br/>') {
+        line.pop();
+        tspan.text(line.join(' ').trim());
+        if (word === '<br/>') {
+          line = [''];
+        } else {
+          line = [word];
+        }
+
+        tspan = text
+          .append('tspan')
+          .attr('x', 0)
+          .attr('y', y)
+          .attr('dy', lineHeight + 'em')
+          .text(word);
+      }
+    }
+  });
+}
+
+/**
+ *
+ * @param el
+ * @param {*} text
+ * @param {*} param1
+ * @param root0
+ * @param root0.style
+ * @param root0.isTitle
+ * @param root0.classes
+ * @param root0.useHtmlLabels
+ * @param root0.isNode
+ * @returns
+ */
+// Note when using from flowcharts converting the API isNode means classes should be set accordingly. When using htmlLabels => to sett classes to'nodeLabel' when isNode=true otherwise 'edgeLabel'
+// When not using htmlLabels => to set classes to 'title-row' when isTitle=true otherwise 'title-row'
+export const createText = (
+  el,
+  text = '',
+  { style = '', isTitle = false, classes = '', useHtmlLabels = true, isNode = true } = {}
+) => {
+  if (useHtmlLabels) {
+    // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?
+    text = text.replace(/\\n|\n/g, '<br />');
+    log.info('text' + text);
+    const node = {
+      isNode,
+      label: decodeEntities(text).replace(
+        /fa[blrs]?:fa-[\w-]+/g,
+        (s) => `<i class='${s.replace(':', ' ')}'></i>`
+      ),
+      labelStyle: style.replace('fill:', 'color:'),
+    };
+    let vertexNode = addHtmlSpan(el, node);
+    return vertexNode;
+  } else {
+    const svgText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+    svgText.setAttribute('style', style.replace('color:', 'fill:'));
+    // el.attr('style', style.replace('color:', 'fill:'));
+    let rows = [];
+    if (typeof text === 'string') {
+      rows = text.split(/\\n|\n|<br\s*\/?>/gi);
+    } else if (Array.isArray(text)) {
+      rows = text;
+    } else {
+      rows = [];
+    }
+
+    for (const row of rows) {
+      const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
+      tspan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve');
+      tspan.setAttribute('dy', '1em');
+      tspan.setAttribute('x', '0');
+      if (isTitle) {
+        tspan.setAttribute('class', 'title-row');
+      } else {
+        tspan.setAttribute('class', 'row');
+      }
+      tspan.textContent = row.trim();
+      svgText.appendChild(tspan);
+    }
+    return svgText;
+  }
+};

From ddd245de71af7b891a2f7dd4734e0cb2c382e798 Mon Sep 17 00:00:00 2001
From: Chuck <84461456+Whoeza@users.noreply.github.com>
Date: Tue, 14 Mar 2023 20:35:39 +0100
Subject: [PATCH 37/88] typo fix

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

diff --git a/packages/mermaid/src/docs/syntax/mindmap.md b/packages/mermaid/src/docs/syntax/mindmap.md
index c8a2526919..1cb1f68d43 100644
--- a/packages/mermaid/src/docs/syntax/mindmap.md
+++ b/packages/mermaid/src/docs/syntax/mindmap.md
@@ -138,7 +138,7 @@ mindmap
         C
 ```
 
-_These classes needs top be supplied by the site administrator._
+_These classes need to be supplied by the site administrator._
 
 ## Unclear indentation
 

From 2dd906d80914b5d283e7446ef4a3110980dd849b Mon Sep 17 00:00:00 2001
From: sidharthv96 <sidharthv96@users.noreply.github.com>
Date: Wed, 15 Mar 2023 07:50:54 +0000
Subject: [PATCH 38/88] Update docs

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

diff --git a/docs/syntax/mindmap.md b/docs/syntax/mindmap.md
index ad8aab77f4..babe47756d 100644
--- a/docs/syntax/mindmap.md
+++ b/docs/syntax/mindmap.md
@@ -224,7 +224,7 @@ mindmap
         C
 ```
 
-_These classes needs top be supplied by the site administrator._
+_These classes need to be supplied by the site administrator._
 
 ## Unclear indentation
 

From 8c69ecd5ac7bca208911ca3366483726f17b8f2c Mon Sep 17 00:00:00 2001
From: Remco Haszing <remcohaszing@gmail.com>
Date: Fri, 17 Mar 2023 12:26:41 +0100
Subject: [PATCH 39/88] Update @types/lodash-es

This adds support for the TypeScript `"moduleResolution": "node16"`.
---
 packages/mermaid/package.json | 2 +-
 pnpm-lock.yaml                | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index 3c9ff1ed4e..15730a6c54 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -74,7 +74,7 @@
     "@types/d3": "^7.4.0",
     "@types/dompurify": "^2.4.0",
     "@types/jsdom": "^21.0.0",
-    "@types/lodash-es": "^4.17.6",
+    "@types/lodash-es": "^4.17.7",
     "@types/micromatch": "^4.0.2",
     "@types/prettier": "^2.7.1",
     "@types/stylis": "^4.0.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ef69a17060..4c6613f146 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -237,8 +237,8 @@ importers:
         specifier: ^21.0.0
         version: 21.1.0
       '@types/lodash-es':
-        specifier: ^4.17.6
-        version: 4.17.6
+        specifier: ^4.17.7
+        version: 4.17.7
       '@types/micromatch':
         specifier: ^4.0.2
         version: 4.0.2
@@ -2971,8 +2971,8 @@ packages:
     resolution: {integrity: sha512-HZQYqbiFVWufzCwexrvh694SOim8z2d+xJl5UNamcvQFejLY/2YUtzXHYi3cHdI7PMlS8ejH2slRAOJQ32aNbA==}
     dev: true
 
-  /@types/lodash-es/4.17.6:
-    resolution: {integrity: sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==}
+  /@types/lodash-es/4.17.7:
+    resolution: {integrity: sha512-z0ptr6UI10VlU6l5MYhGwS4mC8DZyYer2mCoyysZtSF7p26zOX8UpbrV0YpNYLGS8K4PUFIyEr62IMFFjveSiQ==}
     dependencies:
       '@types/lodash': 4.14.188
     dev: true

From 8b37ceffe1a4c182f3e0bbf06c6b35622a0fccb1 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Mon, 20 Mar 2023 01:00:05 +0000
Subject: [PATCH 40/88] chore(deps): update pnpm to v7.30.0

---
 package.json   |   2 +-
 pnpm-lock.yaml | 622 ++++++++++++++++++++-----------------------------
 2 files changed, 253 insertions(+), 371 deletions(-)

diff --git a/package.json b/package.json
index 0203cbe50b..2da802bae3 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "version": "10.0.2",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "type": "module",
-  "packageManager": "pnpm@7.29.1",
+  "packageManager": "pnpm@7.30.0",
   "keywords": [
     "diagram",
     "markdown",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4c6613f146..512b338e6a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,387 +1,269 @@
-lockfileVersion: 5.4-inlineSpecifiers
+lockfileVersion: 5.4
 
 importers:
 
   .:
+    specifiers:
+      '@applitools/eyes-cypress': ^3.27.6
+      '@commitlint/cli': ^17.2.0
+      '@commitlint/config-conventional': ^17.2.0
+      '@cspell/eslint-plugin': ^6.14.2
+      '@types/cors': ^2.8.13
+      '@types/eslint': ^8.4.10
+      '@types/express': ^4.17.17
+      '@types/js-yaml': ^4.0.5
+      '@types/jsdom': ^21.0.0
+      '@types/lodash': ^4.14.188
+      '@types/mdast': ^3.0.10
+      '@types/node': ^18.11.9
+      '@types/prettier': ^2.7.1
+      '@types/rollup-plugin-visualizer': ^4.2.1
+      '@typescript-eslint/eslint-plugin': ^5.48.2
+      '@typescript-eslint/parser': ^5.48.2
+      '@vitest/coverage-c8': ^0.29.0
+      '@vitest/spy': ^0.29.0
+      '@vitest/ui': ^0.29.0
+      concurrently: ^7.5.0
+      cors: ^2.8.5
+      coveralls: ^3.1.1
+      cypress: ^12.0.0
+      cypress-image-snapshot: ^4.0.1
+      esbuild: ^0.17.0
+      eslint: ^8.32.0
+      eslint-config-prettier: ^8.6.0
+      eslint-plugin-cypress: ^2.12.1
+      eslint-plugin-html: ^7.1.0
+      eslint-plugin-jest: ^27.1.5
+      eslint-plugin-jsdoc: ^39.6.2
+      eslint-plugin-json: ^3.1.0
+      eslint-plugin-lodash: ^7.4.0
+      eslint-plugin-markdown: ^3.0.0
+      eslint-plugin-no-only-tests: ^3.1.0
+      eslint-plugin-tsdoc: ^0.2.17
+      eslint-plugin-unicorn: ^45.0.0
+      express: ^4.18.2
+      globby: ^13.1.2
+      husky: ^8.0.2
+      jest: ^29.3.1
+      jison: ^0.4.18
+      js-yaml: ^4.1.0
+      jsdom: ^21.0.0
+      lint-staged: ^13.0.3
+      path-browserify: ^1.0.1
+      pnpm: ^7.15.0
+      prettier: ^2.7.1
+      prettier-plugin-jsdoc: ^0.4.2
+      rimraf: ^4.0.0
+      rollup-plugin-visualizer: ^5.8.3
+      start-server-and-test: ^1.15.4
+      ts-node: ^10.9.1
+      typescript: ^4.8.4
+      vite: ^4.1.1
+      vitest: ^0.29.0
     devDependencies:
-      '@applitools/eyes-cypress':
-        specifier: ^3.27.6
-        version: 3.27.6
-      '@commitlint/cli':
-        specifier: ^17.2.0
-        version: 17.2.0
-      '@commitlint/config-conventional':
-        specifier: ^17.2.0
-        version: 17.2.0
-      '@cspell/eslint-plugin':
-        specifier: ^6.14.2
-        version: 6.14.2
-      '@types/cors':
-        specifier: ^2.8.13
-        version: 2.8.13
-      '@types/eslint':
-        specifier: ^8.4.10
-        version: 8.4.10
-      '@types/express':
-        specifier: ^4.17.17
-        version: 4.17.17
-      '@types/js-yaml':
-        specifier: ^4.0.5
-        version: 4.0.5
-      '@types/jsdom':
-        specifier: ^21.0.0
-        version: 21.1.0
-      '@types/lodash':
-        specifier: ^4.14.188
-        version: 4.14.188
-      '@types/mdast':
-        specifier: ^3.0.10
-        version: 3.0.10
-      '@types/node':
-        specifier: ^18.11.9
-        version: 18.11.9
-      '@types/prettier':
-        specifier: ^2.7.1
-        version: 2.7.1
-      '@types/rollup-plugin-visualizer':
-        specifier: ^4.2.1
-        version: 4.2.1
-      '@typescript-eslint/eslint-plugin':
-        specifier: ^5.48.2
-        version: 5.48.2_iljmjqxcygjq3saipl7gerxpvi
-      '@typescript-eslint/parser':
-        specifier: ^5.48.2
-        version: 5.48.2_yygwinqv3a2io74xmwofqb7uka
-      '@vitest/coverage-c8':
-        specifier: ^0.29.0
-        version: 0.29.2_vitest@0.29.2
-      '@vitest/spy':
-        specifier: ^0.29.0
-        version: 0.29.2
-      '@vitest/ui':
-        specifier: ^0.29.0
-        version: 0.29.2
-      concurrently:
-        specifier: ^7.5.0
-        version: 7.5.0
-      cors:
-        specifier: ^2.8.5
-        version: 2.8.5
-      coveralls:
-        specifier: ^3.1.1
-        version: 3.1.1
-      cypress:
-        specifier: ^12.0.0
-        version: 12.5.1
-      cypress-image-snapshot:
-        specifier: ^4.0.1
-        version: 4.0.1_cypress@12.5.1+jest@29.3.1
-      esbuild:
-        specifier: ^0.17.0
-        version: 0.17.0
-      eslint:
-        specifier: ^8.32.0
-        version: 8.32.0
-      eslint-config-prettier:
-        specifier: ^8.6.0
-        version: 8.6.0_eslint@8.32.0
-      eslint-plugin-cypress:
-        specifier: ^2.12.1
-        version: 2.12.1_eslint@8.32.0
-      eslint-plugin-html:
-        specifier: ^7.1.0
-        version: 7.1.0
-      eslint-plugin-jest:
-        specifier: ^27.1.5
-        version: 27.1.5_5rcd23qw3h5vuffwo2owxb3hw4
-      eslint-plugin-jsdoc:
-        specifier: ^39.6.2
-        version: 39.6.2_eslint@8.32.0
-      eslint-plugin-json:
-        specifier: ^3.1.0
-        version: 3.1.0
-      eslint-plugin-lodash:
-        specifier: ^7.4.0
-        version: 7.4.0_eslint@8.32.0
-      eslint-plugin-markdown:
-        specifier: ^3.0.0
-        version: 3.0.0_eslint@8.32.0
-      eslint-plugin-no-only-tests:
-        specifier: ^3.1.0
-        version: 3.1.0
-      eslint-plugin-tsdoc:
-        specifier: ^0.2.17
-        version: 0.2.17
-      eslint-plugin-unicorn:
-        specifier: ^45.0.0
-        version: 45.0.0_eslint@8.32.0
-      express:
-        specifier: ^4.18.2
-        version: 4.18.2
-      globby:
-        specifier: ^13.1.2
-        version: 13.1.2
-      husky:
-        specifier: ^8.0.2
-        version: 8.0.2
-      jest:
-        specifier: ^29.3.1
-        version: 29.3.1_odkjkoia5xunhxkdrka32ib6vi
-      jison:
-        specifier: ^0.4.18
-        version: 0.4.18
-      js-yaml:
-        specifier: ^4.1.0
-        version: 4.1.0
-      jsdom:
-        specifier: ^21.0.0
-        version: 21.1.0
-      lint-staged:
-        specifier: ^13.0.3
-        version: 13.0.3
-      path-browserify:
-        specifier: ^1.0.1
-        version: 1.0.1
-      pnpm:
-        specifier: ^7.15.0
-        version: 7.15.0
-      prettier:
-        specifier: ^2.7.1
-        version: 2.7.1
-      prettier-plugin-jsdoc:
-        specifier: ^0.4.2
-        version: 0.4.2_prettier@2.7.1
-      rimraf:
-        specifier: ^4.0.0
-        version: 4.1.2
-      rollup-plugin-visualizer:
-        specifier: ^5.8.3
-        version: 5.8.3
-      start-server-and-test:
-        specifier: ^1.15.4
-        version: 1.15.4
-      ts-node:
-        specifier: ^10.9.1
-        version: 10.9.1_cbe7ovvae6zqfnmtgctpgpys54
-      typescript:
-        specifier: ^4.8.4
-        version: 4.8.4
-      vite:
-        specifier: ^4.1.1
-        version: 4.1.1_@types+node@18.11.9
-      vitest:
-        specifier: ^0.29.0
-        version: 0.29.2_hjnfa4mohew6fc4mnpzgbfyvpa
+      '@applitools/eyes-cypress': 3.27.6
+      '@commitlint/cli': 17.2.0
+      '@commitlint/config-conventional': 17.2.0
+      '@cspell/eslint-plugin': 6.14.2
+      '@types/cors': 2.8.13
+      '@types/eslint': 8.4.10
+      '@types/express': 4.17.17
+      '@types/js-yaml': 4.0.5
+      '@types/jsdom': 21.1.0
+      '@types/lodash': 4.14.188
+      '@types/mdast': 3.0.10
+      '@types/node': 18.11.9
+      '@types/prettier': 2.7.1
+      '@types/rollup-plugin-visualizer': 4.2.1
+      '@typescript-eslint/eslint-plugin': 5.48.2_iljmjqxcygjq3saipl7gerxpvi
+      '@typescript-eslint/parser': 5.48.2_yygwinqv3a2io74xmwofqb7uka
+      '@vitest/coverage-c8': 0.29.2_vitest@0.29.2
+      '@vitest/spy': 0.29.2
+      '@vitest/ui': 0.29.2
+      concurrently: 7.5.0
+      cors: 2.8.5
+      coveralls: 3.1.1
+      cypress: 12.5.1
+      cypress-image-snapshot: 4.0.1_cypress@12.5.1+jest@29.3.1
+      esbuild: 0.17.0
+      eslint: 8.32.0
+      eslint-config-prettier: 8.6.0_eslint@8.32.0
+      eslint-plugin-cypress: 2.12.1_eslint@8.32.0
+      eslint-plugin-html: 7.1.0
+      eslint-plugin-jest: 27.1.5_5rcd23qw3h5vuffwo2owxb3hw4
+      eslint-plugin-jsdoc: 39.6.2_eslint@8.32.0
+      eslint-plugin-json: 3.1.0
+      eslint-plugin-lodash: 7.4.0_eslint@8.32.0
+      eslint-plugin-markdown: 3.0.0_eslint@8.32.0
+      eslint-plugin-no-only-tests: 3.1.0
+      eslint-plugin-tsdoc: 0.2.17
+      eslint-plugin-unicorn: 45.0.0_eslint@8.32.0
+      express: 4.18.2
+      globby: 13.1.2
+      husky: 8.0.2
+      jest: 29.3.1_odkjkoia5xunhxkdrka32ib6vi
+      jison: 0.4.18
+      js-yaml: 4.1.0
+      jsdom: 21.1.0
+      lint-staged: 13.0.3
+      path-browserify: 1.0.1
+      pnpm: 7.15.0
+      prettier: 2.7.1
+      prettier-plugin-jsdoc: 0.4.2_prettier@2.7.1
+      rimraf: 4.1.2
+      rollup-plugin-visualizer: 5.8.3
+      start-server-and-test: 1.15.4
+      ts-node: 10.9.1_cbe7ovvae6zqfnmtgctpgpys54
+      typescript: 4.8.4
+      vite: 4.1.1_@types+node@18.11.9
+      vitest: 0.29.2_hjnfa4mohew6fc4mnpzgbfyvpa
 
   packages/mermaid:
-    dependencies:
-      '@braintree/sanitize-url':
-        specifier: ^6.0.0
-        version: 6.0.0
-      cytoscape:
-        specifier: ^3.23.0
-        version: 3.23.0
-      cytoscape-cose-bilkent:
-        specifier: ^4.1.0
-        version: 4.1.0_cytoscape@3.23.0
-      cytoscape-fcose:
-        specifier: ^2.1.0
-        version: 2.1.0_cytoscape@3.23.0
-      d3:
-        specifier: ^7.4.0
-        version: 7.8.2
-      dagre-d3-es:
-        specifier: 7.0.10
-        version: 7.0.10
-      dayjs:
-        specifier: ^1.11.7
-        version: 1.11.7
-      dompurify:
-        specifier: 2.4.5
-        version: 2.4.5
-      elkjs:
-        specifier: ^0.8.2
-        version: 0.8.2
-      khroma:
-        specifier: ^2.0.0
-        version: 2.0.0
-      lodash-es:
-        specifier: ^4.17.21
-        version: 4.17.21
-      non-layered-tidy-tree-layout:
-        specifier: ^2.0.2
-        version: 2.0.2
-      stylis:
-        specifier: ^4.1.2
-        version: 4.1.2
-      ts-dedent:
-        specifier: ^2.2.0
-        version: 2.2.0
-      uuid:
-        specifier: ^9.0.0
-        version: 9.0.0
-      web-worker:
-        specifier: ^1.2.0
-        version: 1.2.0
+    specifiers:
+      '@braintree/sanitize-url': ^6.0.0
+      '@types/cytoscape': ^3.19.9
+      '@types/d3': ^7.4.0
+      '@types/dompurify': ^2.4.0
+      '@types/jsdom': ^21.0.0
+      '@types/lodash-es': ^4.17.7
+      '@types/micromatch': ^4.0.2
+      '@types/prettier': ^2.7.1
+      '@types/stylis': ^4.0.2
+      '@types/uuid': ^9.0.0
+      '@typescript-eslint/eslint-plugin': ^5.42.1
+      '@typescript-eslint/parser': ^5.42.1
+      chokidar: ^3.5.3
+      concurrently: ^7.5.0
+      coveralls: ^3.1.1
+      cpy-cli: ^4.2.0
+      cspell: ^6.14.3
+      cytoscape: ^3.23.0
+      cytoscape-cose-bilkent: ^4.1.0
+      cytoscape-fcose: ^2.1.0
+      d3: ^7.4.0
+      dagre-d3-es: 7.0.10
+      dayjs: ^1.11.7
+      dompurify: 2.4.5
+      elkjs: ^0.8.2
+      globby: ^13.1.2
+      jison: ^0.4.18
+      js-base64: ^3.7.2
+      jsdom: ^21.0.0
+      khroma: ^2.0.0
+      lodash-es: ^4.17.21
+      micromatch: ^4.0.5
+      non-layered-tidy-tree-layout: ^2.0.2
+      path-browserify: ^1.0.1
+      prettier: ^2.7.1
+      remark: ^14.0.2
+      remark-frontmatter: ^4.0.1
+      remark-gfm: ^3.0.1
+      rimraf: ^4.0.0
+      start-server-and-test: ^1.14.0
+      stylis: ^4.1.2
+      ts-dedent: ^2.2.0
+      typedoc: ^0.23.18
+      typedoc-plugin-markdown: ^3.13.6
+      typescript: ^4.8.4
+      unist-util-flatmap: ^1.0.0
+      uuid: ^9.0.0
+      vitepress: ^1.0.0-alpha.46
+      vitepress-plugin-search: ^1.0.4-alpha.19
+      web-worker: ^1.2.0
+    dependencies:
+      '@braintree/sanitize-url': 6.0.0
+      cytoscape: 3.23.0
+      cytoscape-cose-bilkent: 4.1.0_cytoscape@3.23.0
+      cytoscape-fcose: 2.1.0_cytoscape@3.23.0
+      d3: 7.8.2
+      dagre-d3-es: 7.0.10
+      dayjs: 1.11.7
+      dompurify: 2.4.5
+      elkjs: 0.8.2
+      khroma: 2.0.0
+      lodash-es: 4.17.21
+      non-layered-tidy-tree-layout: 2.0.2
+      stylis: 4.1.2
+      ts-dedent: 2.2.0
+      uuid: 9.0.0
+      web-worker: 1.2.0
     devDependencies:
-      '@types/cytoscape':
-        specifier: ^3.19.9
-        version: 3.19.9
-      '@types/d3':
-        specifier: ^7.4.0
-        version: 7.4.0
-      '@types/dompurify':
-        specifier: ^2.4.0
-        version: 2.4.0
-      '@types/jsdom':
-        specifier: ^21.0.0
-        version: 21.1.0
-      '@types/lodash-es':
-        specifier: ^4.17.7
-        version: 4.17.7
-      '@types/micromatch':
-        specifier: ^4.0.2
-        version: 4.0.2
-      '@types/prettier':
-        specifier: ^2.7.1
-        version: 2.7.1
-      '@types/stylis':
-        specifier: ^4.0.2
-        version: 4.0.2
-      '@types/uuid':
-        specifier: ^9.0.0
-        version: 9.0.0
-      '@typescript-eslint/eslint-plugin':
-        specifier: ^5.42.1
-        version: 5.42.1_qxgr6oy2qtsmmpo3f6iejuryuq
-      '@typescript-eslint/parser':
-        specifier: ^5.42.1
-        version: 5.42.1_yygwinqv3a2io74xmwofqb7uka
-      chokidar:
-        specifier: ^3.5.3
-        version: 3.5.3
-      concurrently:
-        specifier: ^7.5.0
-        version: 7.5.0
-      coveralls:
-        specifier: ^3.1.1
-        version: 3.1.1
-      cpy-cli:
-        specifier: ^4.2.0
-        version: 4.2.0
-      cspell:
-        specifier: ^6.14.3
-        version: 6.14.3
-      globby:
-        specifier: ^13.1.2
-        version: 13.1.2
-      jison:
-        specifier: ^0.4.18
-        version: 0.4.18
-      js-base64:
-        specifier: ^3.7.2
-        version: 3.7.2
-      jsdom:
-        specifier: ^21.0.0
-        version: 21.1.0
-      micromatch:
-        specifier: ^4.0.5
-        version: 4.0.5
-      path-browserify:
-        specifier: ^1.0.1
-        version: 1.0.1
-      prettier:
-        specifier: ^2.7.1
-        version: 2.7.1
-      remark:
-        specifier: ^14.0.2
-        version: 14.0.2
-      remark-frontmatter:
-        specifier: ^4.0.1
-        version: 4.0.1
-      remark-gfm:
-        specifier: ^3.0.1
-        version: 3.0.1
-      rimraf:
-        specifier: ^4.0.0
-        version: 4.1.2
-      start-server-and-test:
-        specifier: ^1.14.0
-        version: 1.14.0
-      typedoc:
-        specifier: ^0.23.18
-        version: 0.23.18_typescript@4.8.4
-      typedoc-plugin-markdown:
-        specifier: ^3.13.6
-        version: 3.13.6_typedoc@0.23.18
-      typescript:
-        specifier: ^4.8.4
-        version: 4.8.4
-      unist-util-flatmap:
-        specifier: ^1.0.0
-        version: 1.0.0
-      vitepress:
-        specifier: ^1.0.0-alpha.46
-        version: 1.0.0-alpha.46_tbpndr44ulefs3hehwpi2mkf2y
-      vitepress-plugin-search:
-        specifier: ^1.0.4-alpha.19
-        version: 1.0.4-alpha.19_g67lr3vgasogkevpbew55lljzq
+      '@types/cytoscape': 3.19.9
+      '@types/d3': 7.4.0
+      '@types/dompurify': 2.4.0
+      '@types/jsdom': 21.1.0
+      '@types/lodash-es': 4.17.7
+      '@types/micromatch': 4.0.2
+      '@types/prettier': 2.7.1
+      '@types/stylis': 4.0.2
+      '@types/uuid': 9.0.0
+      '@typescript-eslint/eslint-plugin': 5.42.1_qxgr6oy2qtsmmpo3f6iejuryuq
+      '@typescript-eslint/parser': 5.42.1_yygwinqv3a2io74xmwofqb7uka
+      chokidar: 3.5.3
+      concurrently: 7.5.0
+      coveralls: 3.1.1
+      cpy-cli: 4.2.0
+      cspell: 6.14.3
+      globby: 13.1.2
+      jison: 0.4.18
+      js-base64: 3.7.2
+      jsdom: 21.1.0
+      micromatch: 4.0.5
+      path-browserify: 1.0.1
+      prettier: 2.7.1
+      remark: 14.0.2
+      remark-frontmatter: 4.0.1
+      remark-gfm: 3.0.1
+      rimraf: 4.1.2
+      start-server-and-test: 1.14.0
+      typedoc: 0.23.18_typescript@4.8.4
+      typedoc-plugin-markdown: 3.13.6_typedoc@0.23.18
+      typescript: 4.8.4
+      unist-util-flatmap: 1.0.0
+      vitepress: 1.0.0-alpha.46_tbpndr44ulefs3hehwpi2mkf2y
+      vitepress-plugin-search: 1.0.4-alpha.19_g67lr3vgasogkevpbew55lljzq
 
   packages/mermaid-example-diagram:
-    dependencies:
-      '@braintree/sanitize-url':
-        specifier: ^6.0.0
-        version: 6.0.0
-      cytoscape:
-        specifier: ^3.23.0
-        version: 3.23.0
-      cytoscape-cose-bilkent:
-        specifier: ^4.1.0
-        version: 4.1.0_cytoscape@3.23.0
-      cytoscape-fcose:
-        specifier: ^2.1.0
-        version: 2.1.0_cytoscape@3.23.0
-      d3:
-        specifier: ^7.0.0
-        version: 7.8.2
-      khroma:
-        specifier: ^2.0.0
-        version: 2.0.0
-      non-layered-tidy-tree-layout:
-        specifier: ^2.0.2
-        version: 2.0.2
+    specifiers:
+      '@braintree/sanitize-url': ^6.0.0
+      '@types/cytoscape': ^3.19.9
+      concurrently: ^7.5.0
+      cytoscape: ^3.23.0
+      cytoscape-cose-bilkent: ^4.1.0
+      cytoscape-fcose: ^2.1.0
+      d3: ^7.0.0
+      khroma: ^2.0.0
+      mermaid: workspace:*
+      non-layered-tidy-tree-layout: ^2.0.2
+      rimraf: ^4.0.0
+    dependencies:
+      '@braintree/sanitize-url': 6.0.0
+      cytoscape: 3.23.0
+      cytoscape-cose-bilkent: 4.1.0_cytoscape@3.23.0
+      cytoscape-fcose: 2.1.0_cytoscape@3.23.0
+      d3: 7.8.2
+      khroma: 2.0.0
+      non-layered-tidy-tree-layout: 2.0.2
     devDependencies:
-      '@types/cytoscape':
-        specifier: ^3.19.9
-        version: 3.19.9
-      concurrently:
-        specifier: ^7.5.0
-        version: 7.5.0
-      mermaid:
-        specifier: workspace:*
-        version: link:../mermaid
-      rimraf:
-        specifier: ^4.0.0
-        version: 4.1.2
+      '@types/cytoscape': 3.19.9
+      concurrently: 7.5.0
+      mermaid: link:../mermaid
+      rimraf: 4.1.2
 
   tests/webpack:
-    dependencies:
-      '@mermaid-js/mermaid-example-diagram':
-        specifier: workspace:*
-        version: link:../../packages/mermaid-example-diagram
-      mermaid:
-        specifier: workspace:*
-        version: link:../../packages/mermaid
+    specifiers:
+      '@mermaid-js/mermaid-example-diagram': workspace:*
+      mermaid: workspace:*
+      webpack: ^5.74.0
+      webpack-cli: ^4.10.0
+      webpack-dev-server: ^4.11.1
+    dependencies:
+      '@mermaid-js/mermaid-example-diagram': link:../../packages/mermaid-example-diagram
+      mermaid: link:../../packages/mermaid
     devDependencies:
-      webpack:
-        specifier: ^5.74.0
-        version: 5.75.0_webpack-cli@4.10.0
-      webpack-cli:
-        specifier: ^4.10.0
-        version: 4.10.0_uaydpeuxkjjcxdbyfgk36cjdxi
-      webpack-dev-server:
-        specifier: ^4.11.1
-        version: 4.11.1_pda42hcaj7d62cr262fr632kue
+      webpack: 5.75.0_webpack-cli@4.10.0
+      webpack-cli: 4.10.0_uaydpeuxkjjcxdbyfgk36cjdxi
+      webpack-dev-server: 4.11.1_pda42hcaj7d62cr262fr632kue
 
 packages:
 

From a1c50b8079950e44e2cae19620ce92f63d46b17d Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Mon, 20 Mar 2023 14:15:26 +0100
Subject: [PATCH 41/88] #4220 Parsing the text as markdown and rendering
 accordingly

---
 cypress/platform/knsv2.html                   |  12 +-
 packages/mermaid/package.json                 |   1 +
 .../mermaid/src/diagrams/mindmap/mindmapDb.js |   2 +-
 .../mermaid/src/diagrams/mindmap/svgDraw.js   |   7 +-
 .../mermaid/src/rendering-util/createText.js  | 146 +++++++-------
 .../rendering-util/handle-markdown-text.js    |  78 ++++++++
 .../handle-markdown-text.spec.js              | 181 ++++++++++++++++++
 pnpm-lock.yaml                                |  93 ++++++++-
 8 files changed, 435 insertions(+), 85 deletions(-)
 create mode 100644 packages/mermaid/src/rendering-util/handle-markdown-text.js
 create mode 100644 packages/mermaid/src/rendering-util/handle-markdown-text.spec.js

diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index 36f481a08d..9235290747 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -67,6 +67,14 @@
 c --> d
     </pre>
     <pre id="diagram" class="mermaid">
+mindmap
+    id1["`Start`"]
+      id2["`Child **with bold** text`"]
+      id3["`Children of which some
+      is using *italic type of* text`"]
+      id4[Child]
+    </pre>
+    <pre id="diagram" class="mermaid2">
 mindmap
     id1["`Start
 second line 😎`"]
@@ -273,12 +281,14 @@
       mermaid.initialize({
         theme: 'forest',
         startOnLoad: true,
-        logLevel: 5,
+        logLevel: 0,
         flowchart: {
           // defaultRenderer: 'elk',
           useMaxWidth: false,
+          // htmlLabels: false,
           htmlLabels: true,
         },
+        htmlLabels: true,
         gantt: {
           useMaxWidth: false,
         },
diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index 3c9ff1ed4e..b620009370 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -53,6 +53,7 @@
   },
   "dependencies": {
     "@braintree/sanitize-url": "^6.0.0",
+    "@khanacademy/simple-markdown": "^0.8.6",
     "cytoscape": "^3.23.0",
     "cytoscape-cose-bilkent": "^4.1.0",
     "cytoscape-fcose": "^2.1.0",
diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapDb.js b/packages/mermaid/src/diagrams/mindmap/mindmapDb.js
index 7585029cfe..71aa449d92 100644
--- a/packages/mermaid/src/diagrams/mindmap/mindmapDb.js
+++ b/packages/mermaid/src/diagrams/mindmap/mindmapDb.js
@@ -33,7 +33,7 @@ export const addNode = (level, id, descr, type) => {
     id: cnt++,
     nodeId: sanitizeText(id),
     level,
-    descr: sanitizeText(descr).replace(/\n/g, '<br />'),
+    descr: sanitizeText(descr),
     type,
     children: [],
     width: getConfig().mindmap.maxNodeWidth,
diff --git a/packages/mermaid/src/diagrams/mindmap/svgDraw.js b/packages/mermaid/src/diagrams/mindmap/svgDraw.js
index 2c3dcca569..5394e004e3 100644
--- a/packages/mermaid/src/diagrams/mindmap/svgDraw.js
+++ b/packages/mermaid/src/diagrams/mindmap/svgDraw.js
@@ -1,6 +1,6 @@
 import { select } from 'd3';
 import * as db from './mindmapDb';
-import { createText, setSize } from '../../rendering-util/createText';
+import { createText } from '../../rendering-util/createText';
 const MAX_SECTIONS = 12;
 
 /**
@@ -217,9 +217,8 @@ export const drawNode = function (elem, node, fullSection, conf) {
 
   // Create the wrapped text element
   const textElem = nodeElem.append('g');
-
-  const newEl = createText(textElem, node.descr, { useHtmlLabels: htmlLabels });
-  const txt = textElem.node().appendChild(newEl);
+  const newEl = createText(textElem, node.descr, { useHtmlLabels: htmlLabels, width: node.width });
+  // const txt = textElem.node().appendChild(newEl);
   // const txt = textElem.append(newEl);
   // const txt = textElem
   //   .append('text')
diff --git a/packages/mermaid/src/rendering-util/createText.js b/packages/mermaid/src/rendering-util/createText.js
index 58e0f54a75..47e0776e40 100644
--- a/packages/mermaid/src/rendering-util/createText.js
+++ b/packages/mermaid/src/rendering-util/createText.js
@@ -3,7 +3,7 @@ import { log } from '../logger';
 import { getConfig } from '../config';
 import { evaluate } from '../diagrams/common/common';
 import { decodeEntities } from '../mermaidAPI';
-
+import { markdownToHTML, markdownToLines } from '../rendering-util/handle-markdown-text';
 /**
  * @param dom
  * @param styleFn
@@ -51,51 +51,79 @@ function addHtmlSpan(element, node) {
 }
 
 /**
- * @param {string} text The text to be wrapped
- * @param {number} width The max width of the text
+ * Creates a tspan element with the specified attributes for text positioning.
+ *
+ * @param {object} textElement - The parent text element to append the tspan element.
+ * @param {number} lineIndex - The index of the current line in the structuredText array.
+ * @param {number} lineHeight - The line height value for the text.
+ * @returns {object} The created tspan element.
+ */
+function createTspan(textElement, lineIndex, lineHeight) {
+  return textElement
+    .append('tspan')
+    .attr('x', 0)
+    .attr('y', lineIndex * lineHeight + 'em')
+    .attr('dy', lineHeight + 'em');
+}
+
+/**
+ * Creates a formatted text element by breaking lines and applying styles based on
+ * the given structuredText.
+ *
+ * @param {number} width - The maximum allowed width of the text.
+ * @param {object} g - The parent group element to append the formatted text.
+ * @param {Array} structuredText - The structured text data to format.
  */
-function wrap(text, width) {
-  text.each(function () {
-    var text = select(this),
-      words = text
-        .text()
-        .split(/(\s+|<br\/>)/)
-        .reverse(),
-      word,
-      line = [],
-      lineHeight = 1.1, // ems
-      y = text.attr('y'),
-      dy = parseFloat(text.attr('dy')),
-      tspan = text
-        .text(null)
-        .append('tspan')
-        .attr('x', 0)
-        .attr('y', y)
-        .attr('dy', dy + 'em');
-    for (let j = 0; j < words.length; j++) {
-      word = words[words.length - 1 - j];
-      line.push(word);
-      tspan.text(line.join(' ').trim());
-      if (tspan.node().getComputedTextLength() > width || word === '<br/>') {
-        line.pop();
-        tspan.text(line.join(' ').trim());
-        if (word === '<br/>') {
-          line = [''];
-        } else {
-          line = [word];
-        }
-
-        tspan = text
-          .append('tspan')
-          .attr('x', 0)
-          .attr('y', y)
-          .attr('dy', lineHeight + 'em')
-          .text(word);
+function createFormattedText(width, g, structuredText) {
+  const lineHeight = 1.1;
+
+  const textElement = g.append('text');
+
+  structuredText.forEach((line, lineIndex) => {
+    let tspan = createTspan(textElement, lineIndex, lineHeight);
+
+    let words = [...line].reverse();
+    let currentWord;
+    let wrappedLine = [];
+
+    while (words.length) {
+      currentWord = words.pop();
+      wrappedLine.push(currentWord);
+
+      updateTextContentAndStyles(tspan, wrappedLine);
+
+      if (tspan.node().getComputedTextLength() > width) {
+        wrappedLine.pop();
+        words.push(currentWord);
+
+        updateTextContentAndStyles(tspan, wrappedLine);
+
+        wrappedLine = [];
+        tspan = createTspan(textElement, ++lineIndex, lineHeight);
       }
     }
   });
 }
 
+/**
+ * Updates the text content and styles of the given tspan element based on the
+ * provided wrappedLine data.
+ *
+ * @param {object} tspan - The tspan element to update.
+ * @param {Array} wrappedLine - The line data to apply to the tspan element.
+ */
+function updateTextContentAndStyles(tspan, wrappedLine) {
+  tspan.text('');
+
+  wrappedLine.forEach((word) => {
+    tspan
+      .append('tspan')
+      .attr('font-style', word.type === 'em' ? 'italic' : 'normal')
+      .attr('font-weight', word.type === 'strong' ? 'bold' : 'normal')
+      .text(word.content + ' ');
+  });
+}
+
 /**
  *
  * @param el
@@ -114,15 +142,17 @@ function wrap(text, width) {
 export const createText = (
   el,
   text = '',
-  { style = '', isTitle = false, classes = '', useHtmlLabels = true, isNode = true } = {}
+  { style = '', isTitle = false, classes = '', useHtmlLabels = true, isNode = true, width } = {}
 ) => {
+  log.info('createText', text, style, isTitle, classes, useHtmlLabels, isNode);
   if (useHtmlLabels) {
     // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?
-    text = text.replace(/\\n|\n/g, '<br />');
-    log.info('text' + text);
+    // text = text.replace(/\\n|\n/g, '<br />');
+    const htmlText = markdownToHTML(text);
+    // log.info('markdo  wnToHTML' + text, markdownToHTML(text));
     const node = {
       isNode,
-      label: decodeEntities(text).replace(
+      label: decodeEntities(htmlText).replace(
         /fa[blrs]?:fa-[\w-]+/g,
         (s) => `<i class='${s.replace(':', ' ')}'></i>`
       ),
@@ -131,31 +161,7 @@ export const createText = (
     let vertexNode = addHtmlSpan(el, node);
     return vertexNode;
   } else {
-    const svgText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
-    svgText.setAttribute('style', style.replace('color:', 'fill:'));
-    // el.attr('style', style.replace('color:', 'fill:'));
-    let rows = [];
-    if (typeof text === 'string') {
-      rows = text.split(/\\n|\n|<br\s*\/?>/gi);
-    } else if (Array.isArray(text)) {
-      rows = text;
-    } else {
-      rows = [];
-    }
-
-    for (const row of rows) {
-      const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
-      tspan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve');
-      tspan.setAttribute('dy', '1em');
-      tspan.setAttribute('x', '0');
-      if (isTitle) {
-        tspan.setAttribute('class', 'title-row');
-      } else {
-        tspan.setAttribute('class', 'row');
-      }
-      tspan.textContent = row.trim();
-      svgText.appendChild(tspan);
-    }
-    return svgText;
+    const structuredText = markdownToLines(text);
+    return createFormattedText(width, el, structuredText);
   }
 };
diff --git a/packages/mermaid/src/rendering-util/handle-markdown-text.js b/packages/mermaid/src/rendering-util/handle-markdown-text.js
new file mode 100644
index 0000000000..c4d10d9dc7
--- /dev/null
+++ b/packages/mermaid/src/rendering-util/handle-markdown-text.js
@@ -0,0 +1,78 @@
+import SimpleMarkdown from '@khanacademy/simple-markdown';
+
+/**
+ *
+ * @param markdown
+ */
+export function markdownToLines(markdown) {
+  const mdParse = SimpleMarkdown.defaultBlockParse;
+  const syntaxTree = mdParse(markdown);
+
+  let lines = [[]];
+  let currentLine = 0;
+
+  /**
+   *
+   * @param node
+   * @param parentType
+   */
+  function processNode(node, parentType) {
+    if (node.type === 'text') {
+      const textLines = node.content.split('\n');
+      textLines.forEach((textLine, index) => {
+        if (index !== 0) {
+          currentLine++;
+          lines.push([]);
+        }
+        textLine.split(' ').forEach((word) => {
+          if (word) {
+            lines[currentLine].push({ content: word, type: parentType || 'normal' });
+          }
+        });
+      });
+    } else if (node.type === 'strong' || node.type === 'em') {
+      node.content.forEach((contentNode) => {
+        processNode(contentNode, node.type);
+      });
+    }
+  }
+
+  syntaxTree.forEach((treeNode) => {
+    if (treeNode.type === 'paragraph') {
+      treeNode.content.forEach((contentNode) => {
+        processNode(contentNode);
+      });
+    }
+  });
+
+  return lines;
+}
+
+/**
+ *
+ * @param markdown
+ */
+export function markdownToHTML(markdown) {
+  const mdParse = SimpleMarkdown.defaultBlockParse;
+  const syntaxTree = mdParse(markdown);
+
+  /**
+   *
+   * @param node
+   */
+  function output(node) {
+    if (node.type === 'text') {
+      return node.content.replace(/\n/g, '<br>');
+    } else if (node.type === 'strong') {
+      return `<strong>${node.content.map(output).join('')}</strong>`;
+    } else if (node.type === 'em') {
+      return `<em>${node.content.map(output).join('')}</em>`;
+    } else if (node.type === 'paragraph') {
+      return `<p>${node.content.map(output).join('')}</p>`;
+    } else {
+      return '';
+    }
+  }
+
+  return syntaxTree.map(output).join('');
+}
diff --git a/packages/mermaid/src/rendering-util/handle-markdown-text.spec.js b/packages/mermaid/src/rendering-util/handle-markdown-text.spec.js
new file mode 100644
index 0000000000..db542543a5
--- /dev/null
+++ b/packages/mermaid/src/rendering-util/handle-markdown-text.spec.js
@@ -0,0 +1,181 @@
+// import { test } from 'vitest';
+import { markdownToLines, markdownToHTML } from './handle-markdown-text';
+import { test } from 'vitest';
+
+test('markdownToLines - Basic test', () => {
+  const input = `This is regular text
+Here is a new line
+There is some words **with a bold** section
+Here is a line *with an italic* section`;
+
+  const expectedOutput = [
+    [
+      { content: 'This', type: 'normal' },
+      { content: 'is', type: 'normal' },
+      { content: 'regular', type: 'normal' },
+      { content: 'text', type: 'normal' },
+    ],
+    [
+      { content: 'Here', type: 'normal' },
+      { content: 'is', type: 'normal' },
+      { content: 'a', type: 'normal' },
+      { content: 'new', type: 'normal' },
+      { content: 'line', type: 'normal' },
+    ],
+    [
+      { content: 'There', type: 'normal' },
+      { content: 'is', type: 'normal' },
+      { content: 'some', type: 'normal' },
+      { content: 'words', type: 'normal' },
+      { content: 'with', type: 'strong' },
+      { content: 'a', type: 'strong' },
+      { content: 'bold', type: 'strong' },
+      { content: 'section', type: 'normal' },
+    ],
+    [
+      { content: 'Here', type: 'normal' },
+      { content: 'is', type: 'normal' },
+      { content: 'a', type: 'normal' },
+      { content: 'line', type: 'normal' },
+      { content: 'with', type: 'em' },
+      { content: 'an', type: 'em' },
+      { content: 'italic', type: 'em' },
+      { content: 'section', type: 'normal' },
+    ],
+  ];
+
+  const output = markdownToLines(input);
+  expect(output).toEqual(expectedOutput);
+});
+
+test('markdownToLines - Empty input', () => {
+  const input = '';
+  const expectedOutput = [[]];
+  const output = markdownToLines(input);
+  expect(output).toEqual(expectedOutput);
+});
+
+test('markdownToLines - No formatting', () => {
+  const input = `This is a simple test
+with no formatting`;
+
+  const expectedOutput = [
+    [
+      { content: 'This', type: 'normal' },
+      { content: 'is', type: 'normal' },
+      { content: 'a', type: 'normal' },
+      { content: 'simple', type: 'normal' },
+      { content: 'test', type: 'normal' },
+    ],
+    [
+      { content: 'with', type: 'normal' },
+      { content: 'no', type: 'normal' },
+      { content: 'formatting', type: 'normal' },
+    ],
+  ];
+
+  const output = markdownToLines(input);
+  expect(output).toEqual(expectedOutput);
+});
+
+test('markdownToLines - Only bold formatting', () => {
+  const input = `This is a **bold** test`;
+
+  const expectedOutput = [
+    [
+      { content: 'This', type: 'normal' },
+      { content: 'is', type: 'normal' },
+      { content: 'a', type: 'normal' },
+      { content: 'bold', type: 'strong' },
+      { content: 'test', type: 'normal' },
+    ],
+  ];
+
+  const output = markdownToLines(input);
+  expect(output).toEqual(expectedOutput);
+});
+
+test('markdownToLines - Only italic formatting', () => {
+  const input = `This is an *italic* test`;
+
+  const expectedOutput = [
+    [
+      { content: 'This', type: 'normal' },
+      { content: 'is', type: 'normal' },
+      { content: 'an', type: 'normal' },
+      { content: 'italic', type: 'em' },
+      { content: 'test', type: 'normal' },
+    ],
+  ];
+
+  const output = markdownToLines(input);
+  expect(output).toEqual(expectedOutput);
+});
+
+it('markdownToLines - Mixed formatting', () => {
+  const input = `*Italic* and **bold** formatting`;
+
+  const expectedOutput = [
+    [
+      { content: 'Italic', type: 'em' },
+      { content: 'and', type: 'normal' },
+      { content: 'bold', type: 'strong' },
+      { content: 'formatting', type: 'normal' },
+    ],
+  ];
+
+  const output = markdownToLines(input);
+  expect(output).toEqual(expectedOutput);
+});
+
+test('markdownToHTML - Basic test', () => {
+  const input = `This is regular text
+Here is a new line
+There is some words **with a bold** section
+Here is a line *with an italic* section`;
+
+  const expectedOutput = `<p>This is regular text<br>Here is a new line<br>There is some words <strong>with a bold</strong> section<br>Here is a line <em>with an italic</em> section</p>`;
+
+  const output = markdownToHTML(input);
+  expect(output).toEqual(expectedOutput);
+});
+
+test('markdownToHTML - Empty input', () => {
+  const input = '';
+  const expectedOutput = '';
+  const output = markdownToHTML(input);
+  expect(output).toEqual(expectedOutput);
+});
+
+test('markdownToHTML - No formatting', () => {
+  const input = `This is a simple test
+with no formatting`;
+
+  const expectedOutput = `<p>This is a simple test<br>with no formatting</p>`;
+  const output = markdownToHTML(input);
+  expect(output).toEqual(expectedOutput);
+});
+
+test('markdownToHTML - Only bold formatting', () => {
+  const input = `This is a **bold** test`;
+
+  const expectedOutput = `<p>This is a <strong>bold</strong> test</p>`;
+  const output = markdownToHTML(input);
+  expect(output).toEqual(expectedOutput);
+});
+
+test('markdownToHTML - Only italic formatting', () => {
+  const input = `This is an *italic* test`;
+
+  const expectedOutput = `<p>This is an <em>italic</em> test</p>`;
+  const output = markdownToHTML(input);
+  expect(output).toEqual(expectedOutput);
+});
+
+test('markdownToHTML - Mixed formatting', () => {
+  const input = `*Italic* and **bold** formatting`;
+
+  const expectedOutput = `<p><em>Italic</em> and <strong>bold</strong> formatting</p>`;
+  const output = markdownToHTML(input);
+  expect(output).toEqual(expectedOutput);
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ef69a17060..948a6d5ce4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -178,6 +178,9 @@ importers:
       '@braintree/sanitize-url':
         specifier: ^6.0.0
         version: 6.0.0
+      '@khanacademy/simple-markdown':
+        specifier: ^0.8.6
+        version: 0.8.6_wcqkhtmu7mswc6yz4uyexck3ty
       cytoscape:
         specifier: ^3.23.0
         version: 3.23.0
@@ -322,7 +325,7 @@ importers:
         version: 1.0.0
       vitepress:
         specifier: ^1.0.0-alpha.46
-        version: 1.0.0-alpha.46_tbpndr44ulefs3hehwpi2mkf2y
+        version: 1.0.0-alpha.46_hoyvfk3ab7nzsjkhptt6ai7rzq
       vitepress-plugin-search:
         specifier: ^1.0.4-alpha.19
         version: 1.0.4-alpha.19_g67lr3vgasogkevpbew55lljzq
@@ -1705,10 +1708,10 @@ packages:
     resolution: {integrity: sha512-6SCwI7P8ao+se1TUsdZ7B4XzL+gqeQZnBc+2EONZlcVa0dVrk0NjETxozFKgMv0eEGH8QzP1fkN+A1rH61l4eg==}
     dev: true
 
-  /@docsearch/js/3.3.3_tbpndr44ulefs3hehwpi2mkf2y:
+  /@docsearch/js/3.3.3_hoyvfk3ab7nzsjkhptt6ai7rzq:
     resolution: {integrity: sha512-2xAv2GFuHzzmG0SSZgf8wHX0qZX8n9Y1ZirKUk5Wrdc+vH9CL837x2hZIUdwcPZI9caBA+/CzxsS68O4waYjUQ==}
     dependencies:
-      '@docsearch/react': 3.3.3_tbpndr44ulefs3hehwpi2mkf2y
+      '@docsearch/react': 3.3.3_hoyvfk3ab7nzsjkhptt6ai7rzq
       preact: 10.11.0
     transitivePeerDependencies:
       - '@algolia/client-search'
@@ -1717,7 +1720,7 @@ packages:
       - react-dom
     dev: true
 
-  /@docsearch/react/3.3.3_tbpndr44ulefs3hehwpi2mkf2y:
+  /@docsearch/react/3.3.3_hoyvfk3ab7nzsjkhptt6ai7rzq:
     resolution: {integrity: sha512-pLa0cxnl+G0FuIDuYlW+EBK6Rw2jwLw9B1RHIeS4N4s2VhsfJ/wzeCi3CWcs5yVfxLd5ZK50t//TMA5e79YT7Q==}
     peerDependencies:
       '@types/react': '>= 16.8.0 < 19.0.0'
@@ -1735,6 +1738,8 @@ packages:
       '@algolia/autocomplete-preset-algolia': 1.7.4_qs6lk5nhygj2o3hj4sf6xnr724
       '@docsearch/css': 3.3.3
       algoliasearch: 4.14.2
+      react: 16.14.0
+      react-dom: 16.14.0_react@16.14.0
     transitivePeerDependencies:
       - '@algolia/client-search'
     dev: true
@@ -2464,6 +2469,17 @@ packages:
       '@jridgewell/sourcemap-codec': 1.4.14
     dev: true
 
+  /@khanacademy/simple-markdown/0.8.6_wcqkhtmu7mswc6yz4uyexck3ty:
+    resolution: {integrity: sha512-mAUlR9lchzfqunR89pFvNI51jQKsMpJeWYsYWw0DQcUXczn/T/V6510utgvm7X0N3zN87j1SvuKk8cMbl9IAFw==}
+    peerDependencies:
+      react: 16.14.0
+      react-dom: 16.14.0
+    dependencies:
+      '@types/react': 18.0.28
+      react: 16.14.0
+      react-dom: 16.14.0_react@16.14.0
+    dev: false
+
   /@leichtgewicht/ip-codec/2.0.4:
     resolution: {integrity: sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==}
     dev: true
@@ -3047,6 +3063,10 @@ packages:
     resolution: {integrity: sha512-ri0UmynRRvZiiUJdiz38MmIblKK+oH30MztdBVR95dv/Ubw6neWSb8u1XpRb72L4qsZOhz+L+z9JD40SJmfWow==}
     dev: true
 
+  /@types/prop-types/15.7.5:
+    resolution: {integrity: sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==}
+    dev: false
+
   /@types/qs/6.9.7:
     resolution: {integrity: sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==}
     dev: true
@@ -3055,6 +3075,14 @@ packages:
     resolution: {integrity: sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==}
     dev: true
 
+  /@types/react/18.0.28:
+    resolution: {integrity: sha512-RD0ivG1kEztNBdoAK7lekI9M+azSnitIn85h4iOiaLjaTrMjzslhaqCGaI4IyCJ1RljWiLCEu4jyrLLgqxBTew==}
+    dependencies:
+      '@types/prop-types': 15.7.5
+      '@types/scheduler': 0.16.2
+      csstype: 3.1.1
+    dev: false
+
   /@types/responselike/1.0.0:
     resolution: {integrity: sha512-85Y2BjiufFzaMIlvJDvTTB8Fxl2xfLo4HgmHzVBz08w4wDePCTjYw66PdrolO0kzli3yam/YCgRufyo1DdQVTA==}
     dependencies:
@@ -3072,6 +3100,10 @@ packages:
       rollup: 2.79.1
     dev: true
 
+  /@types/scheduler/0.16.2:
+    resolution: {integrity: sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==}
+    dev: false
+
   /@types/semver/7.3.12:
     resolution: {integrity: sha512-WwA1MW0++RfXmCr12xeYOOC5baSC9mSb0ZqCquFzKhcoF4TvHu5MKOuXsncgZcpVFhB1pXd5hZmM0ryAoCp12A==}
     dev: true
@@ -5248,6 +5280,10 @@ packages:
     resolution: {integrity: sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==}
     dev: true
 
+  /csstype/3.1.1:
+    resolution: {integrity: sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==}
+    dev: false
+
   /cypress-image-snapshot/4.0.1_cypress@12.5.1+jest@29.3.1:
     resolution: {integrity: sha512-PBpnhX/XItlx3/DAk5ozsXQHUi72exybBNH5Mpqj1DVmjq+S5Jd9WE5CRa4q5q0zuMZb2V2VpXHth6MjFpgj9Q==}
     engines: {node: '>=8'}
@@ -8213,7 +8249,6 @@ packages:
 
   /js-tokens/4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
-    dev: true
 
   /js-yaml/3.14.1:
     resolution: {integrity: sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==}
@@ -8621,6 +8656,12 @@ packages:
     resolution: {integrity: sha512-cHlYSUpL2s7Fb3394mYxwTYj8niTaNHUCLr0qdiCXQfSjfuA7CKofpX2uSwEfFDQ0EB7JcnMnm+GjbqqoinYYg==}
     dev: true
 
+  /loose-envify/1.4.0:
+    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
+    hasBin: true
+    dependencies:
+      js-tokens: 4.0.0
+
   /loupe/2.3.6:
     resolution: {integrity: sha512-RaPMZKiMy8/JruncMU5Bt6na1eftNoo++R4Y+N2FrxkDVTrGvcyzFTsaGif4QTeKESheMGegbhw6iUAq+5A8zA==}
     dependencies:
@@ -9432,7 +9473,6 @@ packages:
   /object-assign/4.1.1:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /object-inspect/1.12.2:
     resolution: {integrity: sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==}
@@ -9943,6 +9983,13 @@ packages:
       sisteransi: 1.0.5
     dev: true
 
+  /prop-types/15.8.1:
+    resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
+    dependencies:
+      loose-envify: 1.4.0
+      object-assign: 4.1.1
+      react-is: 16.13.1
+
   /proxy-addr/2.0.7:
     resolution: {integrity: sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==}
     engines: {node: '>= 0.10'}
@@ -10055,6 +10102,20 @@ packages:
       unpipe: 1.0.0
     dev: true
 
+  /react-dom/16.14.0_react@16.14.0:
+    resolution: {integrity: sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==}
+    peerDependencies:
+      react: ^16.14.0
+    dependencies:
+      loose-envify: 1.4.0
+      object-assign: 4.1.1
+      prop-types: 15.8.1
+      react: 16.14.0
+      scheduler: 0.19.1
+
+  /react-is/16.13.1:
+    resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
+
   /react-is/17.0.2:
     resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
     dev: true
@@ -10063,6 +10124,14 @@ packages:
     resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==}
     dev: true
 
+  /react/16.14.0:
+    resolution: {integrity: sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      loose-envify: 1.4.0
+      object-assign: 4.1.1
+      prop-types: 15.8.1
+
   /read-pkg-up/7.0.1:
     resolution: {integrity: sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==}
     engines: {node: '>=8'}
@@ -10471,6 +10540,12 @@ packages:
       xmlchars: 2.2.0
     dev: true
 
+  /scheduler/0.19.1:
+    resolution: {integrity: sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==}
+    dependencies:
+      loose-envify: 1.4.0
+      object-assign: 4.1.1
+
   /schema-utils/3.1.1:
     resolution: {integrity: sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==}
     engines: {node: '>= 10.13.0'}
@@ -11769,16 +11844,16 @@ packages:
       '@types/markdown-it': 12.2.3
       flexsearch: 0.7.31
       markdown-it: 13.0.1
-      vitepress: 1.0.0-alpha.46_tbpndr44ulefs3hehwpi2mkf2y
+      vitepress: 1.0.0-alpha.46_hoyvfk3ab7nzsjkhptt6ai7rzq
       vue: 3.2.45
     dev: true
 
-  /vitepress/1.0.0-alpha.46_tbpndr44ulefs3hehwpi2mkf2y:
+  /vitepress/1.0.0-alpha.46_hoyvfk3ab7nzsjkhptt6ai7rzq:
     resolution: {integrity: sha512-HiKiHzC0iTPsRsKs8XcsMeMzCpcCt5LWcX9mpDr288Ju+nQf1G8A2+Wm44ZkBsVv4EHxFK4ChmWyZrL1OJUXpg==}
     hasBin: true
     dependencies:
       '@docsearch/css': 3.3.3
-      '@docsearch/js': 3.3.3_tbpndr44ulefs3hehwpi2mkf2y
+      '@docsearch/js': 3.3.3_hoyvfk3ab7nzsjkhptt6ai7rzq
       '@vitejs/plugin-vue': 4.0.0_vite@4.1.1+vue@3.2.45
       '@vue/devtools-api': 6.5.0
       '@vueuse/core': 9.12.0_vue@3.2.45

From fd9ad95346094315b25faae5f7a210282959e027 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Wed, 22 Mar 2023 18:41:31 +0100
Subject: [PATCH 42/88] #4220 Handling paragraphs and html labels with classes
 in mindmaps.

---
 cypress/platform/knsv2.html                   | 19 ++++----
 .../mermaid/src/diagrams/mindmap/styles.js    |  7 +++
 .../mermaid/src/diagrams/mindmap/svgDraw.js   | 21 +++------
 .../mermaid/src/rendering-util/createText.js  | 35 +++++++++------
 .../rendering-util/handle-markdown-text.js    | 18 +++++++-
 .../handle-markdown-text.spec.js              | 45 ++++++++++++++++++-
 6 files changed, 106 insertions(+), 39 deletions(-)

diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index 9235290747..4335beaee0 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -66,21 +66,24 @@
 b --> d(The dog in the hog)
 c --> d
     </pre>
-    <pre id="diagram" class="mermaid">
+    <pre id="diagram" class="mermaid2">
 mindmap
-    id1["`Start`"]
+    id1["`**Start2**
+    second line 😎 with long text that is wrapping to the next line`"]
       id2["`Child **with bold** text`"]
       id3["`Children of which some
       is using *italic type of* text`"]
       id4[Child]
+      id5["`Child
+      Row
+      and another
+      `"]
     </pre>
-    <pre id="diagram" class="mermaid2">
+    <pre id="diagram" class="mermaid">
 mindmap
-    id1["`Start
-second line 😎`"]
-      id2[Child]
-      id3[Child]
-      id4[Child]
+    id1["`**Start** with
+
+    a second line 😎`"]
     </pre>
     <pre id="diagram" class="mermaid2">
 %%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
diff --git a/packages/mermaid/src/diagrams/mindmap/styles.js b/packages/mermaid/src/diagrams/mindmap/styles.js
index 986a04514d..863522fdf7 100644
--- a/packages/mermaid/src/diagrams/mindmap/styles.js
+++ b/packages/mermaid/src/diagrams/mindmap/styles.js
@@ -70,5 +70,12 @@ const getStyles = (options) =>
   .edge {
     fill: none;
   }
+  .mindmap-node-label {
+    dy: 1em;
+    alignment-baseline: middle;
+    text-anchor: middle;
+    dominant-baseline: middle;
+    text-align: center;
+  }
 `;
 export default getStyles;
diff --git a/packages/mermaid/src/diagrams/mindmap/svgDraw.js b/packages/mermaid/src/diagrams/mindmap/svgDraw.js
index 5394e004e3..8b58c11a31 100644
--- a/packages/mermaid/src/diagrams/mindmap/svgDraw.js
+++ b/packages/mermaid/src/diagrams/mindmap/svgDraw.js
@@ -204,7 +204,7 @@ const roundedRectBkg = function (elem, node) {
  * @returns {number} The height nodes dom element
  */
 export const drawNode = function (elem, node, fullSection, conf) {
-  const htmlLabels = false;
+  const htmlLabels = conf.htmlLabels;
   const section = fullSection % (MAX_SECTIONS - 1);
   const nodeElem = elem.append('g');
   node.section = section;
@@ -217,19 +217,12 @@ export const drawNode = function (elem, node, fullSection, conf) {
 
   // Create the wrapped text element
   const textElem = nodeElem.append('g');
-  const newEl = createText(textElem, node.descr, { useHtmlLabels: htmlLabels, width: node.width });
-  // const txt = textElem.node().appendChild(newEl);
-  // const txt = textElem.append(newEl);
-  // const txt = textElem
-  //   .append('text')
-  //   .text(node.descr)
-  //   .attr('dy', '1em')
-  //   .attr('alignment-baseline', 'middle')
-  //   .attr('dominant-baseline', 'middle')
-  //   .attr('text-anchor', 'middle')
-  //   .call(wrap, node.width);
-  // const newerEl = textElem.node().appendChild(newEl);
-  // setSize(textElem);
+  const newEl = createText(textElem, node.descr, {
+    useHtmlLabels: htmlLabels,
+    width: node.width,
+    classes: 'mindmap-node-label',
+  });
+
   if (!htmlLabels) {
     textElem
       .attr('dy', '1em')
diff --git a/packages/mermaid/src/rendering-util/createText.js b/packages/mermaid/src/rendering-util/createText.js
index 47e0776e40..5eea6f4c87 100644
--- a/packages/mermaid/src/rendering-util/createText.js
+++ b/packages/mermaid/src/rendering-util/createText.js
@@ -17,19 +17,22 @@ function applyStyle(dom, styleFn) {
 /**
  * @param element
  * @param {any} node
+ * @param width
+ * @param classes
  * @returns {SVGForeignObjectElement} Node
  */
-function addHtmlSpan(element, node) {
+function addHtmlSpan(element, node, width, classes) {
   const fo = element.append('foreignObject');
-  const newEl = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
+  // const newEl = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
+  // const newEl = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
   const div = fo.append('xhtml:div');
+  // const div = body.append('div');
+  // const div = fo.append('div');
 
   const label = node.label;
   const labelClass = node.isNode ? 'nodeLabel' : 'edgeLabel';
   div.html(
-    '<span class="' +
-      labelClass +
-      '" ' +
+    `<span class="${labelClass} ${classes}" ` +
       (node.labelStyle ? 'style="' + node.labelStyle + '"' : '') +
       '>' +
       label +
@@ -37,16 +40,22 @@ function addHtmlSpan(element, node) {
   );
 
   applyStyle(div, node.labelStyle);
-  div.style('display', 'inline-block');
-  const bbox = div.node().getBoundingClientRect();
+  div.style('display', 'table-cell');
+  div.style('white-space', 'nowrap');
+  div.style('max-width', width + 'px');
+  div.attr('xmlns', 'http://www.w3.org/1999/xhtml');
+
+  let bbox = div.node().getBoundingClientRect();
+  if (bbox.width === width) {
+    div.style('display', 'table');
+    div.style('white-space', 'break-spaces');
+    div.style('width', '200px');
+    bbox = div.node().getBoundingClientRect();
+  }
+
   fo.style('width', bbox.width);
   fo.style('height', bbox.height);
 
-  const divNode = div.node();
-  window.divNode = divNode;
-  // Fix for firefox
-  div.style('white-space', 'nowrap');
-  div.attr('xmlns', 'http://www.w3.org/1999/xhtml');
   return fo.node();
 }
 
@@ -158,7 +167,7 @@ export const createText = (
       ),
       labelStyle: style.replace('fill:', 'color:'),
     };
-    let vertexNode = addHtmlSpan(el, node);
+    let vertexNode = addHtmlSpan(el, node, width, classes);
     return vertexNode;
   } else {
     const structuredText = markdownToLines(text);
diff --git a/packages/mermaid/src/rendering-util/handle-markdown-text.js b/packages/mermaid/src/rendering-util/handle-markdown-text.js
index c4d10d9dc7..cd79623fef 100644
--- a/packages/mermaid/src/rendering-util/handle-markdown-text.js
+++ b/packages/mermaid/src/rendering-util/handle-markdown-text.js
@@ -1,12 +1,25 @@
 import SimpleMarkdown from '@khanacademy/simple-markdown';
 
+/**
+ *
+ * @param markdown
+ */
+function preprocessMarkdown(markdown) {
+  // Replace multiple newlines with a single newline
+  const withoutMultipleNewlines = markdown.replace(/\n{2,}/g, '\n');
+  // Remove extra spaces at the beginning of each line
+  const withoutExtraSpaces = withoutMultipleNewlines.replace(/^\s+/gm, '');
+  return withoutExtraSpaces;
+}
+
 /**
  *
  * @param markdown
  */
 export function markdownToLines(markdown) {
+  const preprocessedMarkdown = preprocessMarkdown(markdown);
   const mdParse = SimpleMarkdown.defaultBlockParse;
-  const syntaxTree = mdParse(markdown);
+  const syntaxTree = mdParse(preprocessedMarkdown);
 
   let lines = [[]];
   let currentLine = 0;
@@ -19,6 +32,7 @@ export function markdownToLines(markdown) {
   function processNode(node, parentType) {
     if (node.type === 'text') {
       const textLines = node.content.split('\n');
+
       textLines.forEach((textLine, index) => {
         if (index !== 0) {
           currentLine++;
@@ -62,7 +76,7 @@ export function markdownToHTML(markdown) {
    */
   function output(node) {
     if (node.type === 'text') {
-      return node.content.replace(/\n/g, '<br>');
+      return node.content.replace(/\n/g, '<br/>');
     } else if (node.type === 'strong') {
       return `<strong>${node.content.map(output).join('')}</strong>`;
     } else if (node.type === 'em') {
diff --git a/packages/mermaid/src/rendering-util/handle-markdown-text.spec.js b/packages/mermaid/src/rendering-util/handle-markdown-text.spec.js
index db542543a5..005dd42f66 100644
--- a/packages/mermaid/src/rendering-util/handle-markdown-text.spec.js
+++ b/packages/mermaid/src/rendering-util/handle-markdown-text.spec.js
@@ -95,6 +95,47 @@ test('markdownToLines - Only bold formatting', () => {
   expect(output).toEqual(expectedOutput);
 });
 
+test('markdownToLines - paragraph 1', () => {
+  const input = `**Start** with
+    a second line`;
+
+  const expectedOutput = [
+    [
+      { content: 'Start', type: 'strong' },
+      { content: 'with', type: 'normal' },
+    ],
+    [
+      { content: 'a', type: 'normal' },
+      { content: 'second', type: 'normal' },
+      { content: 'line', type: 'normal' },
+    ],
+  ];
+
+  const output = markdownToLines(input);
+  expect(output).toEqual(expectedOutput);
+});
+
+test('markdownToLines - paragraph', () => {
+  const input = `**Start** with
+
+    a second line`;
+
+  const expectedOutput = [
+    [
+      { content: 'Start', type: 'strong' },
+      { content: 'with', type: 'normal' },
+    ],
+    [
+      { content: 'a', type: 'normal' },
+      { content: 'second', type: 'normal' },
+      { content: 'line', type: 'normal' },
+    ],
+  ];
+
+  const output = markdownToLines(input);
+  expect(output).toEqual(expectedOutput);
+});
+
 test('markdownToLines - Only italic formatting', () => {
   const input = `This is an *italic* test`;
 
@@ -134,7 +175,7 @@ Here is a new line
 There is some words **with a bold** section
 Here is a line *with an italic* section`;
 
-  const expectedOutput = `<p>This is regular text<br>Here is a new line<br>There is some words <strong>with a bold</strong> section<br>Here is a line <em>with an italic</em> section</p>`;
+  const expectedOutput = `<p>This is regular text<br/>Here is a new line<br/>There is some words <strong>with a bold</strong> section<br/>Here is a line <em>with an italic</em> section</p>`;
 
   const output = markdownToHTML(input);
   expect(output).toEqual(expectedOutput);
@@ -151,7 +192,7 @@ test('markdownToHTML - No formatting', () => {
   const input = `This is a simple test
 with no formatting`;
 
-  const expectedOutput = `<p>This is a simple test<br>with no formatting</p>`;
+  const expectedOutput = `<p>This is a simple test<br/>with no formatting</p>`;
   const output = markdownToHTML(input);
   expect(output).toEqual(expectedOutput);
 });

From b3b7108d5903ed879e9300abea20dab116002cf5 Mon Sep 17 00:00:00 2001
From: Jeremy Funk <jeremy@kombo.dev>
Date: Wed, 22 Mar 2023 23:15:54 +0100
Subject: [PATCH 43/88] Implement basic repeating tasks

---
 packages/mermaid/src/config.type.ts           |  1 +
 .../src/diagrams/gantt/ganttRenderer.js       | 78 +++++++++++++++----
 2 files changed, 62 insertions(+), 17 deletions(-)

diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts
index 1573041498..c1f94055b0 100644
--- a/packages/mermaid/src/config.type.ts
+++ b/packages/mermaid/src/config.type.ts
@@ -335,6 +335,7 @@ export interface GanttDiagramConfig extends BaseDiagramConfig {
   axisFormat?: string;
   tickInterval?: string;
   topAxis?: boolean;
+  verticalDisplayMode?: 'default' | 'merged' | 'compact';
 }
 
 export interface SequenceDiagramConfig extends BaseDiagramConfig {
diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
index 7a012beb53..53266a5f44 100644
--- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
+++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
@@ -24,12 +24,31 @@ export const setConf = function () {
   log.debug('Something is calling, setConf, remove the call');
 };
 
+const getMaxIntersections = (tasks, orderOffset) => {
+  let timeline = [...tasks].map(() => 0);
+  let sorted = [...tasks].sort((a, b) => a.startTime - b.startTime || a.order - b.order);
+  let maxIntersections = 0;
+  for (const element of sorted) {
+    for (let j = 0; j < timeline.length; j++) {
+      if (element.startTime >= timeline[j]) {
+        timeline[j] = element.endTime;
+        element.order = j + orderOffset;
+        if (j > maxIntersections) {
+          maxIntersections = j;
+        }
+        break;
+      }
+    }
+  }
+
+  return maxIntersections;
+};
+
 let w;
 export const draw = function (text, id, version, diagObj) {
   const conf = getConfig().gantt;
   // diagObj.db.clear();
   // parser.parse(text);
-
   const securityLevel = getConfig().securityLevel;
   // Handle root and Document for when rendering in sandbox mode
   let sandboxElement;
@@ -56,7 +75,41 @@ export const draw = function (text, id, version, diagObj) {
   const taskArray = diagObj.db.getTasks();
 
   // Set height based on number of tasks
-  const h = taskArray.length * (conf.barHeight + conf.barGap) + 2 * conf.topPadding;
+
+  conf.verticalDisplayMode = 'compact';
+
+  let categories = [];
+
+  for (const element of taskArray) {
+    categories.push(element.type);
+  }
+
+  const catsUnfiltered = categories; // for vert labels
+
+  categories = checkUnique(categories);
+  const categoryHeights = {};
+
+  let h = 2 * conf.topPadding;
+  if (conf.verticalDisplayMode === undefined || conf.verticalDisplayMode === 'default') {
+    h = taskArray.length * (conf.barHeight + conf.barGap);
+  } else if (conf.verticalDisplayMode === 'compact') {
+    const categoryElements = {};
+    for (const element of taskArray) {
+      if (categoryElements[element.section] === undefined) {
+        categoryElements[element.section] = [element];
+      } else {
+        categoryElements[element.section].push(element);
+      }
+    }
+
+    let intersections = 0;
+    for (const category of Object.keys(categoryElements)) {
+      const categoryHeight = getMaxIntersections(categoryElements[category], intersections) + 1;
+      intersections += categoryHeight;
+      h += categoryHeight * (conf.barHeight + conf.barGap);
+      categoryHeights[category] = categoryHeight;
+    }
+  }
 
   // Set viewBox
   elem.setAttribute('viewBox', '0 0 ' + w + ' ' + h);
@@ -74,16 +127,6 @@ export const draw = function (text, id, version, diagObj) {
     ])
     .rangeRound([0, w - conf.leftPadding - conf.rightPadding]);
 
-  let categories = [];
-
-  for (const element of taskArray) {
-    categories.push(element.type);
-  }
-
-  const catsUnfiltered = categories; // for vert labels
-
-  categories = checkUnique(categories);
-
   /**
    * @param a
    * @param b
@@ -158,10 +201,14 @@ export const draw = function (text, id, version, diagObj) {
    */
   function drawRects(theArray, theGap, theTopPad, theSidePad, theBarHeight, theColorScale, w) {
     // Draw background rects covering the entire width of the graph, these form the section rows.
+
+    const uniqueTaskOrderIds = [...new Set(theArray.map((item) => item.order))];
+    const uniqueTasks = uniqueTaskOrderIds.map((id) => theArray.find((item) => item.order === id));
+
     svg
       .append('g')
       .selectAll('rect')
-      .data(theArray)
+      .data(uniqueTasks)
       .enter()
       .append('rect')
       .attr('x', 0)
@@ -582,12 +629,9 @@ export const draw = function (text, id, version, diagObj) {
    * @param theTopPad
    */
   function vertLabels(theGap, theTopPad) {
-    const numOccurances = [];
     let prevGap = 0;
 
-    for (const [i, category] of categories.entries()) {
-      numOccurances[i] = [category, getCount(category, catsUnfiltered)];
-    }
+    const numOccurances = Object.keys(categoryHeights).map((d) => [d, categoryHeights[d]]);
 
     svg
       .append('g') // without doing this, impossible to put grid lines behind text

From 1481a8ccb1305b7ffb6093020682bd54c7d2d9d1 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Thu, 23 Mar 2023 19:04:24 +0000
Subject: [PATCH 44/88] chore(deps): update pnpm to v7.30.1

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

diff --git a/package.json b/package.json
index 2da802bae3..ca642e8900 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "version": "10.0.2",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "type": "module",
-  "packageManager": "pnpm@7.30.0",
+  "packageManager": "pnpm@7.30.1",
   "keywords": [
     "diagram",
     "markdown",

From 3add711c554422d01ba127f51bf20e5041212ff6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michael=20Vorburger=20=E2=9B=91=EF=B8=8F?=
 <mike@vorburger.ch>
Date: Sun, 19 Mar 2023 11:00:49 +0100
Subject: [PATCH 45/88] docs: Remove repeated phrase

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

diff --git a/docs/syntax/timeline.md b/docs/syntax/timeline.md
index 58b12313d4..9ad27558c0 100644
--- a/docs/syntax/timeline.md
+++ b/docs/syntax/timeline.md
@@ -8,7 +8,7 @@
 
 > Timeline: This is an experimental diagram for now. The syntax and properties can change in future releases. The syntax is stable except for the icon integration which is the experimental part.
 
-"A timeline is a type of diagram used to illustrate a chronology of events, dates, or periods of time. It is usually presented graphically to indicate the passing of time, and it is usually organized chronologically. A basic timeline presents a list of events in chronological order, usually using dates as markers. A timeline can also be used to show the relationship between events, such as the relationship between the events of a person's life. A timeline can also be used to show the relationship between events, such as the relationship between the events of a person's life." Wikipedia
+"A timeline is a type of diagram used to illustrate a chronology of events, dates, or periods of time. It is usually presented graphically to indicate the passing of time, and it is usually organized chronologically. A basic timeline presents a list of events in chronological order, usually using dates as markers. A timeline can also be used to show the relationship between events, such as the relationship between the events of a person's life." Wikipedia
 
 ### An example of a timeline.
 
diff --git a/packages/mermaid/src/docs/syntax/timeline.md b/packages/mermaid/src/docs/syntax/timeline.md
index ef48d2b617..5036e5967c 100644
--- a/packages/mermaid/src/docs/syntax/timeline.md
+++ b/packages/mermaid/src/docs/syntax/timeline.md
@@ -2,7 +2,7 @@
 
 > Timeline: This is an experimental diagram for now. The syntax and properties can change in future releases. The syntax is stable except for the icon integration which is the experimental part.
 
-"A timeline is a type of diagram used to illustrate a chronology of events, dates, or periods of time. It is usually presented graphically to indicate the passing of time, and it is usually organized chronologically. A basic timeline presents a list of events in chronological order, usually using dates as markers. A timeline can also be used to show the relationship between events, such as the relationship between the events of a person's life. A timeline can also be used to show the relationship between events, such as the relationship between the events of a person's life." Wikipedia
+"A timeline is a type of diagram used to illustrate a chronology of events, dates, or periods of time. It is usually presented graphically to indicate the passing of time, and it is usually organized chronologically. A basic timeline presents a list of events in chronological order, usually using dates as markers. A timeline can also be used to show the relationship between events, such as the relationship between the events of a person's life." Wikipedia
 
 ### An example of a timeline.
 

From 6cba2ea02d71e090d5f9f2b690a2e8105a5f92b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Juanjo=20Baz=C3=A1n?= <jjbazan@gmail.com>
Date: Thu, 23 Mar 2023 15:06:39 +0100
Subject: [PATCH 46/88] docs: fix typos in timeline.md

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

diff --git a/docs/syntax/timeline.md b/docs/syntax/timeline.md
index 58b12313d4..b1a735d2ed 100644
--- a/docs/syntax/timeline.md
+++ b/docs/syntax/timeline.md
@@ -213,7 +213,7 @@ However, if there is no section defined, then we have two possibilities:
 
 ```
 
-Note that this is no, section defined, and each time period and its corresponding events will have its own color scheme.
+Note that there are no sections defined, and each time period and its corresponding events will have its own color scheme.
 
 2.  Disable the multiColor option using the `disableMultiColor` option. This will make all time periods and events follow the same color scheme.
 
@@ -257,7 +257,7 @@ let us look at same example, where we have disabled the multiColor option.
 
 ### Customizing Color scheme
 
-You can customize the color scheme using the `cScale0` to `cScale11` theme variables. Mermaid allows you to set unique colors for up-to 12, where `cScale0` variable will drive the value of the first section or time-period, `cScale1` will drive the value of the second section and so on.
+You can customize the color scheme using the `cScale0` to `cScale11` theme variables. Mermaid allows you to set unique colors for up-to 12 sections, where `cScale0` variable will drive the value of the first section or time-period, `cScale1` will drive the value of the second section and so on.
 In case you have more than 12 sections, the color scheme will start to repeat.
 
 NOTE: Default values for these theme variables are picked from the selected theme. If you want to override the default values, you can use the `initialize` call to add your custom theme variable values.
diff --git a/packages/mermaid/src/docs/syntax/timeline.md b/packages/mermaid/src/docs/syntax/timeline.md
index ef48d2b617..30cc63045e 100644
--- a/packages/mermaid/src/docs/syntax/timeline.md
+++ b/packages/mermaid/src/docs/syntax/timeline.md
@@ -139,7 +139,7 @@ However, if there is no section defined, then we have two possibilities:
 
 ```
 
-Note that this is no, section defined, and each time period and its corresponding events will have its own color scheme.
+Note that there are no sections defined, and each time period and its corresponding events will have its own color scheme.
 
 2. Disable the multiColor option using the `disableMultiColor` option. This will make all time periods and events follow the same color scheme.
 
@@ -172,7 +172,7 @@ let us look at same example, where we have disabled the multiColor option.
 
 ### Customizing Color scheme
 
-You can customize the color scheme using the `cScale0` to `cScale11` theme variables. Mermaid allows you to set unique colors for up-to 12, where `cScale0` variable will drive the value of the first section or time-period, `cScale1` will drive the value of the second section and so on.
+You can customize the color scheme using the `cScale0` to `cScale11` theme variables. Mermaid allows you to set unique colors for up-to 12 sections, where `cScale0` variable will drive the value of the first section or time-period, `cScale1` will drive the value of the second section and so on.
 In case you have more than 12 sections, the color scheme will start to repeat.
 
 NOTE: Default values for these theme variables are picked from the selected theme. If you want to override the default values, you can use the `initialize` call to add your custom theme variable values.

From a535fe1679944a1cb608b2aa9b909c10fe26af75 Mon Sep 17 00:00:00 2001
From: Jeremy Funk <jeremy@kombo.dev>
Date: Thu, 23 Mar 2023 22:38:04 +0100
Subject: [PATCH 47/88] Bugfixes, refactor, add compact

---
 demos/gantt.html                              | 33 +++++++-
 docs/config/setup/modules/defaultConfig.md    |  2 +-
 packages/mermaid/src/config.type.ts           |  2 +-
 packages/mermaid/src/defaultConfig.ts         | 14 ++++
 .../mermaid/src/diagrams/gantt/ganttDb.js     | 12 +++
 .../src/diagrams/gantt/ganttRenderer.js       | 78 ++++++++-----------
 .../src/diagrams/gantt/parser/gantt.jison     |  9 ++-
 7 files changed, 96 insertions(+), 54 deletions(-)

diff --git a/demos/gantt.html b/demos/gantt.html
index 613dc86940..aa855a6502 100644
--- a/demos/gantt.html
+++ b/demos/gantt.html
@@ -78,7 +78,7 @@ <h1>Gantt chart diagram demos</h1>
     axisFormat %d/%m
     todayMarker off
     section Section1
-    Today: 1, -01:00, 5min
+    Today: 1, 08-08-09-01:00, 5min
     </pre>
     <hr />
 
@@ -89,7 +89,7 @@ <h1>Gantt chart diagram demos</h1>
     axisFormat %d/%m
     todayMarker stroke-width:5px,stroke:#00f,opacity:0.5
     section Section1
-    Today: 1, -01:00, 5min
+    Today: 1, 08-08-09-01:00, 5min
     </pre>
     <hr />
 
@@ -166,6 +166,35 @@ <h1>Gantt chart diagram demos</h1>
     </pre>
     <hr />
 
+    <pre class="mermaid">
+      gantt
+        title GANTT compact
+        dateFormat  HH:mm:ss
+        axisFormat  %Hh%M
+        compact
+
+        section DB Clean
+        Clean: 12:00:00 ,  10m
+        Clean: 12:30:00 ,  12m
+        Clean: 13:00:00 ,  8m
+        Clean: 13:30:00 ,  9m
+        Clean: 14:00:00 ,  13m
+        Clean: 14:30:00 ,  10m
+        Clean: 15:00:00 ,  11m
+
+        section Sessions
+        A: 12:00:00 ,  63m
+        B: 12:30:00 ,  12m
+        C: 13:05:00 ,  12m
+        D: 13:06:00 ,  33m
+        E: 13:15:00 ,  55m
+        F: 13:20:00 ,  12m
+        G: 13:32:00 ,  18m
+        H: 13:50:00 ,  20m
+        I: 14:10:00 ,  10m
+    </pre>
+    <hr />
+
     <script>
       function ganttTestClick(a, b, c) {
         console.log('a:', a);
diff --git a/docs/config/setup/modules/defaultConfig.md b/docs/config/setup/modules/defaultConfig.md
index 3b2e338424..a1dfca3861 100644
--- a/docs/config/setup/modules/defaultConfig.md
+++ b/docs/config/setup/modules/defaultConfig.md
@@ -14,7 +14,7 @@
 
 #### Defined in
 
-[defaultConfig.ts:2093](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L2093)
+[defaultConfig.ts:2107](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L2107)
 
 ---
 
diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts
index c1f94055b0..e4abdf6180 100644
--- a/packages/mermaid/src/config.type.ts
+++ b/packages/mermaid/src/config.type.ts
@@ -335,7 +335,7 @@ export interface GanttDiagramConfig extends BaseDiagramConfig {
   axisFormat?: string;
   tickInterval?: string;
   topAxis?: boolean;
-  verticalDisplayMode?: 'default' | 'merged' | 'compact';
+  compact?: boolean;
 }
 
 export interface SequenceDiagramConfig extends BaseDiagramConfig {
diff --git a/packages/mermaid/src/defaultConfig.ts b/packages/mermaid/src/defaultConfig.ts
index 666efc3649..c429cbe22b 100644
--- a/packages/mermaid/src/defaultConfig.ts
+++ b/packages/mermaid/src/defaultConfig.ts
@@ -685,6 +685,20 @@ const config: Partial<MermaidConfig> = {
      */
     tickInterval: undefined,
 
+    /**
+     * | Parameter | Description               | Type    | Required | Values      |
+     * | --------- | ------------------------- | ------- | -------- | ----------- |
+     * | compact   | displays in compact mode  | boolean | Optional | true, false |
+     *
+     * **Notes:**
+     *
+     * When this flag is set to true, it allows multiple tasks to be displayed on the same
+     * row.
+     *
+     * Default value: false
+     */
+    compact: undefined,
+
     /**
      * | Parameter   | Description | Type    | Required | Values      |
      * | ----------- | ----------- | ------- | -------- | ----------- |
diff --git a/packages/mermaid/src/diagrams/gantt/ganttDb.js b/packages/mermaid/src/diagrams/gantt/ganttDb.js
index 475ee4de4e..d205cfff00 100644
--- a/packages/mermaid/src/diagrams/gantt/ganttDb.js
+++ b/packages/mermaid/src/diagrams/gantt/ganttDb.js
@@ -25,6 +25,7 @@ dayjs.extend(dayjsAdvancedFormat);
 let dateFormat = '';
 let axisFormat = '';
 let tickInterval = undefined;
+let compact = false;
 let todayMarker = '';
 let includes = [];
 let excludes = [];
@@ -56,6 +57,7 @@ export const clear = function () {
   dateFormat = '';
   axisFormat = '';
   tickInterval = undefined;
+  compact = false;
   todayMarker = '';
   includes = [];
   excludes = [];
@@ -82,6 +84,14 @@ export const getTickInterval = function () {
   return tickInterval;
 };
 
+export const enableCompact = function () {
+  compact = true;
+};
+
+export const compactEnabled = function () {
+  return compact;
+};
+
 export const setTodayMarker = function (txt) {
   todayMarker = txt;
 };
@@ -713,6 +723,8 @@ export default {
   getAxisFormat,
   setTickInterval,
   getTickInterval,
+  enableCompact,
+  compactEnabled,
   setTodayMarker,
   getTodayMarker,
   setAccTitle,
diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
index 53266a5f44..563ed66054 100644
--- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
+++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
@@ -24,26 +24,6 @@ export const setConf = function () {
   log.debug('Something is calling, setConf, remove the call');
 };
 
-const getMaxIntersections = (tasks, orderOffset) => {
-  let timeline = [...tasks].map(() => 0);
-  let sorted = [...tasks].sort((a, b) => a.startTime - b.startTime || a.order - b.order);
-  let maxIntersections = 0;
-  for (const element of sorted) {
-    for (let j = 0; j < timeline.length; j++) {
-      if (element.startTime >= timeline[j]) {
-        timeline[j] = element.endTime;
-        element.order = j + orderOffset;
-        if (j > maxIntersections) {
-          maxIntersections = j;
-        }
-        break;
-      }
-    }
-  }
-
-  return maxIntersections;
-};
-
 let w;
 export const draw = function (text, id, version, diagObj) {
   const conf = getConfig().gantt;
@@ -76,23 +56,17 @@ export const draw = function (text, id, version, diagObj) {
 
   // Set height based on number of tasks
 
-  conf.verticalDisplayMode = 'compact';
-
   let categories = [];
 
   for (const element of taskArray) {
     categories.push(element.type);
   }
 
-  const catsUnfiltered = categories; // for vert labels
-
   categories = checkUnique(categories);
   const categoryHeights = {};
 
   let h = 2 * conf.topPadding;
-  if (conf.verticalDisplayMode === undefined || conf.verticalDisplayMode === 'default') {
-    h = taskArray.length * (conf.barHeight + conf.barGap);
-  } else if (conf.verticalDisplayMode === 'compact') {
+  if (diagObj.db.compactEnabled()) {
     const categoryElements = {};
     for (const element of taskArray) {
       if (categoryElements[element.section] === undefined) {
@@ -109,6 +83,11 @@ export const draw = function (text, id, version, diagObj) {
       h += categoryHeight * (conf.barHeight + conf.barGap);
       categoryHeights[category] = categoryHeight;
     }
+  } else {
+    h += taskArray.length * (conf.barHeight + conf.barGap);
+    for (const category of categories) {
+      categoryHeights[category] = taskArray.filter((task) => task.type === category).length;
+    }
   }
 
   // Set viewBox
@@ -669,7 +648,6 @@ export const draw = function (text, id, version, diagObj) {
         }
       })
       .attr('font-size', conf.sectionFontSize)
-      .attr('font-size', conf.sectionFontSize)
       .attr('class', function (d) {
         for (const [i, category] of categories.entries()) {
           if (d[0] === category) {
@@ -728,29 +706,35 @@ export const draw = function (text, id, version, diagObj) {
   }
 
   /**
-   * From this stack exchange question:
-   * http://stackoverflow.com/questions/14227981/count-how-many-strings-in-an-array-have-duplicates-in-the-same-array
+   * For this issue:
+   * https://github.com/mermaid-js/mermaid/issues/1618
    *
-   * @param arr
+   * Finds the number of intersections between tasks that happen at any point in time.
+   * Used to figure out how many rows are needed to display the tasks when the compact
+   * flag is set to true.
+   *
+   * @param tasks
+   * @param orderOffset
    */
-  function getCounts(arr) {
-    let i = arr.length; // const to loop over
-    const obj = {}; // obj to store results
-    while (i) {
-      obj[arr[--i]] = (obj[arr[i]] || 0) + 1; // count occurrences
+  const getMaxIntersections = (tasks, orderOffset) => {
+    let timeline = [...tasks].map(() => -1);
+    let sorted = [...tasks].sort((a, b) => a.startTime - b.startTime || a.order - b.order);
+    let maxIntersections = 0;
+    for (const element of sorted) {
+      for (let j = 0; j < timeline.length; j++) {
+        if (element.startTime >= timeline[j]) {
+          timeline[j] = element.endTime;
+          element.order = j + orderOffset;
+          if (j > maxIntersections) {
+            maxIntersections = j;
+          }
+          break;
+        }
+      }
     }
-    return obj;
-  }
 
-  /**
-   * Get specific from everything
-   *
-   * @param word
-   * @param arr
-   */
-  function getCount(word, arr) {
-    return getCounts(arr)[word] || 0;
-  }
+    return maxIntersections;
+  };
 };
 
 export default {
diff --git a/packages/mermaid/src/diagrams/gantt/parser/gantt.jison b/packages/mermaid/src/diagrams/gantt/parser/gantt.jison
index 2223aa3789..a933c3f8c7 100644
--- a/packages/mermaid/src/diagrams/gantt/parser/gantt.jison
+++ b/packages/mermaid/src/diagrams/gantt/parser/gantt.jison
@@ -79,6 +79,7 @@ that id.
 
 "gantt"                     return 'gantt';
 "dateFormat"\s[^#\n;]+      return 'dateFormat';
+"compact"                   return 'compact';
 "inclusiveEndDates"         return 'inclusiveEndDates';
 "topAxis"                   return 'topAxis';
 "axisFormat"\s[^#\n;]+      return 'axisFormat';
@@ -131,9 +132,11 @@ statement
   | includes {yy.setIncludes($1.substr(9));$$=$1.substr(9);}
   | todayMarker {yy.setTodayMarker($1.substr(12));$$=$1.substr(12);}
   | title {yy.setDiagramTitle($1.substr(6));$$=$1.substr(6);}
-  | acc_title acc_title_value  { $$=$2.trim();yy.setAccTitle($$); }
-  | acc_descr acc_descr_value  { $$=$2.trim();yy.setAccDescription($$); }
-  | acc_descr_multiline_value { $$=$1.trim();yy.setAccDescription($$); }  | section {yy.addSection($1.substr(8));$$=$1.substr(8);}
+  | compact { yy.enableCompact();$$=$1.substr(8); }
+  | 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($$); }
+  | section { yy.addSection($1.substr(8));$$=$1.substr(8); }
   | clickStatement
   | taskTxt taskData {yy.addTask($1,$2);$$='task';}
   | directive

From 45c0c5fee0921cbc727d8d01426251ac575987cc Mon Sep 17 00:00:00 2001
From: Jeremy Funk <jeremy@kombo.dev>
Date: Thu, 23 Mar 2023 22:54:58 +0100
Subject: [PATCH 48/88] Bugfix

---
 demos/gantt.html                              | 32 +++++-----
 .../src/diagrams/gantt/ganttRenderer.js       | 62 +++++++++----------
 2 files changed, 47 insertions(+), 47 deletions(-)

diff --git a/demos/gantt.html b/demos/gantt.html
index aa855a6502..62f30badbf 100644
--- a/demos/gantt.html
+++ b/demos/gantt.html
@@ -174,24 +174,24 @@ <h1>Gantt chart diagram demos</h1>
         compact
 
         section DB Clean
-        Clean: 12:00:00 ,  10m
-        Clean: 12:30:00 ,  12m
-        Clean: 13:00:00 ,  8m
-        Clean: 13:30:00 ,  9m
-        Clean: 14:00:00 ,  13m
-        Clean: 14:30:00 ,  10m
-        Clean: 15:00:00 ,  11m
+        Clean: 12:00:00, 10m
+        Clean: 12:30:00, 12m
+        Clean: 13:00:00, 8m
+        Clean: 13:30:00, 9m
+        Clean: 14:00:00, 13m
+        Clean: 14:30:00, 10m
+        Clean: 15:00:00, 11m
 
         section Sessions
-        A: 12:00:00 ,  63m
-        B: 12:30:00 ,  12m
-        C: 13:05:00 ,  12m
-        D: 13:06:00 ,  33m
-        E: 13:15:00 ,  55m
-        F: 13:20:00 ,  12m
-        G: 13:32:00 ,  18m
-        H: 13:50:00 ,  20m
-        I: 14:10:00 ,  10m
+        A: 12:00:00, 63m
+        B: 12:30:00, 12m
+        C: 13:05:00, 12m
+        D: 13:06:00, 33m
+        E: 13:15:00, 55m
+        F: 13:20:00, 12m
+        G: 13:32:00, 18m
+        H: 13:50:00, 20m
+        I: 14:10:00, 10m
     </pre>
     <hr />
 
diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
index 563ed66054..f4b606d892 100644
--- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
+++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
@@ -24,6 +24,37 @@ export const setConf = function () {
   log.debug('Something is calling, setConf, remove the call');
 };
 
+/**
+ * For this issue:
+ * https://github.com/mermaid-js/mermaid/issues/1618
+ *
+ * Finds the number of intersections between tasks that happen at any point in time.
+ * Used to figure out how many rows are needed to display the tasks when the compact
+ * flag is set to true.
+ *
+ * @param tasks
+ * @param orderOffset
+ */
+const getMaxIntersections = (tasks, orderOffset) => {
+  let timeline = [...tasks].map(() => -1);
+  let sorted = [...tasks].sort((a, b) => a.startTime - b.startTime || a.order - b.order);
+  let maxIntersections = 0;
+  for (const element of sorted) {
+    for (let j = 0; j < timeline.length; j++) {
+      if (element.startTime >= timeline[j]) {
+        timeline[j] = element.endTime;
+        element.order = j + orderOffset;
+        if (j > maxIntersections) {
+          maxIntersections = j;
+        }
+        break;
+      }
+    }
+  }
+
+  return maxIntersections;
+};
+
 let w;
 export const draw = function (text, id, version, diagObj) {
   const conf = getConfig().gantt;
@@ -704,37 +735,6 @@ export const draw = function (text, id, version, diagObj) {
     }
     return result;
   }
-
-  /**
-   * For this issue:
-   * https://github.com/mermaid-js/mermaid/issues/1618
-   *
-   * Finds the number of intersections between tasks that happen at any point in time.
-   * Used to figure out how many rows are needed to display the tasks when the compact
-   * flag is set to true.
-   *
-   * @param tasks
-   * @param orderOffset
-   */
-  const getMaxIntersections = (tasks, orderOffset) => {
-    let timeline = [...tasks].map(() => -1);
-    let sorted = [...tasks].sort((a, b) => a.startTime - b.startTime || a.order - b.order);
-    let maxIntersections = 0;
-    for (const element of sorted) {
-      for (let j = 0; j < timeline.length; j++) {
-        if (element.startTime >= timeline[j]) {
-          timeline[j] = element.endTime;
-          element.order = j + orderOffset;
-          if (j > maxIntersections) {
-            maxIntersections = j;
-          }
-          break;
-        }
-      }
-    }
-
-    return maxIntersections;
-  };
 };
 
 export default {

From f054609e02b6c4f11ed3df1c98930f1eb7147f7f Mon Sep 17 00:00:00 2001
From: Jeremy Funk <jeremy@kombo.dev>
Date: Thu, 23 Mar 2023 22:58:46 +0100
Subject: [PATCH 49/88] Add test, fix typo

---
 packages/mermaid/src/diagrams/gantt/ganttDb.js      | 6 +++---
 packages/mermaid/src/diagrams/gantt/ganttDb.spec.ts | 2 ++
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/mermaid/src/diagrams/gantt/ganttDb.js b/packages/mermaid/src/diagrams/gantt/ganttDb.js
index d205cfff00..807a0ee81b 100644
--- a/packages/mermaid/src/diagrams/gantt/ganttDb.js
+++ b/packages/mermaid/src/diagrams/gantt/ganttDb.js
@@ -153,11 +153,11 @@ export const getSections = function () {
 };
 
 export const getTasks = function () {
-  let allItemsPricessed = compileTasks();
+  let allItemsProcessed = compileTasks();
   const maxDepth = 10;
   let iterationCount = 0;
-  while (!allItemsPricessed && iterationCount < maxDepth) {
-    allItemsPricessed = compileTasks();
+  while (!allItemsProcessed && iterationCount < maxDepth) {
+    allItemsProcessed = compileTasks();
     iterationCount++;
   }
 
diff --git a/packages/mermaid/src/diagrams/gantt/ganttDb.spec.ts b/packages/mermaid/src/diagrams/gantt/ganttDb.spec.ts
index d65f2fdfda..4513aeb110 100644
--- a/packages/mermaid/src/diagrams/gantt/ganttDb.spec.ts
+++ b/packages/mermaid/src/diagrams/gantt/ganttDb.spec.ts
@@ -34,6 +34,7 @@ describe('when using the ganttDb', function () {
     beforeEach(function () {
       ganttDb.setDateFormat('YYYY-MM-DD');
       ganttDb.enableInclusiveEndDates();
+      ganttDb.enableCompact();
       ganttDb.setTodayMarker('off');
       ganttDb.setExcludes('weekends 2019-02-06,friday');
       ganttDb.addSection('weekends skip test');
@@ -53,6 +54,7 @@ describe('when using the ganttDb', function () {
       ${'getExcludes'}          | ${[]}
       ${'getSections'}          | ${[]}
       ${'endDatesAreInclusive'} | ${false}
+      ${'enabledCompact'}       | ${false}
     `)('should clear $fn', ({ fn, expected }) => {
       expect(ganttDb[fn]()).toEqual(expected);
     });

From 8c0550b2b78040ea9c93955115348d5e844b9115 Mon Sep 17 00:00:00 2001
From: Jeremy Funk <jeremy@kombo.dev>
Date: Thu, 23 Mar 2023 23:45:59 +0100
Subject: [PATCH 50/88] Code refactoring, add e2e test

---
 cypress/integration/rendering/gantt.spec.js   | 35 ++++++++++++-
 demos/gantt.html                              | 50 +++++++++----------
 docs/config/setup/modules/mermaidAPI.md       |  3 +-
 packages/mermaid/src/defaultConfig.ts         |  2 +-
 .../mermaid/src/diagrams/gantt/ganttDb.js     | 20 ++++----
 .../src/diagrams/gantt/ganttRenderer.js       |  2 +-
 .../src/diagrams/gantt/parser/gantt.spec.js   |  6 +++
 packages/mermaid/src/mermaidAPI.ts            |  1 +
 8 files changed, 80 insertions(+), 39 deletions(-)

diff --git a/cypress/integration/rendering/gantt.spec.js b/cypress/integration/rendering/gantt.spec.js
index c0156eee36..eebfdc18f8 100644
--- a/cypress/integration/rendering/gantt.spec.js
+++ b/cypress/integration/rendering/gantt.spec.js
@@ -2,7 +2,7 @@ import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
 
 describe('Gantt diagram', () => {
   beforeEach(() => {
-    cy.clock(new Date('1010-10-10').getTime());
+    cy.clock(new Date('2010-10-10').getTime());
   });
   it('should render a gantt chart', () => {
     imgSnapshotTest(
@@ -435,4 +435,37 @@ describe('Gantt diagram', () => {
       { gantt: { topAxis: true } }
     );
   });
+
+  it('should render when compact is true', () => {
+    imgSnapshotTest(
+      `
+      gantt
+        title GANTT compact
+        dateFormat  HH:mm:ss
+        axisFormat  %Hh%M
+        compact
+
+        section DB Clean
+        Clean: 12:00:00, 10m
+        Clean: 12:30:00, 12m
+        Clean: 13:00:00, 8m
+        Clean: 13:30:00, 9m
+        Clean: 14:00:00, 13m
+        Clean: 14:30:00, 10m
+        Clean: 15:00:00, 11m
+
+        section Sessions
+        A: 12:00:00, 63m
+        B: 12:30:00, 12m
+        C: 13:05:00, 12m
+        D: 13:06:00, 33m
+        E: 13:15:00, 55m
+        F: 13:20:00, 12m
+        G: 13:32:00, 18m
+        H: 13:50:00, 20m
+        I: 14:10:00, 10m
+    `,
+      {}
+    );
+  });
 });
diff --git a/demos/gantt.html b/demos/gantt.html
index 62f30badbf..862bd2f668 100644
--- a/demos/gantt.html
+++ b/demos/gantt.html
@@ -167,31 +167,31 @@ <h1>Gantt chart diagram demos</h1>
     <hr />
 
     <pre class="mermaid">
-      gantt
-        title GANTT compact
-        dateFormat  HH:mm:ss
-        axisFormat  %Hh%M
-        compact
-
-        section DB Clean
-        Clean: 12:00:00, 10m
-        Clean: 12:30:00, 12m
-        Clean: 13:00:00, 8m
-        Clean: 13:30:00, 9m
-        Clean: 14:00:00, 13m
-        Clean: 14:30:00, 10m
-        Clean: 15:00:00, 11m
-
-        section Sessions
-        A: 12:00:00, 63m
-        B: 12:30:00, 12m
-        C: 13:05:00, 12m
-        D: 13:06:00, 33m
-        E: 13:15:00, 55m
-        F: 13:20:00, 12m
-        G: 13:32:00, 18m
-        H: 13:50:00, 20m
-        I: 14:10:00, 10m
+    gantt
+    title GANTT compact
+    dateFormat  HH:mm:ss
+    axisFormat  %Hh%M
+    compact
+
+    section DB Clean
+    Clean: 12:00:00, 10m
+    Clean: 12:30:00, 12m
+    Clean: 13:00:00, 8m
+    Clean: 13:30:00, 9m
+    Clean: 14:00:00, 13m
+    Clean: 14:30:00, 10m
+    Clean: 15:00:00, 11m
+
+    section Sessions
+    A: 12:00:00, 63m
+    B: 12:30:00, 12m
+    C: 13:05:00, 12m
+    D: 13:06:00, 33m
+    E: 13:15:00, 55m
+    F: 13:20:00, 12m
+    G: 13:32:00, 18m
+    H: 13:50:00, 20m
+    I: 14:10:00, 10m
     </pre>
     <hr />
 
diff --git a/docs/config/setup/modules/mermaidAPI.md b/docs/config/setup/modules/mermaidAPI.md
index 4b8f57bd73..35097bc637 100644
--- a/docs/config/setup/modules/mermaidAPI.md
+++ b/docs/config/setup/modules/mermaidAPI.md
@@ -88,6 +88,7 @@ const config = {
     numberSectionStyles: 4,
     axisFormat: '%Y-%m-%d',
     topAxis: false,
+    compact: false,
   },
 };
 mermaid.initialize(config);
@@ -95,7 +96,7 @@ mermaid.initialize(config);
 
 #### Defined in
 
-[mermaidAPI.ts:659](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L659)
+[mermaidAPI.ts:660](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L660)
 
 ## Functions
 
diff --git a/packages/mermaid/src/defaultConfig.ts b/packages/mermaid/src/defaultConfig.ts
index c429cbe22b..de4a56f5b7 100644
--- a/packages/mermaid/src/defaultConfig.ts
+++ b/packages/mermaid/src/defaultConfig.ts
@@ -688,7 +688,7 @@ const config: Partial<MermaidConfig> = {
     /**
      * | Parameter | Description               | Type    | Required | Values      |
      * | --------- | ------------------------- | ------- | -------- | ----------- |
-     * | compact   | displays in compact mode  | boolean | Optional | true, false |
+     * | compact   | displays in compact mode  | boolean | 4        | True, False |
      *
      * **Notes:**
      *
diff --git a/packages/mermaid/src/diagrams/gantt/ganttDb.js b/packages/mermaid/src/diagrams/gantt/ganttDb.js
index 807a0ee81b..9bcac2259a 100644
--- a/packages/mermaid/src/diagrams/gantt/ganttDb.js
+++ b/packages/mermaid/src/diagrams/gantt/ganttDb.js
@@ -25,7 +25,6 @@ dayjs.extend(dayjsAdvancedFormat);
 let dateFormat = '';
 let axisFormat = '';
 let tickInterval = undefined;
-let compact = false;
 let todayMarker = '';
 let includes = [];
 let excludes = [];
@@ -37,6 +36,7 @@ const tags = ['active', 'done', 'crit', 'milestone'];
 let funs = [];
 let inclusiveEndDates = false;
 let topAxis = false;
+let compact = false;
 
 // The serial order of the task in the script
 let lastOrder = 0;
@@ -57,12 +57,12 @@ export const clear = function () {
   dateFormat = '';
   axisFormat = '';
   tickInterval = undefined;
-  compact = false;
   todayMarker = '';
   includes = [];
   excludes = [];
   inclusiveEndDates = false;
   topAxis = false;
+  compact = false;
   lastOrder = 0;
   links = {};
   commonClear();
@@ -84,14 +84,6 @@ export const getTickInterval = function () {
   return tickInterval;
 };
 
-export const enableCompact = function () {
-  compact = true;
-};
-
-export const compactEnabled = function () {
-  return compact;
-};
-
 export const setTodayMarker = function (txt) {
   todayMarker = txt;
 };
@@ -120,6 +112,14 @@ export const topAxisEnabled = function () {
   return topAxis;
 };
 
+export const enableCompact = function () {
+  compact = true;
+};
+
+export const compactEnabled = function () {
+  return compact;
+};
+
 export const getDateFormat = function () {
   return dateFormat;
 };
diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
index f4b606d892..c9bf1b362d 100644
--- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
+++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
@@ -97,7 +97,7 @@ export const draw = function (text, id, version, diagObj) {
   const categoryHeights = {};
 
   let h = 2 * conf.topPadding;
-  if (diagObj.db.compactEnabled()) {
+  if (diagObj.db.compactEnabled() || conf.compact) {
     const categoryElements = {};
     for (const element of taskArray) {
       if (categoryElements[element.section] === undefined) {
diff --git a/packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js b/packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js
index 9a1401cada..e2eb7df6af 100644
--- a/packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js
+++ b/packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js
@@ -37,6 +37,12 @@ describe('when parsing a gantt diagram it', function () {
 
     expect(parserFnConstructor(str)).not.toThrow();
   });
+  it('should handle a compact definition', function () {
+    const str =
+      'gantt\ndateFormat yyyy-mm-dd\ntitle Adding gantt diagram functionality to mermaid\ncompact\nexcludes weekdays 2019-02-01';
+
+    expect(parserFnConstructor(str)).not.toThrow();
+  });
   it('should handle a todayMarker definition', function () {
     spyOn(ganttDb, 'setTodayMarker');
     const str =
diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts
index 1b440672a6..6cfebfd90f 100644
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -650,6 +650,7 @@ function addA11yInfo(
  *       numberSectionStyles: 4,
  *       axisFormat: '%Y-%m-%d',
  *       topAxis: false,
+ *       compact: false,
  *     },
  *   };
  *   mermaid.initialize(config);

From 2d815e96264c5a38c5cb3d516154dcda518b5b68 Mon Sep 17 00:00:00 2001
From: Jeremy Funk <jeremy@kombo.dev>
Date: Fri, 24 Mar 2023 00:09:06 +0100
Subject: [PATCH 51/88] Add documentation

---
 docs/syntax/gantt.md                      | 30 ++++++++++++++++++++++-
 packages/mermaid/src/docs/syntax/gantt.md | 18 +++++++++++++-
 2 files changed, 46 insertions(+), 2 deletions(-)

diff --git a/docs/syntax/gantt.md b/docs/syntax/gantt.md
index 6a7af33318..dea2107caa 100644
--- a/docs/syntax/gantt.md
+++ b/docs/syntax/gantt.md
@@ -257,9 +257,37 @@ The pattern is:
 
 More info in: <https://github.com/d3/d3-time#interval_every>
 
+## Output in compact mode
+
+The compact mode allows you to display multiple tasks in the same row. Compact mode can be enabled for a gantt chart by adding the compact flag to the gantt chart.
+
+```mermaid-example
+gantt
+    title A Gantt Diagram
+    dateFormat  YYYY-MM-DD
+    compact
+
+    section Section
+    A task           :a1, 2014-01-01, 30d
+    Another task     :a2, 2014-01-20, 25d
+    Another one      :a3, 2014-02-10, 20d
+```
+
+```mermaid
+gantt
+    title A Gantt Diagram
+    dateFormat  YYYY-MM-DD
+    compact
+
+    section Section
+    A task           :a1, 2014-01-01, 30d
+    Another task     :a2, 2014-01-20, 25d
+    Another one      :a3, 2014-02-10, 20d
+```
+
 ## Comments
 
-Comments can be entered within a gantt chart, which will be ignored by the parser. Comments need to be on their own line and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax
+Comments can be entered within a gantt chart, which will be ignored by the parser. Comments need to be on their own line and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax.
 
 ```mermaid-example
 gantt
diff --git a/packages/mermaid/src/docs/syntax/gantt.md b/packages/mermaid/src/docs/syntax/gantt.md
index 7c446d91fd..178c42cf29 100644
--- a/packages/mermaid/src/docs/syntax/gantt.md
+++ b/packages/mermaid/src/docs/syntax/gantt.md
@@ -189,9 +189,25 @@ The pattern is:
 
 More info in: [https://github.com/d3/d3-time#interval_every](https://github.com/d3/d3-time#interval_every)
 
+## Output in compact mode
+
+The compact mode allows you to display multiple tasks in the same row. Compact mode can be enabled for a gantt chart by adding the compact flag to the gantt chart.
+
+```mmd
+gantt
+    title A Gantt Diagram
+    dateFormat  YYYY-MM-DD
+    compact
+
+    section Section
+    A task           :a1, 2014-01-01, 30d
+    Another task     :a2, 2014-01-20, 25d
+    Another one      :a3, 2014-02-10, 20d
+```
+
 ## Comments
 
-Comments can be entered within a gantt chart, which will be ignored by the parser. Comments need to be on their own line and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax
+Comments can be entered within a gantt chart, which will be ignored by the parser. Comments need to be on their own line and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax.
 
 ```mmd
 gantt

From fd9680a05024115fda56ea369bf50cd37d3d5109 Mon Sep 17 00:00:00 2001
From: Jeremy Funk <jeremy@kombo.dev>
Date: Fri, 24 Mar 2023 00:18:52 +0100
Subject: [PATCH 52/88] Fix bug

---
 cypress/integration/rendering/gantt.spec.js          | 2 +-
 packages/mermaid/src/diagrams/gantt/ganttRenderer.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/cypress/integration/rendering/gantt.spec.js b/cypress/integration/rendering/gantt.spec.js
index eebfdc18f8..6d0c705a9d 100644
--- a/cypress/integration/rendering/gantt.spec.js
+++ b/cypress/integration/rendering/gantt.spec.js
@@ -2,7 +2,7 @@ import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
 
 describe('Gantt diagram', () => {
   beforeEach(() => {
-    cy.clock(new Date('2010-10-10').getTime());
+    cy.clock(new Date('1010-10-10').getTime());
   });
   it('should render a gantt chart', () => {
     imgSnapshotTest(
diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
index c9bf1b362d..a4ceb6a668 100644
--- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
+++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
@@ -36,7 +36,7 @@ export const setConf = function () {
  * @param orderOffset
  */
 const getMaxIntersections = (tasks, orderOffset) => {
-  let timeline = [...tasks].map(() => -1);
+  let timeline = [...tasks].map(() => -Infinity);
   let sorted = [...tasks].sort((a, b) => a.startTime - b.startTime || a.order - b.order);
   let maxIntersections = 0;
   for (const element of sorted) {

From 950f560d819bf1f59482b1676e14954231e29ac2 Mon Sep 17 00:00:00 2001
From: Jeremy Funk <jeremy@kombo.dev>
Date: Fri, 24 Mar 2023 00:20:36 +0100
Subject: [PATCH 53/88] Refactor

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

diff --git a/packages/mermaid/src/defaultConfig.ts b/packages/mermaid/src/defaultConfig.ts
index de4a56f5b7..16afc8bb4b 100644
--- a/packages/mermaid/src/defaultConfig.ts
+++ b/packages/mermaid/src/defaultConfig.ts
@@ -697,7 +697,7 @@ const config: Partial<MermaidConfig> = {
      *
      * Default value: false
      */
-    compact: undefined,
+    compact: false,
 
     /**
      * | Parameter   | Description | Type    | Required | Values      |

From a70b3a881d9ab0311c728c922999e43b1016aa6d Mon Sep 17 00:00:00 2001
From: Jeremy Funk <jeremy@kombo.dev>
Date: Fri, 24 Mar 2023 00:22:52 +0100
Subject: [PATCH 54/88] Add comment

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

diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
index a4ceb6a668..47e0949502 100644
--- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
+++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
@@ -210,11 +210,11 @@ export const draw = function (text, id, version, diagObj) {
    * @param w
    */
   function drawRects(theArray, theGap, theTopPad, theSidePad, theBarHeight, theColorScale, w) {
-    // Draw background rects covering the entire width of the graph, these form the section rows.
-
+    // Get unique task orders. Required to draw the background rects when compact flag is enabled.
     const uniqueTaskOrderIds = [...new Set(theArray.map((item) => item.order))];
     const uniqueTasks = uniqueTaskOrderIds.map((id) => theArray.find((item) => item.order === id));
 
+    // Draw background rects covering the entire width of the graph, these form the section rows.
     svg
       .append('g')
       .selectAll('rect')

From 2f8c571a5cf3919143d89a3e4afadaa9284c2a67 Mon Sep 17 00:00:00 2001
From: Jeremy Funk <jeremy@kombo.dev>
Date: Fri, 24 Mar 2023 00:37:25 +0100
Subject: [PATCH 55/88] Fix unit test

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

diff --git a/packages/mermaid/src/diagrams/gantt/ganttDb.spec.ts b/packages/mermaid/src/diagrams/gantt/ganttDb.spec.ts
index 4513aeb110..98baa9fc76 100644
--- a/packages/mermaid/src/diagrams/gantt/ganttDb.spec.ts
+++ b/packages/mermaid/src/diagrams/gantt/ganttDb.spec.ts
@@ -54,7 +54,7 @@ describe('when using the ganttDb', function () {
       ${'getExcludes'}          | ${[]}
       ${'getSections'}          | ${[]}
       ${'endDatesAreInclusive'} | ${false}
-      ${'enabledCompact'}       | ${false}
+      ${'compactEnabled'}       | ${false}
     `)('should clear $fn', ({ fn, expected }) => {
       expect(ganttDb[fn]()).toEqual(expected);
     });

From ba1c5dc6c779fdd17913828290cb1074cf4d5075 Mon Sep 17 00:00:00 2001
From: Jeremy Funk <jeremy@kombo.dev>
Date: Sat, 25 Mar 2023 01:56:50 +0100
Subject: [PATCH 56/88] Change to using display mode yaml

---
 cypress/integration/rendering/gantt.spec.js   |  4 ++-
 demos/gantt.html                              |  4 ++-
 docs/config/setup/modules/defaultConfig.md    |  2 +-
 docs/config/setup/modules/mermaidAPI.md       |  2 +-
 docs/syntax/gantt.md                          | 10 ++++---
 packages/mermaid/src/commonDb.ts              |  5 ++--
 packages/mermaid/src/config.type.ts           |  2 +-
 packages/mermaid/src/defaultConfig.ts         | 26 ++++++++-----------
 .../mermaid/src/diagram-api/frontmatter.ts    |  6 +++++
 packages/mermaid/src/diagram-api/types.ts     |  1 +
 .../mermaid/src/diagrams/gantt/ganttDb.js     | 16 ++++++------
 .../src/diagrams/gantt/ganttDb.spec.ts        |  4 +--
 .../src/diagrams/gantt/ganttRenderer.js       |  9 ++++---
 .../src/diagrams/gantt/parser/gantt.jison     |  2 --
 .../src/diagrams/gantt/parser/gantt.spec.js   |  6 -----
 packages/mermaid/src/docs/syntax/gantt.md     |  6 +++--
 packages/mermaid/src/mermaidAPI.ts            |  2 +-
 17 files changed, 57 insertions(+), 50 deletions(-)

diff --git a/cypress/integration/rendering/gantt.spec.js b/cypress/integration/rendering/gantt.spec.js
index 6d0c705a9d..c302b51a64 100644
--- a/cypress/integration/rendering/gantt.spec.js
+++ b/cypress/integration/rendering/gantt.spec.js
@@ -439,11 +439,13 @@ describe('Gantt diagram', () => {
   it('should render when compact is true', () => {
     imgSnapshotTest(
       `
+      ---
+      displayMode: compact
+      ---
       gantt
         title GANTT compact
         dateFormat  HH:mm:ss
         axisFormat  %Hh%M
-        compact
 
         section DB Clean
         Clean: 12:00:00, 10m
diff --git a/demos/gantt.html b/demos/gantt.html
index 862bd2f668..88f52ef5c9 100644
--- a/demos/gantt.html
+++ b/demos/gantt.html
@@ -167,11 +167,13 @@ <h1>Gantt chart diagram demos</h1>
     <hr />
 
     <pre class="mermaid">
+    ---
+      displayMode: compact
+    ---
     gantt
     title GANTT compact
     dateFormat  HH:mm:ss
     axisFormat  %Hh%M
-    compact
 
     section DB Clean
     Clean: 12:00:00, 10m
diff --git a/docs/config/setup/modules/defaultConfig.md b/docs/config/setup/modules/defaultConfig.md
index a1dfca3861..9cfb563e8c 100644
--- a/docs/config/setup/modules/defaultConfig.md
+++ b/docs/config/setup/modules/defaultConfig.md
@@ -14,7 +14,7 @@
 
 #### Defined in
 
-[defaultConfig.ts:2107](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L2107)
+[defaultConfig.ts:2103](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L2103)
 
 ---
 
diff --git a/docs/config/setup/modules/mermaidAPI.md b/docs/config/setup/modules/mermaidAPI.md
index 35097bc637..9bc6d3056a 100644
--- a/docs/config/setup/modules/mermaidAPI.md
+++ b/docs/config/setup/modules/mermaidAPI.md
@@ -88,7 +88,7 @@ const config = {
     numberSectionStyles: 4,
     axisFormat: '%Y-%m-%d',
     topAxis: false,
-    compact: false,
+    displayMode: '',
   },
 };
 mermaid.initialize(config);
diff --git a/docs/syntax/gantt.md b/docs/syntax/gantt.md
index dea2107caa..1b12063d73 100644
--- a/docs/syntax/gantt.md
+++ b/docs/syntax/gantt.md
@@ -259,13 +259,15 @@ More info in: <https://github.com/d3/d3-time#interval_every>
 
 ## Output in compact mode
 
-The compact mode allows you to display multiple tasks in the same row. Compact mode can be enabled for a gantt chart by adding the compact flag to the gantt chart.
+The compact mode allows you to display multiple tasks in the same row. Compact mode can be enabled for a gantt chart by setting the display mode of the graph via preceeding YAML settings.
 
 ```mermaid-example
+---
+displayMode: compact
+---
 gantt
     title A Gantt Diagram
     dateFormat  YYYY-MM-DD
-    compact
 
     section Section
     A task           :a1, 2014-01-01, 30d
@@ -274,10 +276,12 @@ gantt
 ```
 
 ```mermaid
+---
+displayMode: compact
+---
 gantt
     title A Gantt Diagram
     dateFormat  YYYY-MM-DD
-    compact
 
     section Section
     A task           :a1, 2014-01-01, 30d
diff --git a/packages/mermaid/src/commonDb.ts b/packages/mermaid/src/commonDb.ts
index 42ffde0044..a9ad0f54bd 100644
--- a/packages/mermaid/src/commonDb.ts
+++ b/packages/mermaid/src/commonDb.ts
@@ -3,6 +3,7 @@ import { getConfig } from './config';
 let title = '';
 let diagramTitle = '';
 let description = '';
+
 const sanitizeText = (txt: string): string => _sanitizeText(txt, getConfig());
 
 export const clear = function (): void {
@@ -36,10 +37,10 @@ export const getDiagramTitle = function (): string {
 };
 
 export default {
-  setAccTitle,
   getAccTitle,
+  setAccTitle,
+  getDiagramTitle,
   setDiagramTitle,
-  getDiagramTitle: getDiagramTitle,
   getAccDescription,
   setAccDescription,
   clear,
diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts
index e4abdf6180..68441732b1 100644
--- a/packages/mermaid/src/config.type.ts
+++ b/packages/mermaid/src/config.type.ts
@@ -335,7 +335,7 @@ export interface GanttDiagramConfig extends BaseDiagramConfig {
   axisFormat?: string;
   tickInterval?: string;
   topAxis?: boolean;
-  compact?: boolean;
+  displayMode?: string;
 }
 
 export interface SequenceDiagramConfig extends BaseDiagramConfig {
diff --git a/packages/mermaid/src/defaultConfig.ts b/packages/mermaid/src/defaultConfig.ts
index 16afc8bb4b..6a13e70b35 100644
--- a/packages/mermaid/src/defaultConfig.ts
+++ b/packages/mermaid/src/defaultConfig.ts
@@ -659,6 +659,17 @@ const config: Partial<MermaidConfig> = {
      */
     numberSectionStyles: 4,
 
+    /**
+     * | Parameter   | Description               | Type   | Required | Values    |
+     * | ----------- | ------------------------- | ------ | -------- | --------- |
+     * | displayMode | Controls the display mode | string | 4        | 'compact' |
+     *
+     * **Notes**:
+     *
+     * - **compact**: Enables displaying multiple tasks on the same row.
+     */
+    displayMode: '',
+
     /**
      * | Parameter  | Description                  | Type | Required | Values           |
      * | ---------- | ---------------------------- | ---- | -------- | ---------------- |
@@ -684,21 +695,6 @@ const config: Partial<MermaidConfig> = {
      * Default value: undefined
      */
     tickInterval: undefined,
-
-    /**
-     * | Parameter | Description               | Type    | Required | Values      |
-     * | --------- | ------------------------- | ------- | -------- | ----------- |
-     * | compact   | displays in compact mode  | boolean | 4        | True, False |
-     *
-     * **Notes:**
-     *
-     * When this flag is set to true, it allows multiple tasks to be displayed on the same
-     * row.
-     *
-     * Default value: false
-     */
-    compact: false,
-
     /**
      * | Parameter   | Description | Type    | Required | Values      |
      * | ----------- | ----------- | ------- | -------- | ----------- |
diff --git a/packages/mermaid/src/diagram-api/frontmatter.ts b/packages/mermaid/src/diagram-api/frontmatter.ts
index d6811388c1..a9c4995e63 100644
--- a/packages/mermaid/src/diagram-api/frontmatter.ts
+++ b/packages/mermaid/src/diagram-api/frontmatter.ts
@@ -11,6 +11,8 @@ export const frontMatterRegex = /^-{3}\s*[\n\r](.*?)[\n\r]-{3}\s*[\n\r]+/s;
 
 type FrontMatterMetadata = {
   title?: string;
+  // Allows custom display modes. Currently used for compact mode in gantt charts.
+  displayMode?: string;
 };
 
 /**
@@ -33,6 +35,10 @@ export function extractFrontMatter(text: string, db: DiagramDb): string {
       db.setDiagramTitle?.(parsed.title);
     }
 
+    if (parsed?.displayMode) {
+      db.setDisplayMode?.(parsed.displayMode);
+    }
+
     return text.slice(matches[0].length);
   } else {
     return text;
diff --git a/packages/mermaid/src/diagram-api/types.ts b/packages/mermaid/src/diagram-api/types.ts
index 0811365638..8c5d14eb83 100644
--- a/packages/mermaid/src/diagram-api/types.ts
+++ b/packages/mermaid/src/diagram-api/types.ts
@@ -16,6 +16,7 @@ export interface InjectUtils {
 export interface DiagramDb {
   clear?: () => void;
   setDiagramTitle?: (title: string) => void;
+  setDisplayMode?: (title: string) => void;
   getAccTitle?: () => string;
   getAccDescription?: () => string;
   bindFunctions?: (element: Element) => void;
diff --git a/packages/mermaid/src/diagrams/gantt/ganttDb.js b/packages/mermaid/src/diagrams/gantt/ganttDb.js
index 9bcac2259a..fa872027dc 100644
--- a/packages/mermaid/src/diagrams/gantt/ganttDb.js
+++ b/packages/mermaid/src/diagrams/gantt/ganttDb.js
@@ -32,11 +32,11 @@ let links = {};
 let sections = [];
 let tasks = [];
 let currentSection = '';
+let displayMode = '';
 const tags = ['active', 'done', 'crit', 'milestone'];
 let funs = [];
 let inclusiveEndDates = false;
 let topAxis = false;
-let compact = false;
 
 // The serial order of the task in the script
 let lastOrder = 0;
@@ -56,13 +56,13 @@ export const clear = function () {
   rawTasks = [];
   dateFormat = '';
   axisFormat = '';
+  displayMode = '';
   tickInterval = undefined;
   todayMarker = '';
   includes = [];
   excludes = [];
   inclusiveEndDates = false;
   topAxis = false;
-  compact = false;
   lastOrder = 0;
   links = {};
   commonClear();
@@ -112,12 +112,12 @@ export const topAxisEnabled = function () {
   return topAxis;
 };
 
-export const enableCompact = function () {
-  compact = true;
+export const setDisplayMode = function (txt) {
+  displayMode = txt;
 };
 
-export const compactEnabled = function () {
-  return compact;
+export const getDisplayMode = function () {
+  return displayMode;
 };
 
 export const getDateFormat = function () {
@@ -723,14 +723,14 @@ export default {
   getAxisFormat,
   setTickInterval,
   getTickInterval,
-  enableCompact,
-  compactEnabled,
   setTodayMarker,
   getTodayMarker,
   setAccTitle,
   getAccTitle,
   setDiagramTitle,
   getDiagramTitle,
+  setDisplayMode,
+  getDisplayMode,
   setAccDescription,
   getAccDescription,
   addSection,
diff --git a/packages/mermaid/src/diagrams/gantt/ganttDb.spec.ts b/packages/mermaid/src/diagrams/gantt/ganttDb.spec.ts
index 98baa9fc76..812cfd9b83 100644
--- a/packages/mermaid/src/diagrams/gantt/ganttDb.spec.ts
+++ b/packages/mermaid/src/diagrams/gantt/ganttDb.spec.ts
@@ -34,7 +34,7 @@ describe('when using the ganttDb', function () {
     beforeEach(function () {
       ganttDb.setDateFormat('YYYY-MM-DD');
       ganttDb.enableInclusiveEndDates();
-      ganttDb.enableCompact();
+      ganttDb.setDisplayMode('compact');
       ganttDb.setTodayMarker('off');
       ganttDb.setExcludes('weekends 2019-02-06,friday');
       ganttDb.addSection('weekends skip test');
@@ -54,7 +54,7 @@ describe('when using the ganttDb', function () {
       ${'getExcludes'}          | ${[]}
       ${'getSections'}          | ${[]}
       ${'endDatesAreInclusive'} | ${false}
-      ${'compactEnabled'}       | ${false}
+      ${'getDisplayMode'}       | ${''}
     `)('should clear $fn', ({ fn, expected }) => {
       expect(ganttDb[fn]()).toEqual(expected);
     });
diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
index 47e0949502..78bf2fcea7 100644
--- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
+++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
@@ -29,8 +29,8 @@ export const setConf = function () {
  * https://github.com/mermaid-js/mermaid/issues/1618
  *
  * Finds the number of intersections between tasks that happen at any point in time.
- * Used to figure out how many rows are needed to display the tasks when the compact
- * flag is set to true.
+ * Used to figure out how many rows are needed to display the tasks when the display
+ * mode is set to 'compact'.
  *
  * @param tasks
  * @param orderOffset
@@ -58,6 +58,7 @@ const getMaxIntersections = (tasks, orderOffset) => {
 let w;
 export const draw = function (text, id, version, diagObj) {
   const conf = getConfig().gantt;
+
   // diagObj.db.clear();
   // parser.parse(text);
   const securityLevel = getConfig().securityLevel;
@@ -97,7 +98,7 @@ export const draw = function (text, id, version, diagObj) {
   const categoryHeights = {};
 
   let h = 2 * conf.topPadding;
-  if (diagObj.db.compactEnabled() || conf.compact) {
+  if (diagObj.db.getDisplayMode() === 'compact' || conf.displayMode === 'compact') {
     const categoryElements = {};
     for (const element of taskArray) {
       if (categoryElements[element.section] === undefined) {
@@ -210,7 +211,7 @@ export const draw = function (text, id, version, diagObj) {
    * @param w
    */
   function drawRects(theArray, theGap, theTopPad, theSidePad, theBarHeight, theColorScale, w) {
-    // Get unique task orders. Required to draw the background rects when compact flag is enabled.
+    // Get unique task orders. Required to draw the background rects when display mode is compact.
     const uniqueTaskOrderIds = [...new Set(theArray.map((item) => item.order))];
     const uniqueTasks = uniqueTaskOrderIds.map((id) => theArray.find((item) => item.order === id));
 
diff --git a/packages/mermaid/src/diagrams/gantt/parser/gantt.jison b/packages/mermaid/src/diagrams/gantt/parser/gantt.jison
index a933c3f8c7..0eb45ec416 100644
--- a/packages/mermaid/src/diagrams/gantt/parser/gantt.jison
+++ b/packages/mermaid/src/diagrams/gantt/parser/gantt.jison
@@ -79,7 +79,6 @@ that id.
 
 "gantt"                     return 'gantt';
 "dateFormat"\s[^#\n;]+      return 'dateFormat';
-"compact"                   return 'compact';
 "inclusiveEndDates"         return 'inclusiveEndDates';
 "topAxis"                   return 'topAxis';
 "axisFormat"\s[^#\n;]+      return 'axisFormat';
@@ -132,7 +131,6 @@ statement
   | includes {yy.setIncludes($1.substr(9));$$=$1.substr(9);}
   | todayMarker {yy.setTodayMarker($1.substr(12));$$=$1.substr(12);}
   | title {yy.setDiagramTitle($1.substr(6));$$=$1.substr(6);}
-  | compact { yy.enableCompact();$$=$1.substr(8); }
   | 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($$); }
diff --git a/packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js b/packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js
index e2eb7df6af..9a1401cada 100644
--- a/packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js
+++ b/packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js
@@ -37,12 +37,6 @@ describe('when parsing a gantt diagram it', function () {
 
     expect(parserFnConstructor(str)).not.toThrow();
   });
-  it('should handle a compact definition', function () {
-    const str =
-      'gantt\ndateFormat yyyy-mm-dd\ntitle Adding gantt diagram functionality to mermaid\ncompact\nexcludes weekdays 2019-02-01';
-
-    expect(parserFnConstructor(str)).not.toThrow();
-  });
   it('should handle a todayMarker definition', function () {
     spyOn(ganttDb, 'setTodayMarker');
     const str =
diff --git a/packages/mermaid/src/docs/syntax/gantt.md b/packages/mermaid/src/docs/syntax/gantt.md
index 178c42cf29..eaa07c707b 100644
--- a/packages/mermaid/src/docs/syntax/gantt.md
+++ b/packages/mermaid/src/docs/syntax/gantt.md
@@ -191,13 +191,15 @@ More info in: [https://github.com/d3/d3-time#interval_every](https://github.com/
 
 ## Output in compact mode
 
-The compact mode allows you to display multiple tasks in the same row. Compact mode can be enabled for a gantt chart by adding the compact flag to the gantt chart.
+The compact mode allows you to display multiple tasks in the same row. Compact mode can be enabled for a gantt chart by setting the display mode of the graph via preceeding YAML settings.
 
 ```mmd
+---
+displayMode: compact
+---
 gantt
     title A Gantt Diagram
     dateFormat  YYYY-MM-DD
-    compact
 
     section Section
     A task           :a1, 2014-01-01, 30d
diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts
index 6cfebfd90f..a2ce827dbc 100644
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -650,7 +650,7 @@ function addA11yInfo(
  *       numberSectionStyles: 4,
  *       axisFormat: '%Y-%m-%d',
  *       topAxis: false,
- *       compact: false,
+ *       displayMode: '',
  *     },
  *   };
  *   mermaid.initialize(config);

From 0475591fb6643f8310e0c256ad19c1407a09aa7e Mon Sep 17 00:00:00 2001
From: Kshitij <kshitijsaksena@gmail.com>
Date: Sat, 25 Mar 2023 15:46:52 +0530
Subject: [PATCH 57/88] Updated render to remove comments from text

---
 docs/config/setup/modules/mermaidAPI.md | 2 +-
 packages/mermaid/src/mermaidAPI.ts      | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/docs/config/setup/modules/mermaidAPI.md b/docs/config/setup/modules/mermaidAPI.md
index 4b8f57bd73..e942a8d6df 100644
--- a/docs/config/setup/modules/mermaidAPI.md
+++ b/docs/config/setup/modules/mermaidAPI.md
@@ -95,7 +95,7 @@ mermaid.initialize(config);
 
 #### Defined in
 
-[mermaidAPI.ts:659](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L659)
+[mermaidAPI.ts:661](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L661)
 
 ## Functions
 
diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts
index 1b440672a6..da706d502d 100644
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -399,6 +399,8 @@ const render = async function (
   // clean up text CRLFs
   text = text.replace(/\r\n?/g, '\n'); // parser problems on CRLF ignore all CR and leave LF;;
 
+  text = text.replace(/\s*%%.*\n/gm, '\n'); // remove comments from text to avoid issues with parser
+
   const idSelector = '#' + id;
   const iFrameID = 'i' + id;
   const iFrameID_selector = '#' + iFrameID;

From e3760d1709f78b22609a8489cf2ebb069bce55e8 Mon Sep 17 00:00:00 2001
From: Kshitij <kshitijsaksena@gmail.com>
Date: Sat, 25 Mar 2023 20:13:30 +0530
Subject: [PATCH 58/88] Fixed regex bug

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

diff --git a/docs/config/setup/modules/mermaidAPI.md b/docs/config/setup/modules/mermaidAPI.md
index e942a8d6df..b94fc8b946 100644
--- a/docs/config/setup/modules/mermaidAPI.md
+++ b/docs/config/setup/modules/mermaidAPI.md
@@ -95,7 +95,7 @@ mermaid.initialize(config);
 
 #### Defined in
 
-[mermaidAPI.ts:661](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L661)
+[mermaidAPI.ts:662](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L662)
 
 ## Functions
 
diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts
index da706d502d..dba6294775 100644
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -399,7 +399,8 @@ const render = async function (
   // clean up text CRLFs
   text = text.replace(/\r\n?/g, '\n'); // parser problems on CRLF ignore all CR and leave LF;;
 
-  text = text.replace(/\s*%%.*\n/gm, '\n'); // remove comments from text to avoid issues with parser
+  // eslint-disable-next-line unicorn/better-regex
+  text = text.replace(/\s*%%[^{\ninit].*\n/gm, '\n'); // remove comments from text to avoid issues with parser
 
   const idSelector = '#' + id;
   const iFrameID = 'i' + id;

From 022e6670d0d827006d5707920d85cd8bf9f12dd8 Mon Sep 17 00:00:00 2001
From: PIRADATA <16529503+piradata@users.noreply.github.com>
Date: Fri, 24 Mar 2023 17:45:27 -0300
Subject: [PATCH 59/88] docs: fix hexagon node flowchart code example

Use `mermaid-example` instead of `mmd` so that Mermaid formats
the code properly.
---
 docs/syntax/flowchart.md                      | 2 --
 packages/mermaid/src/docs/syntax/flowchart.md | 4 +---
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md
index c2c04f7500..c79f12b238 100644
--- a/docs/syntax/flowchart.md
+++ b/docs/syntax/flowchart.md
@@ -183,8 +183,6 @@ flowchart LR
 
 ### A hexagon node
 
-Code:
-
 ```mermaid-example
 flowchart LR
     id1{{This is the text in the box}}
diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md
index 42c7cbf5b1..8e73f597b2 100644
--- a/packages/mermaid/src/docs/syntax/flowchart.md
+++ b/packages/mermaid/src/docs/syntax/flowchart.md
@@ -122,9 +122,7 @@ flowchart LR
 
 ### A hexagon node
 
-Code:
-
-```mmd
+```mermaid-example
 flowchart LR
     id1{{This is the text in the box}}
 ```

From 093f1697e1376ee7827180df720a55d832952a4f Mon Sep 17 00:00:00 2001
From: Alois Klink <alois@aloisklink.com>
Date: Sat, 25 Mar 2023 21:16:45 +0000
Subject: [PATCH 60/88] build: remove inline-specifiers pnpm option

Remove the `use-inline-specifiers-lockfile-format=true` pnpm option
from our `.npmrc` file.

This was added in
[PNPM version v7.7.0](https://github.com/pnpm/pnpm/releases/tag/v7.7.0)
and should make our `pnpm-lock.yaml` file much nicer,
but unfortunately, renovate doesn't seem to support it (unsure why?).

This means that whenever we do a `pnpm install` locally, the lock-file
gets changed, and whenever renovate makes a PR, it changes the
lock-file back. This causes a lot of unnecassary merge conflicts.
---
 .npmrc | 1 -
 1 file changed, 1 deletion(-)

diff --git a/.npmrc b/.npmrc
index 2896843026..4c2f52b3be 100644
--- a/.npmrc
+++ b/.npmrc
@@ -1,3 +1,2 @@
 auto-install-peers=true
 strict-peer-dependencies=false
-use-inline-specifiers-lockfile-format=true

From fbeb0163988bc6b7732f9a99b5406371a5b263b0 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Mon, 27 Mar 2023 14:43:59 +0200
Subject: [PATCH 61/88] test commit

---
 cypress/platform/knsv2.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index 4335beaee0..61ff556e82 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -56,6 +56,7 @@
   <body>
     <pre id="diagram" class="mermaid2">
 %%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
+%%
 graph BT
 a{The cat in the hat} -- 1o --> b
 a -- 2o --> c

From 63160293c72bc7ca9cce8af4bf0add625ddf049b Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Tue, 28 Mar 2023 15:28:52 +0200
Subject: [PATCH 62/88] Updating support for the new type of strings for
 flowcharts-v2

---
 cypress/platform/knsv2.html                   | 53 +++++++++++++--
 packages/mermaid/src/Diagram.ts               | 10 +++
 .../mermaid/src/dagre-wrapper/clusters.js     | 17 +++--
 packages/mermaid/src/dagre-wrapper/edges.js   | 10 ++-
 packages/mermaid/src/dagre-wrapper/nodes.js   | 11 ++--
 .../mermaid/src/dagre-wrapper/shapes/util.js  | 22 +++++--
 .../mermaid/src/diagrams/flowchart/flowDb.js  | 42 +++++++-----
 .../src/diagrams/flowchart/flowRenderer-v2.js | 66 +++++++++++--------
 .../src/diagrams/flowchart/parser/flow.jison  | 12 +++-
 .../mermaid/src/diagrams/flowchart/styles.ts  |  9 +++
 .../mermaid/src/rendering-util/createText.js  | 52 ++++++++++++---
 .../handle-markdown-text.spec.js              | 31 +++++++++
 12 files changed, 258 insertions(+), 77 deletions(-)

diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index 61ff556e82..69eab8b620 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -51,6 +51,9 @@
         font-family: monospace;
         font-size: 72px;
       }
+      /* tspan {
+        font-size: 6px !important;
+      } */
     </style>
   </head>
   <body>
@@ -58,7 +61,7 @@
 %%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
 %%
 graph BT
-a{The cat in the hat} -- 1o --> b
+a("`The **cat** in the hat} -- 1o --> b
 a -- 2o --> c
 a -- 3o --> d
 g --2i--> a
@@ -66,8 +69,47 @@
 h --3i -->a
 b --> d(The dog in the hog)
 c --> d
+%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
     </pre>
-    <pre id="diagram" class="mermaid2">
+    <pre id="diagram" class="mermaid">
+flowchart LR
+b("`The dog in **the** hog... a a a a *very long text* about it
+Word!
+
+Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. `")
+</pre
+    >
+    <pre id="diagram" class="mermaid">
+      %%{init: {"flowchart": {"htmlLabels": true}} }%%
+flowchart LR
+b("`The dog in **the** hog... a a a a *very long text* about it
+Word!
+Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. `")
+</pre
+    >
+    <pre id="diagram" class="mermaid">
+      %%{init: {"flowchart": {"htmlLabels": false}} }%%
+flowchart LR
+b("The dog in the hog... a very<br/>long text about it<br/>Word!")
+</pre>
+    <pre id="diagram" class="mermaid">
+      %%{init: {"flowchart": {"htmlLabels": true}} }%%
+flowchart LR
+b("The dog in the hog... a very<br/>long text about it<br/>Word!")
+</pre>
+    <pre id="diagram" class="mermaid">
+flowchart LR
+subgraph "One"
+  a("`The **cat**
+  in the hat`") -- 1o --> b{{"`The **dog** in the hog`"}}
+end
+subgraph "`**Two**`"
+  c("`The **cat**
+  in the hat`") -- "`1o **ipa**`" --> d("The dog in the hog")
+end
+</pre
+    >
+    <pre id="diagram" class="mermaid">
 mindmap
     id1["`**Start2**
     second line 😎 with long text that is wrapping to the next line`"]
@@ -83,8 +125,9 @@
     <pre id="diagram" class="mermaid">
 mindmap
     id1["`**Start** with
-
     a second line 😎`"]
+      id2["`The dog in **the** hog... a *very long text* about it
+Word!`"]
     </pre>
     <pre id="diagram" class="mermaid2">
 %%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
@@ -290,9 +333,9 @@
           // defaultRenderer: 'elk',
           useMaxWidth: false,
           // htmlLabels: false,
-          htmlLabels: true,
+          htmlLabels: false,
         },
-        htmlLabels: true,
+        htmlLabels: false,
         gantt: {
           useMaxWidth: false,
         },
diff --git a/packages/mermaid/src/Diagram.ts b/packages/mermaid/src/Diagram.ts
index 3010ce1302..3943a84c29 100644
--- a/packages/mermaid/src/Diagram.ts
+++ b/packages/mermaid/src/Diagram.ts
@@ -44,6 +44,16 @@ export class Diagram {
     // calls diagram.db.clear(), which would reset anything set by
     // extractFrontMatter().
     this.parser.parse = (text: string) => originalParse(extractFrontMatter(text, this.db));
+
+    // this.parser.parse = (text: string) => {
+    //   console.log('parse called');
+    //   try {
+    //     originalParse(extractFrontMatter(text, this.db));
+    //   } catch (e) {
+    //     console.log('parse called', e);
+    //   }
+    // };
+
     this.parser.parser.yy = this.db;
     if (diagram.init) {
       diagram.init(cnf);
diff --git a/packages/mermaid/src/dagre-wrapper/clusters.js b/packages/mermaid/src/dagre-wrapper/clusters.js
index 57c3ff5138..453fcb8f58 100644
--- a/packages/mermaid/src/dagre-wrapper/clusters.js
+++ b/packages/mermaid/src/dagre-wrapper/clusters.js
@@ -1,12 +1,13 @@
 import intersectRect from './intersect/intersect-rect';
 import { log } from '../logger';
 import createLabel from './createLabel';
+import { createText } from '../rendering-util/createText';
 import { select } from 'd3';
 import { getConfig } from '../config';
 import { evaluate } from '../diagrams/common/common';
 
 const rect = (parent, node) => {
-  log.trace('Creating subgraph rect for ', node.id, node);
+  log.info('Creating subgraph rect for ', node.id, node);
 
   // Add outer g element
   const shapeSvg = parent
@@ -17,12 +18,18 @@ const rect = (parent, node) => {
   // add the rect
   const rect = shapeSvg.insert('rect', ':first-child');
 
+  const useHtmlLabels = evaluate(getConfig().flowchart.htmlLabels);
+
   // Create the label and insert it after the rect
   const label = shapeSvg.insert('g').attr('class', 'cluster-label');
 
-  const text = label
-    .node()
-    .appendChild(createLabel(node.labelText, node.labelStyle, undefined, true));
+  // const text = label
+  //   .node()
+  //   .appendChild(createLabel(node.labelText, node.labelStyle, undefined, true));
+  const text =
+    node.labelType === 'markdown'
+      ? createText(label, node.labelText, { style: node.labelStyle, useHtmlLabels })
+      : label.node().appendChild(createLabel(node.labelText, node.labelStyle, undefined, true));
 
   // Get the size of the label
   let bbox = text.getBBox();
@@ -61,7 +68,7 @@ const rect = (parent, node) => {
     'transform',
     // This puts the labal on top of the box instead of inside it
     // 'translate(' + (node.x - bbox.width / 2) + ', ' + (node.y - node.height / 2 - bbox.height) + ')'
-    'translate(' + (node.x - bbox.width / 2) + ', ' + (node.y - node.height / 2) + ')'
+    'translate(' + node.x + ', ' + (node.y - node.height / 2) + ')'
   );
 
   const rectBox = rect.node().getBBox();
diff --git a/packages/mermaid/src/dagre-wrapper/edges.js b/packages/mermaid/src/dagre-wrapper/edges.js
index f8c113694f..4f83e938a1 100644
--- a/packages/mermaid/src/dagre-wrapper/edges.js
+++ b/packages/mermaid/src/dagre-wrapper/edges.js
@@ -1,5 +1,6 @@
 import { log } from '../logger';
 import createLabel from './createLabel';
+import { createText } from '../rendering-util/createText';
 import { line, curveBasis, select } from 'd3';
 import { getConfig } from '../config';
 import utils from '../utils';
@@ -14,8 +15,13 @@ export const clear = () => {
 };
 
 export const insertEdgeLabel = (elem, edge) => {
+  const useHtmlLabels = evaluate(getConfig().flowchart.htmlLabels);
   // Create the actual text element
-  const labelElement = createLabel(edge.label, edge.labelStyle);
+  const labelElement =
+    edge.labelType === 'markdown'
+      ? createText(elem, edge.label, { style: edge.labelStyle, useHtmlLabels })
+      : createLabel(edge.label, edge.labelStyle);
+  log.info('abc82', edge, edge.labelType);
 
   // Create outer g, edgeLabel, this will be positioned after graph layout
   const edgeLabel = elem.insert('g').attr('class', 'edgeLabel');
@@ -26,7 +32,7 @@ export const insertEdgeLabel = (elem, edge) => {
 
   // Center the label
   let bbox = labelElement.getBBox();
-  if (evaluate(getConfig().flowchart.htmlLabels)) {
+  if (useHtmlLabels) {
     const div = labelElement.children[0];
     const dv = select(labelElement);
     bbox = div.getBoundingClientRect();
diff --git a/packages/mermaid/src/dagre-wrapper/nodes.js b/packages/mermaid/src/dagre-wrapper/nodes.js
index 49b96b685a..3e71f500a8 100644
--- a/packages/mermaid/src/dagre-wrapper/nodes.js
+++ b/packages/mermaid/src/dagre-wrapper/nodes.js
@@ -313,19 +313,18 @@ const cylinder = (parent, node) => {
 const rect = (parent, node) => {
   const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, 'node ' + node.classes, true);
 
-  log.trace('Classes = ', node.classes);
   // add the rect
   const rect = shapeSvg.insert('rect', ':first-child');
 
-  const totalWidth = bbox.width + node.padding;
-  const totalHeight = bbox.height + node.padding;
+  const totalWidth = bbox.width + node.padding * 2;
+  const totalHeight = bbox.height + node.padding * 2;
   rect
     .attr('class', 'basic label-container')
     .attr('style', node.style)
     .attr('rx', node.rx)
     .attr('ry', node.ry)
-    .attr('x', -bbox.width / 2 - halfPadding)
-    .attr('y', -bbox.height / 2 - halfPadding)
+    .attr('x', -bbox.width / 2 - node.padding)
+    .attr('y', -bbox.height / 2 - node.padding)
     .attr('width', totalWidth)
     .attr('height', totalHeight);
 
@@ -352,7 +351,7 @@ const rect = (parent, node) => {
 const labelRect = (parent, node) => {
   const { shapeSvg } = labelHelper(parent, node, 'label', true);
 
-  log.trace('Classes = ', node.classes);
+  log.info('Classes = ', node.classes);
   // add the rect
   const rect = shapeSvg.insert('rect', ':first-child');
 
diff --git a/packages/mermaid/src/dagre-wrapper/shapes/util.js b/packages/mermaid/src/dagre-wrapper/shapes/util.js
index 6de0da6382..d362d08f6a 100644
--- a/packages/mermaid/src/dagre-wrapper/shapes/util.js
+++ b/packages/mermaid/src/dagre-wrapper/shapes/util.js
@@ -1,4 +1,5 @@
 import createLabel from '../createLabel';
+import { createText } from '../../rendering-util/createText';
 import { getConfig } from '../../config';
 import { decodeEntities } from '../../mermaidAPI';
 import { select } from 'd3';
@@ -27,9 +28,17 @@ export const labelHelper = (parent, node, _classes, isNode) => {
     labelText = typeof node.labelText === 'string' ? node.labelText : node.labelText[0];
   }
 
-  const text = label
-    .node()
-    .appendChild(
+  const textNode = label.node();
+  let text;
+  if (node.labelType === 'markdown') {
+    // text = textNode;
+    text = createText(label, sanitizeText(decodeEntities(labelText), getConfig()), {
+      useHtmlLabels: getConfig().flowchart.htmlLabels,
+      width: node.width || 200,
+      classes: 'markdown-node-label',
+    });
+  } else {
+    text = textNode.appendChild(
       createLabel(
         sanitizeText(decodeEntities(labelText), getConfig()),
         node.labelStyle,
@@ -37,6 +46,7 @@ export const labelHelper = (parent, node, _classes, isNode) => {
         isNode
       )
     );
+  }
 
   // Get the size of the label
   let bbox = text.getBBox();
@@ -52,7 +62,11 @@ export const labelHelper = (parent, node, _classes, isNode) => {
   const halfPadding = node.padding / 2;
 
   // Center the label
-  label.attr('transform', 'translate(' + -bbox.width / 2 + ', ' + -bbox.height / 2 + ')');
+  if (getConfig().flowchart.htmlLabels) {
+    label.attr('transform', 'translate(' + -bbox.width / 2 + ', ' + -bbox.height / 2 + ')');
+  } else {
+    label.attr('transform', 'translate(' + 0 + ', ' + -bbox.height / 2 + ')');
+  }
 
   return { shapeSvg, bbox, halfPadding, label };
 };
diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.js b/packages/mermaid/src/diagrams/flowchart/flowDb.js
index 31196ba964..26bc75c14a 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowDb.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowDb.js
@@ -59,13 +59,14 @@ export const lookUpDomId = function (id) {
  *
  * @param _id
  * @param text
+ * @param textObj
  * @param type
  * @param style
  * @param classes
  * @param dir
  * @param props
  */
-export const addVertex = function (_id, text, type, style, classes, dir, props = {}) {
+export const addVertex = function (_id, textObj, type, style, classes, dir, props = {}) {
   let txt;
   let id = _id;
   if (id === undefined) {
@@ -80,16 +81,17 @@ export const addVertex = function (_id, text, type, style, classes, dir, props =
   if (vertices[id] === undefined) {
     vertices[id] = {
       id: id,
+      labelType: 'text',
       domId: MERMAID_DOM_ID_PREFIX + id + '-' + vertexCounter,
       styles: [],
       classes: [],
     };
   }
   vertexCounter++;
-  if (text !== undefined) {
+  if (textObj !== undefined) {
     config = configApi.getConfig();
-    txt = sanitizeText(text.trim());
-
+    txt = sanitizeText(textObj.text.trim());
+    vertices[id].labelType = textObj.type;
     // strip quotes if string starts and ends with a quote
     if (txt[0] === '"' && txt[txt.length - 1] === '"') {
       txt = txt.substring(1, txt.length - 1);
@@ -131,24 +133,26 @@ export const addVertex = function (_id, text, type, style, classes, dir, props =
  * @param _end
  * @param type
  * @param linkText
+ * @param linkTextObj
  */
-export const addSingleLink = function (_start, _end, type, linkText) {
+export const addSingleLink = function (_start, _end, type) {
   let start = _start;
   let end = _end;
   // if (start[0].match(/\d/)) start = MERMAID_DOM_ID_PREFIX + start;
   // if (end[0].match(/\d/)) end = MERMAID_DOM_ID_PREFIX + end;
   // log.info('Got edge...', start, end);
 
-  const edge = { start: start, end: end, type: undefined, text: '' };
-  linkText = type.text;
+  const edge = { start: start, end: end, type: undefined, text: '', labelType: 'text' };
+  const linkTextObj = type.text;
 
-  if (linkText !== undefined) {
-    edge.text = sanitizeText(linkText.trim());
+  if (linkTextObj !== undefined) {
+    edge.text = sanitizeText(linkTextObj.text.trim());
 
     // 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);
     }
+    edge.labelType = linkTextObj.type;
   }
 
   if (type !== undefined) {
@@ -158,11 +162,11 @@ export const addSingleLink = function (_start, _end, type, linkText) {
   }
   edges.push(edge);
 };
-export const addLink = function (_start, _end, type, linktext) {
+export const addLink = function (_start, _end, type) {
   let i, j;
   for (i = 0; i < _start.length; i++) {
     for (j = 0; j < _end.length; j++) {
-      addSingleLink(_start[i], _end[j], type, linktext);
+      addSingleLink(_start[i], _end[j], type);
     }
   }
 };
@@ -457,10 +461,9 @@ export const defaultStyle = function () {
  * @param _title
  */
 export const addSubGraph = function (_id, list, _title) {
-  // console.log('addSubGraph', _id, list, _title);
-  let id = _id.trim();
-  let title = _title;
-  if (_id === _title && _title.match(/\s/)) {
+  let id = _id.text.trim();
+  let title = _title.text;
+  if (_id === _title && _title.text.match(/\s/)) {
     id = undefined;
   }
   /** @param a */
@@ -502,7 +505,14 @@ export const addSubGraph = function (_id, list, _title) {
   title = title || '';
   title = sanitizeText(title);
   subCount = subCount + 1;
-  const subGraph = { id: id, nodes: nodeList, title: title.trim(), classes: [], dir };
+  const subGraph = {
+    id: id,
+    nodes: nodeList,
+    title: title.trim(),
+    classes: [],
+    dir,
+    labelType: _title.type,
+  };
 
   log.info('Adding', subGraph.id, subGraph.nodes, subGraph.dir);
 
diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
index 2d3e21a44b..a87f23e043 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
@@ -47,7 +47,7 @@ export const addVertices = function (vert, g, svgId, root, doc, diagObj) {
     if (vertex.classes.length > 0) {
       classStr = vertex.classes.join(' ');
     }
-
+    classStr = classStr + ' flowchart-label';
     const styles = getStylesFromArray(vertex.styles);
 
     // Use vertex id as text in the box if no text is provided by the graph definition
@@ -55,31 +55,36 @@ export const addVertices = function (vert, g, svgId, root, doc, diagObj) {
 
     // We create a SVG label, either by delegating to addHtmlLabel or manually
     let vertexNode;
-    if (evaluate(getConfig().flowchart.htmlLabels)) {
-      // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?
-      const node = {
-        label: vertexText.replace(
-          /fa[blrs]?:fa-[\w-]+/g,
-          (s) => `<i class='${s.replace(':', ' ')}'></i>`
-        ),
-      };
-      vertexNode = addHtmlLabel(svg, node).node();
-      vertexNode.parentNode.removeChild(vertexNode);
+    log.info('vertex', vertex, vertex.labelType);
+    if (vertex.labelType === 'markdown') {
+      log.info('vertex', vertex, vertex.labelType);
     } else {
-      const svgLabel = doc.createElementNS('http://www.w3.org/2000/svg', 'text');
-      svgLabel.setAttribute('style', styles.labelStyle.replace('color:', 'fill:'));
-
-      const rows = vertexText.split(common.lineBreakRegex);
-
-      for (const row of rows) {
-        const tspan = doc.createElementNS('http://www.w3.org/2000/svg', 'tspan');
-        tspan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve');
-        tspan.setAttribute('dy', '1em');
-        tspan.setAttribute('x', '1');
-        tspan.textContent = row;
-        svgLabel.appendChild(tspan);
+      if (evaluate(getConfig().flowchart.htmlLabels)) {
+        // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?
+        const node = {
+          label: vertexText.replace(
+            /fa[blrs]?:fa-[\w-]+/g,
+            (s) => `<i class='${s.replace(':', ' ')}'></i>`
+          ),
+        };
+        vertexNode = addHtmlLabel(svg, node).node();
+        vertexNode.parentNode.removeChild(vertexNode);
+      } else {
+        const svgLabel = doc.createElementNS('http://www.w3.org/2000/svg', 'text');
+        svgLabel.setAttribute('style', styles.labelStyle.replace('color:', 'fill:'));
+
+        const rows = vertexText.split(common.lineBreakRegex);
+
+        for (const row of rows) {
+          const tspan = doc.createElementNS('http://www.w3.org/2000/svg', 'tspan');
+          tspan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve');
+          tspan.setAttribute('dy', '1em');
+          tspan.setAttribute('x', '1');
+          tspan.textContent = row;
+          svgLabel.appendChild(tspan);
+        }
+        vertexNode = svgLabel;
       }
-      vertexNode = svgLabel;
     }
 
     let radious = 0;
@@ -146,6 +151,7 @@ export const addVertices = function (vert, g, svgId, root, doc, diagObj) {
       labelStyle: styles.labelStyle,
       shape: _shape,
       labelText: vertexText,
+      labelType: vertex.labelType,
       rx: radious,
       ry: radious,
       class: classStr,
@@ -165,6 +171,7 @@ export const addVertices = function (vert, g, svgId, root, doc, diagObj) {
 
     log.info('setNode', {
       labelStyle: styles.labelStyle,
+      labelType: vertex.labelType,
       shape: _shape,
       labelText: vertexText,
       rx: radious,
@@ -312,7 +319,7 @@ export const addEdges = function (edges, g, diagObj) {
       edgeData.labelpos = 'c';
     }
 
-    edgeData.labelType = 'text';
+    edgeData.labelType = edge.labelType;
     edgeData.label = edge.text.replace(common.lineBreakRegex, '\n');
 
     if (edge.style === undefined) {
@@ -405,7 +412,14 @@ export const draw = function (text, id, _version, diagObj) {
   for (let i = subGraphs.length - 1; i >= 0; i--) {
     subG = subGraphs[i];
     log.info('Subgraph - ', subG);
-    diagObj.db.addVertex(subG.id, subG.title, 'group', undefined, subG.classes, subG.dir);
+    diagObj.db.addVertex(
+      subG.id,
+      { text: subG.title, type: subG.labelType },
+      'group',
+      undefined,
+      subG.classes,
+      subG.dir
+    );
   }
 
   // Fetch the vertices/nodes and edges/links from the parsed graph definition
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
index e2dad58818..d21104d492 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
@@ -7,6 +7,7 @@
 /* lexical grammar */
 %lex
 %x string
+%x md_string
 %x acc_title
 %x acc_descr
 %x acc_descr_multiline
@@ -37,6 +38,9 @@ accDescr\s*"{"\s*                                { this.begin("acc_descr_multili
 <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");
 <string>["]             this.popState();
 <string>[^"]*           return "STR";
@@ -434,11 +438,13 @@ arrowText:
     ;
 
 text: textToken
-    {$$=$1;}
+    {$$={text:$1, type: 'text'};}
     | text textToken
-    {$$=$1+''+$2;}
+    {$$={text:$1.text+''+$2, type: 'text'};}
     | STR
-    {$$=$1;}
+    {$$={text: $1, type: 'text'};}
+    | MD_STR
+    {$$={text: $1, type: 'markdown'};}
     ;
 
 
diff --git a/packages/mermaid/src/diagrams/flowchart/styles.ts b/packages/mermaid/src/diagrams/flowchart/styles.ts
index a89d33d3dc..86ffcb7ed0 100644
--- a/packages/mermaid/src/diagrams/flowchart/styles.ts
+++ b/packages/mermaid/src/diagrams/flowchart/styles.ts
@@ -41,6 +41,15 @@ const getStyles = (options: FlowChartStyleOptions) =>
     stroke: ${options.nodeBorder};
     stroke-width: 1px;
   }
+  .flowchart-label text {
+    text-anchor: middle;
+  }
+  // .flowchart-label .text-outer-tspan {
+  //   text-anchor: middle;
+  // }
+  // .flowchart-label .text-inner-tspan {
+  //   text-anchor: start;
+  // }
 
   .node .label {
     text-align: center;
diff --git a/packages/mermaid/src/rendering-util/createText.js b/packages/mermaid/src/rendering-util/createText.js
index 5eea6f4c87..0fc7dda542 100644
--- a/packages/mermaid/src/rendering-util/createText.js
+++ b/packages/mermaid/src/rendering-util/createText.js
@@ -49,7 +49,7 @@ function addHtmlSpan(element, node, width, classes) {
   if (bbox.width === width) {
     div.style('display', 'table');
     div.style('white-space', 'break-spaces');
-    div.style('width', '200px');
+    div.style('width', width + 'px');
     bbox = div.node().getBoundingClientRect();
   }
 
@@ -70,8 +70,9 @@ function addHtmlSpan(element, node, width, classes) {
 function createTspan(textElement, lineIndex, lineHeight) {
   return textElement
     .append('tspan')
+    .attr('class', 'text-outer-tspan')
     .attr('x', 0)
-    .attr('y', lineIndex * lineHeight + 'em')
+    .attr('y', lineIndex * lineHeight - 0.1 + 'em')
     .attr('dy', lineHeight + 'em');
 }
 
@@ -86,9 +87,13 @@ function createTspan(textElement, lineIndex, lineHeight) {
 function createFormattedText(width, g, structuredText) {
   const lineHeight = 1.1;
 
-  const textElement = g.append('text');
-
-  structuredText.forEach((line, lineIndex) => {
+  const textElement = g.append('text').attr('y', '-10.1');
+  // .attr('dominant-baseline', 'middle')
+  // .attr('text-anchor', 'middle');
+  // .attr('text-anchor', 'middle');
+  let lineIndex = -1;
+  structuredText.forEach((line) => {
+    lineIndex++;
     let tspan = createTspan(textElement, lineIndex, lineHeight);
 
     let words = [...line].reverse();
@@ -108,10 +113,13 @@ function createFormattedText(width, g, structuredText) {
         updateTextContentAndStyles(tspan, wrappedLine);
 
         wrappedLine = [];
-        tspan = createTspan(textElement, ++lineIndex, lineHeight);
+        lineIndex++;
+        tspan = createTspan(textElement, lineIndex, lineHeight);
       }
     }
   });
+  return textElement.node();
+  // return g.node();
 }
 
 /**
@@ -124,12 +132,36 @@ function createFormattedText(width, g, structuredText) {
 function updateTextContentAndStyles(tspan, wrappedLine) {
   tspan.text('');
 
-  wrappedLine.forEach((word) => {
-    tspan
+  wrappedLine.forEach((word, index) => {
+    const innerTspan = tspan
       .append('tspan')
       .attr('font-style', word.type === 'em' ? 'italic' : 'normal')
-      .attr('font-weight', word.type === 'strong' ? 'bold' : 'normal')
-      .text(word.content + ' ');
+      .attr('class', 'text-inner-tspan')
+      .attr('font-weight', word.type === 'strong' ? 'bold' : 'normal');
+    const special = [
+      '<',
+      '>',
+      '&',
+      '"',
+      "'",
+      '.',
+      ',',
+      ':',
+      ';',
+      '!',
+      '?',
+      '(',
+      ')',
+      '[',
+      ']',
+      '{',
+      '}',
+    ];
+    if (index !== 0 && special.includes(word.content)) {
+      innerTspan.text(word.content);
+    } else {
+      innerTspan.text(' ' + word.content);
+    }
   });
 }
 
diff --git a/packages/mermaid/src/rendering-util/handle-markdown-text.spec.js b/packages/mermaid/src/rendering-util/handle-markdown-text.spec.js
index 005dd42f66..5e74a99567 100644
--- a/packages/mermaid/src/rendering-util/handle-markdown-text.spec.js
+++ b/packages/mermaid/src/rendering-util/handle-markdown-text.spec.js
@@ -169,6 +169,37 @@ it('markdownToLines - Mixed formatting', () => {
   expect(output).toEqual(expectedOutput);
 });
 
+it('markdownToLines - Mixed formatting', () => {
+  const input = `The dog in **the** hog... a *very long text* about it
+Word!`;
+
+  const expectedOutput = [
+    [
+      { content: 'The', type: 'normal' },
+      { content: 'dog', type: 'normal' },
+      { content: 'in', type: 'normal' },
+      { content: 'the', type: 'strong' },
+      { content: 'hog', type: 'normal' },
+      { content: '.', type: 'normal' },
+      { content: '.', type: 'normal' },
+      { content: '.', type: 'normal' },
+      { content: 'a', type: 'normal' },
+      { content: 'very', type: 'em' },
+      { content: 'long', type: 'em' },
+      { content: 'text', type: 'em' },
+      { content: 'about', type: 'normal' },
+      { content: 'it', type: 'normal' },
+    ],
+    [
+      { content: 'Word', type: 'normal' },
+      { content: '!', type: 'normal' },
+    ],
+  ];
+
+  const output = markdownToLines(input);
+  expect(output).toEqual(expectedOutput);
+});
+
 test('markdownToHTML - Basic test', () => {
   const input = `This is regular text
 Here is a new line

From 89193d7360b68f4b431d0a9c04f1fc29ccaeb746 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Wed, 29 Mar 2023 09:35:42 +0200
Subject: [PATCH 63/88] Simple markdown in lock file

---
 pnpm-lock.yaml | 41 ++++++-----------------------------------
 1 file changed, 6 insertions(+), 35 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 485f977204..792b7f890b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -121,6 +121,7 @@ importers:
   packages/mermaid:
     specifiers:
       '@braintree/sanitize-url': ^6.0.0
+      '@khanacademy/simple-markdown': ^0.8.6
       '@types/cytoscape': ^3.19.9
       '@types/d3': ^7.4.0
       '@types/dompurify': ^2.4.0
@@ -172,6 +173,7 @@ importers:
       web-worker: ^1.2.0
     dependencies:
       '@braintree/sanitize-url': 6.0.0
+      '@khanacademy/simple-markdown': 0.8.6_wcqkhtmu7mswc6yz4uyexck3ty
       cytoscape: 3.23.0
       cytoscape-cose-bilkent: 4.1.0_cytoscape@3.23.0
       cytoscape-fcose: 2.1.0_cytoscape@3.23.0
@@ -220,7 +222,7 @@ importers:
       typedoc-plugin-markdown: 3.13.6_typedoc@0.23.18
       typescript: 4.8.4
       unist-util-flatmap: 1.0.0
-      vitepress: 1.0.0-alpha.46_tbpndr44ulefs3hehwpi2mkf2y
+      vitepress: 1.0.0-alpha.46_hoyvfk3ab7nzsjkhptt6ai7rzq
       vitepress-plugin-search: 1.0.4-alpha.19_g67lr3vgasogkevpbew55lljzq
 
   packages/mermaid-example-diagram:
@@ -3415,7 +3417,7 @@ packages:
       '@vue/shared': 3.2.45
       estree-walker: 2.0.2
       magic-string: 0.25.9
-      postcss: 8.4.20
+      postcss: 8.4.21
       source-map: 0.6.1
     dev: true
 
@@ -4063,7 +4065,7 @@ packages:
   /axios/0.21.4_debug@4.3.2:
     resolution: {integrity: sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==}
     dependencies:
-      follow-redirects: 1.15.2_debug@4.3.2
+      follow-redirects: 1.15.2_debug@4.3.4
     transitivePeerDependencies:
       - debug
     dev: true
@@ -6639,28 +6641,6 @@ packages:
     resolution: {integrity: sha512-XGozTsMPYkm+6b5QL3Z9wQcJjNYxp0CYn3U1gO7dwD6PAqU1SVWZxI9CCg3z+ml3YfqdPnrBehaBrnH2AGKbNA==}
     dev: true
 
-  /follow-redirects/1.15.2:
-    resolution: {integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==}
-    engines: {node: '>=4.0'}
-    peerDependencies:
-      debug: '*'
-    peerDependenciesMeta:
-      debug:
-        optional: true
-    dev: true
-
-  /follow-redirects/1.15.2_debug@4.3.2:
-    resolution: {integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==}
-    engines: {node: '>=4.0'}
-    peerDependencies:
-      debug: '*'
-    peerDependenciesMeta:
-      debug:
-        optional: true
-    dependencies:
-      debug: 4.3.2
-    dev: true
-
   /follow-redirects/1.15.2_debug@4.3.4:
     resolution: {integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==}
     engines: {node: '>=4.0'}
@@ -7210,7 +7190,7 @@ packages:
     engines: {node: '>=8.0.0'}
     dependencies:
       eventemitter3: 4.0.7
-      follow-redirects: 1.15.2
+      follow-redirects: 1.15.2_debug@4.3.4
       requires-port: 1.0.0
     transitivePeerDependencies:
       - debug
@@ -9775,15 +9755,6 @@ packages:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
     dev: true
 
-  /postcss/8.4.20:
-    resolution: {integrity: sha512-6Q04AXR1212bXr5fh03u8aAwbLxAQNGQ/Q1LNa0VfOI06ZAlhPHtQvE4OIdpj4kLThXilalPnmDSOD65DcHt+g==}
-    engines: {node: ^10 || ^12 || >=14}
-    dependencies:
-      nanoid: 3.3.4
-      picocolors: 1.0.0
-      source-map-js: 1.0.2
-    dev: true
-
   /postcss/8.4.21:
     resolution: {integrity: sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==}
     engines: {node: ^10 || ^12 || >=14}

From 4caf7d7c7b25976fbea9126633b33a2223477370 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Wed, 29 Mar 2023 16:01:08 +0200
Subject: [PATCH 64/88] Adding support for markdown string in flowchart-elk

---
 cypress/platform/knsv2.html                   | 67 +++++++++-------
 docs/config/setup/modules/defaultConfig.md    |  2 +-
 packages/mermaid/src/Diagram.ts               |  1 -
 packages/mermaid/src/config.type.ts           |  1 +
 packages/mermaid/src/dagre-wrapper/edges.js   |  6 +-
 packages/mermaid/src/dagre-wrapper/nodes.js   |  1 +
 .../mermaid/src/dagre-wrapper/shapes/util.js  |  4 +-
 packages/mermaid/src/defaultConfig.ts         | 12 +++
 .../flowchart/elk/flowRenderer-elk.js         | 79 ++++++++++---------
 .../src/diagrams/flowchart/elk/styles.ts      |  7 +-
 .../mermaid/src/diagrams/flowchart/flowDb.js  |  2 +
 .../src/diagrams/flowchart/parser/flow.jison  |  8 +-
 .../mermaid/src/rendering-util/createText.js  | 40 ++++++++--
 13 files changed, 147 insertions(+), 83 deletions(-)

diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index 69eab8b620..02a5ff5e64 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -57,51 +57,64 @@
     </style>
   </head>
   <body>
-    <pre id="diagram" class="mermaid2">
+    <pre id="diagram" class="mermaid">
 %%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
 %%
-graph BT
-a("`The **cat** in the hat} -- 1o --> b
-a -- 2o --> c
-a -- 3o --> d
-g --2i--> a
-d --1i--> a
-h --3i -->a
-b --> d(The dog in the hog)
-c --> d
-%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
-    </pre>
+graph LR
+  a{"`The **cat** in the hat`"} -- 1o --> b
+  a -- 2o --> c
+  a -- 3o --> d
+  g --2i--> a
+  d --1i--> a
+  h --3i -->a
+  b --> d(The dog in the hog)
+  c --> d
+</pre
+    >
     <pre id="diagram" class="mermaid">
+      %%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
 flowchart LR
-b("`The dog in **the** hog... a a a a *very long text* about it
+b("`The dog in **the** hog.(1)
+NL`") --"`1o **bold**`"--> c
+</pre
+    >
+    <pre id="diagram" class="mermaid">
+flowchart-elk LR
+b("`The dog in **the** hog.(1)
+NL`") --"`1o **bold**`"--> c
+</pre
+    >
+    <pre id="diagram" class="mermaid">
+flowchart-elk LR
+b("`The dog in **the** hog.(1).. a a a a *very long text* about it
 Word!
 
-Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. `")
+Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. `") --> c
 </pre
     >
     <pre id="diagram" class="mermaid">
       %%{init: {"flowchart": {"htmlLabels": true}} }%%
-flowchart LR
-b("`The dog in **the** hog... a a a a *very long text* about it
+flowchart-elk LR
+b("`The dog in **the** hog(2)... a a a a *very long text* about it
 Word!
 Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. `")
 </pre
     >
     <pre id="diagram" class="mermaid">
       %%{init: {"flowchart": {"htmlLabels": false}} }%%
-flowchart LR
+flowchart-elk LR
 b("The dog in the hog... a very<br/>long text about it<br/>Word!")
 </pre>
     <pre id="diagram" class="mermaid">
       %%{init: {"flowchart": {"htmlLabels": true}} }%%
-flowchart LR
+flowchart-elk LR
 b("The dog in the hog... a very<br/>long text about it<br/>Word!")
 </pre>
     <pre id="diagram" class="mermaid">
-flowchart LR
+flowchart-elk LR
 subgraph "One"
   a("`The **cat**
-  in the hat`") -- 1o --> b{{"`The **dog** in the hog`"}}
+  in the hat`") -- "1o" --> b{{"`The **dog** in the hog`"}}
 end
 subgraph "`**Two**`"
   c("`The **cat**
@@ -129,7 +142,7 @@
       id2["`The dog in **the** hog... a *very long text* about it
 Word!`"]
     </pre>
-    <pre id="diagram" class="mermaid2">
+    <pre id="diagram" class="mermaid">
 %%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
 flowchart TB
   %% I could not figure out how to use double quotes in labels in Mermaid
@@ -185,7 +198,7 @@
 </pre
     >
     <br />
-    <pre id="diagram" class="mermaid2">
+    <pre id="diagram" class="mermaid">
 flowchart TB
   %% I could not figure out how to use double quotes in labels in Mermaid
   subgraph ibm[IBM Espresso CPU]
@@ -241,7 +254,7 @@
     >
     <br />
     &nbsp;
-    <pre id="diagram" class="mermaid2">
+    <pre id="diagram" class="mermaid">
       flowchart LR
   B1 --be be--x B2
   B1 --bo bo--o B3
@@ -274,7 +287,7 @@
   B6 --> B5
   </pre
     >
-    <pre id="diagram" class="mermaid2">
+    <pre id="diagram" class="mermaid">
 sequenceDiagram
     Customer->>+Stripe: Makes a payment request
     Stripe->>+Bank: Forwards the payment request to the bank
@@ -287,7 +300,7 @@
     Customer->>+Merchant: Receives goods or services
         </pre
     >
-    <pre id="diagram" class="mermaid2">
+    <pre id="diagram" class="mermaid">
 mindmap
   root((mindmap))
     Origins
@@ -307,7 +320,7 @@
       Mermaid
     </pre>
     <br />
-    <pre id="diagram" class="mermaid2">
+    <pre id="diagram" class="mermaid">
   example-diagram
     </pre>
 
@@ -332,8 +345,8 @@
         flowchart: {
           // defaultRenderer: 'elk',
           useMaxWidth: false,
-          // htmlLabels: false,
           htmlLabels: false,
+          // htmlLabels: true,
         },
         htmlLabels: false,
         gantt: {
diff --git a/docs/config/setup/modules/defaultConfig.md b/docs/config/setup/modules/defaultConfig.md
index 3b2e338424..6493a93db1 100644
--- a/docs/config/setup/modules/defaultConfig.md
+++ b/docs/config/setup/modules/defaultConfig.md
@@ -14,7 +14,7 @@
 
 #### Defined in
 
-[defaultConfig.ts:2093](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L2093)
+[defaultConfig.ts:2105](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L2105)
 
 ---
 
diff --git a/packages/mermaid/src/Diagram.ts b/packages/mermaid/src/Diagram.ts
index 3943a84c29..8e924f2fad 100644
--- a/packages/mermaid/src/Diagram.ts
+++ b/packages/mermaid/src/Diagram.ts
@@ -44,7 +44,6 @@ export class Diagram {
     // calls diagram.db.clear(), which would reset anything set by
     // extractFrontMatter().
     this.parser.parse = (text: string) => originalParse(extractFrontMatter(text, this.db));
-
     // this.parser.parse = (text: string) => {
     //   console.log('parse called');
     //   try {
diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts
index 1573041498..c3ab7671e4 100644
--- a/packages/mermaid/src/config.type.ts
+++ b/packages/mermaid/src/config.type.ts
@@ -385,6 +385,7 @@ export interface FlowchartDiagramConfig extends BaseDiagramConfig {
   curve?: string;
   padding?: number;
   defaultRenderer?: string;
+  wrappingWidth?: number;
 }
 
 export interface FontConfig {
diff --git a/packages/mermaid/src/dagre-wrapper/edges.js b/packages/mermaid/src/dagre-wrapper/edges.js
index 4f83e938a1..d4b7d37b8a 100644
--- a/packages/mermaid/src/dagre-wrapper/edges.js
+++ b/packages/mermaid/src/dagre-wrapper/edges.js
@@ -19,7 +19,11 @@ export const insertEdgeLabel = (elem, edge) => {
   // Create the actual text element
   const labelElement =
     edge.labelType === 'markdown'
-      ? createText(elem, edge.label, { style: edge.labelStyle, useHtmlLabels })
+      ? createText(elem, edge.label, {
+          style: edge.labelStyle,
+          useHtmlLabels,
+          addSvgBackground: true,
+        })
       : createLabel(edge.label, edge.labelStyle);
   log.info('abc82', edge, edge.labelType);
 
diff --git a/packages/mermaid/src/dagre-wrapper/nodes.js b/packages/mermaid/src/dagre-wrapper/nodes.js
index 3e71f500a8..dd02257700 100644
--- a/packages/mermaid/src/dagre-wrapper/nodes.js
+++ b/packages/mermaid/src/dagre-wrapper/nodes.js
@@ -997,6 +997,7 @@ export const insertNode = (elem, node, dir) => {
     el.attr('class', 'node default ' + node.class);
   }
 
+  /* MC: 7e790808-9c49-4f74-93de-15c22872377f */
   nodeElems[node.id] = newEl;
 
   if (node.haveCallback) {
diff --git a/packages/mermaid/src/dagre-wrapper/shapes/util.js b/packages/mermaid/src/dagre-wrapper/shapes/util.js
index d362d08f6a..b5de2bd6b4 100644
--- a/packages/mermaid/src/dagre-wrapper/shapes/util.js
+++ b/packages/mermaid/src/dagre-wrapper/shapes/util.js
@@ -34,7 +34,7 @@ export const labelHelper = (parent, node, _classes, isNode) => {
     // text = textNode;
     text = createText(label, sanitizeText(decodeEntities(labelText), getConfig()), {
       useHtmlLabels: getConfig().flowchart.htmlLabels,
-      width: node.width || 200,
+      width: node.width || getConfig().flowchart.wrappingWidth,
       classes: 'markdown-node-label',
     });
   } else {
@@ -67,7 +67,7 @@ export const labelHelper = (parent, node, _classes, isNode) => {
   } else {
     label.attr('transform', 'translate(' + 0 + ', ' + -bbox.height / 2 + ')');
   }
-
+  label.insert('rect', ':first-child');
   return { shapeSvg, bbox, halfPadding, label };
 };
 
diff --git a/packages/mermaid/src/defaultConfig.ts b/packages/mermaid/src/defaultConfig.ts
index 666efc3649..4d8ebf4e85 100644
--- a/packages/mermaid/src/defaultConfig.ts
+++ b/packages/mermaid/src/defaultConfig.ts
@@ -258,6 +258,18 @@ const config: Partial<MermaidConfig> = {
      * Default value: 'dagre-wrapper'
      */
     defaultRenderer: 'dagre-wrapper',
+    /**
+     * | Parameter       | Description | Type    | Required | Values                  |
+     * | --------------- | ----------- | ------- | -------- | ----------------------- |
+     * | wrappingWidth   | See notes   | number  | 4        | width of nodes where text is wrapped |
+     *
+     * **Notes:**
+     *
+     * When using markdown strings the text ius wrapped automatically, this
+     * value sets the max width of a text before it continues on a new line.
+     * Default value: 'dagre-wrapper'
+     */
+    wrappingWidth: 200,
   },
 
   /** The object containing configurations specific for sequence diagrams */
diff --git a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js b/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js
index 426d22dbbc..1b1dd3c50b 100644
--- a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js
+++ b/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js
@@ -3,6 +3,7 @@ import { insertNode } from '../../../dagre-wrapper/nodes.js';
 import insertMarkers from '../../../dagre-wrapper/markers.js';
 import { insertEdgeLabel } from '../../../dagre-wrapper/edges.js';
 import { findCommonAncestor } from './render-utils';
+import { labelHelper } from '../../../dagre-wrapper/shapes/util';
 import { addHtmlLabel } from 'dagre-d3-es/src/dagre-js/label/add-html-label.js';
 import { getConfig } from '../../../config';
 import { log } from '../../../logger';
@@ -52,7 +53,7 @@ export const addVertices = function (vert, svgId, root, doc, diagObj, parentLook
     if (vertex.classes.length > 0) {
       classStr = vertex.classes.join(' ');
     }
-
+    classStr = classStr + ' flowchart-label';
     const styles = getStylesFromArray(vertex.styles);
 
     // Use vertex id as text in the box if no text is provided by the graph definition
@@ -61,40 +62,6 @@ export const addVertices = function (vert, svgId, root, doc, diagObj, parentLook
     // We create a SVG label, either by delegating to addHtmlLabel or manually
     let vertexNode;
     const labelData = { width: 0, height: 0 };
-    if (evaluate(getConfig().flowchart.htmlLabels)) {
-      // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?
-      const node = {
-        label: vertexText.replace(
-          /fa[blrs]?:fa-[\w-]+/g,
-          (s) => `<i class='${s.replace(':', ' ')}'></i>`
-        ),
-      };
-      vertexNode = addHtmlLabel(svg, node).node();
-      const bbox = vertexNode.getBBox();
-      labelData.width = bbox.width;
-      labelData.height = bbox.height;
-      labelData.labelNode = vertexNode;
-      vertexNode.parentNode.removeChild(vertexNode);
-    } else {
-      const svgLabel = doc.createElementNS('http://www.w3.org/2000/svg', 'text');
-      svgLabel.setAttribute('style', styles.labelStyle.replace('color:', 'fill:'));
-
-      const rows = vertexText.split(common.lineBreakRegex);
-
-      for (const row of rows) {
-        const tspan = doc.createElementNS('http://www.w3.org/2000/svg', 'tspan');
-        tspan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve');
-        tspan.setAttribute('dy', '1em');
-        tspan.setAttribute('x', '1');
-        tspan.textContent = row;
-        svgLabel.appendChild(tspan);
-      }
-      vertexNode = svgLabel;
-      const bbox = vertexNode.getBBox();
-      labelData.width = bbox.width;
-      labelData.height = bbox.height;
-      labelData.labelNode = vertexNode;
-    }
 
     const ports = [
       {
@@ -186,11 +153,13 @@ export const addVertices = function (vert, svgId, root, doc, diagObj, parentLook
       default:
         _shape = 'rect';
     }
+
     // Add the node
     const node = {
       labelStyle: styles.labelStyle,
       shape: _shape,
       labelText: vertexText,
+      labelType: vertex.labelType,
       rx: radious,
       ry: radious,
       class: classStr,
@@ -209,10 +178,33 @@ export const addVertices = function (vert, svgId, root, doc, diagObj, parentLook
     };
     let boundingBox;
     let nodeEl;
+
+    // Add the element to the DOM
     if (node.type !== 'group') {
       nodeEl = insertNode(nodes, node, vertex.dir);
       boundingBox = nodeEl.node().getBBox();
+    } else {
+      const svgLabel = doc.createElementNS('http://www.w3.org/2000/svg', 'text');
+      // svgLabel.setAttribute('style', styles.labelStyle.replace('color:', 'fill:'));
+      // const rows = vertexText.split(common.lineBreakRegex);
+      // for (const row of rows) {
+      //   const tspan = doc.createElementNS('http://www.w3.org/2000/svg', 'tspan');
+      //   tspan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve');
+      //   tspan.setAttribute('dy', '1em');
+      //   tspan.setAttribute('x', '1');
+      //   tspan.textContent = row;
+      //   svgLabel.appendChild(tspan);
+      // }
+      // vertexNode = svgLabel;
+      // const bbox = vertexNode.getBBox();
+      const { shapeSvg, bbox } = labelHelper(nodes, node, undefined, true);
+      labelData.width = bbox.width;
+      labelData.wrappingWidth = getConfig().flowchart.wrappingWidth;
+      labelData.height = bbox.height;
+      labelData.labelNode = shapeSvg.node();
+      node.labelData = labelData;
     }
+    // const { shapeSvg, bbox } = labelHelper(svg, node, undefined, true);
 
     const data = {
       id: vertex.id,
@@ -520,7 +512,7 @@ export const addEdges = function (edges, diagObj, graph, svg) {
       edgeData.labelpos = 'c';
     }
 
-    edgeData.labelType = 'text';
+    edgeData.labelType = edge.labelType;
     edgeData.label = edge.text.replace(common.lineBreakRegex, '\n');
 
     if (edge.style === undefined) {
@@ -845,9 +837,17 @@ export const draw = async function (text, id, _version, diagObj) {
   log.info('Subgraphs - ', subGraphs);
   for (let i = subGraphs.length - 1; i >= 0; i--) {
     subG = subGraphs[i];
-    diagObj.db.addVertex(subG.id, subG.title, 'group', undefined, subG.classes, subG.dir);
+    diagObj.db.addVertex(
+      subG.id,
+      { text: subG.title, type: subG.labelType },
+      'group',
+      undefined,
+      subG.classes,
+      subG.dir
+    );
   }
 
+  // debugger;
   // Add an element in the svg to be used to hold the subgraphs container
   // elements
   const subGraphsEl = svg.insert('g').attr('class', 'subgraphs');
@@ -860,7 +860,7 @@ export const draw = async function (text, id, _version, diagObj) {
   // in order to get the size of the node. You can't get the size of a node
   // that is not in the dom so we need to add it to the dom, get the size
   // we will position the nodes when we get the layout from elkjs
-  graph = addVertices(vert, id, root, doc, diagObj, parentLookupDb, graph);
+  graph = addVertices(vert, id, root, doc, diagObj, parentLookupDb, graph, svg);
 
   // Time for the edges, we start with adding an element in the node to hold the edges
   const edgesEl = svg.insert('g').attr('class', 'edges edgePath');
@@ -887,6 +887,8 @@ export const draw = async function (text, id, _version, diagObj) {
           },
           width: node.labelData.width,
           height: node.labelData.height,
+          // width: 100,
+          // height: 100,
         },
       ];
       delete node.x;
@@ -895,6 +897,7 @@ export const draw = async function (text, id, _version, diagObj) {
       delete node.height;
     }
   });
+
   insertChildren(graph.children, parentLookupDb);
   log.info('after layout', JSON.stringify(graph, null, 2));
   const g = await elk.layout(graph);
diff --git a/packages/mermaid/src/diagrams/flowchart/elk/styles.ts b/packages/mermaid/src/diagrams/flowchart/elk/styles.ts
index e8e7065a0e..60659df457 100644
--- a/packages/mermaid/src/diagrams/flowchart/elk/styles.ts
+++ b/packages/mermaid/src/diagrams/flowchart/elk/styles.ts
@@ -81,7 +81,7 @@ const getStyles = (options: FlowChartStyleOptions) =>
   .edgeLabel {
     background-color: ${options.edgeLabelBackground};
     rect {
-      opacity: 0.5;
+      opacity: 0.85;
       background-color: ${options.edgeLabelBackground};
       fill: ${options.edgeLabelBackground};
     }
@@ -132,6 +132,11 @@ const getStyles = (options: FlowChartStyleOptions) =>
   //   fill:#ccc;
   //   // stroke:black;
   // }
+
+  .flowchart-label text {
+    text-anchor: middle;
+  }
+
   ${genSections(options)}
 `;
 
diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.js b/packages/mermaid/src/diagrams/flowchart/flowDb.js
index 26bc75c14a..85dc5337e5 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowDb.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowDb.js
@@ -143,6 +143,7 @@ export const addSingleLink = function (_start, _end, type) {
   // log.info('Got edge...', start, end);
 
   const edge = { start: start, end: end, type: undefined, text: '', labelType: 'text' };
+  log.info('abc78 Got edge...', edge);
   const linkTextObj = type.text;
 
   if (linkTextObj !== undefined) {
@@ -163,6 +164,7 @@ export const addSingleLink = function (_start, _end, type) {
   edges.push(edge);
 };
 export const addLink = function (_start, _end, type) {
+  log.info('addLink (abc78)', _start, _end, type);
   let i, j;
   for (i = 0; i < _start.length; i++) {
     for (j = 0; j < _end.length; j++) {
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
index d21104d492..19ab80b05d 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
@@ -438,13 +438,13 @@ arrowText:
     ;
 
 text: textToken
-    {$$={text:$1, type: 'text'};}
+    { $$={text:$1, type: 'text'};}
     | text textToken
-    {$$={text:$1.text+''+$2, type: 'text'};}
+    { $$={text:$1.text+''+$2, type: $1.type};}
     | STR
-    {$$={text: $1, type: 'text'};}
+    { $$={text: $1, type: 'text'};}
     | MD_STR
-    {$$={text: $1, type: 'markdown'};}
+    { $$={text: $1, type: 'markdown'};}
     ;
 
 
diff --git a/packages/mermaid/src/rendering-util/createText.js b/packages/mermaid/src/rendering-util/createText.js
index 0fc7dda542..1097cd0df6 100644
--- a/packages/mermaid/src/rendering-util/createText.js
+++ b/packages/mermaid/src/rendering-util/createText.js
@@ -83,11 +83,13 @@ function createTspan(textElement, lineIndex, lineHeight) {
  * @param {number} width - The maximum allowed width of the text.
  * @param {object} g - The parent group element to append the formatted text.
  * @param {Array} structuredText - The structured text data to format.
+ * @param addBackground
  */
-function createFormattedText(width, g, structuredText) {
+function createFormattedText(width, g, structuredText, addBackground = false) {
   const lineHeight = 1.1;
-
-  const textElement = g.append('text').attr('y', '-10.1');
+  const labelGroup = g.append('g');
+  let bkg = labelGroup.insert('rect').attr('class', 'background');
+  const textElement = labelGroup.append('text').attr('y', '-10.1');
   // .attr('dominant-baseline', 'middle')
   // .attr('text-anchor', 'middle');
   // .attr('text-anchor', 'middle');
@@ -118,8 +120,20 @@ function createFormattedText(width, g, structuredText) {
       }
     }
   });
-  return textElement.node();
-  // return g.node();
+  if (addBackground) {
+    const bbox = textElement.node().getBBox();
+    const padding = 2;
+    bkg
+      .attr('x', -padding)
+      .attr('y', -padding)
+      .attr('width', bbox.width + 2 * padding)
+      .attr('height', bbox.height + 2 * padding);
+    // .style('fill', 'red');
+
+    return labelGroup.node();
+  } else {
+    return textElement.node();
+  }
 }
 
 /**
@@ -183,9 +197,17 @@ function updateTextContentAndStyles(tspan, wrappedLine) {
 export const createText = (
   el,
   text = '',
-  { style = '', isTitle = false, classes = '', useHtmlLabels = true, isNode = true, width } = {}
+  {
+    style = '',
+    isTitle = false,
+    classes = '',
+    useHtmlLabels = true,
+    isNode = true,
+    width,
+    addSvgBackground = false,
+  } = {}
 ) => {
-  log.info('createText', text, style, isTitle, classes, useHtmlLabels, isNode);
+  log.info('createText', text, style, isTitle, classes, useHtmlLabels, isNode, addSvgBackground);
   if (useHtmlLabels) {
     // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?
     // text = text.replace(/\\n|\n/g, '<br />');
@@ -203,6 +225,8 @@ export const createText = (
     return vertexNode;
   } else {
     const structuredText = markdownToLines(text);
-    return createFormattedText(width, el, structuredText);
+
+    const svgLabel = createFormattedText(width, el, structuredText, addSvgBackground);
+    return svgLabel;
   }
 };

From 507a518a91dad6dee6da90952cb4ca19bd5286e6 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Wed, 29 Mar 2023 16:17:30 +0200
Subject: [PATCH 65/88] Bugfix for port selection when using diamonds in elk
 layout of flowcharts

---
 .../mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js     | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js b/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js
index 1b1dd3c50b..5849177b94 100644
--- a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js
+++ b/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js
@@ -13,7 +13,7 @@ import { interpolateToCurve, getStylesFromArray } from '../../../utils';
 import ELK from 'elkjs/lib/elk.bundled.js';
 const elk = new ELK();
 
-const portPos = {};
+let portPos = {};
 
 const conf = {};
 export const setConf = function (cnf) {
@@ -767,6 +767,7 @@ 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);

From 2dd6329872a2d509c40ff9be14aab4a48144a9e9 Mon Sep 17 00:00:00 2001
From: Remco Haszing <remcohaszing@gmail.com>
Date: Wed, 29 Mar 2023 16:55:58 +0200
Subject: [PATCH 66/88] Define and export the Mermaid type
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This represents the type of the default export. This is useful when it’s
being passed around or declared as a global.
---
 packages/mermaid/src/mermaid.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/src/mermaid.ts b/packages/mermaid/src/mermaid.ts
index bd99877b68..4b02adb1cc 100644
--- a/packages/mermaid/src/mermaid.ts
+++ b/packages/mermaid/src/mermaid.ts
@@ -392,7 +392,7 @@ const render = (id: string, text: string, container?: Element): Promise<RenderRe
   });
 };
 
-const mermaid: {
+export interface Mermaid {
   startOnLoad: boolean;
   parseError?: ParseErrorFunction;
   mermaidAPI: typeof mermaidAPI;
@@ -405,7 +405,9 @@ const mermaid: {
   contentLoaded: typeof contentLoaded;
   setParseErrorHandler: typeof setParseErrorHandler;
   detectType: typeof detectType;
-} = {
+}
+
+const mermaid: Mermaid = {
   startOnLoad: true,
   mermaidAPI,
   parse,

From 2896865163df2eac8854b7a8b8ae38bf4601e688 Mon Sep 17 00:00:00 2001
From: Steph <steph@huynhicode.dev>
Date: Wed, 29 Mar 2023 14:23:44 -0700
Subject: [PATCH 67/88] add latest news section

---
 .../mermaid/src/docs/.vitepress/config.ts     | 24 ++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/packages/mermaid/src/docs/.vitepress/config.ts b/packages/mermaid/src/docs/.vitepress/config.ts
index f40cf11da2..040b6a71aa 100644
--- a/packages/mermaid/src/docs/.vitepress/config.ts
+++ b/packages/mermaid/src/docs/.vitepress/config.ts
@@ -28,7 +28,10 @@ export default defineConfig({
     },
     socialLinks: [
       { icon: 'github', link: 'https://github.com/mermaid-js/mermaid' },
-      { icon: 'slack', link: 'https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE' },
+      {
+        icon: 'slack',
+        link: 'https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE',
+      },
       {
         icon: {
           svg: '<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 490.16 490.16"><defs><mask id="Mask"><rect x="0" y="0" width="490.16" height="490.16" fill="white" /><path fill="black" d="M407.48,111.18A165.2,165.2,0,0,0,245.08,220,165.2,165.2,0,0,0,82.68,111.18a165.5,165.5,0,0,0,72.06,143.64,88.81,88.81,0,0,1,38.53,73.45v50.86H296.9V328.27a88.8,88.8,0,0,1,38.52-73.45,165.41,165.41,0,0,0,72.06-143.64Z"/><path fill="black" d="M160.63,328.27a56.09,56.09,0,0,0-24.27-46.49,198.74,198.74,0,0,1-28.54-23.66A196.87,196.87,0,0,1,82.53,227V379.13h78.1Z"/><path fill="black" d="M329.53,328.27a56.09,56.09,0,0,1,24.27-46.49,198.74,198.74,0,0,0,28.54-23.66A196.87,196.87,0,0,0,407.63,227V379.13h-78.1Z"/></mask><style>.cls-1{fill:#76767B;}.cls-1:hover{fill:#FF3570}</style></defs><rect class="cls-1" width="490.16" height="490.16" rx="84.61" mask="url(#Mask)" /></svg>',
@@ -48,6 +51,11 @@ function nav() {
       activeMatch: '/config/',
     },
     { text: 'Integrations', link: '/ecosystem/integrations', activeMatch: '/ecosystem/' },
+    {
+      text: 'Latest News',
+      link: '/news/announcements',
+      activeMatch: '/announcements',
+    },
     {
       text: version,
       items: [
@@ -86,6 +94,7 @@ function sidebarAll() {
     ...sidebarEcosystem(),
     ...sidebarConfig(),
     ...sidebarCommunity(),
+    ...sidebarNews(),
   ];
 }
 
@@ -168,3 +177,16 @@ function sidebarCommunity() {
     },
   ];
 }
+
+function sidebarNews() {
+  return [
+    {
+      text: '📰 Latest News',
+      collapsible: true,
+      items: [
+        { text: 'Announcements', link: '/news/announcements' },
+        { text: 'Blog', link: '/news/blog' },
+      ],
+    },
+  ];
+}

From 8bd2c0f272e435fde35ab8dddec15306e10cbff4 Mon Sep 17 00:00:00 2001
From: Steph <steph@huynhicode.dev>
Date: Wed, 29 Mar 2023 14:27:04 -0700
Subject: [PATCH 68/88] create announcements and blog pages

---
 docs/news/announcements.md                      | 7 +++++++
 docs/news/blog.md                               | 7 +++++++
 packages/mermaid/src/docs/news/announcements.md | 1 +
 packages/mermaid/src/docs/news/blog.md          | 1 +
 4 files changed, 16 insertions(+)
 create mode 100644 docs/news/announcements.md
 create mode 100644 docs/news/blog.md
 create mode 100644 packages/mermaid/src/docs/news/announcements.md
 create mode 100644 packages/mermaid/src/docs/news/blog.md

diff --git a/docs/news/announcements.md b/docs/news/announcements.md
new file mode 100644
index 0000000000..e5c5884650
--- /dev/null
+++ b/docs/news/announcements.md
@@ -0,0 +1,7 @@
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/news/announcements.md](../../packages/mermaid/src/docs/news/announcements.md).
+
+# Announcements
diff --git a/docs/news/blog.md b/docs/news/blog.md
new file mode 100644
index 0000000000..8daccfa50d
--- /dev/null
+++ b/docs/news/blog.md
@@ -0,0 +1,7 @@
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/news/blog.md](../../packages/mermaid/src/docs/news/blog.md).
+
+# Blog
diff --git a/packages/mermaid/src/docs/news/announcements.md b/packages/mermaid/src/docs/news/announcements.md
new file mode 100644
index 0000000000..a7a6c48291
--- /dev/null
+++ b/packages/mermaid/src/docs/news/announcements.md
@@ -0,0 +1 @@
+# Announcements
diff --git a/packages/mermaid/src/docs/news/blog.md b/packages/mermaid/src/docs/news/blog.md
new file mode 100644
index 0000000000..05761ac57f
--- /dev/null
+++ b/packages/mermaid/src/docs/news/blog.md
@@ -0,0 +1 @@
+# Blog

From 4c0980629c0cf220b76885bf134742f7605009d3 Mon Sep 17 00:00:00 2001
From: Steph <steph@huynhicode.dev>
Date: Wed, 29 Mar 2023 14:46:19 -0700
Subject: [PATCH 69/88] add blog page content

---
 docs/news/blog.md                      | 24 ++++++++++++++++++++++++
 packages/mermaid/src/docs/news/blog.md | 24 ++++++++++++++++++++++++
 2 files changed, 48 insertions(+)

diff --git a/docs/news/blog.md b/docs/news/blog.md
index 8daccfa50d..dc6f3f635b 100644
--- a/docs/news/blog.md
+++ b/docs/news/blog.md
@@ -5,3 +5,27 @@
 > ## Please edit the corresponding file in [/packages/mermaid/src/docs/news/blog.md](../../packages/mermaid/src/docs/news/blog.md).
 
 # Blog
+
+## [Mermaid Chart officially launched with sharable diagram links and presentation mode](https://www.mermaidchart.com/blog/posts/mermaid-chart-officially-launched-with-sharable-diagram-links-and-presentation-mode/)
+
+27 March 2023 · 2 mins
+
+Exciting news for all Mermaid OSS fans: Mermaid Chart has officially launched with Mermaid Chart!
+
+## [If you're not excited about ChatGPT, then you're not being creative](https://www.mermaidchart.com/blog/posts/if-youre-not-excited-about-chatgpt-then-youre-not-being-creative-enough/)
+
+8 March 2023 · 9 mins
+
+The hype around AI in general and ChatGPT, in particular, is so intense that it’s very understandable to assume the hype train is driving straight toward the trough of disillusionment.
+
+## [Flow charts are O(n)2 complex, so don't go over 100 connections](https://www.mermaidchart.com/blog/posts/flow-charts-are-on2-complex-so-dont-go-over-100-connections/)
+
+1 March 2023 · 12 mins
+
+Flowchart design is a game of balance: Read about the importance of dialling in the right level of detail and how to manage complexity in large flowcharts.
+
+## [Busting the myth that developers can't write](https://www.mermaidchart.com/blog/posts/busting-the-myth-that-developers-cant-write/)
+
+10 February 2023 · 10 mins
+
+Busting the myth that developers can’t write # It’s an annoying stereotype that developers don’t know how to write, speak, and otherwise communicate.
diff --git a/packages/mermaid/src/docs/news/blog.md b/packages/mermaid/src/docs/news/blog.md
index 05761ac57f..b835bbe358 100644
--- a/packages/mermaid/src/docs/news/blog.md
+++ b/packages/mermaid/src/docs/news/blog.md
@@ -1 +1,25 @@
 # Blog
+
+## [Mermaid Chart officially launched with sharable diagram links and presentation mode](https://www.mermaidchart.com/blog/posts/mermaid-chart-officially-launched-with-sharable-diagram-links-and-presentation-mode/)
+
+27 March 2023 · 2 mins
+
+Exciting news for all Mermaid OSS fans: Mermaid Chart has officially launched with Mermaid Chart!
+
+## [If you're not excited about ChatGPT, then you're not being creative](https://www.mermaidchart.com/blog/posts/if-youre-not-excited-about-chatgpt-then-youre-not-being-creative-enough/)
+
+8 March 2023 · 9 mins
+
+The hype around AI in general and ChatGPT, in particular, is so intense that it’s very understandable to assume the hype train is driving straight toward the trough of disillusionment.
+
+## [Flow charts are O(n)2 complex, so don't go over 100 connections](https://www.mermaidchart.com/blog/posts/flow-charts-are-on2-complex-so-dont-go-over-100-connections/)
+
+1 March 2023 · 12 mins
+
+Flowchart design is a game of balance: Read about the importance of dialling in the right level of detail and how to manage complexity in large flowcharts.
+
+## [Busting the myth that developers can't write](https://www.mermaidchart.com/blog/posts/busting-the-myth-that-developers-cant-write/)
+
+10 February 2023 · 10 mins
+
+Busting the myth that developers can’t write # It’s an annoying stereotype that developers don’t know how to write, speak, and otherwise communicate.

From 35366f79ac2d72bcd7d843e1727b0654dae92b2e Mon Sep 17 00:00:00 2001
From: Steph <steph@huynhicode.dev>
Date: Wed, 29 Mar 2023 14:48:09 -0700
Subject: [PATCH 70/88] add announcements page content

---
 docs/news/announcements.md                      | 2 ++
 packages/mermaid/src/docs/news/announcements.md | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/docs/news/announcements.md b/docs/news/announcements.md
index e5c5884650..90b3b35566 100644
--- a/docs/news/announcements.md
+++ b/docs/news/announcements.md
@@ -5,3 +5,5 @@
 > ## Please edit the corresponding file in [/packages/mermaid/src/docs/news/announcements.md](../../packages/mermaid/src/docs/news/announcements.md).
 
 # Announcements
+
+Stay tuned for some exciting announcements!
diff --git a/packages/mermaid/src/docs/news/announcements.md b/packages/mermaid/src/docs/news/announcements.md
index a7a6c48291..c6b6de5708 100644
--- a/packages/mermaid/src/docs/news/announcements.md
+++ b/packages/mermaid/src/docs/news/announcements.md
@@ -1 +1,3 @@
 # Announcements
+
+Stay tuned for some exciting announcements!

From 15af3ea5855924443cc2453bb248234ef581a19e Mon Sep 17 00:00:00 2001
From: Jeremy Funk <jeremy@kombo.dev>
Date: Wed, 29 Mar 2023 23:53:12 +0200
Subject: [PATCH 71/88] Update docs

---
 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 1423d008cc..a039fba387 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:662](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L662)
+[mermaidAPI.ts:663](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L663)
 
 ## Functions
 

From 48d267c6dced72e16ddd225ecfcbffcb0219f025 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Thu, 30 Mar 2023 22:08:50 +0530
Subject: [PATCH 72/88] fix(#4137): Cleanup comments before parsing

---
 docs/config/setup/modules/mermaidAPI.md       |  2 +-
 packages/mermaid/src/Diagram.ts               |  4 +-
 .../mermaid/src/diagram-api/comments.spec.ts  | 70 +++++++++++++++++++
 packages/mermaid/src/diagram-api/comments.ts  |  8 +++
 .../src/diagrams/er/parser/erDiagram.jison    |  4 --
 .../flowchart/parser/flow-comments.spec.js    | 21 +++---
 .../src/diagrams/flowchart/parser/flow.jison  |  2 -
 .../diagrams/flowchart/parser/flow.spec.js    |  3 +-
 packages/mermaid/src/mermaidAPI.ts            |  3 -
 9 files changed, 96 insertions(+), 21 deletions(-)
 create mode 100644 packages/mermaid/src/diagram-api/comments.spec.ts
 create mode 100644 packages/mermaid/src/diagram-api/comments.ts

diff --git a/docs/config/setup/modules/mermaidAPI.md b/docs/config/setup/modules/mermaidAPI.md
index b94fc8b946..4b8f57bd73 100644
--- a/docs/config/setup/modules/mermaidAPI.md
+++ b/docs/config/setup/modules/mermaidAPI.md
@@ -95,7 +95,7 @@ mermaid.initialize(config);
 
 #### Defined in
 
-[mermaidAPI.ts:662](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L662)
+[mermaidAPI.ts:659](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L659)
 
 ## Functions
 
diff --git a/packages/mermaid/src/Diagram.ts b/packages/mermaid/src/Diagram.ts
index 3010ce1302..dd26d8de8f 100644
--- a/packages/mermaid/src/Diagram.ts
+++ b/packages/mermaid/src/Diagram.ts
@@ -5,6 +5,7 @@ import { detectType, getDiagramLoader } from './diagram-api/detectType';
 import { extractFrontMatter } from './diagram-api/frontmatter';
 import { UnknownDiagramError } from './errors';
 import { DetailedError } from './utils';
+import { cleanupComments } from './diagram-api/comments';
 
 export type ParseErrorFunction = (err: string | DetailedError | unknown, hash?: any) => void;
 
@@ -43,7 +44,8 @@ export class Diagram {
     // Similarly, we can't do this in getDiagramFromText() because some code
     // calls diagram.db.clear(), which would reset anything set by
     // extractFrontMatter().
-    this.parser.parse = (text: string) => originalParse(extractFrontMatter(text, this.db));
+    this.parser.parse = (text: string) =>
+      originalParse(cleanupComments(extractFrontMatter(text, this.db)));
     this.parser.parser.yy = this.db;
     if (diagram.init) {
       diagram.init(cnf);
diff --git a/packages/mermaid/src/diagram-api/comments.spec.ts b/packages/mermaid/src/diagram-api/comments.spec.ts
new file mode 100644
index 0000000000..2435db0a01
--- /dev/null
+++ b/packages/mermaid/src/diagram-api/comments.spec.ts
@@ -0,0 +1,70 @@
+// tests to check that comments are removed
+
+import { cleanupComments } from './comments';
+import { describe, it, expect } from 'vitest';
+
+describe('comments', () => {
+  it('should remove comments', () => {
+    const text = `
+		
+%% This is a comment
+%% This is another comment
+graph TD
+	A-->B
+%% This is a comment
+`;
+    expect(cleanupComments(text)).toMatchInlineSnapshot(`
+			"
+
+			graph TD
+				A-->B
+
+			"
+		`);
+  });
+
+  it('should keep init statements when removing comments', () => {
+    const text = `
+%% This is a comment
+
+%% This is another comment
+%%{init: {'theme': 'forest'}}%%
+%%{init: {'theme': 'space after ending'}}%% 
+graph TD
+	A-->B
+
+	B-->C
+%% This is a comment
+`;
+    expect(cleanupComments(text)).toMatchInlineSnapshot(`
+			"
+
+			%%{init: {'theme': 'forest'}}%%
+			%%{init: {'theme': 'space after ending'}}%% 
+			graph TD
+				A-->B
+
+				B-->C
+
+			"
+		`);
+  });
+
+  it('should remove indented comments', () => {
+    const text = `
+%% This is a comment
+graph TD
+	A-->B
+	%% This is a comment
+	C-->D
+`;
+    expect(cleanupComments(text)).toMatchInlineSnapshot(`
+			"
+			graph TD
+				A-->B
+
+				C-->D
+			"
+		`);
+  });
+});
diff --git a/packages/mermaid/src/diagram-api/comments.ts b/packages/mermaid/src/diagram-api/comments.ts
new file mode 100644
index 0000000000..19fafe15c3
--- /dev/null
+++ b/packages/mermaid/src/diagram-api/comments.ts
@@ -0,0 +1,8 @@
+/**
+ * Remove all lines starting with `%%` from the text that don't contain a `%%{`
+ * @param text - The text to remove comments from
+ * @returns cleaned text
+ */
+export const cleanupComments = (text: string): string => {
+  return text.replace(/^\s*%%(?!{)[^\n]+/gm, '');
+};
diff --git a/packages/mermaid/src/diagrams/er/parser/erDiagram.jison b/packages/mermaid/src/diagrams/er/parser/erDiagram.jison
index d9f03c387a..8ffa87c632 100644
--- a/packages/mermaid/src/diagrams/er/parser/erDiagram.jison
+++ b/packages/mermaid/src/diagrams/er/parser/erDiagram.jison
@@ -19,8 +19,6 @@ accDescr\s*"{"\s*                                { this.begin("acc_descr_multili
 <type_directive>":"                                             { this.popState(); this.begin('arg_directive'); return ':'; }
 <type_directive,arg_directive>\}\%\%                            { this.popState(); this.popState(); return 'close_directive'; }
 <arg_directive>((?:(?!\}\%\%).|\n)*)                            return 'arg_directive';
-\%%(?!\{)[^\n]*                                                 /* skip comments */
-[^\}]\%\%[^\n]*                                                 /* skip comments */
 [\n]+                           return 'NEWLINE';
 \s+                             /* skip whitespace */
 [\s]+                           return 'SPACE';
@@ -35,8 +33,6 @@ accDescr\s*"{"\s*                                { this.begin("acc_descr_multili
 <block>[A-Za-z_][A-Za-z0-9\-_\[\]\(\)]*  return 'ATTRIBUTE_WORD'
 <block>\"[^"]*\"                return 'COMMENT';
 <block>[\n]+                    /* nothing */
-<block>\%%(?!\{)[^\n]*          /* skip comments in attribute block */
-<block>[^\}]\%\%[^\n]*          /* skip comments in attribute block */
 <block>"}"                      { this.popState(); return 'BLOCK_STOP'; }
 <block>.                        return yytext[0];
 
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-comments.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-comments.spec.js
index 7aeed304cc..cb1e4a9232 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-comments.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-comments.spec.js
@@ -1,6 +1,7 @@
 import flowDb from '../flowDb';
 import flow from './flow';
 import { setConfig } from '../../../config';
+import { cleanupComments } from '../../../diagram-api/comments';
 
 setConfig({
   securityLevel: 'strict',
@@ -13,7 +14,7 @@ describe('[Comments] when parsing', () => {
   });
 
   it('should handle comments', function () {
-    const res = flow.parser.parse('graph TD;\n%% Comment\n A-->B;');
+    const res = flow.parser.parse(cleanupComments('graph TD;\n%% Comment\n A-->B;'));
 
     const vert = flow.parser.yy.getVertices();
     const edges = flow.parser.yy.getEdges();
@@ -28,7 +29,7 @@ describe('[Comments] when parsing', () => {
   });
 
   it('should handle comments at the start', function () {
-    const res = flow.parser.parse('%% Comment\ngraph TD;\n A-->B;');
+    const res = flow.parser.parse(cleanupComments('%% Comment\ngraph TD;\n A-->B;'));
 
     const vert = flow.parser.yy.getVertices();
     const edges = flow.parser.yy.getEdges();
@@ -43,7 +44,7 @@ describe('[Comments] when parsing', () => {
   });
 
   it('should handle comments at the end', function () {
-    const res = flow.parser.parse('graph TD;\n A-->B\n %% Comment at the end\n');
+    const res = flow.parser.parse(cleanupComments('graph TD;\n A-->B\n %% Comment at the end\n'));
 
     const vert = flow.parser.yy.getVertices();
     const edges = flow.parser.yy.getEdges();
@@ -58,7 +59,7 @@ describe('[Comments] when parsing', () => {
   });
 
   it('should handle comments at the end no trailing newline', function () {
-    const res = flow.parser.parse('graph TD;\n A-->B\n%% Comment');
+    const res = flow.parser.parse(cleanupComments('graph TD;\n A-->B\n%% Comment'));
 
     const vert = flow.parser.yy.getVertices();
     const edges = flow.parser.yy.getEdges();
@@ -73,7 +74,7 @@ describe('[Comments] when parsing', () => {
   });
 
   it('should handle comments at the end many trailing newlines', function () {
-    const res = flow.parser.parse('graph TD;\n A-->B\n%% Comment\n\n\n');
+    const res = flow.parser.parse(cleanupComments('graph TD;\n A-->B\n%% Comment\n\n\n'));
 
     const vert = flow.parser.yy.getVertices();
     const edges = flow.parser.yy.getEdges();
@@ -88,7 +89,7 @@ describe('[Comments] when parsing', () => {
   });
 
   it('should handle no trailing newlines', function () {
-    const res = flow.parser.parse('graph TD;\n A-->B');
+    const res = flow.parser.parse(cleanupComments('graph TD;\n A-->B'));
 
     const vert = flow.parser.yy.getVertices();
     const edges = flow.parser.yy.getEdges();
@@ -103,7 +104,7 @@ describe('[Comments] when parsing', () => {
   });
 
   it('should handle many trailing newlines', function () {
-    const res = flow.parser.parse('graph TD;\n A-->B\n\n');
+    const res = flow.parser.parse(cleanupComments('graph TD;\n A-->B\n\n'));
 
     const vert = flow.parser.yy.getVertices();
     const edges = flow.parser.yy.getEdges();
@@ -118,7 +119,7 @@ describe('[Comments] when parsing', () => {
   });
 
   it('should handle a comment with blank rows in-between', function () {
-    const res = flow.parser.parse('graph TD;\n\n\n %% Comment\n A-->B;');
+    const res = flow.parser.parse(cleanupComments('graph TD;\n\n\n %% Comment\n A-->B;'));
 
     const vert = flow.parser.yy.getVertices();
     const edges = flow.parser.yy.getEdges();
@@ -134,7 +135,9 @@ describe('[Comments] when parsing', () => {
 
   it('should handle a comment with mermaid flowchart code in them', function () {
     const res = flow.parser.parse(
-      'graph TD;\n\n\n %% Test od>Odd shape]-->|Two line<br>edge comment|ro;\n A-->B;'
+      cleanupComments(
+        'graph TD;\n\n\n %% Test od>Odd shape]-->|Two line<br>edge comment|ro;\n A-->B;'
+      )
     );
 
     const vert = flow.parser.yy.getVertices();
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
index e2dad58818..0aeb30062d 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
@@ -27,8 +27,6 @@
 <type_directive>":"                                             { this.popState(); this.begin('arg_directive'); return ':'; }
 <type_directive,arg_directive>\}\%\%                            { this.popState(); this.popState(); return 'close_directive'; }
 <arg_directive>((?:(?!\}\%\%).|\n)*)                            return 'arg_directive';
-\%\%(?!\{)[^\n]*                                                /* skip comments */
-[^\}]\%\%[^\n]*                                                 /* skip comments */
 accTitle\s*":"\s*                                               { this.begin("acc_title");return 'acc_title'; }
 <acc_title>(?!\n|;|#)*[^\n]*                                    { this.popState(); return "acc_title_value"; }
 accDescr\s*":"\s*                                               { this.begin("acc_descr");return 'acc_descr'; }
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow.spec.js
index 6b440da798..692e72f372 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow.spec.js
@@ -1,6 +1,7 @@
 import flowDb from '../flowDb';
 import flow from './flow';
 import { setConfig } from '../../../config';
+import { cleanupComments } from '../../../diagram-api/comments';
 
 setConfig({
   securityLevel: 'strict',
@@ -13,7 +14,7 @@ describe('parsing a flow chart', function () {
   });
 
   it('should handle a trailing whitespaces after statements', function () {
-    const res = flow.parser.parse('graph TD;\n\n\n %% Comment\n A-->B; \n B-->C;');
+    const res = flow.parser.parse(cleanupComments('graph TD;\n\n\n %% Comment\n A-->B; \n B-->C;'));
 
     const vert = flow.parser.yy.getVertices();
     const edges = flow.parser.yy.getEdges();
diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts
index dba6294775..1b440672a6 100644
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -399,9 +399,6 @@ const render = async function (
   // clean up text CRLFs
   text = text.replace(/\r\n?/g, '\n'); // parser problems on CRLF ignore all CR and leave LF;;
 
-  // eslint-disable-next-line unicorn/better-regex
-  text = text.replace(/\s*%%[^{\ninit].*\n/gm, '\n'); // remove comments from text to avoid issues with parser
-
   const idSelector = '#' + id;
   const iFrameID = 'i' + id;
   const iFrameID_selector = '#' + iFrameID;

From 46ab6f46f2cdbe0993736c6b0d5bfc2415da9c89 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Thu, 30 Mar 2023 23:09:46 +0530
Subject: [PATCH 73/88] fix(#4256): Keep error diagram on screen

---
 .../integration/rendering/erDiagram.spec.js   | 16 --------
 .../rendering/errorDiagram.spec.js            | 36 ++++++++++++++++++
 demos/error.html                              | 38 +++++++++++++++++++
 .../src/diagram-api/diagram-orchestration.ts  |  6 ++-
 .../src/diagrams/error/errorDetector.ts       | 20 ----------
 .../src/diagrams/error/errorDiagram.ts        |  2 +
 .../src/diagrams/error/errorRenderer.ts       |  8 ++--
 packages/mermaid/src/mermaidAPI.ts            |  8 ++--
 8 files changed, 87 insertions(+), 47 deletions(-)
 create mode 100644 cypress/integration/rendering/errorDiagram.spec.js
 create mode 100644 demos/error.html
 delete mode 100644 packages/mermaid/src/diagrams/error/errorDetector.ts

diff --git a/cypress/integration/rendering/erDiagram.spec.js b/cypress/integration/rendering/erDiagram.spec.js
index df1fac0cd3..faa5116267 100644
--- a/cypress/integration/rendering/erDiagram.spec.js
+++ b/cypress/integration/rendering/erDiagram.spec.js
@@ -10,7 +10,6 @@ describe('Entity Relationship Diagram', () => {
       `,
       { logLevel: 1 }
     );
-    cy.get('svg');
   });
 
   it('should render an ER diagram with a recursive relationship', () => {
@@ -23,7 +22,6 @@ describe('Entity Relationship Diagram', () => {
       `,
       { logLevel: 1 }
     );
-    cy.get('svg');
   });
 
   it('should render an ER diagram with multiple relationships between the same two entities', () => {
@@ -35,7 +33,6 @@ describe('Entity Relationship Diagram', () => {
       `,
       { logLevel: 1 }
     );
-    cy.get('svg');
   });
 
   it('should render a cyclical ER diagram', () => {
@@ -48,7 +45,6 @@ describe('Entity Relationship Diagram', () => {
       `,
       { logLevel: 1 }
     );
-    cy.get('svg');
   });
 
   it('should render a not-so-simple ER diagram', () => {
@@ -66,7 +62,6 @@ describe('Entity Relationship Diagram', () => {
       `,
       { logLevel: 1 }
     );
-    cy.get('svg');
   });
 
   it('should render multiple ER diagrams', () => {
@@ -85,7 +80,6 @@ describe('Entity Relationship Diagram', () => {
       ],
       { logLevel: 1 }
     );
-    cy.get('svg');
   });
 
   it('should render an ER diagram with blank or empty labels', () => {
@@ -98,7 +92,6 @@ describe('Entity Relationship Diagram', () => {
       `,
       { logLevel: 1 }
     );
-    cy.get('svg');
   });
 
   it('should render an ER diagrams when useMaxWidth is true (default)', () => {
@@ -151,7 +144,6 @@ describe('Entity Relationship Diagram', () => {
       `,
       { er: { useMaxWidth: false } }
     );
-    cy.get('svg');
   });
 
   it('should render entities with and without attributes', () => {
@@ -164,7 +156,6 @@ describe('Entity Relationship Diagram', () => {
       `,
       { logLevel: 1 }
     );
-    cy.get('svg');
   });
 
   it('should render entities with generic and array attributes', () => {
@@ -179,7 +170,6 @@ describe('Entity Relationship Diagram', () => {
       `,
       { logLevel: 1 }
     );
-    cy.get('svg');
   });
 
   it('should render entities with length in attributes type', () => {
@@ -193,7 +183,6 @@ describe('Entity Relationship Diagram', () => {
       `,
       { logLevel: 1 }
     );
-    cy.get('svg');
   });
 
   it('should render entities and attributes with big and small entity names', () => {
@@ -209,7 +198,6 @@ describe('Entity Relationship Diagram', () => {
       `,
       { logLevel: 1 }
     );
-    cy.get('svg');
   });
 
   it('should render entities with keys', () => {
@@ -228,7 +216,6 @@ describe('Entity Relationship Diagram', () => {
       `,
       { logLevel: 1 }
     );
-    cy.get('svg');
   });
 
   it('should render entities with comments', () => {
@@ -247,7 +234,6 @@ describe('Entity Relationship Diagram', () => {
       `,
       { logLevel: 1 }
     );
-    cy.get('svg');
   });
 
   it('should render entities with keys and comments', () => {
@@ -267,7 +253,6 @@ describe('Entity Relationship Diagram', () => {
       `,
       { logLevel: 1 }
     );
-    cy.get('svg');
   });
 
   it('should render entities with aliases', () => {
@@ -285,7 +270,6 @@ describe('Entity Relationship Diagram', () => {
       `,
       { logLevel: 1 }
     );
-    cy.get('svg');
   });
 
   it('1433: should render a simple ER diagram with a title', () => {
diff --git a/cypress/integration/rendering/errorDiagram.spec.js b/cypress/integration/rendering/errorDiagram.spec.js
new file mode 100644
index 0000000000..89b8403a4a
--- /dev/null
+++ b/cypress/integration/rendering/errorDiagram.spec.js
@@ -0,0 +1,36 @@
+import { imgSnapshotTest } from '../../helpers/util';
+
+describe('Error Diagrams', () => {
+  it('should render a simple ER diagram', () => {
+    imgSnapshotTest(
+      `
+      error
+      `,
+      { logLevel: 1 }
+    );
+  });
+
+  it('should render error diagram for actual errors', () => {
+    imgSnapshotTest(
+      `
+    flowchart TD
+      A[Christmas] --|Get money| B(Go shopping)
+      `,
+      { logLevel: 1 }
+    );
+  });
+
+  it('should render error for wrong ER diagram', () => {
+    imgSnapshotTest(
+      `
+    erDiagram
+        ATLAS-ORGANIZATION ||--|{ ATLAS-PROJECTS : "has many"
+        ATLAS-PROJECTS ||--|{ MONGODB-CLUSTERS : "has many"
+        ATLAS-PROJECTS ||--|{ ATLAS-TEAMS : "has many"
+        MONGODB-CLUSTERS ||..|{
+        ATLAS-TEAMS ||..|{
+      `,
+      { logLevel: 1 }
+    );
+  });
+});
diff --git a/demos/error.html b/demos/error.html
new file mode 100644
index 0000000000..2d6d1b01f5
--- /dev/null
+++ b/demos/error.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>Error | Mermaid Quick Test Page</title>
+    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
+  </head>
+
+  <body>
+    <pre class="mermaid">
+      erDiagram
+        ATLAS-ORGANIZATION ||--|{ ATLAS-PROJECTS : "has many"
+        ATLAS-PROJECTS ||--|{ MONGODB-CLUSTERS : "has many"
+        ATLAS-PROJECTS ||--|{ ATLAS-TEAMS : "has many"
+    </pre>
+    <pre class="mermaid">
+      erDiagram
+        ATLAS-ORGANIZATION ||--|{ ATLAS-PROJECTS : "has many"
+        ATLAS-PROJECTS ||--|{ MONGODB-CLUSTERS : "has many"
+        ATLAS-PROJECTS ||--|{ ATLAS-TEAMS : "has many"
+        MONGODB-CLUSTERS ||..|{
+        ATLAS-TEAMS ||..|{
+    </pre>
+    <hr />
+    <pre class="mermaid">
+    flowchart TD
+      A[Christmas] -->|Get money| B(Go shopping)
+    </pre>
+    <pre class="mermaid">
+    flowchart TD
+      A[Christmas] --|Get money| B(Go shopping)
+    </pre>
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
+    </script>
+  </body>
+</html>
diff --git a/packages/mermaid/src/diagram-api/diagram-orchestration.ts b/packages/mermaid/src/diagram-api/diagram-orchestration.ts
index 73bfcf084d..a88a34f193 100644
--- a/packages/mermaid/src/diagram-api/diagram-orchestration.ts
+++ b/packages/mermaid/src/diagram-api/diagram-orchestration.ts
@@ -13,7 +13,7 @@ import classDiagramV2 from '../diagrams/class/classDetector-V2';
 import state from '../diagrams/state/stateDetector';
 import stateV2 from '../diagrams/state/stateDetector-V2';
 import journey from '../diagrams/user-journey/journeyDetector';
-import error from '../diagrams/error/errorDetector';
+import errorDiagram from '../diagrams/error/errorDiagram';
 import flowchartElk from '../diagrams/flowchart/elk/detector';
 import timeline from '../diagrams/timeline/detector';
 import mindmap from '../diagrams/mindmap/detector';
@@ -28,6 +28,9 @@ export const addDiagrams = () => {
   // This is added here to avoid race-conditions.
   // We could optimize the loading logic somehow.
   hasLoadedDiagrams = true;
+  registerDiagram('error', errorDiagram, (text) => {
+    return text.toLowerCase().trim() === 'error';
+  });
   registerDiagram(
     '---',
     // --- diagram type may appear if YAML front-matter is not parsed correctly
@@ -57,7 +60,6 @@ export const addDiagrams = () => {
   );
   // Ordering of detectors is important. The first one to return true will be used.
   registerLazyLoadedDiagrams(
-    error,
     c4,
     classDiagramV2,
     classDiagram,
diff --git a/packages/mermaid/src/diagrams/error/errorDetector.ts b/packages/mermaid/src/diagrams/error/errorDetector.ts
deleted file mode 100644
index 2bdcd70283..0000000000
--- a/packages/mermaid/src/diagrams/error/errorDetector.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types';
-
-const id = 'error';
-
-const detector: DiagramDetector = (text) => {
-  return text.toLowerCase().trim() === 'error';
-};
-
-const loader = async () => {
-  const { diagram } = await import('./errorDiagram');
-  return { id, diagram };
-};
-
-const plugin: ExternalDiagramDefinition = {
-  id,
-  detector,
-  loader,
-};
-
-export default plugin;
diff --git a/packages/mermaid/src/diagrams/error/errorDiagram.ts b/packages/mermaid/src/diagrams/error/errorDiagram.ts
index d081e10287..7b9f18c3b4 100644
--- a/packages/mermaid/src/diagrams/error/errorDiagram.ts
+++ b/packages/mermaid/src/diagrams/error/errorDiagram.ts
@@ -19,3 +19,5 @@ export const diagram: DiagramDefinition = {
     // no op
   },
 };
+
+export default diagram;
diff --git a/packages/mermaid/src/diagrams/error/errorRenderer.ts b/packages/mermaid/src/diagrams/error/errorRenderer.ts
index 60877cb8d0..046bcfdcf4 100644
--- a/packages/mermaid/src/diagrams/error/errorRenderer.ts
+++ b/packages/mermaid/src/diagrams/error/errorRenderer.ts
@@ -4,15 +4,13 @@ import { select } from 'd3';
 import { log } from '../../logger';
 import { getErrorMessage } from '../../utils';
 
-let conf = {};
-
 /**
  * Merges the value of `conf` with the passed `cnf`
  *
  * @param cnf - Config to merge
  */
-export const setConf = function (cnf: any) {
-  conf = { ...conf, ...cnf };
+export const setConf = function () {
+  // no-op
 };
 
 /**
@@ -78,7 +76,7 @@ export const draw = (_text: string, id: string, mermaidVersion: string) => {
       .attr('y', 250)
       .attr('font-size', '150px')
       .style('text-anchor', 'middle')
-      .text('Syntax error in graph');
+      .text('Syntax error in text');
     g.append('text') // text label for the x axis
       .attr('class', 'error-text')
       .attr('x', 1250)
diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts
index dba6294775..520bf8b4ee 100644
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -534,6 +534,10 @@ const render = async function (
 
   attachFunctions();
 
+  if (parseEncounteredException) {
+    throw parseEncounteredException;
+  }
+
   // -------------------------------------------------------------------------------
   // Remove the temporary HTML element if appropriate
   const tmpElementSelector = isSandboxed ? iFrameID_selector : enclosingDivID_selector;
@@ -542,10 +546,6 @@ const render = async function (
     node.remove();
   }
 
-  if (parseEncounteredException) {
-    throw parseEncounteredException;
-  }
-
   return {
     svg: svgCode,
     bindFunctions: diag.db.bindFunctions,

From 7739302ee80961f27a30d2c39d5494ca94fad54d Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Thu, 30 Mar 2023 23:28:41 +0530
Subject: [PATCH 74/88] fix uncaughexception in tests

---
 cypress/integration/rendering/errorDiagram.spec.js | 9 +++++++++
 cypress/platform/viewer.js                         | 6 ++----
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/cypress/integration/rendering/errorDiagram.spec.js b/cypress/integration/rendering/errorDiagram.spec.js
index 89b8403a4a..e837565d3a 100644
--- a/cypress/integration/rendering/errorDiagram.spec.js
+++ b/cypress/integration/rendering/errorDiagram.spec.js
@@ -1,6 +1,15 @@
 import { imgSnapshotTest } from '../../helpers/util';
 
 describe('Error Diagrams', () => {
+  beforeEach(() => {
+    cy.on('uncaught:exception', (err) => {
+      expect(err.message).to.include('Parse error');
+      // return false to prevent the error from
+      // failing this test
+      return false;
+    });
+  });
+
   it('should render a simple ER diagram', () => {
     imgSnapshotTest(
       `
diff --git a/cypress/platform/viewer.js b/cypress/platform/viewer.js
index 2e10935194..99533192d4 100644
--- a/cypress/platform/viewer.js
+++ b/cypress/platform/viewer.js
@@ -47,7 +47,6 @@ const contentLoaded = async function () {
     await mermaid2.registerExternalDiagrams([externalExample]);
     mermaid2.initialize(graphObj.mermaid);
     await mermaid2.run();
-    markRendered();
   }
 };
 
@@ -123,7 +122,6 @@ const contentLoadedApi = async function () {
       bindFunctions(div);
     }
   }
-  markRendered();
 };
 
 if (typeof document !== 'undefined') {
@@ -135,10 +133,10 @@ if (typeof document !== 'undefined') {
     function () {
       if (this.location.href.match('xss.html')) {
         this.console.log('Using api');
-        void contentLoadedApi();
+        void contentLoadedApi().finally(markRendered);
       } else {
         this.console.log('Not using api');
-        void contentLoaded();
+        void contentLoaded().finally(markRendered);
       }
     },
     false

From d16894daf492acb50d028a089c50b6381d21fddf Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 31 Mar 2023 00:18:53 +0530
Subject: [PATCH 75/88] test: add space before init

---
 .../mermaid/src/diagram-api/comments.spec.ts   | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/mermaid/src/diagram-api/comments.spec.ts b/packages/mermaid/src/diagram-api/comments.spec.ts
index 2435db0a01..4357b25c34 100644
--- a/packages/mermaid/src/diagram-api/comments.spec.ts
+++ b/packages/mermaid/src/diagram-api/comments.spec.ts
@@ -29,6 +29,7 @@ graph TD
 
 %% This is another comment
 %%{init: {'theme': 'forest'}}%%
+%%{ init: {'theme': 'space before init'}}%%
 %%{init: {'theme': 'space after ending'}}%% 
 graph TD
 	A-->B
@@ -37,17 +38,18 @@ graph TD
 %% This is a comment
 `;
     expect(cleanupComments(text)).toMatchInlineSnapshot(`
-			"
+      "
 
-			%%{init: {'theme': 'forest'}}%%
-			%%{init: {'theme': 'space after ending'}}%% 
-			graph TD
-				A-->B
+      %%{init: {'theme': 'forest'}}%%
+      %%{ init: {'theme': 'space before init'}}%%
+      %%{init: {'theme': 'space after ending'}}%% 
+      graph TD
+      	A-->B
 
-				B-->C
+      	B-->C
 
-			"
-		`);
+      "
+    `);
   });
 
   it('should remove indented comments', () => {

From 1945a629900c39877c4de123244c205e23509d3c Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 31 Mar 2023 00:25:33 +0530
Subject: [PATCH 76/88] fix: trimStart to text

---
 .../mermaid/src/diagram-api/comments.spec.ts  | 22 +++++++++----------
 packages/mermaid/src/diagram-api/comments.ts  |  2 +-
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/mermaid/src/diagram-api/comments.spec.ts b/packages/mermaid/src/diagram-api/comments.spec.ts
index 4357b25c34..366ba119c9 100644
--- a/packages/mermaid/src/diagram-api/comments.spec.ts
+++ b/packages/mermaid/src/diagram-api/comments.spec.ts
@@ -14,13 +14,13 @@ graph TD
 %% This is a comment
 `;
     expect(cleanupComments(text)).toMatchInlineSnapshot(`
-			"
+      "
 
-			graph TD
-				A-->B
+      graph TD
+      	A-->B
 
-			"
-		`);
+      "
+    `);
   });
 
   it('should keep init statements when removing comments', () => {
@@ -61,12 +61,12 @@ graph TD
 	C-->D
 `;
     expect(cleanupComments(text)).toMatchInlineSnapshot(`
-			"
-			graph TD
-				A-->B
+      "
+      graph TD
+      	A-->B
 
-				C-->D
-			"
-		`);
+      	C-->D
+      "
+    `);
   });
 });
diff --git a/packages/mermaid/src/diagram-api/comments.ts b/packages/mermaid/src/diagram-api/comments.ts
index 19fafe15c3..2ee6232de3 100644
--- a/packages/mermaid/src/diagram-api/comments.ts
+++ b/packages/mermaid/src/diagram-api/comments.ts
@@ -4,5 +4,5 @@
  * @returns cleaned text
  */
 export const cleanupComments = (text: string): string => {
-  return text.replace(/^\s*%%(?!{)[^\n]+/gm, '');
+  return text.trimStart().replace(/^\s*%%(?!{)[^\n]+/gm, '');
 };

From 006da82470c59989f7ce93968e9f773d2b54d164 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 31 Mar 2023 00:35:56 +0530
Subject: [PATCH 77/88] fix: Remove comment line completely

---
 .../mermaid/src/diagram-api/comments.spec.ts  | 42 ++++++++++++++-----
 packages/mermaid/src/diagram-api/comments.ts  |  2 +-
 2 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/packages/mermaid/src/diagram-api/comments.spec.ts b/packages/mermaid/src/diagram-api/comments.spec.ts
index 366ba119c9..a2c896079b 100644
--- a/packages/mermaid/src/diagram-api/comments.spec.ts
+++ b/packages/mermaid/src/diagram-api/comments.spec.ts
@@ -14,11 +14,8 @@ graph TD
 %% This is a comment
 `;
     expect(cleanupComments(text)).toMatchInlineSnapshot(`
-      "
-
-      graph TD
+      "graph TD
       	A-->B
-
       "
     `);
   });
@@ -38,16 +35,13 @@ graph TD
 %% This is a comment
 `;
     expect(cleanupComments(text)).toMatchInlineSnapshot(`
-      "
-
-      %%{init: {'theme': 'forest'}}%%
+      "%%{init: {'theme': 'forest'}}%%
       %%{ init: {'theme': 'space before init'}}%%
       %%{init: {'theme': 'space after ending'}}%% 
       graph TD
       	A-->B
 
       	B-->C
-
       "
     `);
   });
@@ -61,11 +55,39 @@ graph TD
 	C-->D
 `;
     expect(cleanupComments(text)).toMatchInlineSnapshot(`
+      "graph TD
+	A-->B
+	C-->D
       "
-      graph TD
+    `);
+  });
+
+  it('should remove empty newlines from start', () => {
+    const text = `
+
+
+
+
+%% This is a comment
+graph TD
+	A-->B
+`;
+    expect(cleanupComments(text)).toMatchInlineSnapshot(`
+      "graph TD
       	A-->B
+      "
+    `);
+  });
+
+  it('should remove comments at end of text with no newline', () => {
+    const text = `
+graph TD
+	A-->B
+%% This is a comment`;
 
-      	C-->D
+    expect(cleanupComments(text)).toMatchInlineSnapshot(`
+      "graph TD
+	A-->B
       "
     `);
   });
diff --git a/packages/mermaid/src/diagram-api/comments.ts b/packages/mermaid/src/diagram-api/comments.ts
index 2ee6232de3..be39b0a0f7 100644
--- a/packages/mermaid/src/diagram-api/comments.ts
+++ b/packages/mermaid/src/diagram-api/comments.ts
@@ -4,5 +4,5 @@
  * @returns cleaned text
  */
 export const cleanupComments = (text: string): string => {
-  return text.trimStart().replace(/^\s*%%(?!{)[^\n]+/gm, '');
+  return text.trimStart().replace(/^\s*%%(?!{)[^\n]+\n?/gm, '');
 };

From f9c0f1d46f412b18409cc4b136e84efa625f1ab4 Mon Sep 17 00:00:00 2001
From: knsv <knsv@users.noreply.github.com>
Date: Fri, 31 Mar 2023 06:46:34 +0000
Subject: [PATCH 78/88] Update docs

---
 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 5a5a63786c..9bc6d3056a 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:659](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L659)
+[mermaidAPI.ts:660](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L660)
 
 ## Functions
 

From 99f65813a1bcf7c36d5107c9d1b7e05d38096b98 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Mon, 3 Apr 2023 10:43:15 +0200
Subject: [PATCH 79/88] Syntax for markdown strings is a single backtick.

---
 cypress/platform/knsv2.html                   | 70 ++++++++++++-------
 .../interfaces/mermaidAPI.ParseOptions.md     |  2 +-
 .../interfaces/mermaidAPI.RenderResult.md     |  4 +-
 docs/config/setup/modules/mermaidAPI.md       | 22 +++---
 packages/mermaid/src/dagre-wrapper/nodes.js   |  1 -
 .../src/diagrams/flowchart/parser/flow.jison  |  6 +-
 .../src/diagrams/mindmap/parser/mindmap.jison |  6 +-
 packages/mermaid/src/mermaidAPI.ts            |  9 ++-
 8 files changed, 73 insertions(+), 47 deletions(-)

diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index 02a5ff5e64..4c160ca1b3 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -58,10 +58,30 @@
   </head>
   <body>
     <pre id="diagram" class="mermaid">
+flowchart LR
+    A:::someclass --> B[`The **cat** in the hat`]:::someclass
+    id1(Start)-->id2(Stop)
+    style id1 fill:#f9f,stroke:#333,stroke-width:4px
+    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
+    classDef someclass fill:#f96
+</pre
+    >
+    <pre id="diagram" class="mermaid">
+%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
+%%
+flowchart LR
+    A:::someclass --> B[`The **cat** in the hat`]:::someclass
+    id1(Start)-->id2(Stop)
+    style id1 fill:#f9f,stroke:#333,stroke-width:4px
+    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
+    classDef someclass fill:#f96
+</pre
+    >
+    <pre id="diagram" class="mermaid">
 %%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
 %%
 graph LR
-  a{"`The **cat** in the hat`"} -- 1o --> b
+  a{`The **cat** in the hat`} -- 1o --> b
   a -- 2o --> c
   a -- 3o --> d
   g --2i--> a
@@ -74,30 +94,30 @@
     <pre id="diagram" class="mermaid">
       %%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
 flowchart LR
-b("`The dog in **the** hog.(1)
-NL`") --"`1o **bold**`"--> c
+b(`The dog in **the** hog.(1)
+NL`) --`1o **bold**`--> c
 </pre
     >
     <pre id="diagram" class="mermaid">
 flowchart-elk LR
-b("`The dog in **the** hog.(1)
-NL`") --"`1o **bold**`"--> c
+b(`The dog in **the** hog.(1)
+NL`) --`1o **bold**`--> c
 </pre
     >
     <pre id="diagram" class="mermaid">
 flowchart-elk LR
-b("`The dog in **the** hog.(1).. a a a a *very long text* about it
+b(`The dog in **the** hog.(1).. a a a a *very long text* about it
 Word!
 
-Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. `") --> c
+Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. `) --> c
 </pre
     >
     <pre id="diagram" class="mermaid">
       %%{init: {"flowchart": {"htmlLabels": true}} }%%
 flowchart-elk LR
-b("`The dog in **the** hog(2)... a a a a *very long text* about it
+b(`The dog in **the** hog(2)... a a a a *very long text* about it
 Word!
-Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. `")
+Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. `)
 </pre
     >
     <pre id="diagram" class="mermaid">
@@ -113,34 +133,34 @@
     <pre id="diagram" class="mermaid">
 flowchart-elk LR
 subgraph "One"
-  a("`The **cat**
-  in the hat`") -- "1o" --> b{{"`The **dog** in the hog`"}}
+  a(`The **cat**
+  in the hat`) -- "1o" --> b{{`The **dog** in the hog`}}
 end
-subgraph "`**Two**`"
-  c("`The **cat**
-  in the hat`") -- "`1o **ipa**`" --> d("The dog in the hog")
+subgraph `**Two**`
+  c(`The **cat**
+  in the hat`) -- `1o **ipa**` --> d("The dog in the hog")
 end
 </pre
     >
     <pre id="diagram" class="mermaid">
 mindmap
-    id1["`**Start2**
-    second line 😎 with long text that is wrapping to the next line`"]
-      id2["`Child **with bold** text`"]
-      id3["`Children of which some
-      is using *italic type of* text`"]
+    id1[`**Start2**
+    second line 😎 with long text that is wrapping to the next line`]
+      id2[`Child **with bold** text`]
+      id3[`Children of which some
+      is using *italic type of* text`]
       id4[Child]
-      id5["`Child
+      id5[`Child
       Row
       and another
-      `"]
+      `]
     </pre>
     <pre id="diagram" class="mermaid">
 mindmap
-    id1["`**Start** with
-    a second line 😎`"]
-      id2["`The dog in **the** hog... a *very long text* about it
-Word!`"]
+    id1[`**Start** with
+    a second line 😎`]
+      id2[`The dog in **the** hog... a *very long text* about it
+Word!`]
     </pre>
     <pre id="diagram" class="mermaid">
 %%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
diff --git a/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md b/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md
index 93708863c2..8ab2598855 100644
--- a/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md
+++ b/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md
@@ -16,4 +16,4 @@
 
 #### Defined in
 
-[mermaidAPI.ts:70](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L70)
+[mermaidAPI.ts:77](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L77)
diff --git a/docs/config/setup/interfaces/mermaidAPI.RenderResult.md b/docs/config/setup/interfaces/mermaidAPI.RenderResult.md
index ec59f8796d..f84a51b87b 100644
--- a/docs/config/setup/interfaces/mermaidAPI.RenderResult.md
+++ b/docs/config/setup/interfaces/mermaidAPI.RenderResult.md
@@ -39,7 +39,7 @@ bindFunctions?.(div); // To call bindFunctions only if it's present.
 
 #### Defined in
 
-[mermaidAPI.ts:91](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L91)
+[mermaidAPI.ts:98](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L98)
 
 ---
 
@@ -51,4 +51,4 @@ The svg code for the rendered graph.
 
 #### Defined in
 
-[mermaidAPI.ts:81](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L81)
+[mermaidAPI.ts:88](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L88)
diff --git a/docs/config/setup/modules/mermaidAPI.md b/docs/config/setup/modules/mermaidAPI.md
index b94fc8b946..e2f036785f 100644
--- a/docs/config/setup/modules/mermaidAPI.md
+++ b/docs/config/setup/modules/mermaidAPI.md
@@ -25,7 +25,7 @@ Renames and re-exports [mermaidAPI](mermaidAPI.md#mermaidapi)
 
 #### Defined in
 
-[mermaidAPI.ts:75](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L75)
+[mermaidAPI.ts:82](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L82)
 
 ## Variables
 
@@ -95,7 +95,7 @@ mermaid.initialize(config);
 
 #### Defined in
 
-[mermaidAPI.ts:662](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L662)
+[mermaidAPI.ts:669](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L669)
 
 ## Functions
 
@@ -126,7 +126,7 @@ Return the last node appended
 
 #### Defined in
 
-[mermaidAPI.ts:305](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L305)
+[mermaidAPI.ts:312](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L312)
 
 ---
 
@@ -152,7 +152,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:263](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L263)
 
 ---
 
@@ -178,7 +178,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:192](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L192)
 
 ---
 
@@ -201,7 +201,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:240](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L240)
 
 ---
 
@@ -228,7 +228,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:176](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L176)
 
 ---
 
@@ -248,7 +248,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
 
 #### Defined in
 
-[mermaidAPI.ts:149](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L149)
+[mermaidAPI.ts:156](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L156)
 
 ---
 
@@ -268,7 +268,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
 
 #### Defined in
 
-[mermaidAPI.ts:120](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L120)
+[mermaidAPI.ts:127](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L127)
 
 ---
 
@@ -294,7 +294,7 @@ Put the svgCode into an iFrame. Return the iFrame code
 
 #### Defined in
 
-[mermaidAPI.ts:284](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L284)
+[mermaidAPI.ts:291](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L291)
 
 ---
 
@@ -319,4 +319,4 @@ Remove any existing elements from the given document
 
 #### Defined in
 
-[mermaidAPI.ts:355](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L355)
+[mermaidAPI.ts:362](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L362)
diff --git a/packages/mermaid/src/dagre-wrapper/nodes.js b/packages/mermaid/src/dagre-wrapper/nodes.js
index dd02257700..3e71f500a8 100644
--- a/packages/mermaid/src/dagre-wrapper/nodes.js
+++ b/packages/mermaid/src/dagre-wrapper/nodes.js
@@ -997,7 +997,6 @@ export const insertNode = (elem, node, dir) => {
     el.attr('class', 'node default ' + node.class);
   }
 
-  /* MC: 7e790808-9c49-4f74-93de-15c22872377f */
   nodeElems[node.id] = newEl;
 
   if (node.haveCallback) {
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
index 19ab80b05d..dd82cff4d2 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
@@ -38,9 +38,9 @@ accDescr\s*"{"\s*                                { this.begin("acc_descr_multili
 <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("md_string");}
+<md_string>[^`]+        { return "MD_STR";}
+<md_string>[`]          { this.popState();}
 ["]                     this.begin("string");
 <string>["]             this.popState();
 <string>[^"]*           return "STR";
diff --git a/packages/mermaid/src/diagrams/mindmap/parser/mindmap.jison b/packages/mermaid/src/diagrams/mindmap/parser/mindmap.jison
index 84a6191cf3..41ee33c912 100644
--- a/packages/mermaid/src/diagrams/mindmap/parser/mindmap.jison
+++ b/packages/mermaid/src/diagrams/mindmap/parser/mindmap.jison
@@ -42,9 +42,9 @@
 // !(-\()            return 'NODE_ID';
 [^\(\[\n\-\)\{\}]+         return 'NODE_ID';
 <<EOF>>            return 'EOF';
-<NODE>["][`]          { this.begin("NSTR2");}
-<NSTR2>[^`"]+        { return "NODE_DESCR";}
-<NSTR2>[`]["]          { this.popState();}
+<NODE>[`]          { this.begin("NSTR2");}
+<NSTR2>[^`]+        { return "NODE_DESCR";}
+<NSTR2>[`]          { this.popState();}
 <NODE>["]          { yy.getLogger().trace('Starting NSTR');this.begin("NSTR");}
 <NSTR>[^"]+        { yy.getLogger().trace('description:', yytext); return "NODE_DESCR";}
 <NSTR>["]          {this.popState();}
diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts
index dba6294775..039e8c596e 100644
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -32,7 +32,14 @@ import { setA11yDiagramInfo, addSVGa11yTitleDescription } from './accessibility'
 import { parseDirective } from './directiveUtils';
 
 // diagram names that support classDef statements
-const CLASSDEF_DIAGRAMS = ['graph', 'flowchart', 'flowchart-v2', 'stateDiagram', 'stateDiagram-v2'];
+const CLASSDEF_DIAGRAMS = [
+  'graph',
+  'flowchart',
+  'flowchart-v2',
+  'flowchart-elk',
+  'stateDiagram',
+  'stateDiagram-v2',
+];
 const MAX_TEXTLENGTH = 50_000;
 const MAX_TEXTLENGTH_EXCEEDED_MSG =
   'graph TB;a[Maximum text size in diagram exceeded];style a fill:#faa';

From 471c842a58204d19f1e71492db09474b6025ec2a Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Mon, 3 Apr 2023 12:12:51 +0200
Subject: [PATCH 80/88] Adding rendering tests and unit tests

---
 .../rendering/flowchart-elk.spec.js           | 145 ++++++++++++++++++
 .../rendering/flowchart-v2.spec.js            | 145 ++++++++++++++++++
 cypress/integration/rendering/mindmap.spec.ts |  13 ++
 cypress/platform/knsv2.html                   |  98 ++----------
 .../flowchart/parser/flow-md-string.spec.js   |  64 ++++++++
 .../src/diagrams/flowchart/parser/flow.jison  |   6 +-
 .../src/diagrams/mindmap/mindmapRenderer.js   |   5 +-
 .../src/diagrams/mindmap/parser/mindmap.jison |   6 +-
 8 files changed, 392 insertions(+), 90 deletions(-)
 create mode 100644 packages/mermaid/src/diagrams/flowchart/parser/flow-md-string.spec.js

diff --git a/cypress/integration/rendering/flowchart-elk.spec.js b/cypress/integration/rendering/flowchart-elk.spec.js
index 4140376514..68d8b3ce53 100644
--- a/cypress/integration/rendering/flowchart-elk.spec.js
+++ b/cypress/integration/rendering/flowchart-elk.spec.js
@@ -684,4 +684,149 @@ A --> B
       { titleTopMargin: 0 }
     );
   });
+  describe('Markdown strings flowchart-elk (#4220)', () => {
+    describe('html labels', () => {
+      it('With styling and classes', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": true}} }%%
+flowchart-elk LR
+    A:::someclass --> B["\`The **cat** in the hat\`"]:::someclass
+    id1(Start)-->id2(Stop)
+    style id1 fill:#f9f,stroke:#333,stroke-width:4px
+    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
+    classDef someclass fill:#f96
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+      it('With formatting in a node', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": true}} }%%
+flowchart-elk LR
+  a{"\`The **cat** in the hat\`"} -- 1o --> b
+  a -- 2o --> c
+  a -- 3o --> d
+  g --2i--> a
+  d --1i--> a
+  h --3i -->a
+  b --> d(The dog in the hog)
+  c --> d
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+      it('New line in node and formatted edge label', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": true}} }%%
+flowchart-elk LR
+b("\`The dog in **the** hog.(1)
+NL\`") --"\`1o **bold**\`"--> c
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+      it('Wrapping long text with a new line', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": true}} }%%
+flowchart-elk LR
+b(\`The dog in **the** hog.(1).. a a a a *very long text* about it
+Word!
+
+Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`) --> c
+
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+      it('Sub graphs and markdown strings', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": true}} }%%
+flowchart-elk LR
+subgraph "One"
+  a("\`The **cat**
+  in the hat\`") -- "1o" --> b{{"\`The **dog** in the hog\`"}}
+end
+subgraph "\`**Two**\`"
+  c("\`The **cat**
+  in the hat\`") -- "\`1o **ipa**\`" --> d("The dog in the hog")
+end
+
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+    });
+
+    describe('svg text labels', () => {
+      it('With styling and classes', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": false}} }%%
+flowchart-elk LR
+    A:::someclass --> B["\`The **cat** in the hat\`"]:::someclass
+    id1(Start)-->id2(Stop)
+    style id1 fill:#f9f,stroke:#333,stroke-width:4px
+    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
+    classDef someclass fill:#f96
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+      it('With formatting in a node', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": false}} }%%
+flowchart-elk LR
+  a{"\`The **cat** in the hat\`"} -- 1o --> b
+  a -- 2o --> c
+  a -- 3o --> d
+  g --2i--> a
+  d --1i--> a
+  h --3i -->a
+  b --> d(The dog in the hog)
+  c --> d
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+      it('New line in node and formatted edge label', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": false}} }%%
+flowchart-elk LR
+b("\`The dog in **the** hog.(1)
+NL\`") --"\`1o **bold**\`"--> c
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+      it('Wrapping long text with a new line', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": false}} }%%
+flowchart-elk LR
+b("\`The dog in **the** hog.(1).. a a a a *very long text* about it
+Word!
+
+Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`") --> c
+
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+      it('Sub graphs and markdown strings', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": false}} }%%
+flowchart-elk LR
+subgraph "One"
+  a("\`The **cat**
+  in the hat\`") -- "1o" --> b{{"\`The **dog** in the hog\`"}}
+end
+subgraph "\`**Two**\`"
+  c("\`The **cat**
+  in the hat\`") -- "\`1o **ipa**\`" --> d("The dog in the hog")
+end
+
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+    });
+  });
 });
diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js
index abdb222654..4513cc87dd 100644
--- a/cypress/integration/rendering/flowchart-v2.spec.js
+++ b/cypress/integration/rendering/flowchart-v2.spec.js
@@ -685,4 +685,149 @@ A ~~~ B
       { titleTopMargin: 0 }
     );
   });
+  describe('Markdown strings flowchart (#4220)', () => {
+    describe('html labels', () => {
+      it('With styling and classes', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": true}} }%%
+flowchart LR
+    A:::someclass --> B["\`The **cat** in the hat\`"]:::someclass
+    id1(Start)-->id2(Stop)
+    style id1 fill:#f9f,stroke:#333,stroke-width:4px
+    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
+    classDef someclass fill:#f96
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+      it('With formatting in a node', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": true}} }%%
+flowchart LR
+  a{"\`The **cat** in the hat\`"} -- 1o --> b
+  a -- 2o --> c
+  a -- 3o --> d
+  g --2i--> a
+  d --1i--> a
+  h --3i -->a
+  b --> d(The dog in the hog)
+  c --> d
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+      it('New line in node and formatted edge label', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": true}} }%%
+flowchart LR
+b("\`The dog in **the** hog.(1)
+NL\`") --"\`1o **bold**\`"--> c
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+      it('Wrapping long text with a new line', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": true}} }%%
+flowchart LR
+b("\`The dog in **the** hog.(1).. a a a a *very long text* about it
+Word!
+
+Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`") --> c
+
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+      it('Sub graphs and markdown strings', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": true}} }%%
+flowchart LR
+subgraph "One"
+  a("\`The **cat**
+  in the hat\`") -- "1o" --> b{{"\`The **dog** in the hog\`"}}
+end
+subgraph "\`**Two**\`"
+  c("\`The **cat**
+  in the hat\`") -- "\`1o **ipa**\`" --> d("The dog in the hog")
+end
+
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+    });
+
+    describe('svg text labels', () => {
+      it('With styling and classes', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": false}} }%%
+flowchart LR
+    A:::someclass --> B["\`The **cat** in the hat\`"]:::someclass
+    id1(Start)-->id2(Stop)
+    style id1 fill:#f9f,stroke:#333,stroke-width:4px
+    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
+    classDef someclass fill:#f96
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+      it('With formatting in a node', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": false}} }%%
+flowchart LR
+  a{"\`The **cat** in the hat\`"} -- 1o --> b
+  a -- 2o --> c
+  a -- 3o --> d
+  g --2i--> a
+  d --1i--> a
+  h --3i -->a
+  b --> d(The dog in the hog)
+  c --> d
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+      it('New line in node and formatted edge label', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": false}} }%%
+flowchart LR
+b("\`The dog in **the** hog.(1)
+NL\`") --"\`1o **bold**\`"--> c
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+      it('Wrapping long text with a new line', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": false}} }%%
+flowchart LR
+b("\`The dog in **the** hog.(1).. a a a a *very long text* about it
+Word!
+
+Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`") --> c
+
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+      it('Sub graphs and markdown strings', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": false}} }%%
+flowchart LR
+subgraph "One"
+  a("\`The **cat**
+  in the hat\`") -- "1o" --> b{{"\`The **dog** in the hog\`"}}
+end
+subgraph "\`**Two**\`"
+  c("\`The **cat**
+  in the hat\`") -- "\`1o **ipa**\`" --> d("The dog in the hog")
+end
+
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+    });
+  });
 });
diff --git a/cypress/integration/rendering/mindmap.spec.ts b/cypress/integration/rendering/mindmap.spec.ts
index 4663f6225b..94b3f9ca0e 100644
--- a/cypress/integration/rendering/mindmap.spec.ts
+++ b/cypress/integration/rendering/mindmap.spec.ts
@@ -223,5 +223,18 @@ mindmap
       shouldHaveRoot
     );
   });
+  describe('Markdown strings mindmaps (#4220)', () => {
+    it('Formatted label with linebreak and a wrapping label and emojis', () => {
+      imgSnapshotTest(
+        `mindmap
+    id1[\`**Start** with
+    a second line 😎\`]
+      id2[\`The dog in **the** hog... a *very long text* about it
+Word!\`]
+`,
+        { titleTopMargin: 0 }
+      );
+    });
+  });
   /* The end */
 });
diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index 4c160ca1b3..08a4c0e68e 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -58,91 +58,23 @@
   </head>
   <body>
     <pre id="diagram" class="mermaid">
-flowchart LR
-    A:::someclass --> B[`The **cat** in the hat`]:::someclass
-    id1(Start)-->id2(Stop)
-    style id1 fill:#f9f,stroke:#333,stroke-width:4px
-    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
-    classDef someclass fill:#f96
-</pre
-    >
-    <pre id="diagram" class="mermaid">
-%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
-%%
-flowchart LR
-    A:::someclass --> B[`The **cat** in the hat`]:::someclass
-    id1(Start)-->id2(Stop)
-    style id1 fill:#f9f,stroke:#333,stroke-width:4px
-    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
-    classDef someclass fill:#f96
-</pre
-    >
-    <pre id="diagram" class="mermaid">
-%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
-%%
-graph LR
-  a{`The **cat** in the hat`} -- 1o --> b
-  a -- 2o --> c
-  a -- 3o --> d
-  g --2i--> a
-  d --1i--> a
-  h --3i -->a
-  b --> d(The dog in the hog)
-  c --> d
-</pre
-    >
-    <pre id="diagram" class="mermaid">
-      %%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
-flowchart LR
-b(`The dog in **the** hog.(1)
-NL`) --`1o **bold**`--> c
-</pre
-    >
-    <pre id="diagram" class="mermaid">
-flowchart-elk LR
-b(`The dog in **the** hog.(1)
-NL`) --`1o **bold**`--> c
-</pre
-    >
-    <pre id="diagram" class="mermaid">
-flowchart-elk LR
-b(`The dog in **the** hog.(1).. a a a a *very long text* about it
-Word!
-
-Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. `) --> c
-</pre
-    >
-    <pre id="diagram" class="mermaid">
-      %%{init: {"flowchart": {"htmlLabels": true}} }%%
+      %%{init: {"flowchart": {"htmlLabels": false}} }%%
 flowchart-elk LR
 b(`The dog in **the** hog(2)... a a a a *very long text* about it
 Word!
 Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. `)
 </pre
     >
-    <pre id="diagram" class="mermaid">
-      %%{init: {"flowchart": {"htmlLabels": false}} }%%
+    <pre id="diagram" class="mermaid2">
 flowchart-elk LR
 b("The dog in the hog... a very<br/>long text about it<br/>Word!")
 </pre>
-    <pre id="diagram" class="mermaid">
-      %%{init: {"flowchart": {"htmlLabels": true}} }%%
+    <pre id="diagram" class="mermaid2">
 flowchart-elk LR
 b("The dog in the hog... a very<br/>long text about it<br/>Word!")
 </pre>
-    <pre id="diagram" class="mermaid">
-flowchart-elk LR
-subgraph "One"
-  a(`The **cat**
-  in the hat`) -- "1o" --> b{{`The **dog** in the hog`}}
-end
-subgraph `**Two**`
-  c(`The **cat**
-  in the hat`) -- `1o **ipa**` --> d("The dog in the hog")
-end
-</pre
     >
-    <pre id="diagram" class="mermaid">
+    <pre id="diagram" class="mermaid2">
 mindmap
     id1[`**Start2**
     second line 😎 with long text that is wrapping to the next line`]
@@ -157,12 +89,12 @@
     </pre>
     <pre id="diagram" class="mermaid">
 mindmap
-    id1[`**Start** with
-    a second line 😎`]
-      id2[`The dog in **the** hog... a *very long text* about it
-Word!`]
+    id1["`**Start** with
+    a second line 😎`"]
+      id2["`The dog in **the** hog... a *very long text* about it
+Word!`"]
     </pre>
-    <pre id="diagram" class="mermaid">
+    <pre id="diagram" class="mermaid2">
 %%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
 flowchart TB
   %% I could not figure out how to use double quotes in labels in Mermaid
@@ -218,7 +150,7 @@
 </pre
     >
     <br />
-    <pre id="diagram" class="mermaid">
+    <pre id="diagram" class="mermaid2">
 flowchart TB
   %% I could not figure out how to use double quotes in labels in Mermaid
   subgraph ibm[IBM Espresso CPU]
@@ -274,7 +206,7 @@
     >
     <br />
     &nbsp;
-    <pre id="diagram" class="mermaid">
+    <pre id="diagram" class="mermaid2">
       flowchart LR
   B1 --be be--x B2
   B1 --bo bo--o B3
@@ -307,7 +239,7 @@
   B6 --> B5
   </pre
     >
-    <pre id="diagram" class="mermaid">
+    <pre id="diagram" class="mermaid2">
 sequenceDiagram
     Customer->>+Stripe: Makes a payment request
     Stripe->>+Bank: Forwards the payment request to the bank
@@ -320,7 +252,7 @@
     Customer->>+Merchant: Receives goods or services
         </pre
     >
-    <pre id="diagram" class="mermaid">
+    <pre id="diagram" class="mermaid2">
 mindmap
   root((mindmap))
     Origins
@@ -340,7 +272,7 @@
       Mermaid
     </pre>
     <br />
-    <pre id="diagram" class="mermaid">
+    <pre id="diagram" class="mermaid2">
   example-diagram
     </pre>
 
@@ -368,7 +300,7 @@
           htmlLabels: false,
           // htmlLabels: true,
         },
-        htmlLabels: false,
+        // htmlLabels: true,
         gantt: {
           useMaxWidth: false,
         },
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
new file mode 100644
index 0000000000..005d257e06
--- /dev/null
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-md-string.spec.js
@@ -0,0 +1,64 @@
+import flowDb from '../flowDb';
+import flow from './flow';
+import { setConfig } from '../../../config';
+
+setConfig({
+  securityLevel: 'strict',
+});
+
+describe('parsing a flow chart with markdown strings', function () {
+  beforeEach(function () {
+    flow.parser.yy = flowDb;
+    flow.parser.yy.clear();
+  });
+
+  it('mardown formatting in nodes and labels', function () {
+    const res = flow.parser.parse(`flowchart
+A["\`The cat in **the** hat\`"]-- "\`The *bat* in the chat\`" -->B["The dog in the hog"] -- "The rat in the mat" -->C;`);
+
+    const vert = flow.parser.yy.getVertices();
+    const edges = flow.parser.yy.getEdges();
+
+    expect(vert['A'].id).toBe('A');
+    expect(vert['A'].text).toBe('The cat in **the** hat');
+    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(edges.length).toBe(2);
+    expect(edges[0].start).toBe('A');
+    expect(edges[0].end).toBe('B');
+    expect(edges[0].type).toBe('arrow_point');
+    expect(edges[0].text).toBe('The *bat* in the chat');
+    expect(edges[0].labelType).toBe('markdown');
+    expect(edges[1].start).toBe('B');
+    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');
+  });
+  it('mardown formatting in subgraphs', function () {
+    const res = flow.parser.parse(`flowchart LR
+subgraph "One"
+  a("\`The **cat**
+  in the hat\`") -- "1o" --> b{{"\`The **dog** in the hog\`"}}
+end
+subgraph "\`**Two**\`"
+  c("\`The **cat**
+  in the hat\`") -- "\`1o **ipa**\`" --> d("The dog in the hog")
+end`);
+
+    const subgraphs = flow.parser.yy.getSubGraphs();
+    expect(subgraphs.length).toBe(2);
+    const subgraph = subgraphs[0];
+
+    expect(subgraph.nodes.length).toBe(2);
+    expect(subgraph.title).toBe('One');
+    expect(subgraph.labelType).toBe('text');
+
+    const subgraph2 = subgraphs[1];
+    expect(subgraph2.nodes.length).toBe(2);
+    expect(subgraph2.title).toBe('**Two**');
+    expect(subgraph2.labelType).toBe('markdown');
+  });
+});
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
index dd82cff4d2..19ab80b05d 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
@@ -38,9 +38,9 @@ accDescr\s*"{"\s*                                { this.begin("acc_descr_multili
 <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("md_string");}
+<md_string>[^`"]+        { return "MD_STR";}
+<md_string>[`]["]          { this.popState();}
 ["]                     this.begin("string");
 <string>["]             this.popState();
 <string>[^"]*           return "STR";
diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js
index c5b5fede1f..a2a4def59c 100644
--- a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js
+++ b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js
@@ -167,12 +167,15 @@ function positionNodes(cy) {
 export const draw = async (text, id, version, diagObj) => {
   const conf = getConfig();
 
+  // console.log('Config: ', conf);
+  conf.htmlLabels = false;
+
   // This is done only for throwing the error if the text is not valid.
   diagObj.db.clear();
   // Parse the graph definition
   diagObj.parser.parse(text);
 
-  log.debug('Renering info diagram\n' + text);
+  log.debug('Renering mindmap diagram\n' + text, diagObj);
 
   const securityLevel = getConfig().securityLevel;
   // Handle root and Document for when rendering in sandbox mode
diff --git a/packages/mermaid/src/diagrams/mindmap/parser/mindmap.jison b/packages/mermaid/src/diagrams/mindmap/parser/mindmap.jison
index 41ee33c912..84a6191cf3 100644
--- a/packages/mermaid/src/diagrams/mindmap/parser/mindmap.jison
+++ b/packages/mermaid/src/diagrams/mindmap/parser/mindmap.jison
@@ -42,9 +42,9 @@
 // !(-\()            return 'NODE_ID';
 [^\(\[\n\-\)\{\}]+         return 'NODE_ID';
 <<EOF>>            return 'EOF';
-<NODE>[`]          { this.begin("NSTR2");}
-<NSTR2>[^`]+        { return "NODE_DESCR";}
-<NSTR2>[`]          { this.popState();}
+<NODE>["][`]          { this.begin("NSTR2");}
+<NSTR2>[^`"]+        { return "NODE_DESCR";}
+<NSTR2>[`]["]          { this.popState();}
 <NODE>["]          { yy.getLogger().trace('Starting NSTR');this.begin("NSTR");}
 <NSTR>[^"]+        { yy.getLogger().trace('description:', yytext); return "NODE_DESCR";}
 <NSTR>["]          {this.popState();}

From c777f9193d1c488e74a72f9447cb657895638b6d Mon Sep 17 00:00:00 2001
From: knsv <knsv@users.noreply.github.com>
Date: Mon, 3 Apr 2023 10:35:19 +0000
Subject: [PATCH 81/88] Update docs

---
 docs/config/setup/modules/defaultConfig.md | 2 +-
 docs/config/setup/modules/mermaidAPI.md    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/config/setup/modules/defaultConfig.md b/docs/config/setup/modules/defaultConfig.md
index 6493a93db1..ad8f90248c 100644
--- a/docs/config/setup/modules/defaultConfig.md
+++ b/docs/config/setup/modules/defaultConfig.md
@@ -14,7 +14,7 @@
 
 #### Defined in
 
-[defaultConfig.ts:2105](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L2105)
+[defaultConfig.ts:2115](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L2115)
 
 ---
 
diff --git a/docs/config/setup/modules/mermaidAPI.md b/docs/config/setup/modules/mermaidAPI.md
index 91ee30e2bb..c09402dbd2 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:669](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L669)
+[mermaidAPI.ts:667](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L667)
 
 ## Functions
 

From 5d536b99734386f63e8314c3a3f81aa4cd85d960 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Mon, 3 Apr 2023 14:41:13 +0200
Subject: [PATCH 82/88] Adding documentation for markdown strings

---
 cypress/platform/knsv2.html                   | 14 ++++---
 docs/syntax/flowchart.md                      | 38 +++++++++++++++++++
 docs/syntax/mindmap.md                        | 28 ++++++++++++++
 packages/mermaid/src/docs/syntax/flowchart.md | 25 ++++++++++++
 packages/mermaid/src/docs/syntax/mindmap.md   | 19 ++++++++++
 5 files changed, 118 insertions(+), 6 deletions(-)

diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index 08a4c0e68e..95f3c15bcd 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -60,9 +60,9 @@
     <pre id="diagram" class="mermaid">
       %%{init: {"flowchart": {"htmlLabels": false}} }%%
 flowchart-elk LR
-b(`The dog in **the** hog(2)... a a a a *very long text* about it
+b("`The dog in **the** hog(2)... a a a a *very long text* about it
 Word!
-Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. `)
+Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. `")
 </pre
     >
     <pre id="diagram" class="mermaid2">
@@ -89,10 +89,12 @@
     </pre>
     <pre id="diagram" class="mermaid">
 mindmap
-    id1["`**Start** with
-    a second line 😎`"]
-      id2["`The dog in **the** hog... a *very long text* about it
-Word!`"]
+    id1["`**Root** with
+a second line
+Unicode works too: 🤓`"]
+      id2["`The dog in **the** hog... a *very long text* that wraps to a new line`"]
+      id3[Regular labels still works]
+
     </pre>
     <pre id="diagram" class="mermaid2">
 %%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md
index c79f12b238..6f5b973e80 100644
--- a/docs/syntax/flowchart.md
+++ b/docs/syntax/flowchart.md
@@ -710,6 +710,44 @@ flowchart LR
   B1 --> B2
 ```
 
+## Markdown Strings
+
+The "Markdown Strings" feature enhances flowcharts and mind maps by offering a more versatile string type, which supports text formatting options such as bold and italics, and automatically wraps text within labels.
+
+```mermaid-example
+%%{init: {"flowchart": {"htmlLabels": false}} }%%
+flowchart LR
+subgraph "One"
+  a("`The **cat**
+  in the hat`") -- "edge label" --> b{{"`The **dog** in the hog`"}}
+end
+subgraph "`**Two**`"
+  c("`The **cat**
+  in the hat`") -- "`Bold **edge label**`" --> d("The dog in the hog")
+end
+```
+
+```mermaid
+%%{init: {"flowchart": {"htmlLabels": false}} }%%
+flowchart LR
+subgraph "One"
+  a("`The **cat**
+  in the hat`") -- "edge label" --> b{{"`The **dog** in the hog`"}}
+end
+subgraph "`**Two**`"
+  c("`The **cat**
+  in the hat`") -- "`Bold **edge label**`" --> d("The dog in the hog")
+end
+```
+
+Formatting:
+
+- For bold text, use double asterisks \*\* before and after the text.
+- For italics, use single asterisks \* before and after the text.
+- With traditional strings, you needed to add <br> tags for text to wrap in nodes. However, markdown strings automatically wrap text when it becomes too long and allows you to start a new line by simply using a newline character instead of a <br> tag.
+
+This feature is applicable to node labels, edge labels, and subgraph labels.
+
 ## Interaction
 
 It is possible to bind a click event to a node, the click can lead to either a javascript callback or to a link which will be opened in a new browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.
diff --git a/docs/syntax/mindmap.md b/docs/syntax/mindmap.md
index babe47756d..9687bbef77 100644
--- a/docs/syntax/mindmap.md
+++ b/docs/syntax/mindmap.md
@@ -254,6 +254,34 @@ Root
       C
 ```
 
+## Markdown Strings
+
+The "Markdown Strings" feature enhances mind maps by offering a more versatile string type, which supports text formatting options such as bold and italics, and automatically wraps text within labels.
+
+```mermaid-example
+mindmap
+    id1["`**Root** with
+a second line
+Unicode works too: 🤓`"]
+      id2["`The dog in **the** hog... a *very long text* that wraps to a new line`"]
+      id3[Regular labels still works]
+```
+
+```mermaid
+mindmap
+    id1["`**Root** with
+a second line
+Unicode works too: 🤓`"]
+      id2["`The dog in **the** hog... a *very long text* that wraps to a new line`"]
+      id3[Regular labels still works]
+```
+
+Formatting:
+
+- For bold text, use double asterisks \*\* before and after the text.
+- For italics, use single asterisks \* before and after the text.
+- With traditional strings, you needed to add <br> tags for text to wrap in nodes. However, markdown strings automatically wrap text when it becomes too long and allows you to start a new line by simply using a newline character instead of a <br> tag.
+
 ## Integrating with your library/website.
 
 Mindmap uses the experimental lazy loading & async rendering features which could change in the future. From version 9.4.0 this diagram is included in mermaid but use lazy loading in order to keep the size of mermaid down. This is important in order to be able to add additional diagrams going forward.
diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md
index 8e73f597b2..936607cbd9 100644
--- a/packages/mermaid/src/docs/syntax/flowchart.md
+++ b/packages/mermaid/src/docs/syntax/flowchart.md
@@ -446,6 +446,31 @@ flowchart LR
   B1 --> B2
 ```
 
+## Markdown Strings
+
+The "Markdown Strings" feature enhances flowcharts and mind maps by offering a more versatile string type, which supports text formatting options such as bold and italics, and automatically wraps text within labels.
+
+```mermaid-example
+%%{init: {"flowchart": {"htmlLabels": false}} }%%
+flowchart LR
+subgraph "One"
+  a("`The **cat**
+  in the hat`") -- "edge label" --> b{{"`The **dog** in the hog`"}}
+end
+subgraph "`**Two**`"
+  c("`The **cat**
+  in the hat`") -- "`Bold **edge label**`" --> d("The dog in the hog")
+end
+```
+
+Formatting:
+
+- For bold text, use double asterisks \*\* before and after the text.
+- For italics, use single asterisks \* before and after the text.
+- With traditional strings, you needed to add <br> tags for text to wrap in nodes. However, markdown strings automatically wrap text when it becomes too long and allows you to start a new line by simply using a newline character instead of a <br> tag.
+
+This feature is applicable to node labels, edge labels, and subgraph labels.
+
 ## Interaction
 
 It is possible to bind a click event to a node, the click can lead to either a javascript callback or to a link which will be opened in a new browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.
diff --git a/packages/mermaid/src/docs/syntax/mindmap.md b/packages/mermaid/src/docs/syntax/mindmap.md
index 1cb1f68d43..64a25821a6 100644
--- a/packages/mermaid/src/docs/syntax/mindmap.md
+++ b/packages/mermaid/src/docs/syntax/mindmap.md
@@ -162,6 +162,25 @@ Root
       C
 ```
 
+## Markdown Strings
+
+The "Markdown Strings" feature enhances mind maps by offering a more versatile string type, which supports text formatting options such as bold and italics, and automatically wraps text within labels.
+
+```mermaid-example
+mindmap
+    id1["`**Root** with
+a second line
+Unicode works too: 🤓`"]
+      id2["`The dog in **the** hog... a *very long text* that wraps to a new line`"]
+      id3[Regular labels still works]
+```
+
+Formatting:
+
+- For bold text, use double asterisks \*\* before and after the text.
+- For italics, use single asterisks \* before and after the text.
+- With traditional strings, you needed to add <br> tags for text to wrap in nodes. However, markdown strings automatically wrap text when it becomes too long and allows you to start a new line by simply using a newline character instead of a <br> tag.
+
 ## Integrating with your library/website.
 
 Mindmap uses the experimental lazy loading & async rendering features which could change in the future. From version 9.4.0 this diagram is included in mermaid but use lazy loading in order to keep the size of mermaid down. This is important in order to be able to add additional diagrams going forward.

From 815f4cab7343fb142631f6d84c27895ed8c539a2 Mon Sep 17 00:00:00 2001
From: Steph <steph@huynhicode.dev>
Date: Mon, 3 Apr 2023 10:48:59 -0700
Subject: [PATCH 83/88] add blog post

---
 docs/news/blog.md                      | 6 ++++++
 packages/mermaid/src/docs/news/blog.md | 6 ++++++
 2 files changed, 12 insertions(+)

diff --git a/docs/news/blog.md b/docs/news/blog.md
index dc6f3f635b..7c80b54816 100644
--- a/docs/news/blog.md
+++ b/docs/news/blog.md
@@ -6,6 +6,12 @@
 
 # Blog
 
+## [Automatic text wrapping in flowcharts is here!](https://wwww.mermaidchart.com/blog/posts/automatic-text-wrapping-in-flowcharts-is-here)
+
+3 April 2023 · 3 mins
+
+Markdown Strings reduce the hassle # Starting from v10.
+
 ## [Mermaid Chart officially launched with sharable diagram links and presentation mode](https://www.mermaidchart.com/blog/posts/mermaid-chart-officially-launched-with-sharable-diagram-links-and-presentation-mode/)
 
 27 March 2023 · 2 mins
diff --git a/packages/mermaid/src/docs/news/blog.md b/packages/mermaid/src/docs/news/blog.md
index b835bbe358..aa2b3ea7be 100644
--- a/packages/mermaid/src/docs/news/blog.md
+++ b/packages/mermaid/src/docs/news/blog.md
@@ -1,5 +1,11 @@
 # Blog
 
+## [Automatic text wrapping in flowcharts is here!](https://wwww.mermaidchart.com/blog/posts/automatic-text-wrapping-in-flowcharts-is-here)
+
+3 April 2023 · 3 mins
+
+Markdown Strings reduce the hassle # Starting from v10.
+
 ## [Mermaid Chart officially launched with sharable diagram links and presentation mode](https://www.mermaidchart.com/blog/posts/mermaid-chart-officially-launched-with-sharable-diagram-links-and-presentation-mode/)
 
 27 March 2023 · 2 mins

From 2b9872d656cea6d083f518dd8c4bb5b5d5cdb055 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Tue, 4 Apr 2023 08:29:15 +0200
Subject: [PATCH 84/88] Some styling fixes for markdown strings

---
 cypress/platform/knsv2.html                   | 40 ++++++++++---------
 packages/mermaid/package.json                 |  2 +-
 .../mermaid/src/diagrams/flowchart/styles.ts  |  6 +--
 3 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index 95f3c15bcd..9c95c54c35 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -29,9 +29,9 @@
       }
       .mermaid svg {
         /* font-size: 18px !important; */
-        background-color: #eee;
-        background-image: radial-gradient(#fff 1%, transparent 11%),
-          radial-gradient(#fff 1%, transparent 11%);
+        background-color: #efefef;
+        background-image: radial-gradient(#fff 51%, transparent 91%),
+          radial-gradient(#fff 51%, transparent 91%);
         background-size: 20px 20px;
         background-position: 0 0, 10px 10px;
         background-repeat: repeat;
@@ -58,20 +58,22 @@
   </head>
   <body>
     <pre id="diagram" class="mermaid">
-      %%{init: {"flowchart": {"htmlLabels": false}} }%%
-flowchart-elk LR
-b("`The dog in **the** hog(2)... a a a a *very long text* about it
-Word!
-Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. `")
-</pre
+flowchart LR
+    A[A text that needs to be wrapped wraps to another line]
+    B[A text that needs to be<br/>wrapped wraps to another line]
+    C["`A text that needs to be wrapped to another line`"]</pre>
+    <pre id="diagram" class="mermaid">
+flowchart LR
+    C["`A text
+        that needs
+        to be wrapped
+        in another
+        way`"]
+  </pre
     >
     <pre id="diagram" class="mermaid2">
 flowchart-elk LR
 b("The dog in the hog... a very<br/>long text about it<br/>Word!")
-</pre>
-    <pre id="diagram" class="mermaid2">
-flowchart-elk LR
-b("The dog in the hog... a very<br/>long text about it<br/>Word!")
 </pre>
     >
     <pre id="diagram" class="mermaid2">
@@ -89,11 +91,11 @@
     </pre>
     <pre id="diagram" class="mermaid">
 mindmap
-    id1["`**Root** with
-a second line
-Unicode works too: 🤓`"]
-      id2["`The dog in **the** hog... a *very long text* that wraps to a new line`"]
-      id3[Regular labels still works]
+    id1("`**Root**`"]
+      id2["`A formatted text... with **bold** and *italics*`"]
+      id3[Regular labels works as usual]
+      id4["`Emojis and unicode works too: 🤓
+      शान्तिः سلام  和平 `"]
 
     </pre>
     <pre id="diagram" class="mermaid2">
@@ -293,7 +295,7 @@
         // console.error('Mermaid error: ', err);
       };
       mermaid.initialize({
-        theme: 'forest',
+        // theme: 'forest',
         startOnLoad: true,
         logLevel: 0,
         flowchart: {
diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index 82a6417192..aba98aa22b 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "10.0.2",
+  "version": "10.1.0-rc.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/flowchart/styles.ts b/packages/mermaid/src/diagrams/flowchart/styles.ts
index 86ffcb7ed0..964505c2dc 100644
--- a/packages/mermaid/src/diagrams/flowchart/styles.ts
+++ b/packages/mermaid/src/diagrams/flowchart/styles.ts
@@ -23,11 +23,11 @@ const getStyles = (options: FlowChartStyleOptions) =>
   .cluster-label text {
     fill: ${options.titleColor};
   }
-  .cluster-label span {
+  .cluster-label span,p {
     color: ${options.titleColor};
   }
 
-  .label text,span {
+  .label text,span,p {
     fill: ${options.nodeTextColor || options.textColor};
     color: ${options.nodeTextColor || options.textColor};
   }
@@ -92,7 +92,7 @@ const getStyles = (options: FlowChartStyleOptions) =>
     fill: ${options.titleColor};
   }
 
-  .cluster span {
+  .cluster span,p {
     color: ${options.titleColor};
   }
   /* .cluster div {

From 1841346ff6ad308a80893c629f76e78b50b7e59a Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Tue, 4 Apr 2023 10:45:39 +0200
Subject: [PATCH 85/88] Fixing issues in mindmaps and class diagram notes after
 tests

---
 cypress/platform/knsv2.html                   | 24 +++++++++++++------
 packages/mermaid/src/dagre-wrapper/nodes.js   | 14 +++++++----
 .../src/diagrams/mindmap/mindmapRenderer.js   |  2 +-
 .../src/diagrams/mindmap/parser/mindmap.jison |  2 +-
 .../mermaid/src/diagrams/mindmap/svgDraw.js   |  3 ++-
 5 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index 9c95c54c35..936d8423fe 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -57,12 +57,12 @@
     </style>
   </head>
   <body>
-    <pre id="diagram" class="mermaid">
+    <pre id="diagram" class="mermaid2">
 flowchart LR
     A[A text that needs to be wrapped wraps to another line]
     B[A text that needs to be<br/>wrapped wraps to another line]
     C["`A text that needs to be wrapped to another line`"]</pre>
-    <pre id="diagram" class="mermaid">
+    <pre id="diagram" class="mermaid2">
 flowchart LR
     C["`A text
         that needs
@@ -71,11 +71,21 @@
         way`"]
   </pre
     >
-    <pre id="diagram" class="mermaid2">
-flowchart-elk LR
-b("The dog in the hog... a very<br/>long text about it<br/>Word!")
-</pre>
+    <pre id="diagram" class="mermaid">
+mindmap
+root
+  Child3(A node with an icon and with a long text that wraps to keep the node size in check)
+</pre
     >
+    <pre id="diagram" class="mermaid">
+      %%{init: {"theme": "forest"} }%%
+mindmap
+    id1[**Start2**<br/>end]
+      id2[**Start2**<br />end]
+      %% Another comment
+      id3[**Start2**<br>end] %% Comment
+      id4[**Start2**<br >end<br    >the very end]
+    </pre>
     <pre id="diagram" class="mermaid2">
 mindmap
     id1[`**Start2**
@@ -89,7 +99,7 @@
       and another
       `]
     </pre>
-    <pre id="diagram" class="mermaid">
+    <pre id="diagram" class="mermaid2">
 mindmap
     id1("`**Root**`"]
       id2["`A formatted text... with **bold** and *italics*`"]
diff --git a/packages/mermaid/src/dagre-wrapper/nodes.js b/packages/mermaid/src/dagre-wrapper/nodes.js
index 3e71f500a8..d5af81c1b0 100644
--- a/packages/mermaid/src/dagre-wrapper/nodes.js
+++ b/packages/mermaid/src/dagre-wrapper/nodes.js
@@ -316,15 +316,19 @@ const rect = (parent, node) => {
   // add the rect
   const rect = shapeSvg.insert('rect', ':first-child');
 
-  const totalWidth = bbox.width + node.padding * 2;
-  const totalHeight = bbox.height + node.padding * 2;
+  // const totalWidth = bbox.width + node.padding * 2;
+  // const totalHeight = bbox.height + node.padding * 2;
+  const totalWidth = bbox.width + node.padding;
+  const totalHeight = bbox.height + node.padding;
   rect
     .attr('class', 'basic label-container')
     .attr('style', node.style)
     .attr('rx', node.rx)
     .attr('ry', node.ry)
-    .attr('x', -bbox.width / 2 - node.padding)
-    .attr('y', -bbox.height / 2 - node.padding)
+    // .attr('x', -bbox.width / 2 - node.padding)
+    // .attr('y', -bbox.height / 2 - node.padding)
+    .attr('x', -bbox.width / 2 - halfPadding)
+    .attr('y', -bbox.height / 2 - halfPadding)
     .attr('width', totalWidth)
     .attr('height', totalHeight);
 
@@ -351,7 +355,7 @@ const rect = (parent, node) => {
 const labelRect = (parent, node) => {
   const { shapeSvg } = labelHelper(parent, node, 'label', true);
 
-  log.info('Classes = ', node.classes);
+  log.trace('Classes = ', node.classes);
   // add the rect
   const rect = shapeSvg.insert('rect', ':first-child');
 
diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js
index a2a4def59c..86260e1558 100644
--- a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js
+++ b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js
@@ -175,7 +175,7 @@ export const draw = async (text, id, version, diagObj) => {
   // Parse the graph definition
   diagObj.parser.parse(text);
 
-  log.debug('Renering mindmap diagram\n' + text, diagObj);
+  log.debug('Rendering mindmap diagram\n' + text, diagObj.parser);
 
   const securityLevel = getConfig().securityLevel;
   // Handle root and Document for when rendering in sandbox mode
diff --git a/packages/mermaid/src/diagrams/mindmap/parser/mindmap.jison b/packages/mermaid/src/diagrams/mindmap/parser/mindmap.jison
index 84a6191cf3..9dd046a3d6 100644
--- a/packages/mermaid/src/diagrams/mindmap/parser/mindmap.jison
+++ b/packages/mermaid/src/diagrams/mindmap/parser/mindmap.jison
@@ -18,7 +18,7 @@
 
 %%
 
-\s*\%\%.*          {yy.getLogger().trace('Found comment',yytext);}
+\s*\%\%.*          {yy.getLogger().trace('Found comment',yytext); return 'SPACELINE';}
 // \%\%[^\n]*\n                             /* skip comments */
 "mindmap"		       return 'MINDMAP';
 ":::"              { this.begin('CLASS'); }
diff --git a/packages/mermaid/src/diagrams/mindmap/svgDraw.js b/packages/mermaid/src/diagrams/mindmap/svgDraw.js
index 8b58c11a31..ab7dcc1e3b 100644
--- a/packages/mermaid/src/diagrams/mindmap/svgDraw.js
+++ b/packages/mermaid/src/diagrams/mindmap/svgDraw.js
@@ -217,7 +217,8 @@ export const drawNode = function (elem, node, fullSection, conf) {
 
   // Create the wrapped text element
   const textElem = nodeElem.append('g');
-  const newEl = createText(textElem, node.descr, {
+  const description = node.descr.replace(/(<br\/*>)/g, '\n');
+  const newEl = createText(textElem, description, {
     useHtmlLabels: htmlLabels,
     width: node.width,
     classes: 'mindmap-node-label',

From 1a56a18f9b0f8ec4bc95fa6cd4ac41e404bf1d98 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Tue, 4 Apr 2023 12:49:14 +0200
Subject: [PATCH 86/88] Fixing issues with centering of labels for subgraphs
 and handling of special characters in html strings

---
 cypress/platform/knsv2.html                   | 108 +++++++++++++++---
 .../mermaid/src/dagre-wrapper/clusters.js     |  19 ++-
 .../mermaid/src/dagre-wrapper/shapes/note.js  |   2 +-
 .../flowchart/elk/flowRenderer-elk.js         |   5 +-
 .../mermaid/src/rendering-util/createText.js  |  34 +++---
 .../rendering-util/handle-markdown-text.js    |   2 +
 6 files changed, 127 insertions(+), 43 deletions(-)

diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index 936d8423fe..5eaadffc49 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -57,6 +57,25 @@
     </style>
   </head>
   <body>
+    <pre id="diagram" class="mermaid">
+flowchart RL
+    subgraph "`one`"
+      a1 -- l1 --> a2
+      a1 -- l2 --> a2
+    end
+    </pre>
+    <pre id="diagram" class="mermaid">
+      %%{init: {"flowchart": {"htmlLabels":false}} }%%
+flowchart RL
+    subgraph "`one`"
+      a1 -- l1 --> a2
+      a1 -- l2 --> a2
+    end
+    </pre>
+    <pre id="diagram" class="mermaid">
+flowchart
+id["`A root with a long text that wraps to keep the node size in check. A root with a long text that wraps to keep the node size in check`"]</pre
+    >
     <pre id="diagram" class="mermaid2">
 flowchart LR
     A[A text that needs to be wrapped wraps to another line]
@@ -71,13 +90,18 @@
         way`"]
   </pre
     >
-    <pre id="diagram" class="mermaid">
+    <pre id="diagram" class="mermaid2">
+      classDiagram-v2
+        note "I love this diagram!\nDo you love it?"
+</pre
+    >
+    <pre id="diagram" class="mermaid2">
 mindmap
 root
   Child3(A node with an icon and with a long text that wraps to keep the node size in check)
 </pre
     >
-    <pre id="diagram" class="mermaid">
+    <pre id="diagram" class="mermaid2">
       %%{init: {"theme": "forest"} }%%
 mindmap
     id1[**Start2**<br/>end]
@@ -88,16 +112,16 @@
     </pre>
     <pre id="diagram" class="mermaid2">
 mindmap
-    id1[`**Start2**
-    second line 😎 with long text that is wrapping to the next line`]
-      id2[`Child **with bold** text`]
-      id3[`Children of which some
-      is using *italic type of* text`]
+    id1["`**Start2**
+    second line 😎 with long text that is wrapping to the next line`"]
+      id2["`Child **with bold** text`"]
+      id3["`Children of which some
+      is using *italic type of* text`"]
       id4[Child]
-      id5[`Child
+      id5["`Child
       Row
       and another
-      `]
+      `"]
     </pre>
     <pre id="diagram" class="mermaid2">
 mindmap
@@ -108,7 +132,7 @@
       शान्तिः سلام  和平 `"]
 
     </pre>
-    <pre id="diagram" class="mermaid2">
+    <pre id="diagram" class="mermaid">
 %%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
 flowchart TB
   %% I could not figure out how to use double quotes in labels in Mermaid
@@ -124,7 +148,62 @@
     rom --> core2
   end
 
-  subgraph amd[AMD Latte GPU]
+  subgraph amd["`**AMD** Latte GPU`"]
+    mem[Memory & I/O Bridge]
+    dram[DRAM Controller]
+    edram[32 MB EDRAM MEM1]
+    rom[512 B SEEPROM]
+
+    sata[SATA IF]
+    exi[EXI]
+
+    subgraph gx[GX]
+      sram[3 MB 1T-SRAM]
+    end
+
+    radeon[AMD Radeon R7xx GX2]
+
+    mem --- gx
+    mem --- radeon
+
+    rom --- mem
+
+    mem --- sata
+    mem --- exi
+
+    dram --- sata
+    dram --- exi
+  end
+
+  ddr3[2 GB DDR3 RAM MEM2]
+
+  mem --- ddr3
+  dram --- ddr3
+  edram --- ddr3
+
+  core1 --- mem
+
+  exi --- rtc
+  rtc{{rtc}}
+</pre
+    >
+    <pre id="diagram" class="mermaid">
+%%{init: {"flowchart": {"defaultRenderer": "elk", "htmlLabels": false}} }%%
+flowchart TB
+  %% I could not figure out how to use double quotes in labels in Mermaid
+  subgraph ibm[IBM Espresso CPU]
+    core0[IBM PowerPC Broadway Core 0]
+    core1[IBM PowerPC Broadway Core 1]
+    core2[IBM PowerPC Broadway Core 2]
+
+    rom[16 KB ROM]
+
+    core0 --- core2
+
+    rom --> core2
+  end
+
+  subgraph amd["`**AMD** Latte GPU`"]
     mem[Memory & I/O Bridge]
     dram[DRAM Controller]
     edram[32 MB EDRAM MEM1]
@@ -163,8 +242,9 @@
   rtc{{rtc}}
 </pre
     >
+
     <br />
-    <pre id="diagram" class="mermaid2">
+    <pre id="diagram" class="mermaid">
 flowchart TB
   %% I could not figure out how to use double quotes in labels in Mermaid
   subgraph ibm[IBM Espresso CPU]
@@ -220,7 +300,7 @@
     >
     <br />
     &nbsp;
-    <pre id="diagram" class="mermaid2">
+    <pre id="diagram" class="mermaid">
       flowchart LR
   B1 --be be--x B2
   B1 --bo bo--o B3
@@ -311,7 +391,7 @@
         flowchart: {
           // defaultRenderer: 'elk',
           useMaxWidth: false,
-          htmlLabels: false,
+          htmlLabels: true,
           // htmlLabels: true,
         },
         // htmlLabels: true,
diff --git a/packages/mermaid/src/dagre-wrapper/clusters.js b/packages/mermaid/src/dagre-wrapper/clusters.js
index 453fcb8f58..2b87b91a6a 100644
--- a/packages/mermaid/src/dagre-wrapper/clusters.js
+++ b/packages/mermaid/src/dagre-wrapper/clusters.js
@@ -63,13 +63,20 @@ const rect = (parent, node) => {
     .attr('width', width)
     .attr('height', node.height + padding);
 
+  if (useHtmlLabels) {
+    label.attr(
+      'transform',
+      // This puts the labal on top of the box instead of inside it
+      'translate(' + (node.x - bbox.width / 2) + ', ' + (node.y - node.height / 2) + ')'
+    );
+  } else {
+    label.attr(
+      'transform',
+      // This puts the labal on top of the box instead of inside it
+      'translate(' + node.x + ', ' + (node.y - node.height / 2) + ')'
+    );
+  }
   // Center the label
-  label.attr(
-    'transform',
-    // This puts the labal on top of the box instead of inside it
-    // 'translate(' + (node.x - bbox.width / 2) + ', ' + (node.y - node.height / 2 - bbox.height) + ')'
-    'translate(' + node.x + ', ' + (node.y - node.height / 2) + ')'
-  );
 
   const rectBox = rect.node().getBBox();
   node.width = rectBox.width;
diff --git a/packages/mermaid/src/dagre-wrapper/shapes/note.js b/packages/mermaid/src/dagre-wrapper/shapes/note.js
index 6b693fdf6a..c7ebb6c223 100644
--- a/packages/mermaid/src/dagre-wrapper/shapes/note.js
+++ b/packages/mermaid/src/dagre-wrapper/shapes/note.js
@@ -12,7 +12,7 @@ const note = (parent, node) => {
   rect
     .attr('rx', node.rx)
     .attr('ry', node.ry)
-    .attr('x', -bbox.width / 2 - halfPadding)
+    .attr('x', -halfPadding)
     .attr('y', -bbox.height / 2 - halfPadding)
     .attr('width', bbox.width + node.padding)
     .attr('height', bbox.height + node.padding);
diff --git a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js b/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js
index 5849177b94..4748807d12 100644
--- a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js
+++ b/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js
@@ -934,9 +934,12 @@ const drawNodes = (relX, relY, nodeArray, svg, subgraphsEl, diagObj, depth) => {
           .attr('width', node.width)
           .attr('height', node.height);
         const label = subgraphEl.insert('g').attr('class', 'label');
+        const labelCentering = getConfig().flowchart.htmlLabels ? node.labelData.width / 2 : 0;
         label.attr(
           'transform',
-          `translate(${node.labels[0].x + relX + node.x}, ${node.labels[0].y + relY + node.y})`
+          `translate(${node.labels[0].x + relX + node.x + labelCentering}, ${
+            node.labels[0].y + relY + node.y + 3
+          })`
         );
         label.node().appendChild(node.labelData.labelNode);
 
diff --git a/packages/mermaid/src/rendering-util/createText.js b/packages/mermaid/src/rendering-util/createText.js
index 1097cd0df6..f20736f3ad 100644
--- a/packages/mermaid/src/rendering-util/createText.js
+++ b/packages/mermaid/src/rendering-util/createText.js
@@ -152,26 +152,8 @@ function updateTextContentAndStyles(tspan, wrappedLine) {
       .attr('font-style', word.type === 'em' ? 'italic' : 'normal')
       .attr('class', 'text-inner-tspan')
       .attr('font-weight', word.type === 'strong' ? 'bold' : 'normal');
-    const special = [
-      '<',
-      '>',
-      '&',
-      '"',
-      "'",
-      '.',
-      ',',
-      ':',
-      ';',
-      '!',
-      '?',
-      '(',
-      ')',
-      '[',
-      ']',
-      '{',
-      '}',
-    ];
-    if (index !== 0 && special.includes(word.content)) {
+    const special = ['"', "'", '.', ',', ':', ';', '!', '?', '(', ')', '[', ']', '{', '}'];
+    if (index === 0) {
       innerTspan.text(word.content);
     } else {
       innerTspan.text(' ' + word.content);
@@ -225,7 +207,17 @@ export const createText = (
     return vertexNode;
   } else {
     const structuredText = markdownToLines(text);
-
+    const special = ['"', "'", '.', ',', ':', ';', '!', '?', '(', ')', '[', ']', '{', '}'];
+    let lastWord;
+    structuredText.forEach((line) => {
+      line.forEach((word) => {
+        if (special.includes(word.content) && lastWord) {
+          lastWord.content += word.content;
+          word.content = '';
+        }
+        lastWord = word;
+      });
+    });
     const svgLabel = createFormattedText(width, el, structuredText, addSvgBackground);
     return svgLabel;
   }
diff --git a/packages/mermaid/src/rendering-util/handle-markdown-text.js b/packages/mermaid/src/rendering-util/handle-markdown-text.js
index cd79623fef..93704b2fe7 100644
--- a/packages/mermaid/src/rendering-util/handle-markdown-text.js
+++ b/packages/mermaid/src/rendering-util/handle-markdown-text.js
@@ -38,6 +38,8 @@ export function markdownToLines(markdown) {
           currentLine++;
           lines.push([]);
         }
+
+        // textLine.split(/ (?=[^!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~]+)/).forEach((word) => {
         textLine.split(' ').forEach((word) => {
           if (word) {
             lines[currentLine].push({ content: word, type: parentType || 'normal' });

From fc1962c795025748724f76b7f216015ab7fde089 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Tue, 4 Apr 2023 14:36:05 +0200
Subject: [PATCH 87/88] Version set 10.1.0 and fix for label centering

---
 cypress/platform/knsv2.html                   | 33 ++++++++++++++-----
 .../mermaid/src/dagre-wrapper/shapes/note.js  |  7 +++-
 .../mermaid/src/dagre-wrapper/shapes/util.js  |  8 +++--
 .../src/diagrams/state/stateRenderer-v2.js    |  4 +++
 4 files changed, 40 insertions(+), 12 deletions(-)

diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index 5eaadffc49..49fe075c32 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -58,6 +58,15 @@
   </head>
   <body>
     <pre id="diagram" class="mermaid">
+stateDiagram-v2
+    [*] --> Still
+    Still --> [*]
+    Still --> Moving
+    Moving --> Still
+    Moving --> Crash
+    Crash --> [*]    </pre
+    >
+    <pre id="diagram" class="mermaid2">
 flowchart RL
     subgraph "`one`"
       a1 -- l1 --> a2
@@ -65,14 +74,13 @@
     end
     </pre>
     <pre id="diagram" class="mermaid">
-      %%{init: {"flowchart": {"htmlLabels":false}} }%%
 flowchart RL
     subgraph "`one`"
       a1 -- l1 --> a2
       a1 -- l2 --> a2
     end
     </pre>
-    <pre id="diagram" class="mermaid">
+    <pre id="diagram" class="mermaid2">
 flowchart
 id["`A root with a long text that wraps to keep the node size in check. A root with a long text that wraps to keep the node size in check`"]</pre
     >
@@ -90,10 +98,17 @@
         way`"]
   </pre
     >
-    <pre id="diagram" class="mermaid2">
+    <pre id="diagram" class="mermaid">
       classDiagram-v2
         note "I love this diagram!\nDo you love it?"
-</pre
+    </pre>
+    <pre id="diagram" class="mermaid">
+    stateDiagram-v2
+    State1: The state with a note with minus - and plus + in it
+    note left of State1
+      Important information! You can write
+      notes with . and  in them.
+    end note    </pre
     >
     <pre id="diagram" class="mermaid2">
 mindmap
@@ -187,7 +202,7 @@
   rtc{{rtc}}
 </pre
     >
-    <pre id="diagram" class="mermaid">
+    <pre id="diagram" class="mermaid2">
 %%{init: {"flowchart": {"defaultRenderer": "elk", "htmlLabels": false}} }%%
 flowchart TB
   %% I could not figure out how to use double quotes in labels in Mermaid
@@ -244,7 +259,7 @@
     >
 
     <br />
-    <pre id="diagram" class="mermaid">
+    <pre id="diagram" class="mermaid2">
 flowchart TB
   %% I could not figure out how to use double quotes in labels in Mermaid
   subgraph ibm[IBM Espresso CPU]
@@ -300,7 +315,7 @@
     >
     <br />
     &nbsp;
-    <pre id="diagram" class="mermaid">
+    <pre id="diagram" class="mermaid2">
       flowchart LR
   B1 --be be--x B2
   B1 --bo bo--o B3
@@ -391,10 +406,10 @@
         flowchart: {
           // defaultRenderer: 'elk',
           useMaxWidth: false,
+          // htmlLabels: false,
           htmlLabels: true,
-          // htmlLabels: true,
         },
-        // htmlLabels: true,
+        // htmlLabels: false,
         gantt: {
           useMaxWidth: false,
         },
diff --git a/packages/mermaid/src/dagre-wrapper/shapes/note.js b/packages/mermaid/src/dagre-wrapper/shapes/note.js
index c7ebb6c223..a39450d547 100644
--- a/packages/mermaid/src/dagre-wrapper/shapes/note.js
+++ b/packages/mermaid/src/dagre-wrapper/shapes/note.js
@@ -1,8 +1,13 @@
 import { updateNodeBounds, labelHelper } from './util';
 import { log } from '../../logger';
+import { getConfig } from '../../config';
 import intersect from '../intersect/index.js';
 
 const note = (parent, node) => {
+  const useHtmlLabels = node.useHtmlLabels || getConfig().flowchart.htmlLabels;
+  if (!useHtmlLabels) {
+    node.centerLabel = true;
+  }
   const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, 'node ' + node.classes, true);
 
   log.info('Classes = ', node.classes);
@@ -12,7 +17,7 @@ const note = (parent, node) => {
   rect
     .attr('rx', node.rx)
     .attr('ry', node.ry)
-    .attr('x', -halfPadding)
+    .attr('x', -bbox.width / 2 - halfPadding)
     .attr('y', -bbox.height / 2 - halfPadding)
     .attr('width', bbox.width + node.padding)
     .attr('height', 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 b5de2bd6b4..1eeeebb723 100644
--- a/packages/mermaid/src/dagre-wrapper/shapes/util.js
+++ b/packages/mermaid/src/dagre-wrapper/shapes/util.js
@@ -6,6 +6,7 @@ import { select } from 'd3';
 import { evaluate, sanitizeText } from '../../diagrams/common/common';
 export const labelHelper = (parent, node, _classes, isNode) => {
   let classes;
+  const useHtmlLabels = node.useHtmlLabels || evaluate(getConfig().flowchart.htmlLabels);
   if (!_classes) {
     classes = 'node default';
   } else {
@@ -33,7 +34,7 @@ export const labelHelper = (parent, node, _classes, isNode) => {
   if (node.labelType === 'markdown') {
     // text = textNode;
     text = createText(label, sanitizeText(decodeEntities(labelText), getConfig()), {
-      useHtmlLabels: getConfig().flowchart.htmlLabels,
+      useHtmlLabels,
       width: node.width || getConfig().flowchart.wrappingWidth,
       classes: 'markdown-node-label',
     });
@@ -62,11 +63,14 @@ export const labelHelper = (parent, node, _classes, isNode) => {
   const halfPadding = node.padding / 2;
 
   // Center the label
-  if (getConfig().flowchart.htmlLabels) {
+  if (useHtmlLabels) {
     label.attr('transform', 'translate(' + -bbox.width / 2 + ', ' + -bbox.height / 2 + ')');
   } else {
     label.attr('transform', 'translate(' + 0 + ', ' + -bbox.height / 2 + ')');
   }
+  if (node.centerLabel) {
+    label.attr('transform', 'translate(' + -bbox.width / 2 + ', ' + -bbox.height / 2 + ')');
+  }
   label.insert('rect', ':first-child');
   return { shapeSvg, bbox, halfPadding, label };
 };
diff --git a/packages/mermaid/src/diagrams/state/stateRenderer-v2.js b/packages/mermaid/src/diagrams/state/stateRenderer-v2.js
index 8629f74db4..c2b1a9b6d7 100644
--- a/packages/mermaid/src/diagrams/state/stateRenderer-v2.js
+++ b/packages/mermaid/src/diagrams/state/stateRenderer-v2.js
@@ -232,6 +232,9 @@ const setupNode = (g, parent, parsedItem, diagramStates, diagramDb, altFlag) =>
       type: newNode.type,
       padding: 15, //getConfig().flowchart.padding
     };
+    // if (useHtmlLabels) {
+    nodeData.centerLabel = true;
+    // }
 
     if (parsedItem.note) {
       // Todo: set random id
@@ -240,6 +243,7 @@ const setupNode = (g, parent, parsedItem, diagramStates, diagramDb, altFlag) =>
         shape: SHAPE_NOTE,
         labelText: parsedItem.note.text,
         classes: CSS_DIAGRAM_NOTE,
+        // useHtmlLabels: false,
         style: '', // styles.style,
         id: itemId + NOTE_ID + '-' + graphItemCount,
         domId: stateDomId(itemId, graphItemCount, NOTE),

From 75adb8ae9007d18c1afe7904cd9990e2bf358831 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Tue, 4 Apr 2023 14:38:09 +0200
Subject: [PATCH 88/88] Updated package.json

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

diff --git a/package.json b/package.json
index ca642e8900..92b979d750 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "mermaid-monorepo",
   "private": true,
-  "version": "10.0.2",
+  "version": "10.1.0",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "type": "module",
   "packageManager": "pnpm@7.30.1",
diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index aba98aa22b..02edc874b8 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "10.1.0-rc.1",
+  "version": "10.1.0",
   "description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "type": "module",
   "module": "./dist/mermaid.core.mjs",