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
July 27, 2023 09:00
June 20, 2023 16:26
July 27, 2023 09:00
src
September 14, 2023 08:30
September 9, 2021 08:37
October 28, 2020 14:35
October 29, 2020 08:06
July 27, 2023 08:51
November 3, 2020 14:07
August 25, 2023 08:07
November 4, 2020 10:42
October 28, 2020 09:25
July 27, 2023 09:00
August 22, 2023 10:14
August 25, 2023 08:07
fix
June 2, 2023 08:57
June 14, 2023 15:32

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.

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

❀️ Contributors

Thanks to all our contributors!

Releases

No releases published

Sponsor this project

Packages

No packages published

Languages