From d2dfb639c83d5498ca3d503e6283b6d65b203c04 Mon Sep 17 00:00:00 2001
From: Ashish Jain <ashishjain0512@gmail.com>
Date: Tue, 1 Oct 2024 18:52:26 +0200
Subject: [PATCH] fix for min size for several shapes

---
 cypress/platform/min-size-tester.html         | 57 +++++++++----------
 .../rendering-elements/shapes/card.ts         |  8 +--
 .../rendering-elements/shapes/cylinder.ts     | 12 ++--
 .../rendering-elements/shapes/doubleCircle.ts | 13 ++---
 .../rendering-elements/shapes/filledCircle.ts | 14 ++---
 .../rendering-elements/shapes/forkJoin.ts     |  8 +--
 .../rendering-elements/shapes/hexagon.ts      | 18 ++++--
 .../rendering-elements/shapes/hourglass.ts    |  4 +-
 .../shapes/invertedTrapezoid.ts               | 12 ++--
 .../rendering-elements/shapes/leanLeft.ts     | 12 ++--
 .../rendering-elements/shapes/leanRight.ts    | 12 ++--
 .../rendering-elements/shapes/question.ts     |  6 +-
 .../shapes/shadedProcess.ts                   | 10 ++--
 .../rendering-elements/shapes/stadium.ts      |  4 +-
 .../rendering-elements/shapes/stateEnd.ts     |  6 +-
 .../rendering-elements/shapes/text.ts         |  4 +-
 .../rendering-elements/shapes/trapezoid.ts    | 12 ++--
 17 files changed, 108 insertions(+), 104 deletions(-)
diff --git a/cypress/platform/min-size-tester.html b/cypress/platform/min-size-tester.html
index 3b52bfb87..f872cc598 100644
--- a/cypress/platform/min-size-tester.html
+++ b/cypress/platform/min-size-tester.html
@@ -34,6 +34,7 @@
         font-family: 'Arial';
         background-color: #333;
       }
+
       h3 {
         color: white;
       }
@@ -41,11 +42,9 @@
   </head>
 
   <body>
-    <div class="flex">
-      <h3>Fixed</h3>
+    <div class="flex w-full">
       <div id="diagram-fixed"></div>
       <div id="diagram-normal"></div>
-      <h3>Non fixed</h3>
     </div>
     <script type="module">
       import mermaid from './mermaid.esm.mjs';
@@ -64,27 +63,27 @@
         logLevel: 1,
       });
 
-      // let shape = 'rect';
-      // let shape = 'rounded';
-      // let shape = 'stadium';
-      // let shape = 'fr-rect';
-      // let shape = 'cyl';
-      let shape = 'circle';
-      // let shape = 'odd';
-      // let shape = 'diam';
-      // let shape = 'hex';
-      // let shape = 'lean-r';
-      // let shape = 'lean-l';
-      // let shape = 'trap-b';
-      // let shape = 'trap-t';
-      // let shape = 'dbl-circ';
-      // let shape = 'text';
-      // let shape = 'notch-rect';
-      // let shape = 'lin-rect';
-      // let shape = 'sm-circ';
-      // let shape = 'fr-circ';
-      // let shape = 'fork';
-      // let shape = 'hourglass';
+      // let shape = 'rect';    // Done
+      //let shape = 'rounded';  // Done
+      //let shape = 'stadium';  // Done
+      // let shape = 'fr-rect'; // Done
+      // let shape = 'cyl'; // Done
+      //let shape = 'circle'; // Done
+      // let shape = 'odd'; // Done
+      // let shape = 'diam'; //Done
+      // let shape = 'hex'; // Done
+      // let shape = 'lean-r'; // Done
+      // let shape = 'lean-l'; // Done
+      // let shape = 'trap-b'; // Done
+      // let shape = 'trap-t'; // Done
+      // let shape = 'dbl-circ'; // Done
+      // let shape = 'text'; // Done
+      // let shape = 'notch-rect'; // Done
+      // let shape = 'lin-rect'; // Done
+      //let shape = 'sm-circ'; // Done
+      // let shape = 'fr-circ'; //Done
+      //let shape = 'fork'; // Done
+      //let shape = 'hourglass'; //Done
       // let shape = 'brace';
       // let shape = 'brace-r';
       // let shape = 'braces';
@@ -117,9 +116,9 @@ config:
       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@{ label: "X", shape: '${shape}'}
