diff --git a/cypress/platform/size-tester.html b/cypress/platform/size-tester.html
index c5801a21d..32204085c 100644
--- a/cypress/platform/size-tester.html
+++ b/cypress/platform/size-tester.html
@@ -56,7 +56,7 @@
logLevel: 1,
});
- let shape = 'dbl-circ';
+ let shape = 'circle';
let code = `
flowchart TB
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/circle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/circle.ts
index 015db1241..541f9e35c 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/circle.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/circle.ts
@@ -8,24 +8,25 @@ import rough from 'roughjs';
export const circle = async (parent: SVGAElement, node: Node): Promise => {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
- const padding = node.padding ?? 0;
-
+ // 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),
+ // 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) - padding * 2;
+ node.height = (node?.height ?? 0) - (node.padding ?? 0) * 2;
if (node.height < 50) {
node.height = 50;
}
}
+ const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
- const { shapeSvg, halfPadding } = await labelHelper(parent, node, getNodeClasses(node));
- const labelPadding = node.look === 'neo' ? halfPadding * 2 : halfPadding;
-
- const radius = (node.width ?? 0) / 2 + labelPadding;
+ const radius = Math.max(bbox.width / 2, (node?.width ?? 0) / 2) + (node.padding ?? 0);
let circleElem;
const { cssStyles } = node;