diff --git a/cypress/platform/saurabh.html b/cypress/platform/saurabh.html
index 9e222680e..23e82d737 100644
--- a/cypress/platform/saurabh.html
+++ b/cypress/platform/saurabh.html
@@ -63,16 +63,18 @@
flowchart
- A@{ shape: taggedRect, label: "title wit \n test \n free \n adsdbab \n duawgdu \n awdb \n wdgawud \n and with verry long single line textdauwdbuawydvuawvdyawvdhavdyawv" }@
- B
- C
- D
- E
- A --> B
- A --> C
- D --> A
- E --> A
-
+A
+ B@{ shape: multiRect, label: "title aduwab whgdawhbd wajhdbawj" }@
+ F@{ shape: multiRect, label: "title " }@
+ G@{ shape: multiRect, label: "title \n duawd \n duawd \n duawd \n duawd" }@
+ C
+ D
+ E
+ C -->B
+ B --> D
+ B --> E
+ F --> A
+ A --> F
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/nodes.js b/packages/mermaid/src/rendering-util/rendering-elements/nodes.js
index 366a3d47e..0febe8fb2 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/nodes.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/nodes.js
@@ -39,6 +39,7 @@ import { trapezoidalPentagon } from './shapes/trapezoidalPentagon.js';
import { flippedTriangle } from './shapes/flippedTriangle.js';
import { hourglass } from './shapes/hourglass.js';
import { taggedRect } from './shapes/taggedRect.js';
+import { multiRect } from './shapes/multiRect.js';
const shapes = {
state,
@@ -81,6 +82,7 @@ const shapes = {
flippedTriangle,
hourglass,
taggedRect,
+ multiRect,
};
const nodeElems = new Map();
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiRect.ts
new file mode 100644
index 000000000..2c54b85da
--- /dev/null
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiRect.ts
@@ -0,0 +1,87 @@
+import { labelHelper, getNodeClasses, updateNodeBounds, createPathFromPoints } from './util.js';
+import type { Node } from '$root/rendering-util/types.d.ts';
+import {
+ styles2String,
+ userNodeOverrides,
+} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+import rough from 'roughjs';
+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 h = bbox.height + node.padding;
+ const w = bbox.width + node.padding;
+ const x = -w / 2;
+ const y = -h / 2;
+ const rectOffset = 5;
+ const { cssStyles } = node;
+
+ // @ts-ignore - rough is not typed
+ const rc = rough.svg(shapeSvg);
+ const options = userNodeOverrides(node, {});
+
+ const rectPoints = [
+ { x, y },
+ { x: x + w, y },
+ { x: x + w, y: y + h },
+ { x, y: y + h },
+ ];
+ const secondRectPoints = [
+ { x: x + rectOffset, y: y - rectOffset },
+ { x: x + w + rectOffset, y: y - rectOffset },
+ { x: x + w + rectOffset, y: y + h - rectOffset },
+ { x: x + rectOffset, y: y + h - rectOffset },
+ ];
+ const thirdRectPoints = [
+ { x: x + 2 * rectOffset, y: y - 2 * rectOffset },
+ { x: x + w + 2 * rectOffset, y: y - 2 * rectOffset },
+ { x: x + w + 2 * rectOffset, y: y + h - 2 * rectOffset },
+ { x: x + 2 * rectOffset, y: y + h - 2 * rectOffset },
+ ];
+
+ if (node.look !== 'handdrawn') {
+ options.roughness = 0;
+ options.fillStyle = 'solid';
+ }
+
+ const rectPath = createPathFromPoints(rectPoints);
+ const rectNode = rc.path(rectPath, options);
+
+ const secondRectPath = createPathFromPoints(secondRectPoints);
+ const secondRectNode = rc.path(secondRectPath, options);
+
+ const thirdRectPath = createPathFromPoints(thirdRectPoints);
+ const thirdRectNode = rc.path(thirdRectPath, options);
+
+ const taggedRect = shapeSvg.insert('g', ':first-child');
+ taggedRect.insert(() => thirdRectNode, ':first-child');
+ taggedRect.insert(() => secondRectNode);
+ taggedRect.insert(() => rectNode);
+
+ taggedRect.attr('class', 'basic label-container');
+
+ if (cssStyles) {
+ taggedRect.attr('style', cssStyles);
+ }
+
+ if (nodeStyles) {
+ taggedRect.attr('style', nodeStyles);
+ }
+
+ taggedRect.attr('transform', `translate(-${rectOffset},${rectOffset})`);
+ label.attr(
+ 'transform',
+ `translate(${-(bbox.width / 2) - rectOffset}, ${h / 2 - bbox.height - rectOffset})`
+ );
+
+ updateNodeBounds(node, taggedRect);
+
+ node.intersect = function (point) {
+ const pos = intersect.rect(node, point);
+ return pos;
+ };
+
+ return shapeSvg;
+};