React Flowchart Builder | Flexible Flowchart Component for React

A flexible and customizable flow builder for visualizing your workflows.

How to use it:

1. Install and import the Flowchart builder.

# Yarn
$ yarn add react-flow-builder

# NPM
$ npm i react-flow-builderimport React, { useState } from 'react';
import FlowBuilder from 'react-flow-builder';

2. Register initial nodes.

const registerNodes = [
  {
    type: 'start',
    name: 'start',
  },
  {
    type: 'end',
    name: 'end',
  },
  {
    type: 'common',
    name: 'common',
  },
  {
    type: 'branch',
    name: 'branch',
    conditionNodeType: 'condition',
  },
  {
    type: 'condition',
    name: 'condition',
  },
];

3. Render the flowchart.

export default function () {
  const [nodes, setNodes] = useState([]);
  return (
    <FlowBuilder
      registerNodes={registerNodes}
      nodes={nodes}
      onChange={setNodes}
    />
  );
}

Preview:

Download Details:

Author: bytedance

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/bytedance/flow-builder

License: MIT

#react #reactjs