Flexible Flowchart Builder For React

Description:

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-builder

import 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: