Skip to content
Switch branches/tags

๐Ÿ•ธ 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.

๐Ÿš€ Quick Links

โœจ 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 () => (
        id: '1',
        text: '1'
        id: '2',
        text: '2'
        id: '1-2',
        from: '1',
        to: '2'

๐Ÿ”ญ 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!