From 4c968e233d2bdace0628e1e48dd25f214284dec5 Mon Sep 17 00:00:00 2001 From: knsv-bot Date: Thu, 5 Mar 2026 16:41:32 +0100 Subject: [PATCH] fix(elk): scope rounded edge curve to ELK layout only Reverts the global flowchart curve default from 'rounded' back to 'basis' and instead sets edge.curve = 'rounded' on each ELK edge right before insertEdge. This ensures ELK's orthogonal routes render with right-angle segments and rounded corners, without changing the default for non-ELK layouts. Fixes #7213 Co-Authored-By: Claude Opus 4.6 --- .changeset/rounded-edge-curves.md | 9 ++++----- packages/mermaid-layout-elk/src/render.ts | 4 ++++ packages/mermaid/src/schemas/config.schema.yaml | 2 +- 3 files changed, 9 insertions(+), 6 deletions(-) diff --git a/.changeset/rounded-edge-curves.md b/.changeset/rounded-edge-curves.md index b9c3d5636de..fde36a12ee3 100644 --- a/.changeset/rounded-edge-curves.md +++ b/.changeset/rounded-edge-curves.md @@ -1,9 +1,8 @@ --- -'mermaid': minor +'mermaid': patch +'@mermaid-js/mermaid-layout-elk': patch --- -fix: replace smooth curve edges with rounded right-angle edges +fix: use rounded right-angle edges for ELK layout -The default flowchart edge curve changes from `basis` (smooth splines) to `rounded` (right-angle segments with rounded corners). This fixes ELK layout edges that were curving instead of routing at right angles (#7213) and applies consistently across all diagram types using the shared rendering pipeline. - -To restore the previous smooth curve behavior, set `flowchart.curve: 'basis'` in your config. +ELK layout edges now default to `rounded` curve (right-angle segments with rounded corners) instead of inheriting the global `basis` default. This fixes ELK edges that were curving instead of routing at right angles (#7213). Non-ELK layouts are unaffected and keep their existing `basis` default. diff --git a/packages/mermaid-layout-elk/src/render.ts b/packages/mermaid-layout-elk/src/render.ts index 2cb12e0358c..fc22b7dc313 100644 --- a/packages/mermaid-layout-elk/src/render.ts +++ b/packages/mermaid-layout-elk/src/render.ts @@ -893,6 +893,7 @@ export const render = async ( x: any; labels: { height: number; width: number; x: number; y: number }[]; y: any; + curve?: any; }) => { // (elem, edge, clusterDb, diagramType, graph, id) const startNode = nodeDb[edge.sources[0]]; @@ -1069,6 +1070,9 @@ export const render = async ( }); } edge.points = deduped; + // ELK produces orthogonal edge routes — override the curve to 'rounded' (right-angle + // segments with rounded corners) so basis/smooth interpolation doesn't distort them. + edge.curve = 'rounded'; const paths = insertEdge( edgesEl, edge, diff --git a/packages/mermaid/src/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml index 17dda2e9a09..fb3147206bf 100644 --- a/packages/mermaid/src/schemas/config.schema.yaml +++ b/packages/mermaid/src/schemas/config.schema.yaml @@ -2157,7 +2157,7 @@ $defs: # JSON Schema definition (maybe we should move these to a separate file) 'stepBefore', 'rounded', ] - default: 'rounded' + default: 'basis' padding: description: | Represents the padding between the labels and the shape