Reaflow

React library for building workflow editors, flow charts and diagrams

ReactChartingDiagram / Flow chartD3
reaviz/reaflowreaflow.devreaflow

README

🕸 reaflow


  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.

If you are looking for network graphs, checkout reagraph.

🚀 Quick Links


- Checkout the [docs and demos](https://reaflow.dev)
- Explore the library on Chroma
- Learn about updates from the Changelog

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

  1. ```
  2. npm i reaflow --save
  3. ```

Install the package via Yarn:

  1. ```
  2. yarn add reaflow
  3. ```

Import the component into your app and add some nodes and edges:

  1. ``` js
  2. import React from 'react';
  3. import { Canvas } from 'reaflow';

  5. export default () => (
  6.   <Canvas
  7.     maxWidth={800}
  8.     maxHeight={600}
  9.     nodes={[
  10.       {
  11.         id: '1',
  12.         text: '1'
  13.       },
  14.       {
  15.         id: '2',
  16.         text: '2'
  17.       }
  18.     ]}
  19.     edges={[
  20.       {
  21.         id: '1-2',
  22.         from: '1',
  23.         to: '2'
  24.       }
  25.     ]}
  26.   />
  27. );
  28. ```

🔭 Development


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

- Clone the repo
- yarn install
- yarn start
- Browser opens to Storybook page

❤️ Contributors


Thanks to all our contributors!