ReactFlow Auto Layout Demo

A demonstration of auto-layout capabilities and Figma-like edge editing features built with ReactFlow.

👉 Live Demo: https://reactflow-auto-layout.vercel.app

✨ Features

1. Node Auto Layout

• Support for multiple auto-layout algorithms including Dagre, ELK, D3-hierarchy, D3-dag, and more
• Automatic layout with dynamic node sizing
• Multi-subflow layout support
• Dynamic adjustment of layout direction, node spacing, port sorting, and other layout parameters

algorithms.mp4

2. Smart Edge Routing

• Implements the A* search algorithm combined with Manhattan Distance to compute optimal edge paths
• Minimizes overlap and intersections between edges and nodes

dragging.mp4

3. Interactive Edge Editing

• Edges are rendered as right-angled polylines with rounded corners
• Drag control handles to adjust line segments between control points
• Automatic merging of nearby control points and segments, with intelligent splitting of new control points during manipulation

merge.mp4

🌲 Project Structure

The project is organized into functional modules that can be easily adapted for your own use. Here's an overview of the key components:

Type Definitions

• src/data/types.ts: Core type definitions for nodes and edges. Start here to understand the data structures used throughout the codebase.

Node Auto Layout

• src/layout/node/algorithms: Implementations of various node layout algorithms
• src/layout/useAutoLayout.ts: Auto-layout orchestration, including dynamic node sizing logic

Edge Editing

• src/layout/edge/index.ts: Control point generation algorithms and rounded corner path rendering
• src/layout/edge/algorithms/index.ts: Core edge auto-routing algorithm. See the LogicFlow article on edge rendering for additional context
• src/components/Edges/EdgeController/index.tsx: Edge segment drag event handling
• src/components/Edges/EdgeController/smart-edge.ts: Figma-like edge auto-merging and splitting logic

While the codebase may appear complex at first glance, the underlying logic is relatively straightforward. Feel free to open an issue if you have any questions.

❤️ Acknowledgements

This project builds upon the work of many others:

1. ReactFlow — The powerful diagram engine that powers this project
2. flanksource-ui — Reference implementation for the D3-hierarchy auto-layout approach
3. LogicFlow 边的绘制与交互 — Inspiration for the edge auto-routing implementation
4. a3ng7n — For the excellent English comment translations