diff --git a/cypress/platform/size-tester.html b/cypress/platform/size-tester.html
index ab5b6c42b..32204085c 100644
--- a/cypress/platform/size-tester.html
+++ b/cypress/platform/size-tester.html
@@ -56,17 +56,18 @@
         logLevel: 1,
       });
 
-      let shape = 'rect';
+      let shape = 'circle';
 
       let code = `
       flowchart TB
+          n80["APA ksldj hfaskljdh aklsjdhf klasjdhf klasjhf klsajdh klasjdhf klasjdhf klasjdh klasjhf klasjdh klajsdhfklasjdhf kljadh fklasjdhf klajsdhf lkasdhf klajsdhf klasjdhfklasjdh klasjhf klasdfh klasdfh aklsjfh akjshkasldfh klasdfh klasjh fklsjhf klasdhf kljasdhf klasdhf klj"]
+          n80@{ shape: '${shape}'}
           n81["APA ksldj hfaskljdh aklsjdhf klasjdhf klasjhf klsajdh klasjdhf klasjdhf klasjdh klasjhf klasjdh klajsdhfklasjdhf kljadh fklasjdhf klajsdhf lkasdhf klajsdhf klasjdhfklasjdh klasjhf klasdfh klasdfh aklsjfh akjshkasldfh klasdfh klasjh fklsjhf klasdhf kljasdhf klasdhf klj"]
           n82["A single line of text"]
           n81@{ shape: '${shape}'}
           n82@{ shape: '${shape}'}
           n83@{ label: "A single line of text", shape: '${shape}'}
-          n80["APA ksldj hfaskljdh aklsjdhf klasjdhf klasjhf klsajdh klasjdhf klasjdhf klasjdh klasjhf klasjdh klajsdhfklasjdhf kljadh fklasjdhf klajsdhf lkasdhf klajsdhf klasjdhfklasjdh klasjhf klasdfh klasdfh aklsjfh akjshkasldfh klasdfh klasjh fklsjhf klasdhf kljasdhf klasdhf klj"]
-           n84@{ shape: '${shape}'}
+          n84@{ shape: '${shape}'}
           `;
 
       let positions = {
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/circle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/circle.ts
index c2bfd2fd6..541f9e35c 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/circle.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/circle.ts
@@ -8,10 +8,25 @@ import rough from 'roughjs';
 export const circle = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
-  const { shapeSvg, bbox, halfPadding } = await labelHelper(parent, node, getNodeClasses(node));
+  // If incoming height & width are present, subtract the padding from them
+  // as labelHelper does not take padding into account
+  // also check if the width or height is less than minimum default values (50),
+  // if so set it to min value
+  if (node.width || node.height) {
+    const padding = node.padding ?? 0;
+    node.width = (node?.width ?? 0) - padding * 2;
+    if (node.width < 50) {
+      node.width = 50;
+    }
 
-  const labelPadding = node.look === 'neo' ? halfPadding * 2 : halfPadding;
-  const radius = Math.max(bbox.width / 2 + labelPadding, (node?.width ?? 0) / 2);
+    node.height = (node?.height ?? 0) - (node.padding ?? 0) * 2;
+    if (node.height < 50) {
+      node.height = 50;
+    }
+  }
+  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
+
+  const radius = Math.max(bbox.width / 2, (node?.width ?? 0) / 2) + (node.padding ?? 0);
   let circleElem;
   const { cssStyles } = node;
 
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/doubleCircle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/doubleCircle.ts
index 4093d5b2c..8d5920f4b 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/doubleCircle.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/doubleCircle.ts
@@ -7,12 +7,29 @@ import rough from 'roughjs';
 
 export const doublecircle = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
   const { labelStyles, nodeStyles } = styles2String(node);
-  node.labelStyle = labelStyles;
-  const { shapeSvg, bbox, halfPadding } = await labelHelper(parent, node, getNodeClasses(node));
   const gap = 5;
-  const labelPadding = node.look === 'neo' ? halfPadding * 2 : halfPadding;
-  const outerRadius = bbox.width / 2 + labelPadding + gap;
-  const innerRadius = bbox.width / 2 + labelPadding;
+  node.labelStyle = labelStyles;
+  // If incoming height & width are present, subtract the padding from them
+  // as labelHelper does not take padding into account
+  // also check if the width or height is less than minimum default values (50),
+  // if so set it to min value
+  if (node.width || node.height) {
+    const padding = node.padding ?? 0;
+    node.width = (node?.width ?? 0) - padding * 2;
+    if (node.width < 50) {
+      node.width = 50;
+    }
+
+    node.height = (node?.height ?? 0) - (node.padding ?? 0) * 2;
+    if (node.height < 50) {
+      node.height = 50;
+    }
+  }
+
+  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
+
+  const outerRadius = Math.max(bbox.width / 2, (node?.width ?? 0) / 2) + (node.padding ?? 0);
+  const innerRadius = outerRadius - gap;
 
   let circleGroup;
   const { cssStyles } = node;
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/filledCircle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/filledCircle.ts
index 6156c9926..41ed10e01 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/filledCircle.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/filledCircle.ts
@@ -12,11 +12,34 @@ export const filledCircle = (
   { config: { themeVariables } }: RenderOptions
 ) => {
   node.label = '';
+
+  // If incoming height & width are present, subtract the padding from them
+  // as labelHelper does not take padding into account
+  // also check if the width or height is less than minimum default values (50),
+  // if so set it to min value
+  if (node.width || node.height) {
+    if ((node.width ?? 0) < 50) {
+      node.width = 50;
+    }
+
+    if ((node.height ?? 0) < 50) {
+      node.height = 50;
+    }
+  }
+
+  if (!node.width) {
+    node.width = 50;
+  }
+
+  if (!node.height) {
+    node.width = 50;
+  }
+
   const shapeSvg = parent
     .insert('g')
     .attr('class', getNodeClasses(node))
     .attr('id', node.domId ?? node.id);
-  const radius = 7;
+  const radius = (node.width ?? 0) / 2;
   const { cssStyles } = node;
 
   // @ts-ignore - rough is not typed
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts
index 9c547f30f..40c7c4671 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts
@@ -14,6 +14,29 @@ export const stateEnd = (
   node.labelStyle = labelStyles;
   const { cssStyles } = node;
   const { lineColor, stateBorder, nodeBorder } = themeVariables;
+
+  // If incoming height & width are present, subtract the padding from them
+  // as labelHelper does not take padding into account
+  // also check if the width or height is less than minimum default values (50),
+  // if so set it to min value
+  if (node.width || node.height) {
+    if ((node.width ?? 0) < 50) {
+      node.width = 14;
+    }
+
+    if ((node.height ?? 0) < 50) {
+      node.height = 14;
+    }
+  }
+
+  if (!node.width) {
+    node.width = 14;
+  }
+
+  if (!node.height) {
+    node.width = 14;
+  }
+
   const shapeSvg = parent
     .insert('g')
     .attr('class', 'node default')
@@ -28,13 +51,14 @@ export const stateEnd = (
     options.fillStyle = 'solid';
   }
 
-  const roughNode = rc.circle(0, 0, 14, {
+  const roughNode = rc.circle(0, 0, node.width, {
     ...options,
     stroke: lineColor,
     strokeWidth: 2,
   });
   const innerFill = stateBorder ?? nodeBorder;
-  const roughInnerNode = rc.circle(0, 0, 5, {
+  const innerNodeRadius = ((node.width ?? 0) * 5) / 14;
+  const roughInnerNode = rc.circle(0, 0, innerNodeRadius, {
     ...options,
     fill: innerFill,
     stroke: innerFill,
@@ -55,7 +79,7 @@ export const stateEnd = (
   updateNodeBounds(node, circle);
 
   node.intersect = function (point) {
-    return intersect.circle(node, 7, point);
+    return intersect.circle(node, (node.width ?? 0) / 2, point);
   };
 
   return shapeSvg;
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateStart.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateStart.ts
index d29b42be4..b5edf5b87 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateStart.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateStart.ts
@@ -12,16 +12,38 @@ export const stateStart = (
 ) => {
   const { lineColor } = themeVariables;
 
+  // If incoming height & width are present, subtract the padding from them
+  // as labelHelper does not take padding into account
+  // also check if the width or height is less than minimum default values (50),
+  // if so set it to min value
+  if (node.width || node.height) {
+    if ((node.width ?? 0) < 50) {
+      node.width = 14;
+    }
+
+    if ((node.height ?? 0) < 50) {
+      node.height = 14;
+    }
+  }
+
+  if (!node.width) {
+    node.width = 14;
+  }
+
+  if (!node.height) {
+    node.width = 14;
+  }
+
   const shapeSvg = parent
     .insert('g')
     .attr('class', 'node default')
     .attr('id', node.domId || node.id);
 
-  let circle;
+  let circle: d3.Selection<SVGCircleElement, unknown, Element | null, unknown>;
   if (node.look === 'handDrawn') {
     // @ts-ignore TODO: Fix rough typings
     const rc = rough.svg(shapeSvg);
-    const roughNode = rc.circle(0, 0, 14, solidStateFill(lineColor));
+    const roughNode = rc.circle(0, 0, node.width, solidStateFill(lineColor));
     circle = shapeSvg.insert(() => roughNode);
   } else {
     circle = shapeSvg.insert('circle', ':first-child');
@@ -29,7 +51,11 @@ export const stateStart = (
 
   // center the circle around its coordinate
   // @ts-ignore TODO: Fix typings
-  circle.attr('class', 'state-start').attr('r', 7).attr('width', 14).attr('height', 14);
+  circle
+    .attr('class', 'state-start')
+    .attr('r', (node.width ?? 0) / 2)
+    .attr('width', node.width ?? 0)
+    .attr('height', node.height ?? 0);
 
   updateNodeBounds(node, circle);