🕸 reaflow

Node-based Visualizations for React

--- REAFLOW is a modular diagram engine for building static or interactive editors. The library is feature-rich and modular allowing for displaying complex visualizations with total customizability. If you are looking for network graphs, checkout [reagraph](https://reagraph.dev). ## 🚀 Quick Links - Checkout the [**docs and demos**](https://reaflow.dev) - Explore the library on [Chroma](https://www.chromatic.com/library?appId=5f99ba42fe88ac0022fd1147) - Learn about updates from the [Changelog](CHANGELOG.md) ## ✨ Features - Complex automatic layout leveraging ELKJS - Easy Node/Edge/Port customizations - Zooming / Panning / Centering controls - Drag and drop Node/Port connecting and rearranging - Nesting of Nodes/Edges - Proximity based Node linking helper - Node/Edge selection helper - Undo/Redo helper ## 📦 Usage Install the package via **NPM**: ``` npm i reaflow --save ``` Install the package via **Yarn**: ``` yarn add reaflow ``` Import the component into your app and add some nodes and edges: ```jsx import React from 'react'; import { Canvas } from 'reaflow'; export default () => (

Reaflow Examples

Learn how to use reaflow by viewing and forking example apps that make use of reaflow on CodeSandbox.