...

Reaflow

React library for building workflow editors, flow charts and diagrams
github-icon
GitHub
2.37kstar-icon
Created 5 years ago, last commit 4 months ago
28 contributors
544 commits
Stars added on GitHub, month by month
8
9
10
11
12
1
2
3
4
5
6
7
2024
2025
Stars added on GitHub, per day, on average
Yesterday
-1star-icon
Last week
0.0
star-icon /day
Last month
+0.5
star-icon /day
Last 12 months
+0.9
star-icon /day
npmPackage on NPM
Monthly downloads on NPM
8
9
10
11
12
1
2
3
4
5
6
7
2024
2025
README

Node-based Visualizations for React

Open Collective backers and sponsors

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

💎 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:

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'
      }
    ]}
  />
);

🔭 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!