-                n82@{ label: "X", shape: '${shape}'}
-                n83@{ label: "Y", shape: '${shape}'}
+                n81@{ label: "n81", shape: '${shape}'}
+                %%n82@{ label: "n82", shape: '${shape}'}
+                %%n83@{ label: "n83", shape: '${shape}'}
                 `;
 
       let positions = {
@@ -128,8 +127,8 @@ config:
           n81: {
             x: 0,
             y: 10,
-            width: 37.2,
-            height: 10,
+            width: 30,
+            height: 30,
           },
           n80: {
             x: -400,
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 a68fd72a3..e72c9f8b9 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/card.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/card.ts
@@ -25,14 +25,14 @@ export async function card(parent: SVGAElement, node: Node): Promise<SVGAElement
   // 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);
+    node.width = Math.max((node?.width ?? 0) - (node.padding ?? 0), 10);
+    node.height = Math.max((node?.height ?? 0) - (node.padding ?? 0), 10);
   }
 
   const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
 
-  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 totalWidth = (node?.width ? node?.width : bbox.width) + (node.padding ?? 0);
+  const totalHeight = (node?.height ? node?.height : bbox.height) + (node.padding ?? 0);
 
   const h = totalHeight;
   const w = totalWidth;
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 1f78f7f7e..c954e1f7f 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts
@@ -63,14 +63,16 @@ export const cylinder = async (parent: SVGAElement, node: Node) => {
   const labelPaddingY = node.look === 'neo' ? nodePadding * 1 : nodePadding;
 
   if (node.width || node.height) {
+    const originalWidth = node.width ?? 0;
     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;
+    const rx = originalWidth / 2;
+    const ry = rx / (2.5 + originalWidth / 50);
+    node.height = (node.height ?? 0) - labelPaddingX - ry * 3;
+
     if (node.height < MIN_HEIGHT) {
       node.height = MIN_HEIGHT;
     }
@@ -78,10 +80,10 @@ export const cylinder = async (parent: SVGAElement, node: Node) => {
 
   const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
 
-  const w = Math.max(bbox.width, node.width ?? 0) + labelPaddingY;
+  const w = (node.width ? node.width : bbox.width) + labelPaddingY;
   const rx = w / 2;
   const ry = rx / (2.5 + w / 50);
-  const h = Math.max(bbox.height, node.height ?? 0) + labelPaddingX + ry;
+  const h = (node.height ? node.height : bbox.height) + 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/doubleCircle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/doubleCircle.ts
index 8d5920f4b..3c26849f4 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/doubleCircle.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/doubleCircle.ts
@@ -15,20 +15,15 @@ export const doublecircle = async (parent: SVGAElement, node: Node): Promise<SVG
   // 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;
+    if (node.width || node.height) {
+      node.width = (node.width ?? 6) - padding * 2;
+      node.height = node.width;
     }
   }
 
   const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
 
-  const outerRadius = Math.max(bbox.width / 2, (node?.width ?? 0) / 2) + (node.padding ?? 0);
+  const outerRadius = (node?.width ? node?.width / 2 : bbox.width / 2) + (node.padding ?? 0);
   const innerRadius = outerRadius - gap;
 
   let circleGroup;
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 41ed10e01..8fce47283 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/filledCircle.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/filledCircle.ts
@@ -15,24 +15,24 @@ export const filledCircle = (
 
   // 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),
+  // also check if the width or height is less than minimum default values (10),
   // if so set it to min value
   if (node.width || node.height) {
-    if ((node.width ?? 0) < 50) {
-      node.width = 50;
+    if ((node.width ?? 0) < 10) {
+      node.width = 10;
     }
 
-    if ((node.height ?? 0) < 50) {
-      node.height = 50;
+    if ((node.height ?? 0) < 10) {
+      node.height = 10;
     }
   }
 
   if (!node.width) {
-    node.width = 50;
+    node.width = 10;
   }
 
   if (!node.height) {
-    node.width = 50;
+    node.width = 10;
   }
 
   const shapeSvg = parent
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/forkJoin.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/forkJoin.ts
index c6a34e929..6265dfeb5 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/forkJoin.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/forkJoin.ts
@@ -18,12 +18,12 @@ export const forkJoin = (
     .attr('id', node.domId ?? node.id);
 
   const { cssStyles } = node;
-  let width = Math.max(70, node?.width ?? 0);
-  let height = Math.max(10, node?.height ?? 0);
+  let width = node?.width ? node?.width : 70;
+  let height = node?.height ? node?.height : 10;
 
   if (dir === 'LR') {
-    width = Math.max(10, node?.width ?? 0);
-    height = Math.max(70, node?.height ?? 0);
+    width = node?.width ? node?.width : 10;
+    height = node?.height ? node?.height : 70;
   }
 
   const x = (-1 * width) / 2;
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/hexagon.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/hexagon.ts
index 39a65c69c..87b971a99 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/hexagon.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/hexagon.ts
@@ -26,16 +26,24 @@ export const createHexagonPathD = (
 
 export const hexagon = 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 f = 4;
+  node.labelStyle = labelStyles;
   const nodePadding = node.padding ?? 0;
   const labelPaddingX = node.look === 'neo' ? nodePadding * 3 : nodePadding;
   const labelPaddingY = node.look === 'neo' ? nodePadding * 1.5 : nodePadding;
-  const h = Math.max(bbox.height + labelPaddingX, node?.height ?? 0);
+  if (node.width || node.height) {
+    const originalHeight = node.height ?? 0;
+    const m = originalHeight / f;
+    node.width = (node?.width ?? 0) - 2 * m - labelPaddingY;
+    node.height = (node.height ?? 0) - labelPaddingX;
+  }
+
+  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
+
+  const h = (node?.height ? node?.height : bbox.height) + labelPaddingX;
   const m = h / f;
-  const w = Math.max(bbox.width + 2 * m + labelPaddingY, node?.width ?? 0);
+
+  const w = (node?.width ? node?.width : bbox.width) + 2 * m + labelPaddingY;
   const points = [
     { x: m, y: 0 },
     { x: w - m, y: 0 },
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 cdaab2e88..6046b97cf 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(50, node?.width ?? 0);
-  const h = Math.max(50, node?.height ?? 0);
+  const w = node?.width ? node?.width : 30;
+  const h = node?.height ? node?.height : 30;
 
   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 51cb4560e..a1841b123 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/invertedTrapezoid.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/invertedTrapezoid.ts
@@ -28,21 +28,21 @@ export const inv_trapezoid = async (parent: SVGAElement, node: Node): Promise<SV
   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;
+    if (node.width < 10) {
+      node.width = 10;
     }
 
     node.height = node?.height ?? 0;
-    if (node.height < 50) {
-      node.height = 50;
+    if (node.height < 10) {
+      node.height = 10;
     }
     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 h = (node?.height ? node?.height : bbox.height) + labelPaddingY;
+  const w = node?.width ? node?.width : bbox.width;
 
   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 a15269e61..0769a5b18 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanLeft.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanLeft.ts
@@ -13,13 +13,13 @@ export const lean_left = async (parent: SVGAElement, node: Node): Promise<SVGAEl
 
   if (node.width || node.height) {
     node.width = node?.width ?? 0;
-    if (node.width < 50) {
-      node.width = 50;
+    if (node.width < 10) {
+      node.width = 10;
     }
 
     node.height = node?.height ?? 0;
-    if (node.height < 50) {
-      node.height = 50;
+    if (node.height < 10) {
+      node.height = 10;
     }
     const _dx = (3 * node.height) / 6;
     node.height = node.height - labelPaddingY;
@@ -27,8 +27,8 @@ export const lean_left = async (parent: SVGAElement, node: Node): Promise<SVGAEl
   }
 
   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 h = (node?.height ? node?.height : bbox.height) + labelPaddingY;
+  const w = node?.width ? node?.width : bbox.width;
   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 d2f43f9d9..0589be65a 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanRight.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanRight.ts
@@ -13,13 +13,13 @@ export const lean_right = async (parent: SVGAElement, node: Node): Promise<SVGAE
 
   if (node.width || node.height) {
     node.width = node?.width ?? 0;
-    if (node.width < 50) {
-      node.width = 50;
+    if (node.width < 10) {
+      node.width = 10;
     }
 
     node.height = node?.height ?? 0;
-    if (node.height < 50) {
-      node.height = 50;
+    if (node.height < 10) {
+      node.height = 10;
     }
     const _dx = (3 * node.height) / 6;
     node.height = node.height - labelPaddingY;
@@ -28,8 +28,8 @@ export const lean_right = async (parent: SVGAElement, node: Node): Promise<SVGAE
 
   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 h = (node?.height ? node?.height : bbox.height) + labelPaddingY;
+  const w = node?.width ? node?.width : bbox.width;
 
   const points = [
     { x: (-3 * h) / 6, y: 0 },
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 1b62031e9..76b175e29 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/question.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/question.ts
@@ -22,8 +22,8 @@ export const question = async (parent: SVGAElement, node: Node): Promise<SVGAEle
   const padding = node.padding ?? 0;
   if (node.width || node.height) {
     node.width = (node?.width ?? 0) - padding * 8;
-    if (node.width < 20) {
-      node.width = 20;
+    if (node.width < 10) {
+      node.width = 10;
     }
 
     node.height = (node?.height ?? 0) - padding * 8;
@@ -33,7 +33,7 @@ export const question = async (parent: SVGAElement, node: Node): Promise<SVGAEle
   }
 
   const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
-  const w = (Math.max(bbox.width, node?.width ?? 0) + padding * 8) / 2;
+  const w = ((node?.width ? node?.width : bbox.width) + padding * 8) / 2;
   const h = w;
   const s = w + h;
 
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 ad8b13c4a..b5e0b1836 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/shadedProcess.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/shadedProcess.ts
@@ -16,17 +16,17 @@ export const shadedProcess = async (parent: SVGAElement, node: 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),
+  // also check if the width or height is less than minimum default values (10),
   // 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);
+    node.width = Math.max((node?.width ?? 0) - paddingX * 2 - FRAME_WIDTH, 10);
+    node.height = Math.max((node?.height ?? 0) - paddingY * 2, 10);
   }
 
   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 totalWidth = (node?.width ? node?.width : bbox.width) + paddingX * 2 + FRAME_WIDTH;
+  const totalHeight = (node?.height ? node?.height : bbox.height) + paddingY * 2;
   const w = totalWidth - FRAME_WIDTH;
   const h = totalHeight;
   const x = -(totalWidth - FRAME_WIDTH) / 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 fee56e893..f1b9c5b40 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stadium.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stadium.ts
@@ -76,8 +76,8 @@ export const stadium = async (parent: SVGAElement, node: 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 w = Math.max(bbox.width, node?.width || 0) + labelPaddingX * 2;
-  const h = Math.max(bbox.height, node?.height || 0) + labelPaddingY * 2;
+  const w = (node?.width ? node?.width : bbox.width) + labelPaddingX * 2;
+  const h = (node?.height ? node?.height : bbox.height) + labelPaddingY * 2;
 
   let rect;
   const { cssStyles } = node;
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 40c7c4671..7a2a416a4 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts
@@ -20,11 +20,11 @@ export const stateEnd = (
   // 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) {
+    if ((node.width ?? 0) < 14) {
       node.width = 14;
     }
 
-    if ((node.height ?? 0) < 50) {
+    if ((node.height ?? 0) < 14) {
       node.height = 14;
     }
   }
@@ -40,7 +40,7 @@ export const stateEnd = (
   const shapeSvg = parent
     .insert('g')
     .attr('class', 'node default')
-    .attr('id', node.domId || node.id);
+    .attr('id', node.domId ?? node.id);
 
   // @ts-ignore TODO: Fix rough typings
   const rc = rough.svg(shapeSvg);
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/text.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/text.ts
index 40c59e3aa..6ea5af327 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/text.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/text.ts
@@ -12,8 +12,8 @@ export async function text(parent: SVGAElement, node: Node): Promise<SVGAElement
   // width > labelWidth
 
   // labelWidth > width
-  const totalWidth = node?.width ?? bbox.width;
-  const totalHeight = Math.max(bbox.height, node?.height ?? 0);
+  const totalWidth = node?.width ? node?.width : bbox.width;
+  const totalHeight = node?.height ? node?.height : bbox.height;
   const x = -totalWidth / 2;
   const y = -totalHeight / 2;
 
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 7b6e3ed96..20107d6ed 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts
@@ -28,21 +28,21 @@ export const trapezoid = async (parent: SVGAElement, node: Node): Promise<SVGAEl
 
   if (node.width || node.height) {
     node.width = node?.width ?? 0;
-    if (node.width < 50) {
-      node.width = 50;
+    if (node.width < 10) {
+      node.width = 10;
     }
 
     node.height = node?.height ?? 0;
-    if (node.height < 50) {
-      node.height = 50;
+    if (node.height < 10) {
+      node.height = 10;
     }
     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 h = (node?.height ? node?.height : bbox.height) + labelPaddingY;
+  const w = node?.width ? node?.width : bbox.width;
 
   const points = [
     { x: (-3 * h) / 6, y: 0 },
