From 02cadd87fff55950da610be836538b4c6dcc3237 Mon Sep 17 00:00:00 2001
From: saurabhg772244 <saurabh@mermaidchart.com>
Date: Mon, 23 Sep 2024 15:02:01 +0530
Subject: [PATCH] Updated shaded process

---
 .../shapes/shadedProcess.ts                   | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

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 a15c14d64..382b7104b 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/shadedProcess.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/shadedProcess.ts
@@ -24,11 +24,22 @@ export const shadedProcess = async (parent: SVGAElement, node: Node) => {
     options.fillStyle = 'solid';
   }
 
-  const roughNode = rc.rectangle(x - 8, y, w + 16, h, options);
-  const l1 = rc.line(x, y, x, y + h, options);
+  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, y },
+    { x, y: y + h },
+  ];
 
-  const rect = shapeSvg.insert(() => l1, ':first-child');
-  rect.insert(() => roughNode, ':first-child');
+  const roughNode = rc.polygon(
+    points.map((p) => [p.x, p.y]),
+    options
+  );
+
+  const rect = shapeSvg.insert(() => roughNode, ':first-child');
 
   rect.attr('class', 'basic label-container').attr('style', cssStyles);