From 71e09bcaefa402dfa2f7b01bb73ea2e868f9352b Mon Sep 17 00:00:00 2001
From: omkarht <omkar@mermaidchart.com>
Date: Mon, 18 Aug 2025 18:21:41 +0530
Subject: [PATCH] fix: refactored code and adjusted shape, shape label

on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
---
 .../mermaid/src/diagrams/sequence/svgDraw.js  | 43 ++++++++-----------
 1 file changed, 18 insertions(+), 25 deletions(-)

diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.js b/packages/mermaid/src/diagrams/sequence/svgDraw.js
index 95863234d..85566ab35 100644
--- a/packages/mermaid/src/diagrams/sequence/svgDraw.js
+++ b/packages/mermaid/src/diagrams/sequence/svgDraw.js
@@ -468,20 +468,18 @@ const drawActorTypeCollections = function (elem, actor, conf, isFooter) {
   rect.width = actor.width;
   rect.height = actor.height;
   rect.class = cssclass;
-  // rect.rx = 3;
-  // rect.ry = 3;
   rect.name = actor.name;
 
-  // 🔹 DRAW STACKED RECTANGLES
+  // DRAW STACKED RECTANGLES
   const offset = 6;
   const shadowRect = {
     ...rect,
-    x: rect.x + offset,
-    y: rect.y + (isFooter ? +offset : -offset),
+    x: rect.x + (isFooter ? -offset : -offset),
+    y: rect.y + (isFooter ? +offset : +offset),
     class: 'actor',
   };
-  drawRect(g, shadowRect);
   const rectElem = drawRect(g, rect); // draw main rectangle on top
+  drawRect(g, shadowRect);
   actor.rectData = rect;
 
   if (actor.properties?.icon) {
@@ -496,8 +494,8 @@ const drawActorTypeCollections = function (elem, actor, conf, isFooter) {
   _drawTextCandidateFunc(conf, hasKatex(actor.description))(
     actor.description,
     g,
-    rect.x,
-    rect.y,
+    rect.x - offset,
+    rect.y + offset,
     rect.width,
     rect.height,
     { class: `actor ${ACTOR_BOX_CLASS}` },
@@ -686,13 +684,13 @@ const drawActorTypeControl = function (elem, actor, conf, isFooter) {
     .append('defs')
     .append('marker')
     .attr('id', 'filled-head-control')
-    .attr('refX', 15.5)
-    .attr('refY', 7)
+    .attr('refX', 11)
+    .attr('refY', 5.8)
     .attr('markerWidth', 20)
     .attr('markerHeight', 28)
-    .attr('orient', '180')
+    .attr('orient', '172.5')
     .append('path')
-    .attr('d', 'M 18,7 L9,13 L14,7 L9,1 Z');
+    .attr('d', 'M 14.4 5.6 L 7.2 10.4 L 8.8 5.6 L 7.2 0.8 Z');
 
   // Draw the base circle
   actElem
@@ -717,7 +715,7 @@ const drawActorTypeControl = function (elem, actor, conf, isFooter) {
     actor.description,
     actElem,
     rect.x,
-    rect.y + 30,
+    rect.y + r + (isFooter ? 5 : 10),
     rect.width,
     rect.height,
     { class: `actor ${ACTOR_MAN_FIGURE_CLASS}` },
@@ -753,7 +751,7 @@ const drawActorTypeEntity = function (elem, actor, conf, isFooter) {
   rect.class = 'actor';
 
   const cx = actor.x + actor.width / 2;
-  const cy = actorY + 25;
+  const cy = actorY + (!isFooter ? 25 : 10);
   const r = 18;
 
   actElem
@@ -797,7 +795,7 @@ const drawActorTypeEntity = function (elem, actor, conf, isFooter) {
     actor.description,
     actElem,
     rect.x,
-    rect.y + (!isFooter ? (cy + r - actorY) / 2 : (cy - actorY) / 2 + r + 2),
+    rect.y + (!isFooter ? (cy + r - actorY) / 2 : (cy - actorY + r - 5) / 2),
     rect.width,
     rect.height,
     { class: `actor ${ACTOR_MAN_FIGURE_CLASS}` },
@@ -871,7 +869,7 @@ const drawActorTypeDatabase = function (elem, actor, conf, isFooter) {
   rect.x = actor.x;
   rect.y = actorY;
   const w = rect.width / 4;
-  const h = rect.height * 0.8;
+  const h = rect.width / 4;
   const rx = w / 2;
   const ry = rx / (2.5 + w / 50);
 
@@ -896,7 +894,7 @@ const drawActorTypeDatabase = function (elem, actor, conf, isFooter) {
     .attr('class', cssclass);
 
   if (!isFooter) {
-    cylinderGroup.attr('transform', `translate(${w * 1.5}, ${rect.height / 4 - 2 * ry})`);
+    cylinderGroup.attr('transform', `translate(${w * 1.5}, ${(rect.height + ry) / 4})`);
   } else {
     cylinderGroup.attr('transform', `translate(${w * 1.5}, ${rect.height / 4 - 2 * ry})`);
   }
@@ -905,7 +903,7 @@ const drawActorTypeDatabase = function (elem, actor, conf, isFooter) {
     actor.description,
     g,
     rect.x,
-    rect.y + (!isFooter ? rect.height / 2 : h / 2 + ry),
+    rect.y + (!isFooter ? (rect.height + ry) / 2 : (rect.height + h) / 4),
     rect.width,
     rect.height,
     { class: `actor ${ACTOR_BOX_CLASS}` },
@@ -961,8 +959,6 @@ const drawActorTypeBoundary = function (elem, actor, conf, isFooter) {
   rect.width = actor.width;
   rect.height = actor.height;
   rect.class = 'actor';
-  rect.rx = 3;
-  rect.ry = 3;
 
   actElem
     .append('line')
@@ -984,8 +980,7 @@ const drawActorTypeBoundary = function (elem, actor, conf, isFooter) {
     .append('circle')
     .attr('cx', actor.x + actor.width / 2)
     .attr('cy', actorY + 10)
-    .attr('r', radius)
-    .attr('width', actor.width);
+    .attr('r', radius);
 
   const bounds = actElem.node().getBBox();
   actor.height = bounds.height + (conf.sequence.labelBoxHeight ?? 0);
@@ -994,7 +989,7 @@ const drawActorTypeBoundary = function (elem, actor, conf, isFooter) {
     actor.description,
     actElem,
     rect.x,
-    rect.y + (!isFooter ? radius / 2 : radius / 2),
+    rect.y + (!isFooter ? radius / 2 + 3 : radius / 2 - 4),
     rect.width,
     rect.height,
     { class: `actor ${ACTOR_MAN_FIGURE_CLASS}` },
@@ -1007,8 +1002,6 @@ const drawActorTypeBoundary = function (elem, actor, conf, isFooter) {
     actElem.attr('transform', `translate(0,${radius / 2 + 7})`);
   }
 
-  // actElem.attr('transform', `translate(${rect.width / 2}, ${actorY + rect.height / 2})`);
-
   return actor.height;
 };