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.

🚀 Quick Links

- Checkout the docs and demos
- Learn about updates from the Changelog

💎 Other Projects

- Reagraph - Open-source library for large webgl based network graphs.
- Reablocks - Open-source component library for React based on Tailwind.
- Reaviz - Open-source library for data visulizations for React.
- Reachat - Open-source library for building LLM/Chat UIs for React.
-

✨ 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 () => (
maxWidth={800}
maxHeight={600}
nodes={[
{
id: '1',
text: '1'
},
{
id: '2',
text: '2'
}
]}
edges={[
{
id: '1-2',
from: '1',
to: '2'
}
]}
/>
);
`

🔭 Development

If you want to run reaflow locally, its super easy!

- Clone the repo
- npm i
- npm start`
- Browser opens to Storybook page

❤️ Contributors

Thanks to all our contributors!