githamza / reaflow

🕸 Node-based Visualizations for React

🕸 reaflow

Node-based Visualizations for React

---

REAFLOW is a modular diagram engine for build static or interactive editors. The library is feature rich and modular allowing for displaying complex visualizations with total customizability.

🚀 Quick Links

• Checkout the docs and demos
• Explore the library on Chroma

📦 Usage

Install the package via NPM:

yarn add reaflow

then add the component with some nodes and edges:

import React from 'react';
import { Canvas } from 'reaflow';

export default () => (
  <Canvas
    nodes={[
      {
        id: '1',
        text: '1'
      },
      {
        id: '2',
        text: '2'
      }
    ]}
    edges={[
      {
        id: '1-2',
        from: '1',
        to: '2'
      }
    ]}
  />
);

🔭 Developing

• yarn install
• yarn start
• Storybook Opens