Skip to content

fix(elk): scope rounded edge curve to ELK layout only #7454

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ashishjain0512 merged 1 commit into from
Mar 5, 2026
Merged

fix(elk): scope rounded edge curve to ELK layout only #7454

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 4 additions & 5 deletions .changeset/rounded-edge-curves.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.
4 changes: 4 additions & 0 deletions packages/mermaid-layout-elk/src/render.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,8 +52,8 @@
}: InternalHelpers,
{ algorithm }: RenderOptions
) => {
const nodeDb: Record<string, any> = {};

Check warning on line 55 in packages/mermaid-layout-elk/src/render.ts

View workflow job for this annotation

GitHub Actions / autofix 

Unexpected any. Specify a different type
const clusterDb: Record<string, any> = {};

Check warning on line 56 in packages/mermaid-layout-elk/src/render.ts

View workflow job for this annotation

GitHub Actions / autofix 

Unexpected any. Specify a different type

const addVertex = async (
nodeEl: SVGGroup,
Expand Down Expand Up @@ -145,16 +145,16 @@
const drawNodes = async (
relX: number,
relY: number,
nodeArray: any[],

Check warning on line 148 in packages/mermaid-layout-elk/src/render.ts

View workflow job for this annotation

GitHub Actions / autofix 

Unexpected any. Specify a different type
svg: any,

Check warning on line 149 in packages/mermaid-layout-elk/src/render.ts

View workflow job for this annotation

GitHub Actions / autofix 

Unexpected any. Specify a different type
subgraphsEl: SVGGroup,
depth: number
) => {
await Promise.all(
nodeArray.map(async function (node: {
id: string | number;
x: any;

Check warning on line 156 in packages/mermaid-layout-elk/src/render.ts

View workflow job for this annotation

GitHub Actions / autofix 

Unexpected any. Specify a different type
y: any;

Check warning on line 157 in packages/mermaid-layout-elk/src/render.ts

View workflow job for this annotation

GitHub Actions / autofix 

Unexpected any. Specify a different type
width: number;
labels: { width: any }[];
height: number;
Expand Down Expand Up @@ -893,6 +893,7 @@
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]];
Expand Down Expand Up @@ -1069,6 +1070,9 @@
});
}
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,
Expand Down
2 changes: 1 addition & 1 deletion packages/mermaid/src/schemas/config.schema.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Loading