Edges overlapping over the nodes

[smadapathi]

Hello Team,

Thanks for the this awesome library. I have given four edge points around a node(custom one). When I drag/drop an edge from bottom edge point of node to the bottom edge point of another node, edge is drawn on top of the node (refer the pic). Is there any better way to represent the edges in these cases without overlapping over the node?.

[moklick]

Hey @smadapathi

this is the expected default behaviour. When you select a node, the node and all connected edges get a higher z-index. If you don't like that you can pass zIndex:0 as an option to all edges in order to overwrite that behaviour.

[smadapathi]

@aShelist, we will be trying out the https://github.com/tisoap/react-flow-smart-edge in next couple of weeks, will post the updates here..In case, you have any solutions, let us know too..thank you.

[vaibhav-systango]

@smadapathi @aShelist @moklick any solutions for this yet ?

[moklick]

As explained above a custom edge implementation is the solution here. We won't add this to the React Flow core.

[vaibhav-systango]

alright in that case using react flow smart edge seems to be a good alternative @moklick

[raywei2023]

cool~

[awaisshah228]

I built an open-source package that solves this: avoid-nodes-edge (React Flow) and avoid-nodes-edge-svelte (Svelte Flow)

Edges automatically route around nodes with clean orthogonal (90-degree) paths, never crossing through any node. Uses libavoid (C++ WASM) in a Web Worker.

React Demo · Svelte Demo | npm (React) · npm (Svelte) | GitHub | Package source

React Flow:
npm install avoid-nodes-edge

Svelte Flow:
npm install avoid-nodes-edge-svelte

Make sure to use "libavoid-js": "0.4.5" as a peer dependency.

Works with React Flow v12+ and Svelte Flow (@xyflow/svelte).

[adamdva]

Would this work OK with svelte-flow, anyone test it?

[awaisshah228]

Yes! I'm the author — I just released a Svelte Flow version as well.

avoid-nodes-edge-svelte — orthogonal edge routing for Svelte Flow. Edges automatically route around nodes with clean 90-degree paths using libavoid (C++ WASM) in a Web Worker.

npm install avoid-nodes-edge-svelte libavoid-js@0.4.5

Live Demo
npm
GitHub / Source
Svelte Example

Same engine as the React version — group-aware routing, auto best-side detection, configurable spacing/rounding, incremental drag updates, all running off the main thread. Works with @xyflow/svelte.

[raywei2023]

[like] Ray Wei reacted to your message:

…

________________________________ From: Muhammad Awais Shah ***@***.***> Sent: Saturday, March 7, 2026 4:00:36 AM To: xyflow/xyflow ***@***.***> Cc: Ray Wei ***@***.***>; Comment ***@***.***> Subject: Re: [xyflow/xyflow] Edges overlapping over the nodes (Discussion #2046) I built an open-source package that solves this: avoid-nodes-edge<https://www.npmjs.com/package/avoid-nodes-edge> Edges automatically route around nodes with clean orthogonal (90-degree) paths, never crossing through any node. Uses libavoid (C++ WASM) in a Web Worker. Live Demo<https://avoid-nodes-pro-example.vercel.app> | npm<https://www.npmjs.com/package/avoid-nodes-edge> | GitHub<https://github.com/awaisshah228/react-flow-avoid-nodes-routing> | Package source<https://github.com/awaisshah228/react-flow-avoid-nodes-routing/tree/turbo-package> npm install avoid-nodes-edge libavoid-js Works with React Flow v12+. — Reply to this email directly, view it on GitHub<#2046 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/BCBHAJAFUKN6A7X4Y4GBILT4PONGJAVCNFSM6AAAAACWKFETF2VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTMMBTGAYTMOA>. You are receiving this because you commented.Message ID: ***@***.***>

[tisoap]

I'm the creator of react-flow-smart-edge , a library that uses using A* pathfinding to route edges around other nodes, avoiding intersections. It has smart equivalents for every type of edge React Flow has. It's been updated to work with React Flow 12.