Updated shapes using the set width/height

packages/mermaid/src/rendering-util/rendering-elements/shapes/circle.ts

@@ -12,21 +12,14 @@ export const circle = async (parent: SVGAElement, node: Node): Promise<SVGAEleme
   // 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 || node.height) {
-    if (node.width < 20) {
+    node.width = (node.width ?? 6) - padding * 2;
-      node.width = 20;
+    node.height = node.width;
-    }
-
-    node.height = (node?.height ?? 0) - (node.padding ?? 0) * 2;
-    if (node.height < 10) {
-      node.height = 10;
-    }
   }
   const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
 
-  const radius = Math.max(bbox.width / 2, (node?.width ?? 0) / 2) + (node.padding ?? 0);
+  const radius = (node?.width ? node?.width / 2 : bbox.width / 2) + padding;
   let circleElem;
   const { cssStyles } = node;
 
@@ -49,6 +42,7 @@ export const circle = async (parent: SVGAElement, node: Node): Promise<SVGAEleme
   }
 
   updateNodeBounds(node, circleElem);
+
   node.intersect = function (point) {
     log.info('Circle intersect', node, radius, point);
     return intersect.circle(node, radius, point);

packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts

@@ -50,8 +50,8 @@ export const createInnerCylinderPathD = (
   return [`M${x - width / 2},${-height / 2}`, `a${rx},${ry} 0,0,0 ${width},0`].join(' ');
 };
 
-const MIN_HEIGHT = 25;
+const MIN_HEIGHT = 8;
-const MIN_WIDTH = 25;
+const MIN_WIDTH = 8;
 export const cylinder = async (parent: SVGAElement, node: Node) => {
   const { themeVariables } = getConfig();
   const { useGradient } = themeVariables;

packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts

@@ -13,21 +13,15 @@ export const drawRect = async (parent: SVGAElement, node: Node, options: RectOpt
   // 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) - options.labelPaddingX * 2;
+    node.width = (node?.width ?? 10) - options.labelPaddingX * 2;
-    if (node.width < 20) {
+    node.height = (node?.height ?? 10) - options.labelPaddingY * 2;
-      node.width = 20;
-    }
-
-    node.height = (node?.height ?? 0) - options.labelPaddingY * 2;
-    if (node.height < 10) {
-      node.height = 10;
-    }
   }
 
   const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
 
-  const totalWidth = Math.max(bbox.width, node?.width || 0) + options.labelPaddingX * 2;
+  const totalWidth = (node?.width ? node?.width : bbox.width) + options.labelPaddingX * 2;
-  const totalHeight = Math.max(bbox.height, node?.height || 0) + options.labelPaddingY * 2;
+  const totalHeight = (node?.height ? node?.height : bbox.height) + options.labelPaddingY * 2;
+
   const x = -totalWidth / 2;
   const y = -totalHeight / 2;
   let rect;

packages/mermaid/src/rendering-util/rendering-elements/shapes/rectLeftInvArrow.ts

@@ -15,20 +15,13 @@ export const rect_left_inv_arrow = async (
   const labelPaddingY = node.look === 'neo' ? nodePadding * 1.5 : (node.padding ?? 0);
 
   if (node.width || node.height) {
-    node.width = (node?.width ?? 0) - labelPaddingX * 2;
+    node.width = (node?.width ?? 10) - labelPaddingX * 2;
-    if (node.width < 50) {
+    node.height = (node?.height ?? 10) - labelPaddingY * 2;
-      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 * 2;
+  const w = (node?.width ? node?.width : bbox.width) + labelPaddingX * 2;
-  const h = Math.max(bbox.height, node?.height ?? 0) + labelPaddingY * 2;
+  const h = (node?.height ? node?.height : bbox.height) + labelPaddingY * 2;
 
   const x = -w / 2;
   const y = -h / 2;

packages/mermaid/src/rendering-util/rendering-elements/shapes/stadium.ts

@@ -62,8 +62,8 @@ export const stadium = async (parent: SVGAElement, node: Node) => {
   // if so set it to min value
   if (node.width || node.height) {
     node.width = (node?.width ?? 0) - labelPaddingX * 2;
-    if (node.width < 20) {
+    if (node.width < 10) {
-      node.width = 20;
+      node.width = 10;
     }
 
     node.height = (node?.height ?? 0) - labelPaddingY * 2;

packages/mermaid/src/rendering-util/rendering-elements/shapes/subroutine.ts

@@ -50,14 +50,14 @@ export const subroutine = async (parent: SVGAElement, node: Node) => {
   // 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.width = Math.max((node?.width ?? 0) - labelPaddingX - 2 * FRAME_WIDTH, 10);
-    node.height = Math.max((node?.height ?? 0) - labelPaddingY, 50);
+    node.height = Math.max((node?.height ?? 0) - labelPaddingY, 10);
   }
 
   const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
 
-  const totalWidth = Math.max(bbox.width, node?.width || 0) + 2 * FRAME_WIDTH + labelPaddingX;
+  const totalWidth = (node?.width ? node?.width : bbox.width) + 2 * FRAME_WIDTH + labelPaddingX;
-  const totalHeight = Math.max(bbox.height, node?.height || 0) + labelPaddingY;
+  const totalHeight = (node?.height ? node?.height : bbox.height) + labelPaddingY;
 
   const w = totalWidth - 2 * FRAME_WIDTH;
   const h = totalHeight;