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 .


import { useCallback } from 'react';
import {
  ReactFlow,
  useNodesState,
  useEdgesState,
  MiniMap,
  Controls,
  Background,
} from '@xyflow/react';
 
import '@xyflow/react/dist/style.css';
 
import { initialEdges, initialNodes } from './nodes-and-edges';
import { resolveCollisions } from './resolve-collisions';
 
function ExampleFlow() {
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  const [edges, , onEdgesChange] = useEdgesState(initialEdges);
 
  const onNodeDragStop = useCallback(() => {
    setNodes((nds) =>
      resolveCollisions(nds, {
        maxIterations: Infinity,
        overlapThreshold: 0.5,
        margin: 15,
      }),
    );
  }, [setNodes]);
 
  return (
    <ReactFlow
      nodes={nodes}
      edges={edges}
      onNodesChange={onNodesChange}
      onEdgesChange={onEdgesChange}
      onNodeDragStop={onNodeDragStop}
      minZoom={0}
      fitView
    >
      <Background />
      <MiniMap />
      <Controls />
    </ReactFlow>
  );
}
 
export default ExampleFlow;