From 6e4e529af2073285085ae5da364d6491f2408d23 Mon Sep 17 00:00:00 2001 From: Billiam Date: Fri, 24 Feb 2023 18:02:32 -0600 Subject: [PATCH 01/17] 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 019fa41af..8b65c8a42 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 c835ee440..13df21eaa 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 83f301207..34510138a 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 8544501a3..0bf6fb0b6 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 8ff544feb..be3583220 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 af21b4f13..68eeee238 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 391c0298f..b4ed3129e 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 59adc9139..722a25cab 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 e7a136c6b..9217fa266 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 Date: Fri, 24 Feb 2023 22:21:51 -0600 Subject: [PATCH 02/17] Update packages/mermaid/src/diagrams/pie/pieRenderer.js Co-authored-by: Sidharth Vinod --- 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 34510138a..df1e3cf99 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 Date: Sat, 25 Feb 2023 15:42:18 -0600 Subject: [PATCH 03/17] 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 8b65c8a42..d955606ed 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 333ef9491..8cc49272c 100644 --- a/demos/pie.html +++ b/demos/pie.html @@ -26,6 +26,7 @@
+    %%{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 302bd51e1..354286758 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 63f371e87..73bd66220 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 ec741e908..ecc7b54a5 100644
--- a/packages/mermaid/src/defaultConfig.ts
+++ b/packages/mermaid/src/defaultConfig.ts
@@ -1247,6 +1247,24 @@ const config: Partial = {
      * 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 2fe8c3e54..a18161c3f 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 
Date: Sat, 25 Feb 2023 15:47:38 -0600
Subject: [PATCH 04/17] 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 d955606ed..da236ee01 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 82f5b4ca3957f728e705fb237eec9caf3360e756 Mon Sep 17 00:00:00 2001
From: Billiam 
Date: Tue, 28 Feb 2023 13:27:09 -0600
Subject: [PATCH 05/17] 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 da236ee01..a40890fc5 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 8cc49272c..467b0d1f3 100644
--- a/demos/pie.html
+++ b/demos/pie.html
@@ -26,7 +26,7 @@
 
     
-    %%{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 354286758..3b2e33842 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 014ac1374..580afb488 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 73bd66220..8b1de3856 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 13df21eaa..beed194e4 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 ecc7b54a5..666efc364 100644
--- a/packages/mermaid/src/defaultConfig.ts
+++ b/packages/mermaid/src/defaultConfig.ts
@@ -1248,23 +1248,14 @@ const config: Partial = {
      */
     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 df1e3cf99..9b25f5f43 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 0bf6fb0b6..6f0f60006 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 da021f7f8..0e4571d15 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 a18161c3f..81ec720c4 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 be3583220..fff03ff14 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 68eeee238..b77f0e569 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 b4ed3129e..74b972edc 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 722a25cab..d0e1565de 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 9217fa266..34bf5e0da 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 
Date: Tue, 28 Feb 2023 13:44:09 -0600
Subject: [PATCH 06/17] 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 fff03ff14..01f8a9c0b 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 b77f0e569..9585a2e27 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 74b972edc..c91029de3 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 d0e1565de..96d6c35c1 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 34bf5e0da..8bb5ff693 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 
Date: Tue, 28 Feb 2023 13:48:50 -0600
Subject: [PATCH 07/17] 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 a40890fc5..8a89a0cde 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 
Date: Thu, 2 Mar 2023 19:17:14 +1100
Subject: [PATCH 08/17] 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 5bedb8954..5394a7e76 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 191fc672b..b5c3236ff 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 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 09/17] 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 727580664..799d649bd 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 d65d4fc39f14c73c8b6196c49d1715e2f095c3b0 Mon Sep 17 00:00:00 2001
From: Ted Marozzi 
Date: Mon, 6 Mar 2023 04:44:47 +1100
Subject: [PATCH 10/17] 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 3db4a17bc..a9b7b974d 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 799d649bd..6550d5ef7 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 
Date: Mon, 6 Mar 2023 04:55:59 +1100
Subject: [PATCH 11/17] make clearer

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

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index b0320b36e..150a22341 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 
Date: Mon, 6 Mar 2023 05:18:33 +1100
Subject: [PATCH 12/17] 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 1e7539aeb..3010ce130 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 => {
   const type = detectType(text, configApi.getConfig());
   try {

From 969088187cd012539879d59f3a85763d73475031 Mon Sep 17 00:00:00 2001
From: Ted Marozzi 
Date: Mon, 6 Mar 2023 05:28:34 +1100
Subject: [PATCH 13/17] 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 3010ce130..79d7da63a 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 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 14/17] 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 79d7da63a..27cfbec00 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 15/17] 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 27cfbec00..3010ce130 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 16/17] 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 566548ecf..15259b518 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 7b2114746..f63b8c7f5 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 2c16c1965..10fb0ea6a 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==}
+  /@vitest/spy/0.29.2:
+    resolution: {integrity: sha512-Hc44ft5kaAytlGL2PyFwdAsufjbdOvHklwjNy/gy/saRbg9Kfkxfh+PklLm1H2Ib/p586RkQeNFKYuJInUssyw==}
     dependencies:
       tinyspy: 1.0.2
     dev: true
 
-  /@vitest/spy/0.28.5:
-    resolution: {integrity: sha512-7if6rsHQr9zbmvxN7h+gGh2L9eIIErgf8nSKYDlg07HHimCxp4H6I/X/DPXktVPPLQfiZ1Cw2cbDIx9fSqDjGw==}
-    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,8 +11808,8 @@ packages:
       - terser
     dev: true
 
-  /vitest/0.28.4_vun5xzxu3tkrssf3erdbijyyki:
-    resolution: {integrity: sha512-sfWIy0AdlbyGRhunm+TLQEJrFH9XuRPdApfubsyLcDbCRrUX717BRQKInTgzEfyl2Ipi1HWoHB84Nqtcwxogcg==}
+  /vitest/0.29.2_hjnfa4mohew6fc4mnpzgbfyvpa:
+    resolution: {integrity: sha512-ydK9IGbAvoY8wkg29DQ4ivcVviCaUi3ivuPKfZEVddMTenFHUfB8EEDXQV8+RasEk1ACFLgMUqAaDuQ/Nk+mQA==}
     engines: {node: '>=v14.16.0'}
     hasBin: true
     peerDependencies:
@@ -11878,11 +11833,11 @@ packages:
       '@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
+      '@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
@@ -11899,64 +11854,7 @@ packages:
       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==}
-    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.5
-      '@vitest/runner': 0.28.5
-      '@vitest/spy': 0.28.5
-      '@vitest/ui': 0.28.4
-      '@vitest/utils': 0.28.5
-      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.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 17/17] 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 f63b8c7f5..89de95949 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 fbf8c0d2d..10081e7f3 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 10fb0ea6a..56a053396 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: