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.

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

• 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.

• 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

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:

import React from 'react';
import { Canvas } from 'reaflow';
export default () => (
 <Canvas
 maxWidth={800}
 maxHeight={600}
 nodes={[
 {
 id: '1',
 text: '1'
 },
 {
 id: '2',
 text: '2'
 }
 ]}
 edges={[
 {
 id: '1-2',
 from: '1',
 to: '2'
 }
 ]}
 />
);

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

• Clone the repo
• npm i
• npm start
• Browser opens to Storybook page

Thanks to all our contributors!