diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index 4fa4bfc9e..465c48e83 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mermaid-chart/mermaid",
-  "version": "11.2.0-b.8",
+  "version": "11.2.0-b.9",
   "description": "Markdown-ish syntax for generating flowcharts, mindmaps, sequence diagrams, class diagrams, gantt charts, git graphs and more.",
   "type": "module",
   "module": "./dist/mermaid.core.mjs",
diff --git a/packages/mermaid/src/rendering-util/layout-algorithms/fixed/index.js b/packages/mermaid/src/rendering-util/layout-algorithms/fixed/index.js
index 19638ee5f..bf1d27014 100644
--- a/packages/mermaid/src/rendering-util/layout-algorithms/fixed/index.js
+++ b/packages/mermaid/src/rendering-util/layout-algorithms/fixed/index.js
@@ -206,8 +206,8 @@ const doRender = async (_elem, data4Layout, siteConfig, positions) => {
   await Promise.all(
     data4Layout.nodes.map(async function (node) {
       let pos = positions.nodes[node.id];
-      node.height = pos?.height || 50;
-      node.width = pos?.width || 50;
+      node.height = pos?.height;
+      node.width = pos?.width;
 
       if (node.isGroup) {
         node.x = 0;
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/bowTieRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/bowTieRect.ts
index 7a0309e94..80f4a0bed 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/bowTieRect.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/bowTieRect.ts
@@ -13,7 +13,9 @@ function generateArcPoints(
   ry: number,
   clockwise: boolean
 ) {
-  const numPoints = 20;
+  // this must be an odd number, so that the midpoint is included
+  // otherwise the width of the bowtie will be off
+  const numPoints = 21;
   // Calculate midpoint
   const midX = (x1 + x2) / 2;
   const midY = (y1 + y2) / 2;
@@ -70,19 +72,55 @@ function generateArcPoints(
   return points;
 }
 
+/**
+ * Calculates the sagitta of an arc of an ellipse given its chord and radii.
+ *
+ * @param chord - The chord of the arc (e.g. the line connecting the two points on the circle)
+ * @param radiusX - The x-radius of the ellipse.
+ * @param radiusY - The y-radius of the ellipse.
+ */
+function calculateArcSagitta(chord: number, radiusX: number, radiusY: number) {
+  const [semiMajorAxis, semiMinorAxis] = [radiusX, radiusY].sort((a, b) => b - a);
+  return semiMinorAxis * (1 - Math.sqrt(1 - (chord / semiMajorAxis / 2) ** 2));
+}
+
 export const bowTieRect = async (parent: SVGAElement, node: Node) => {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
-  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
   const nodePadding = node.padding ?? 0;
   const labelPaddingX = node.look === 'neo' ? nodePadding * 2 : nodePadding;
   const labelPaddingY = node.look === 'neo' ? nodePadding * 1 : nodePadding;
-  const w = Math.max(bbox.width + labelPaddingX + 20, node?.width ?? 0);
-  const h = Math.max(bbox.height + labelPaddingY, node?.height ?? 0);
 
-  const ry = h / 2;
-  const rx = ry / (2.5 + h / 50);
+  const calcTotalHeight = (labelHeight: number) => labelHeight + labelPaddingY * 2;
+  const calcEllipseRadius = (totalHeight: number) => {
+    const ry = totalHeight / 2;
+    const rx = ry / (2.5 + totalHeight / 50);
+    return [rx, ry];
+  };
 
+  // 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) {
+    node.height = Math.max((node?.height ?? 0) - labelPaddingY * 2, 50);
+    const totalHeight = calcTotalHeight(node.height);
+    const [rx, ry] = calcEllipseRadius(totalHeight);
+    node.width = Math.max(
+      (node?.width ?? 0) - labelPaddingX * 2 - calculateArcSagitta(totalHeight, rx, ry),
+      50
+    );
+  }
+
+  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
+
+  const totalHeight = calcTotalHeight(Math.max(bbox.height, node?.height ?? 0));
+  const [rx, ry] = calcEllipseRadius(totalHeight);
+  const sagitta = calculateArcSagitta(totalHeight, rx, ry);
+  const totalWidth = Math.max(bbox.width, node?.width ?? 0) + labelPaddingX * 2 + sagitta;
+
+  const w = totalWidth - sagitta;
+  const h = totalHeight;
   // let shape: d3.Selection<SVGPathElement | SVGGElement, unknown, null, undefined>;
   const { cssStyles } = node;
 
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/card.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/card.ts
index 80c17d30a..a68fd72a3 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/card.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/card.ts
@@ -13,25 +13,40 @@ import { createPathFromPoints } from './util.js';
 //   return pointStrings.join(' ');
 // };
 
+/// Size of the notch on the top left corner
+const NOTCH_SIZE = 12;
+
 export async function card(parent: SVGAElement, node: Node): Promise<SVGAElement> {
   const { labelStyles, nodeStyles } = styles2String(node);
   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) {
+    node.width = Math.max(node?.width ?? 0 - (node.padding ?? 0), 50);
+    node.height = Math.max(node?.height ?? 0 - (node.padding ?? 0), 50);
+  }
+
   const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
 
-  const h = bbox.height + node.padding;
-  const padding = 12;
-  const w = bbox.width + node.padding + padding;
+  const totalWidth = Math.max(bbox.width, node?.width || 0) + (node.padding ?? 0);
+  const totalHeight = Math.max(bbox.height, node?.height || 0) + (node.padding ?? 0);
+
+  const h = totalHeight;
+  const w = totalWidth;
   const left = 0;
   const right = w;
   const top = -h;
   const bottom = 0;
   const points = [
-    { x: left + padding, y: top },
+    { x: left + NOTCH_SIZE, y: top },
     { x: right, y: top },
     { x: right, y: bottom },
     { x: left, y: bottom },
-    { x: left, y: top + padding },
-    { x: left + padding, y: top },
+    { x: left, y: top + NOTCH_SIZE },
+    { x: left + NOTCH_SIZE, y: top },
   ];
 
   let polygon: d3.Selection<SVGPolygonElement | SVGGElement, unknown, null, undefined>;
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/crossedCircle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/crossedCircle.ts
index 83c4d0beb..ff298c5d3 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/crossedCircle.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/crossedCircle.ts
@@ -7,14 +7,13 @@ import { userNodeOverrides } from './handDrawnShapeStyles.js';
 import { getNodeClasses, updateNodeBounds } from './util.js';
 
 function createLine(r: number) {
-  const xAxis45 = Math.cos(Math.PI / 4); // cosine of 45 degrees
-  const yAxis45 = Math.sin(Math.PI / 4); // sine of 45 degrees
+  const axis45 = Math.SQRT1_2; // cosine of 45 degrees = 1/sqrt(2)
   const lineLength = r * 2;
 
-  const pointQ1 = { x: (lineLength / 2) * xAxis45, y: (lineLength / 2) * yAxis45 }; // Quadrant I
-  const pointQ2 = { x: -(lineLength / 2) * xAxis45, y: (lineLength / 2) * yAxis45 }; // Quadrant II
-  const pointQ3 = { x: -(lineLength / 2) * xAxis45, y: -(lineLength / 2) * yAxis45 }; // Quadrant III
-  const pointQ4 = { x: (lineLength / 2) * xAxis45, y: -(lineLength / 2) * yAxis45 }; // Quadrant IV
+  const pointQ1 = { x: (lineLength / 2) * axis45, y: (lineLength / 2) * axis45 }; // Quadrant I
+  const pointQ2 = { x: -(lineLength / 2) * axis45, y: (lineLength / 2) * axis45 }; // Quadrant II
+  const pointQ3 = { x: -(lineLength / 2) * axis45, y: -(lineLength / 2) * axis45 }; // Quadrant III
+  const pointQ4 = { x: (lineLength / 2) * axis45, y: -(lineLength / 2) * axis45 }; // Quadrant IV
 
   return `M ${pointQ2.x},${pointQ2.y} L ${pointQ4.x},${pointQ4.y}
                    M ${pointQ1.x},${pointQ1.y} L ${pointQ3.x},${pointQ3.y}`;
@@ -26,7 +25,7 @@ export const crossedCircle = (parent: SVG, node: Node) => {
     .insert('g')
     .attr('class', getNodeClasses(node))
     .attr('id', node.domId ?? node.id);
-  const radius = Math.max(30, node?.width ?? 0);
+  const radius = Math.max(25, (node?.width ?? 0) / 2, (node?.height ?? 0) / 2);
   const { cssStyles } = node;
 
   // @ts-ignore - rough is not typed
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curvedTrapezoid.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/curvedTrapezoid.ts
index b32e2adfa..40ce28675 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curvedTrapezoid.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/curvedTrapezoid.ts
@@ -13,14 +13,27 @@ import rough from 'roughjs';
 export const curvedTrapezoid = async (parent: SVGAElement, node: Node) => {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
-  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
-  const minWidth = 80,
-    minHeight = 20;
   const nodePadding = node.padding ?? 0;
   const labelPaddingX = node.look === 'neo' ? nodePadding * 2 : nodePadding;
   const labelPaddingY = node.look === 'neo' ? nodePadding * 1 : nodePadding;
-  const w = Math.max(minWidth, (bbox.width + (labelPaddingX ?? 0) * 2) * 1.25, node?.width ?? 0);
-  const h = Math.max(minHeight, bbox.height + (labelPaddingY ?? 0) * 2, node?.height ?? 0);
+  const minWidth = 80,
+    minHeight = 20;
+  if (node.width || node.height) {
+    node.width = (node?.width ?? 0) - labelPaddingX * 2 * 1.25;
+    if (node.width < minWidth) {
+      node.width = minWidth;
+    }
+
+    node.height = (node?.height ?? 0) - labelPaddingY * 2;
+    if (node.height < minHeight) {
+      node.height = minHeight;
+    }
+  }
+
+  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
+
+  const w = Math.max(minWidth, bbox.width, node?.width ?? 0) + (labelPaddingX ?? 0) * 2 * 1.25;
+  const h = Math.max(minHeight, bbox.height, node?.height ?? 0) + (labelPaddingY ?? 0) * 2;
   const radius = h / 2;
 
   const { cssStyles } = node;
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts
index 14484c24a..48b4716d1 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts
@@ -49,20 +49,39 @@ export const createInnerCylinderPathD = (
 ): string => {
   return [`M${x - width / 2},${-height / 2}`, `a${rx},${ry} 0,0,0 ${width},0`].join(' ');
 };
+
+const MIN_HEIGHT = 25;
+const MIN_WIDTH = 25;
 export const cylinder = async (parent: SVGAElement, node: Node) => {
   const { themeVariables } = getConfig();
   const { useGradient } = themeVariables;
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
-  const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
 
   const nodePadding = node.padding ?? 0;
   const labelPaddingX = node.look === 'neo' ? nodePadding * 2 : nodePadding;
   const labelPaddingY = node.look === 'neo' ? nodePadding * 1 : nodePadding;
-  const w = Math.max(bbox.width + labelPaddingY, node.width ?? 0);
+
+  if (node.width || node.height) {
+    node.width = (node.width ?? 0) - labelPaddingY;
+    if (node.width < MIN_WIDTH) {
+      node.width = MIN_WIDTH;
+    }
+
+    // based on this width, height is calculated
+    const ry = node.width / 2 / (2.5 + node.width / 50);
+    node.height = (node.height ?? 0) - labelPaddingX - (ry + ry * 0.05) * 3;
+    if (node.height < MIN_HEIGHT) {
+      node.height = MIN_HEIGHT;
+    }
+  }
+
+  const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
+
+  const w = Math.max(bbox.width, node.width ?? 0) + labelPaddingY;
   const rx = w / 2;
   const ry = rx / (2.5 + w / 50);
-  const h = Math.max(bbox.height + ry + labelPaddingX, node.height ?? 0);
+  const h = Math.max(bbox.height, node.height ?? 0) + labelPaddingX + ry;
 
   let cylinder: d3.Selection<SVGPathElement | SVGGElement, unknown, null, undefined>;
   const { cssStyles } = node;
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/dividedRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/dividedRect.ts
index c89771a8b..e4efcf151 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/dividedRect.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/dividedRect.ts
@@ -7,13 +7,28 @@ import rough from 'roughjs';
 export const dividedRectangle = async (parent: SVGAElement, node: Node) => {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
-  const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
+
   const paddingX = node.look === 'neo' ? (node.padding ?? 0) * 2 : (node.padding ?? 0);
   const paddingY = node.look === 'neo' ? (node.padding ?? 0) * 1 : (node.padding ?? 0);
-  const w = Math.max(bbox.width + paddingX * 2, node?.width ?? 0);
-  const h = Math.max(bbox.height + paddingY * 2, node?.height ?? 0);
-  const rectOffset = h * 0.2;
 
+  // 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) {
+    node.width = Math.max((node?.width ?? 0) - paddingX * 2, 50);
+    node.height = Math.max((node?.height ?? 0) - paddingY * 2, 50);
+  }
+
+  const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
+
+  const totalWidth = Math.max(bbox.width, node?.width ?? 0) + paddingX * 2;
+  const totalHeight = Math.max(bbox.height, node?.height ?? 0) + paddingY * 2;
+
+  const rectOffset = totalHeight * 0.2;
+
+  const w = totalWidth;
+  const h = totalHeight - rectOffset;
   const x = -w / 2;
   const y = -h / 2 - rectOffset / 2;
 
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/flippedTriangle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/flippedTriangle.ts
index 339453e10..7f13e5aa6 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/flippedTriangle.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/flippedTriangle.ts
@@ -6,15 +6,30 @@ import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import { createPathFromPoints } from './util.js';
 
+const MIN_HEIGHT = 25;
+const MIN_WIDTH = 25;
 export const flippedTriangle = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
-  const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
 
   const nodePadding = node.padding ?? 0;
   const labelPaddingX = node.look === 'neo' ? nodePadding * 2 : nodePadding;
   const labelPaddingY = node.look === 'neo' ? nodePadding * 1 : nodePadding;
-  const w = Math.max(bbox.width + (labelPaddingX ?? 0), node?.width ?? 0);
+
+  if (node.width || node.height) {
+    node.height = node?.height ?? 0;
+    if (node.height < MIN_HEIGHT) {
+      node.height = MIN_HEIGHT;
+    }
+
+    node.width = node?.width ?? 0 - labelPaddingX * 4;
+    if (node.width < MIN_WIDTH) {
+      node.width = MIN_WIDTH;
+    }
+  }
+  const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
+
+  const w = Math.max(bbox.width, node?.width ?? 0) + (labelPaddingX ?? 0);
   const h = Math.max(w + bbox.height, node?.width ?? 0);
 
   const tw = w + bbox.height;
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/halfRoundedRectangle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/halfRoundedRectangle.ts
index f450f867a..74f41e48a 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/halfRoundedRectangle.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/halfRoundedRectangle.ts
@@ -16,11 +16,26 @@ export const halfRoundedRectangle = async (parent: SVGAElement, node: Node) => {
   node.labelStyle = labelStyles;
   const minWidth = 80,
     minHeight = 50;
-  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
+
   const paddingX = node.look === 'neo' ? (node.padding ?? 0) * 2 : (node.padding ?? 0);
   const paddingY = node.look === 'neo' ? (node.padding ?? 0) * 1 : (node.padding ?? 0);
-  const w = Math.max(minWidth, bbox.width + paddingX * 2, node?.width ?? 0);
-  const h = Math.max(minHeight, bbox.height + paddingY * 2, node?.height ?? 0);
+
+  if (node.width || node.height) {
+    node.height = (node?.height ?? 0) - paddingY * 2;
+    if (node.height < minHeight) {
+      node.height = minHeight;
+    }
+
+    node.width = (node?.width ?? 0) - paddingX * 2;
+    if (node.width < minWidth) {
+      node.width = minWidth;
+    }
+  }
+
+  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
+
+  const w = Math.max(minWidth, bbox.width, node?.width ?? 0) + paddingX * 2;
+  const h = Math.max(minHeight, bbox.height, node?.height ?? 0) + paddingY * 2;
   const radius = h / 2;
   const { cssStyles } = node;
 
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/hourglass.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/hourglass.ts
index 2c14f8a43..cdaab2e88 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/hourglass.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/hourglass.ts
@@ -9,8 +9,8 @@ export const hourglass = async (parent: SVGAElement, node: Node) => {
   node.label = '';
   const { shapeSvg } = await labelHelper(parent, node, getNodeClasses(node));
 
-  const w = Math.max(30, node?.width ?? 0);
-  const h = Math.max(30, node?.height ?? 0);
+  const w = Math.max(50, node?.width ?? 0);
+  const h = Math.max(50, node?.height ?? 0);
 
   const { cssStyles } = node;
   // @ts-ignore - rough is not typed
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/invertedTrapezoid.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/invertedTrapezoid.ts
index 232dc4199..51cb4560e 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/invertedTrapezoid.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/invertedTrapezoid.ts
@@ -23,13 +23,26 @@ import { insertPolygonShape } from './insertPolygonShape.js';
 export const inv_trapezoid = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
-  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
-  const nodePadding = node.padding ?? 0;
-  const labelPaddingX = node.look === 'neo' ? nodePadding * 3 : nodePadding * 2;
-  const labelPaddingY = node.look === 'neo' ? nodePadding * 1.5 : nodePadding * 2;
 
-  const w = Math.max(bbox.width + labelPaddingY, node?.width ?? 0);
-  const h = Math.max(bbox.height + labelPaddingX, node?.height ?? 0);
+  const nodePadding = node.padding ?? 0;
+  const labelPaddingY = node.look === 'neo' ? nodePadding * 1.5 : nodePadding * 2;
+  if (node.width || node.height) {
+    node.width = node?.width ?? 0;
+    if (node.width < 50) {
+      node.width = 50;
+    }
+
+    node.height = node?.height ?? 0;
+    if (node.height < 50) {
+      node.height = 50;
+    }
+    const _dx = (3 * node.height) / 6;
+    node.height = node.height - labelPaddingY;
+    node.width = node.width - 2 * _dx;
+  }
+  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
+  const h = Math.max(bbox.height, node?.height ?? 0) + labelPaddingY;
+  const w = Math.max(bbox.width, node?.width ?? 0);
 
   const points = [
     { x: 0, y: 0 },
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanLeft.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanLeft.ts
index c1e897336..a15269e61 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanLeft.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanLeft.ts
@@ -8,12 +8,27 @@ import { insertPolygonShape } from './insertPolygonShape.js';
 export const lean_left = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
-  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
   const nodePadding = node.padding ?? 0;
-  const labelPaddingX = node.look === 'neo' ? nodePadding * 3 : nodePadding;
   const labelPaddingY = node.look === 'neo' ? nodePadding * 1.5 : nodePadding;
-  const w = Math.max(bbox.width + (labelPaddingY ?? 0), node?.width ?? 0);
-  const h = Math.max(bbox.height + (labelPaddingX ?? 0), node?.height ?? 0);
+
+  if (node.width || node.height) {
+    node.width = node?.width ?? 0;
+    if (node.width < 50) {
+      node.width = 50;
+    }
+
+    node.height = node?.height ?? 0;
+    if (node.height < 50) {
+      node.height = 50;
+    }
+    const _dx = (3 * node.height) / 6;
+    node.height = node.height - labelPaddingY;
+    node.width = node.width - 2 * _dx;
+  }
+
+  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
+  const h = Math.max(bbox.height, node?.height ?? 0) + labelPaddingY;
+  const w = Math.max(bbox.width, node?.width ?? 0);
   const points = [
     { x: 0, y: 0 },
     { x: w + (3 * h) / 6, y: 0 },
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanRight.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanRight.ts
index 03d75864f..d2f43f9d9 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanRight.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanRight.ts
@@ -8,13 +8,29 @@ import { insertPolygonShape } from './insertPolygonShape.js';
 export const lean_right = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
-  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
   const nodePadding = node.padding ?? 0;
-  const labelPaddingX = node.look === 'neo' ? nodePadding * 3 : nodePadding;
   const labelPaddingY = node.look === 'neo' ? nodePadding * 1.5 : nodePadding;
 
-  const w = Math.max(bbox.width + labelPaddingY, node?.width ?? 0);
-  const h = Math.max(bbox.height + labelPaddingX, node?.height ?? 0);
+  if (node.width || node.height) {
+    node.width = node?.width ?? 0;
+    if (node.width < 50) {
+      node.width = 50;
+    }
+
+    node.height = node?.height ?? 0;
+    if (node.height < 50) {
+      node.height = 50;
+    }
+    const _dx = (3 * node.height) / 6;
+    node.height = node.height - labelPaddingY;
+    node.width = node.width - 2 * _dx;
+  }
+
+  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
+
+  const h = Math.max(bbox.height, node?.height ?? 0) + labelPaddingY;
+  const w = Math.max(bbox.width, node?.width ?? 0);
+
   const points = [
     { x: (-3 * h) / 6, y: 0 },
     { x: w, y: 0 },
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/lightningBolt.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/lightningBolt.ts
index bb82cf2c3..f3691fc98 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/lightningBolt.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/lightningBolt.ts
@@ -16,8 +16,8 @@ export const lightningBolt = (parent: SVG, node: Node) => {
 
   const gapX = Math.max(5, (node.width ?? 0) * 0.1);
   const gapY = Math.max(5, (node.height ?? 0) * 0.1);
-  const width = Math.max(50, node?.width ?? 0 - gapX);
-  const height = Math.max(50, node?.height ?? 0 - gapY);
+  const width = Math.max(50, node?.width ?? 0);
+  const height = Math.max(50, node?.height ?? 0);
 
   const points = [
     { x: width, y: 0 },
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedCylinder.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedCylinder.ts
index 5afed59b9..21a5cfe52 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedCylinder.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedCylinder.ts
@@ -54,17 +54,36 @@ export const createInnerCylinderPathD = (
 ): string => {
   return [`M${x - width / 2},${-height / 2}`, `a${rx},${ry} 0,0,0 ${width},0`].join(' ');
 };
+
+const MIN_HEIGHT = 25;
+const MIN_WIDTH = 25;
+
 export const linedCylinder = async (parent: SVGAElement, node: Node) => {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
-  const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
   const nodePadding = node.padding ?? 0;
   const labelPaddingX = node.look === 'neo' ? nodePadding * 2 : nodePadding;
   const labelPaddingY = node.look === 'neo' ? nodePadding * 1 : nodePadding;
-  const w = Math.max(bbox.width + labelPaddingX, node?.width ?? 0);
+
+  if (node.width || node.height) {
+    node.width = (node.width ?? 0) - labelPaddingX;
+    if (node.width < MIN_WIDTH) {
+      node.width = MIN_WIDTH;
+    }
+
+    // based on this width, height is calculated
+    const ry = node.width / 2 / (2.5 + node.width / 50);
+    node.height = (node.height ?? 0) - labelPaddingY - (ry + ry * 0.05) * 3;
+    if (node.height < MIN_HEIGHT) {
+      node.height = MIN_HEIGHT;
+    }
+  }
+  const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
+
+  const w = Math.max(bbox.width, node?.width ?? 0) + labelPaddingX;
   const rx = w / 2;
   const ry = rx / (2.5 + w / 50);
-  const h = Math.max(bbox.height + ry + labelPaddingY, node?.height ?? 0);
+  const h = Math.max(bbox.height, node?.height ?? 0) + ry + labelPaddingY;
   const outerOffset = h * 0.1; // 10% of height
 
   let cylinder: d3.Selection<SVGPathElement | SVGGElement, unknown, null, undefined>;
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedWaveEdgedRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedWaveEdgedRect.ts
index b308454ef..e21686757 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedWaveEdgedRect.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedWaveEdgedRect.ts
@@ -12,13 +12,29 @@ import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 export const linedWaveEdgedRect = async (parent: SVGAElement, node: Node) => {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
+
+  const nodePadding = node.padding ?? 0;
+  const labelPaddingX = node.look === 'neo' ? nodePadding * 2 : (node.padding ?? 0);
+  const labelPaddingY = node.look === 'neo' ? nodePadding * 2 : (node.padding ?? 0);
+
+  let adjustFinalHeight = true;
+  if (node.width || node.height) {
+    adjustFinalHeight = false;
+    node.width = (node?.width ?? 0) - labelPaddingX * 2;
+    if (node.width < 50) {
+      node.width = 50;
+    }
+
+    node.height = (node?.height ?? 0) - labelPaddingY * 2;
+    if (node.height < 50) {
+      node.height = 50;
+    }
+  }
   const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
-  const paddingX = node.look === 'neo' ? (node.padding ?? 0) * 2 : (node.padding ?? 0);
-  const paddingY = node.look === 'neo' ? (node.padding ?? 0) * 2 : (node.padding ?? 0);
-  const w = Math.max(bbox.width + paddingX * 2, node?.width ?? 0);
-  const h = Math.max(bbox.height + paddingY * 2, node?.height ?? 0);
-  const waveAmplitude = h / 4;
-  const finalH = h + waveAmplitude;
+  const w = Math.max(bbox.width, node?.width ?? 0) + (labelPaddingX ?? 0) * 2;
+  const h = Math.max(bbox.height, node?.height ?? 0) + (labelPaddingY ?? 0) * 2;
+  const waveAmplitude = h / 6;
+  const finalH = h + (adjustFinalHeight ? waveAmplitude : -waveAmplitude);
   const { cssStyles } = node;
 
   // @ts-ignore - rough is not typed
@@ -68,7 +84,7 @@ export const linedWaveEdgedRect = async (parent: SVGAElement, node: Node) => {
   waveEdgeRect.attr('transform', `translate(0,${-waveAmplitude / 2})`);
   label.attr(
     'transform',
-    `translate(${-w / 2 + paddingX + ((w / 2) * 0.1) / 2 - (bbox.x - (bbox.left ?? 0))},${-h / 2 + paddingY - waveAmplitude / 2 - (bbox.y - (bbox.top ?? 0))})`
+    `translate(${-(bbox.width / 2) - (bbox.x - (bbox.left ?? 0))},${-(bbox.height / 2) - waveAmplitude / 2 - (bbox.y - (bbox.top ?? 0))})`
   );
 
   updateNodeBounds(node, waveEdgeRect);
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiRect.ts
index a1afff555..447f78037 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiRect.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiRect.ts
@@ -7,13 +7,28 @@ import intersect from '../intersect/index.js';
 export const multiRect = async (parent: SVGAElement, node: Node) => {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
-  const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
   const nodePadding = node.padding ?? 0;
   const labelPaddingX = node.look === 'neo' ? nodePadding * 2 : nodePadding;
   const labelPaddingY = node.look === 'neo' ? nodePadding * 1 : nodePadding;
-  const w = Math.max(bbox.width + (labelPaddingX ?? 0) * 2, node?.width ?? 0);
-  const h = Math.max(bbox.height + (labelPaddingY ?? 0) * 2, node?.height ?? 0);
   const rectOffset = node.look === 'neo' ? 10 : 5;
+
+  // 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) {
+    node.width = Math.max((node?.width ?? 0) - labelPaddingX * 2 - 2 * rectOffset, 50);
+    node.height = Math.max((node?.height ?? 0) - labelPaddingY * 2 - 2 * rectOffset, 50);
+  }
+
+  const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
+
+  const totalWidth = Math.max(bbox.width, node?.width ?? 0) + labelPaddingX * 2 + 2 * rectOffset;
+  const totalHeight = Math.max(bbox.height, node?.height ?? 0) + labelPaddingY * 2 + 2 * rectOffset;
+
+  const w = totalWidth - 2 * rectOffset;
+  const h = totalHeight - 2 * rectOffset;
+
   const x = -w / 2;
   const y = -h / 2;
   const { cssStyles } = node;
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiWaveEdgedRectangle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiWaveEdgedRectangle.ts
index 09219cdc0..1238d2d59 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiWaveEdgedRectangle.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiWaveEdgedRectangle.ts
@@ -18,10 +18,32 @@ export const multiWaveEdgedRectangle = async (parent: SVGAElement, node: Node) =
   const nodePadding = node.padding ?? 0;
   const labelPaddingX = node.look === 'neo' ? nodePadding * 2 : nodePadding;
   const labelPaddingY = node.look === 'neo' ? nodePadding * 1 : nodePadding;
-  const w = Math.max(bbox.width + labelPaddingX * 2, node?.width ?? 0);
-  const h = Math.max(bbox.height + labelPaddingY * 2, node?.height ?? 0);
-  const waveAmplitude = h / 4;
-  const finalH = h + waveAmplitude;
+  let adjustFinalHeight = true;
+
+  if (node.width || node.height) {
+    adjustFinalHeight = false;
+    node.width = (node?.width ?? 0) - labelPaddingX * 2;
+    if (node.width < 50) {
+      node.width = 50;
+    }
+
+    node.height = (node?.height ?? 0) - labelPaddingY * 3;
+    if (node.height < 50) {
+      node.height = 50;
+    }
+
+    // Adjustments for wave amplitude
+    const waveAmplitude = 30;
+    const waveMultiplier = 0.3319;
+
+    node.height = Math.round(node.height - labelPaddingY - waveAmplitude * waveMultiplier);
+    node.width = node.width - labelPaddingX;
+  }
+
+  const w = Math.max(bbox.width, node?.width ?? 0) + labelPaddingX * 2;
+  const h = Math.max(bbox.height, node?.height ?? 0) + labelPaddingY * 3;
+  const waveAmplitude = 30;
+  const finalH = h + (adjustFinalHeight ? waveAmplitude / 2 : -waveAmplitude / 2);
   const x = -w / 2;
   const y = -finalH / 2;
   const rectOffset = 5;
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/question.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/question.ts
index d571e4927..6d4934f96 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/question.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/question.ts
@@ -19,10 +19,22 @@ export const createDecisionBoxPathD = (x: number, y: number, size: number): stri
 export const question = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
-  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
+  const padding = node.padding ?? 0;
+  if (node.width || node.height) {
+    node.width = (node?.width ?? 0) - padding * 8;
+    if (node.width < 50) {
+      node.width = 50;
+    }
 
-  const w = bbox.width + node.padding;
-  const h = bbox.height + node.padding;
+    node.height = (node?.height ?? 0) - padding * 8;
+    if (node.height < 50) {
+      node.height = 50;
+    }
+  }
+
+  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
+  const w = (Math.max(bbox.width, node?.width ?? 0) + padding * 8) / 2;
+  const h = w;
   const s = w + h;
 
   const points = [
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/shadedProcess.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/shadedProcess.ts
index 3ae55ed20..ad8b13c4a 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/shadedProcess.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/shadedProcess.ts
@@ -4,16 +4,33 @@ import type { Node } from '../../types.d.ts';
 import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 
+/// Width of the frame on the left of the shape
+const FRAME_WIDTH = 8;
+
 export const shadedProcess = async (parent: SVGAElement, node: Node) => {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
-  const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
+
   const paddingX = node.look === 'neo' ? (node.padding ?? 0) * 2 : (node.padding ?? 0);
   const paddingY = node.look === 'neo' ? (node.padding ?? 0) * 1 : (node.padding ?? 0);
-  const w = Math.max(bbox.width + paddingX * 2, node?.width ?? 0);
-  const h = Math.max(bbox.height + paddingY * 2, node?.height ?? 0);
-  const x = -bbox.width / 2 - paddingX;
-  const y = -bbox.height / 2 - paddingY;
+
+  // 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) {
+    node.width = Math.max((node?.width ?? 0) - paddingX * 2 - FRAME_WIDTH, 50);
+    node.height = Math.max((node?.height ?? 0) - paddingY * 2, 50);
+  }
+
+  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
+
+  const totalWidth = Math.max(bbox.width, node?.width ?? 0) + paddingX * 2 + FRAME_WIDTH;
+  const totalHeight = Math.max(bbox.height, node?.height ?? 0) + paddingY * 2;
+  const w = totalWidth - FRAME_WIDTH;
+  const h = totalHeight;
+  const x = -(totalWidth - FRAME_WIDTH) / 2;
+  const y = -totalHeight / 2;
 
   const { cssStyles } = node;
   // @ts-ignore - rough is not typed
@@ -27,10 +44,10 @@ export const shadedProcess = async (parent: SVGAElement, node: Node) => {
 
   const points = [
     { x, y },
-    { x: x + w + 8, y },
-    { x: x + w + 8, y: y + h },
-    { x: x - 8, y: y + h },
-    { x: x - 8, y: y },
+    { x: x + w, y },
+    { x: x + w, y: y + h },
+    { x: x - FRAME_WIDTH, y: y + h },
+    { x: x - FRAME_WIDTH, y: y },
     { x, y },
     { x, y: y + h },
   ];
@@ -52,11 +69,6 @@ export const shadedProcess = async (parent: SVGAElement, node: Node) => {
     rect.selectAll('path').attr('style', nodeStyles);
   }
 
-  label.attr(
-    'transform',
-    `translate(${-w / 2 + 4 + paddingX - (bbox.x - (bbox.left ?? 0))},${-h / 2 + paddingY - (bbox.y - (bbox.top ?? 0))})`
-  );
-
   updateNodeBounds(node, rect);
 
   node.intersect = function (point) {
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/slopedRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/slopedRect.ts
index 6f467f9e8..1a17c330f 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/slopedRect.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/slopedRect.ts
@@ -7,12 +7,26 @@ import rough from 'roughjs';
 export const slopedRect = async (parent: SVGAElement, node: Node) => {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
-  const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
   const nodePadding = node.padding ?? 0;
   const labelPaddingX = node.look === 'neo' ? nodePadding * 2 : nodePadding;
   const labelPaddingY = node.look === 'neo' ? nodePadding * 1 : nodePadding;
-  const w = Math.max(bbox.width + (labelPaddingX ?? 0) * 2, node?.width ?? 0);
-  const h = Math.max(bbox.height + (labelPaddingY ?? 0) * 2, node?.height ?? 0);
+
+  // 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) {
+    node.width = Math.max((node?.width ?? 0) - labelPaddingX * 2, 50);
+    node.height = Math.max((node?.height ?? 0) / 1.5 - labelPaddingY * 2, 50);
+  }
+
+  const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
+
+  const totalWidth = Math.max(bbox.width, node?.width ?? 0) + labelPaddingX * 2;
+  const totalHeight = (Math.max(bbox.height, node?.height ?? 0) + labelPaddingY * 2) * 1.5;
+
+  const w = totalWidth;
+  const h = totalHeight / 1.5;
   const x = -w / 2;
   const y = -h / 2;
 
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stadium.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stadium.ts
index 777a23b94..8f10d982c 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stadium.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stadium.ts
@@ -56,15 +56,28 @@ export const stadium = async (parent: SVGAElement, node: Node) => {
   const nodePadding = node.padding ?? 0;
   const labelPaddingX = node.look === 'neo' ? nodePadding * 3 : nodePadding;
   const labelPaddingY = node.look === 'neo' ? nodePadding * 1.5 : nodePadding;
-  node.width = (node?.width ?? 0) - labelPaddingX;
-  node.height = (node?.height ?? 0) - labelPaddingY;
-  if (node.width < 100) {
-    node.width = 100;
+  // 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) {
+    node.width = (node?.width ?? 0) - labelPaddingX * 2;
+    if (node.width < 50) {
+      node.width = 50;
+    }
+
+    node.height = (node?.height ?? 0) - labelPaddingY * 2;
+    if (node.height < 50) {
+      node.height = 50;
+    }
   }
   const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
 
-  const h = Math.max(bbox.height, node?.height || 0) + labelPaddingY;
-  const w = Math.max(bbox.width + h / 4, node?.width || 0, 150) + labelPaddingX;
+  // const h = Math.max(bbox.height, node?.height || 0) + labelPaddingY;
+  // const w = Math.max(bbox.width + h / 4, node?.width || 0, 150) + labelPaddingX;
+
+  const w = Math.max(bbox.width, node?.width || 0) + labelPaddingX * 2;
+  const h = Math.max(bbox.height, node?.height || 0) + labelPaddingY * 2;
 
   let rect;
   const { cssStyles } = node;
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/subroutine.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/subroutine.ts
index e47a34f71..070d3e8d9 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/subroutine.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/subroutine.ts
@@ -32,21 +32,37 @@ export const createSubroutinePathD = (
   ].join(' ');
 };
 
+// width of the frame on the left and right side of the shape
+const FRAME_WIDTH = 8;
+
 export const subroutine = async (parent: SVGAElement, node: Node) => {
   const { themeVariables } = getConfig();
   const { useGradient } = themeVariables;
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
-  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
+
   const nodePadding = node?.padding || 8;
-  // const labelPaddingX = node.padding;
-  // const labelPaddingY = node.padding;
   const labelPaddingX = node.look === 'neo' ? nodePadding * 3 : nodePadding;
   const labelPaddingY = node.look === 'neo' ? nodePadding * 1.5 : nodePadding;
-  const w = bbox.width + labelPaddingX;
-  const h = bbox.height + labelPaddingY;
-  const x = -bbox.width / 2 - labelPaddingX / 2;
-  const y = -bbox.height / 2 - labelPaddingY / 2;
+
+  // 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) {
+    node.width = Math.max((node?.width ?? 0) - labelPaddingX - 2 * FRAME_WIDTH, 50);
+    node.height = Math.max((node?.height ?? 0) - labelPaddingY, 50);
+  }
+
+  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
+
+  const totalWidth = Math.max(bbox.width, node?.width || 0) + 2 * FRAME_WIDTH + labelPaddingX;
+  const totalHeight = Math.max(bbox.height, node?.height || 0) + labelPaddingY;
+
+  const w = totalWidth - 2 * FRAME_WIDTH;
+  const h = totalHeight;
+  const x = -totalWidth / 2;
+  const y = -totalHeight / 2;
 
   const points = [
     { x: 0, y: 0 },
@@ -54,11 +70,11 @@ export const subroutine = async (parent: SVGAElement, node: Node) => {
     { x: w, y: -h },
     { x: 0, y: -h },
     { x: 0, y: 0 },
-    { x: -8, y: 0 },
-    { x: w + 8, y: 0 },
-    { x: w + 8, y: -h },
-    { x: -8, y: -h },
-    { x: -8, y: 0 },
+    { x: -FRAME_WIDTH, y: 0 },
+    { x: w + FRAME_WIDTH, y: 0 },
+    { x: w + FRAME_WIDTH, y: -h },
+    { x: -FRAME_WIDTH, y: -h },
+    { x: -FRAME_WIDTH, y: 0 },
   ];
 
   if (node.look === 'handDrawn' || (node.look === 'neo' && !useGradient)) {
@@ -71,7 +87,7 @@ export const subroutine = async (parent: SVGAElement, node: Node) => {
       options.fillStyle = 'solid';
     }
 
-    const roughNode = rc.rectangle(x - 8, y, w + 16, h, options);
+    const roughNode = rc.rectangle(x - FRAME_WIDTH, y, w + 2 * FRAME_WIDTH, h, options);
     const l1 = rc.line(x, y, x, y + h, options);
     const l2 = rc.line(x + w, y, x + w, y + h, options);
 
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedRect.ts
index 93046dd5b..4558e9f97 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedRect.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedRect.ts
@@ -4,19 +4,41 @@ import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import intersect from '../intersect/index.js';
 
+/// The width/height of the tag in comparison to the height of the node
+const TAG_RATIO = 0.2;
+
 export const taggedRect = async (parent: SVGAElement, node: Node) => {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
-  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
+
   const nodePadding = node.padding ?? 0;
   const labelPaddingX = node.look === 'neo' ? nodePadding * 2 : nodePadding;
   const labelPaddingY = node.look === 'neo' ? nodePadding * 1 : nodePadding;
-  const w = Math.max(bbox.width + (labelPaddingX ?? 0) * 2, node?.width ?? 0);
-  const h = Math.max(bbox.height + (labelPaddingY ?? 0) * 2, node?.height ?? 0);
+
+  // 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) {
+    node.height = Math.max((node?.height ?? 0) - labelPaddingY * 2, 50);
+    node.width = Math.max(
+      (node?.width ?? 0) - labelPaddingX * 2 - TAG_RATIO * (node.height + labelPaddingY * 2),
+      50
+    );
+  }
+
+  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
+
+  const totalHeight = Math.max(bbox.height, node?.height ?? 0) + labelPaddingY * 2;
+  const tagWidth = TAG_RATIO * totalHeight;
+  const tagHeight = TAG_RATIO * totalHeight;
+  const totalWidth = Math.max(bbox.width, node?.width ?? 0) + labelPaddingX * 2 + tagWidth;
+
+  const w = totalWidth - tagWidth;
+  const h = totalHeight;
   const x = -w / 2;
   const y = -h / 2;
-  const tagWidth = 0.2 * h;
-  const tagHeight = 0.2 * h;
+
   const { cssStyles } = node;
 
   // @ts-ignore - rough is not typed
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedWaveEdgedRectangle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedWaveEdgedRectangle.ts
index 84539093b..01e585198 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedWaveEdgedRectangle.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedWaveEdgedRectangle.ts
@@ -13,16 +13,32 @@ import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 export const taggedWaveEdgedRectangle = async (parent: SVGAElement, node: Node) => {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
-  const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
+
   const nodePadding = node.padding ?? 0;
   const labelPaddingX = node.look === 'neo' ? nodePadding * 2 : nodePadding;
   const labelPaddingY = node.look === 'neo' ? nodePadding * 1 : nodePadding;
-  const w = Math.max(bbox.width + labelPaddingX * 2, node?.width ?? 0);
-  const h = Math.max(bbox.height + labelPaddingY * 2, node?.height ?? 0);
+
+  let adjustFinalHeight = true;
+  if (node.width || node.height) {
+    adjustFinalHeight = false;
+    node.width = (node?.width ?? 0) - labelPaddingX * 2;
+    if (node.width < 50) {
+      node.width = 50;
+    }
+
+    node.height = (node?.height ?? 0) - labelPaddingY * 3;
+    if (node.height < 50) {
+      node.height = 50;
+    }
+  }
+
+  const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
+  const w = Math.max(bbox.width, node?.width ?? 0) + (labelPaddingX ?? 0) * 2;
+  const h = Math.max(bbox.height, node?.height ?? 0) + (labelPaddingY ?? 0) * 3;
   const waveAmplitude = h / 4;
   const tagWidth = 0.2 * w;
   const tagHeight = 0.2 * h;
-  const finalH = h + waveAmplitude;
+  const finalH = h + (adjustFinalHeight ? waveAmplitude : -waveAmplitude);
   const { cssStyles } = node;
 
   // @ts-ignore - rough is not typed
@@ -50,7 +66,9 @@ export const taggedWaveEdgedRectangle = async (parent: SVGAElement, node: Node)
   ];
 
   const x = -w / 2 + (w / 2) * 0.1;
-  const y = -finalH / 2 - tagHeight * 0.4;
+  const y = !adjustFinalHeight
+    ? -finalH / 2 - 1.25 * waveAmplitude - 1 * tagHeight
+    : -finalH / 2 - 0.4 * tagHeight;
 
   const tagPoints = [
     { x: x + w - tagWidth, y: (y + h) * 1.4 },
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/tiltedCylinder.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/tiltedCylinder.ts
index b16ead2c3..9a50df334 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/tiltedCylinder.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/tiltedCylinder.ts
@@ -49,19 +49,34 @@ export const createInnerCylinderPathD = (
   return [`M${x + width / 2},${-height / 2}`, `a${rx},${ry} 0,0,0 0,${height}`].join(' ');
 };
 
+const MIN_HEIGHT = 25;
+const MIN_WIDTH = 50;
+
 export const tiltedCylinder = async (parent: SVGAElement, node: Node) => {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
-  const { shapeSvg, bbox, label, halfPadding } = await labelHelper(
-    parent,
-    node,
-    getNodeClasses(node)
-  );
-  const labelPadding = node.look === 'neo' ? halfPadding * 2 : halfPadding;
-  const h = bbox.height + labelPadding;
+  const nodePadding = node.padding ?? 0;
+  const labelPadding = node.look === 'neo' ? nodePadding : nodePadding / 2;
+  if (node.width || node.height) {
+    node.height = (node.height ?? 0) - labelPadding;
+    if (node.height < MIN_HEIGHT) {
+      node.height = MIN_HEIGHT;
+    }
+    const ry = node.height / 2;
+    // based on this height, width is calculated
+    const rx = ry / (2.5 + node.height / 50);
+
+    node.width = (node.width ?? 0) - labelPadding - rx * 3;
+    if (node.width < MIN_WIDTH) {
+      node.width = MIN_WIDTH;
+    }
+  }
+  const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
+
+  const h = Math.max(bbox.height, node.height ?? 0) + labelPadding;
   const ry = h / 2;
   const rx = ry / (2.5 + h / 50);
-  const w = bbox.width + rx + labelPadding;
+  const w = Math.max(bbox.width, node.width ?? 0) + rx + labelPadding;
   const { cssStyles } = node;
 
   let cylinder: d3.Selection<SVGPathElement | SVGGElement, unknown, null, undefined>;
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts
index c3844cdf7..7b6e3ed96 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts
@@ -23,12 +23,27 @@ import { insertPolygonShape } from './insertPolygonShape.js';
 export const trapezoid = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
-  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
   const nodePadding = node.padding ?? 0;
-  const labelPaddingX = node.look === 'neo' ? nodePadding * 3 : nodePadding;
   const labelPaddingY = node.look === 'neo' ? nodePadding * 1.5 : nodePadding;
-  const w = bbox.width + labelPaddingY;
-  const h = bbox.height + labelPaddingX;
+
+  if (node.width || node.height) {
+    node.width = node?.width ?? 0;
+    if (node.width < 50) {
+      node.width = 50;
+    }
+
+    node.height = node?.height ?? 0;
+    if (node.height < 50) {
+      node.height = 50;
+    }
+    const _dx = (3 * node.height) / 6;
+    node.height = node.height - labelPaddingY;
+    node.width = node.width - 2 * _dx;
+  }
+  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
+  const h = Math.max(bbox.height, node?.height ?? 0) + labelPaddingY;
+  const w = Math.max(bbox.width, node?.width ?? 0);
+
   const points = [
     { x: (-3 * h) / 6, y: 0 },
     { x: w + (3 * h) / 6, y: 0 },
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoidalPentagon.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoidalPentagon.ts
index 391a057b0..22f2df4cb 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoidalPentagon.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoidalPentagon.ts
@@ -7,15 +7,27 @@ import rough from 'roughjs';
 export const trapezoidalPentagon = async (parent: SVGAElement, node: Node) => {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
-  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
   const nodePadding = node.padding ?? 0;
   const labelPaddingX = node.look === 'neo' ? nodePadding * 2 : nodePadding;
   const labelPaddingY = node.look === 'neo' ? nodePadding * 1 : nodePadding;
-
   const minWidth = 60,
     minHeight = 20;
-  const w = Math.max(minWidth, bbox.width + (labelPaddingX ?? 0) * 2, node?.width ?? 0);
-  const h = Math.max(minHeight, bbox.height + (labelPaddingY ?? 0) * 2, node?.height ?? 0);
+  if (node.width || node.height) {
+    node.height = (node.height ?? 0) - labelPaddingY * 2;
+    if (node.height < minHeight) {
+      node.height = minHeight;
+    }
+
+    node.width = (node.width ?? 0) - labelPaddingX * 2;
+    if (node.width < minWidth) {
+      node.width = minWidth;
+    }
+  }
+
+  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
+
+  const w = Math.max(minWidth, bbox.width, node?.width ?? 0) + (labelPaddingX ?? 0) * 2;
+  const h = Math.max(minHeight, bbox.height, node?.height ?? 0) + (labelPaddingY ?? 0) * 2;
 
   const { cssStyles } = node;
   // @ts-ignore - rough is not typed
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/triangle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/triangle.ts
index fdb149023..ca35c2c70 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/triangle.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/triangle.ts
@@ -8,15 +8,31 @@ import { createPathFromPoints } from './util.js';
 import { evaluate } from '../../../diagrams/common/common.js';
 import { getConfig } from '../../../diagram-api/diagramAPI.js';
 
+const MIN_HEIGHT = 25;
+const MIN_WIDTH = 25;
+
 export const triangle = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
+  const nodePadding = node.padding ?? 0;
+  const labelPaddingX = node.look === 'neo' ? nodePadding * 2 : nodePadding;
+
+  if (node.width || node.height) {
+    node.width = (node?.width ?? 0) - labelPaddingX * 4;
+    if (node.width < MIN_WIDTH) {
+      node.width = MIN_WIDTH;
+    }
+
+    node.height = node?.height ?? 0;
+    if (node.height < MIN_HEIGHT) {
+      node.height = MIN_HEIGHT;
+    }
+  }
+
   const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
   const useHtmlLabels = evaluate(getConfig().flowchart?.htmlLabels);
 
-  const nodePadding = node.padding ?? 0;
-  const labelPaddingX = node.look === 'neo' ? nodePadding * 2 : nodePadding;
-  const w = Math.max(bbox.width + (labelPaddingX ?? 0), node?.width ?? 0);
+  const w = Math.max(bbox.width, node?.width ?? 0) + labelPaddingX;
   const h = Math.max(w + bbox.height, node?.height ?? 0);
 
   const tw = w + bbox.height;
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/waveEdgedRectangle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/waveEdgedRectangle.ts
index a2d8e66b9..820127727 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/waveEdgedRectangle.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/waveEdgedRectangle.ts
@@ -13,14 +13,30 @@ import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 export const waveEdgedRectangle = async (parent: SVGAElement, node: Node) => {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
-  const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
+
   const nodePadding = node.padding ?? 0;
   const labelPaddingX = node.look === 'neo' ? nodePadding * 2 : nodePadding;
   const labelPaddingY = node.look === 'neo' ? nodePadding * 1 : nodePadding;
-  const w = Math.max(bbox.width + (labelPaddingX ?? 0) * 2, node?.width ?? 0);
-  const h = Math.max(bbox.height + (labelPaddingY ?? 0) * 2, node?.height ?? 0);
+
+  let adjustFinalHeight = true;
+  if (node.width || node.height) {
+    adjustFinalHeight = false;
+    node.width = (node?.width ?? 0) - labelPaddingX * 2;
+    if (node.width < 50) {
+      node.width = 50;
+    }
+
+    node.height = (node?.height ?? 0) - labelPaddingY * 2;
+    if (node.height < 50) {
+      node.height = 50;
+    }
+  }
+
+  const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
+  const w = Math.max(bbox.width, node?.width ?? 0) + (labelPaddingX ?? 0) * 2;
+  const h = Math.max(bbox.height, node?.height ?? 0) + (labelPaddingY ?? 0) * 2;
   const waveAmplitude = h / 8;
-  const finalH = h + waveAmplitude;
+  const finalH = h + (adjustFinalHeight ? waveAmplitude : -waveAmplitude);
   const { cssStyles } = node;
 
   // To maintain minimum width
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/waveRectangle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/waveRectangle.ts
index 785cd1565..a347c80cb 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/waveRectangle.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/waveRectangle.ts
@@ -13,30 +13,31 @@ import rough from 'roughjs';
 export const waveRectangle = async (parent: SVGAElement, node: Node) => {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
-  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
-
-  const minWidth = 100; // Minimum width
-  const minHeight = 50; // Minimum height
-
   const nodePadding = node.padding ?? 0;
   const labelPaddingX = node.look === 'neo' ? nodePadding * 2 : nodePadding;
-  const labelPaddingY = node.look === 'neo' ? nodePadding * 1 : nodePadding;
-  const baseWidth = Math.max(bbox.width + labelPaddingX * 2, node?.width ?? 0);
-  const baseHeight = Math.max(bbox.height + labelPaddingY * 2, node?.height ?? 0);
+  const labelPaddingY = node.look === 'neo' ? nodePadding * 1.5 : nodePadding;
 
-  const aspectRatio = baseWidth / baseHeight;
+  if (node.width || node.height) {
+    node.width = node?.width ?? 0;
+    if (node.width < 100) {
+      node.width = 100;
+    }
 
-  let w = baseWidth;
-  let h = baseHeight;
+    node.height = node?.height ?? 0;
+    if (node.height < 50) {
+      node.height = 50;
+    }
 
-  if (w > h * aspectRatio) {
-    h = w / aspectRatio;
-  } else {
-    w = h * aspectRatio;
+    // Adjust for wave amplitude
+    const waveAmplitude = Math.min(node.height * 0.2, node.height / 4);
+    node.height = Math.ceil(node.height - labelPaddingY - waveAmplitude * (20 / 9));
+    node.width = node.width - labelPaddingX * 2;
   }
 
-  w = Math.max(w, minWidth);
-  h = Math.max(h, minHeight);
+  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
+
+  const w = Math.max(bbox.width, node?.width ?? 0) + labelPaddingX * 2;
+  const h = Math.max(bbox.height, node?.height ?? 0) + labelPaddingY;
 
   const waveAmplitude = Math.min(h * 0.2, h / 4);
   const finalH = h + waveAmplitude * 2;
@@ -73,6 +74,9 @@ export const waveRectangle = async (parent: SVGAElement, node: Node) => {
     waveRect.selectAll('path').attr('style', nodeStyles);
   }
 
+  node.width = w;
+  node.height = finalH;
+
   updateNodeBounds(node, waveRect);
   node.intersect = function (point) {
     const pos = intersect.polygon(node, points, point);
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/windowPane.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/windowPane.ts
index 6f91370fe..336fb30f4 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/windowPane.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/windowPane.ts
@@ -4,15 +4,32 @@ import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import intersect from '../intersect/index.js';
 
+/// Width of the frame on the top and left of the shape
+const rectOffset = 5;
+
 export const windowPane = async (parent: SVGAElement, node: Node) => {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
-  const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
+
   const paddingX = node.look === 'neo' ? (node.padding ?? 0) * 2 : (node.padding ?? 0);
   const paddingY = node.look === 'neo' ? (node.padding ?? 0) * 2 : (node.padding ?? 0);
-  const w = Math.max(bbox.width + paddingX * 2, node?.width ?? 0);
-  const h = Math.max(bbox.height + paddingY * 2, node?.height ?? 0);
-  const rectOffset = 5;
+
+  // 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) {
+    node.width = Math.max((node?.width ?? 0) - paddingX * 2 - rectOffset, 50);
+    node.height = Math.max((node?.height ?? 0) - paddingY * 2 - rectOffset, 50);
+  }
+
+  const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
+
+  const totalWidth = Math.max(bbox.width, node?.width ?? 0) + paddingX * 2 + rectOffset;
+  const totalHeight = Math.max(bbox.height, node?.height ?? 0) + paddingY * 2 + rectOffset;
+
+  const w = totalWidth - rectOffset;
+  const h = totalHeight - rectOffset;
   const x = -w / 2;
   const y = -h / 2;
   const { cssStyles } = node;