Skip to content

reaviz/reaflow

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

πŸ•Έ 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

✨ 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
  • yarn install
  • yarn start
  • Browser opens to Storybook page

❀️ Contributors

Thanks to all our contributors!