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/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/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/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/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/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/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;