diff --git a/cypress/platform/knsv-recursive.html b/cypress/platform/knsv-recursive.html
index 40081024d..ee98c9651 100644
--- a/cypress/platform/knsv-recursive.html
+++ b/cypress/platform/knsv-recursive.html
@@ -95,7 +95,7 @@
}
.mermaid svg {
- /* font-size: 18px !important; */
+ font-size: 16px !important;
font-family: 'Recursive', serif;
font-optical-sizing: auto;
font-weight: 500;
@@ -128,10 +128,10 @@ flowchart TD
A("ss") --- n1["Rectangle"] & n2["Rounded"] & n3(["Stadium"])
n1 --x n4["Diamond"]
n2 --o n5["Hexagon"]
- n3 --> n6["Lean Left"]
+ n3 --> n6["Parallelogram"]
n5 o--o n7["Trapezoid"]
n4 x--x n8["Lean Right"]
- n6 <--> n9["Lined Doc"]
+ n6 <--> n9(("Circle"))
n8 --> n10["Rose"]
n7 --> n11["Pine"]
n9 --> n12["Peach"]
@@ -141,7 +141,6 @@ flowchart TD
n6@{ shape: lean-l}
n7@{ shape: trap-b}
n8@{ shape: lean-r}
- n9@{ shape: lin-doc}
n10:::Rose
n11:::Pine
n12:::Peach
@@ -217,7 +216,7 @@ flowchart TD
kanban: {
htmlLabels: false,
},
- fontSize: 12,
+ fontSize: 16,
logLevel: 0,
securityLevel: 'loose',
callback,
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 f752e5000..3ed09bf2b 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/hexagon.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/hexagon.ts
@@ -26,11 +26,14 @@ export const createHexagonPathD = (
export async function hexagon(parent: D3Selection, node: Node) {
const { labelStyles, nodeStyles } = styles2String(node);
- const f = 4;
+ const f = node.look === 'neo' ? 3.5 : 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 wa = 70;
+ const ha = 32;
+
+ const labelPaddingX = node.look === 'neo' ? wa : nodePadding;
+ const labelPaddingY = node.look === 'neo' ? ha : nodePadding;
if (node.width || node.height) {
const originalHeight = node.height ?? 0;
const m = originalHeight / f;
@@ -43,7 +46,11 @@ export async function hexagon(parent: D3Selection<
const h = (node?.height ? node?.height : bbox.height) + labelPaddingX;
const m = h / f;
- const w = (node?.width ? node?.width : bbox.width) + 2 * m + labelPaddingY;
+ const w =
+ (node?.width ? node?.width : bbox.width) +
+ 2 * m +
+ labelPaddingY -
+ (node.look === 'neo' ? 20 : 0);
const points = [
{ x: m, y: 0 },
{ x: w - m, 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 03c8b8d3c..db8fb8f18 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanLeft.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanLeft.ts
@@ -10,7 +10,8 @@ export async function lean_left(parent: D3Selectio
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const nodePadding = node.padding ?? 0;
- const labelPaddingY = node.look === 'neo' ? nodePadding * 1.5 : nodePadding;
+ const labelPaddingY = node.look === 'neo' ? 24 : nodePadding;
+ const labelPaddingX = node.look === 'neo' ? 9 : 0;
if (node.width || node.height) {
node.width = node?.width ?? 0;
@@ -29,7 +30,7 @@ export async function lean_left(parent: D3Selectio
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
const h = (node?.height ? node?.height : bbox.height) + labelPaddingY;
- const w = node?.width ? node?.width : bbox.width;
+ const w = node?.width ? node?.width : bbox.width + labelPaddingX * 2;
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 b7e7c1409..851666e8d 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanRight.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanRight.ts
@@ -10,7 +10,8 @@ export async function lean_right(parent: D3Selecti
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const nodePadding = node.padding ?? 0;
- const labelPaddingY = node.look === 'neo' ? nodePadding * 1.5 : nodePadding;
+ const labelPaddingY = node.look === 'neo' ? 24 : nodePadding;
+ const labelPaddingX = node.look === 'neo' ? 9 : 0;
if (node.width || node.height) {
node.width = node?.width ?? 0;
@@ -30,7 +31,7 @@ export async function lean_right(parent: D3Selecti
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
const h = (node?.height ? node?.height : bbox.height) + labelPaddingY;
- const w = node?.width ? node?.width : bbox.width;
+ const w = node?.width ? node?.width : bbox.width + labelPaddingX * 2;
const points = [
{ x: (-3 * h) / 6, y: 0 },
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 84546c737..837f3cb3a 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stadium.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stadium.ts
@@ -56,8 +56,8 @@ export async function stadium(parent: D3Selection<
const { labelStyles, nodeStyles } = styles2String(node);
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 labelPaddingX = node.look === 'neo' ? 20 : nodePadding;
+ const labelPaddingY = node.look === 'neo' ? 12 : nodePadding;
// 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),
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 eee46096c..25409441e 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts
@@ -25,7 +25,8 @@ export async function trapezoid(parent: D3Selectio
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const nodePadding = node.padding ?? 0;
- const labelPaddingY = node.look === 'neo' ? nodePadding * 1.5 : nodePadding;
+ const labelPaddingY = node.look === 'neo' ? 24 : nodePadding;
+ const labelPaddingX = node.look === 'neo' ? 9 : 0;
if (node.width || node.height) {
node.width = node?.width ?? 0;
@@ -43,7 +44,7 @@ export async function trapezoid(parent: D3Selectio
}
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
const h = (node?.height ? node?.height : bbox.height) + labelPaddingY;
- const w = node?.width ? node?.width : bbox.width;
+ const w = node?.width ? node?.width : bbox.width + labelPaddingX * 2;
const points = [
{ x: (-3 * h) / 6, y: 0 },