Interactive Flowchart Maker in React | React Flowchart Creator

React Flow is a React library for building interactive node-based graphs, diagrams, flowcharts.

You can easily implement custom node types and it comes with components like a mini-map and graph controls.

Install & Import:

# NPM
$ npm i react-flow-renderer –save

import React from ‘react’;
import ReactFlow from ‘react-flow-renderer’;

Basic usage:

const elements = [
  { id: '1', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
  // you can also pass a React component as a label
  { id: '2', data: { label: <div>Node 2</div> }, position: { x: 100, y: 100 } },
  { id: 'e1-2', source: '1', target: '2', animated: true },
];
const BasicFlow = () => <ReactFlow elements={elements} />;

Preview:

Create Interactive Node-based Flowchart - React Flow

Download Details:

Author: wbkd

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/wbkd/react-flow

License: MIT

#react #reactjs