Dynamic Layouting

This example creates a self-organizing graph where nodes position themselves automatically in a tree-like structure. Key features include:

• Node creation: Instead of manually placing or connecting nodes, users click on placeholder elements to add new nodes
• Multiple interaction points: Add children by clicking on nodes, convert placeholders into nodes, or insert nodes between existing ones using the ”+” button on edges
• Smart layout algorithm: When the graph changes, an auto-layout hook powered by d3-hierarchy recalculates all positions
• Smooth transitions: Nodes animate to their new positions, maintaining visual clarity even as complexity increases

About this Pro Example

• Dependencies: @xyflow/react , d3-hierarchy