reaviz / reaflow

šŸŽÆ React library for building workflow editors, flow charts and diagrams. Maintained by @goodcodeus.
https://reaflow.dev
Apache License 2.0
2.11k stars 122 forks source link
diagrams elkjs flowchart hacktoberfest node-editor react reactjs visualizations workflow

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

šŸ“¦ 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!

ā¤ļø Contributors

Thanks to all our contributors!