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 1/7] 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 <Billiam@users.noreply.github.com>
Date: Fri, 24 Feb 2023 22:21:51 -0600
Subject: [PATCH 2/7] 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 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 <billiamthesecond@gmail.com>
Date: Sat, 25 Feb 2023 15:42:18 -0600
Subject: [PATCH 3/7] 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 @@
 
     <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 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<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 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 <billiamthesecond@gmail.com>
Date: Sat, 25 Feb 2023 15:47:38 -0600
Subject: [PATCH 4/7] 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 <billiamthesecond@gmail.com>
Date: Tue, 28 Feb 2023 13:27:09 -0600
Subject: [PATCH 5/7] 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 @@
 
     <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 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<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 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 <billiamthesecond@gmail.com>
Date: Tue, 28 Feb 2023 13:44:09 -0600
Subject: [PATCH 6/7] 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 <billiamthesecond@gmail.com>
Date: Tue, 28 Feb 2023 13:48:50 -0600
Subject: [PATCH 7/7] 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(
       `