Node Collisions

This example demonstrates how to automatically resolve node overlaps. When nodes are placed too close together or overlap, the algorithm detects these collisions and moves the nodes apart to maintain visual clarity.

For a deep dive into collision detection algorithms check out our blog post on node collisions .

We also created a benchmark to compare the performance of different approaches and you can see them in action in the playground .


<script lang="ts">
  import { SvelteFlow, Background, Controls, MiniMap, type Node, type Edge } from '@xyflow/svelte';
 
  import '@xyflow/svelte/dist/style.css';
 
  import { initialEdges, initialNodes } from './nodes-and-edges';
  import { resolveCollisions } from './resolve-collisions';
 
 
  let nodes = $state.raw<Node[]>(initialNodes);
  let edges = $state.raw<Edge[]>(initialEdges);
</script>
 
<SvelteFlow bind:nodes bind:edges minZoom={0} fitView onnodedragstop={() => {
  nodes = resolveCollisions(nodes, { maxIterations: Infinity, overlapThreshold: 0.5, margin: 15 });
}}>
  <Background />
  <MiniMap />
  <Controls />
</SvelteFlow>