A lightweight component to design flowcharts. Check out the demo for some examples.

Features

• Different shapes of nodes.
• Add/Remove links between nodes using the mouse
• Enable/Disable adding/removing links
• Drag nodes
• Raw or typed input/output

Usage

Install react-flowchart-builder using npm.

npm install react-flowchart-builder

Then you can just import the component and its hook:

import { Flowchart, useFlowchart } from 'react-flowchart-builder';

and use it as below:

const { setHandles, flowchart } = useFlowchart();

<button onClick={() => { flowchart.addNode(50, 50, 'my node') }}>Add Node</button>
<Flowchart setHandles={setHandles} width='700px' height='400px' editable={true} />

Clicking the button creates a new node at x = 50, y = 50. Drag the orange square from one node to another to add connections.

Loading/Saving a Flowchart

Load/save a flowchart using the data model below:

const load = () => {
  let nodes = [
    { id: 1, text: 'node1', X: 50, Y: 50 },
    { id: 2, text: 'node2', X: 150, Y: 50 },
  ];
  let connectors = [
    { from: 1, to: 2 },
    { from: 2, to: 2 },
  ];
  flowchart.addNodes(nodes, connectors);
}

const save = () => console.log(flowchart.getData()) // { nodes: […], connectors: […] }

<button onClick={load}>Load</button>
<button onClick={save}>Save</button>

Props

The following props can be defined on Flowchart:

Prop	Type	Description	Default
width *	string	Flowchart width
height *	string	Flowchart height
editable	boolean	Enable/Disable adding/removing connectors (links between nodes)	false
onReady	FlowchartHandles => any	When the flowchart is mounted

(*) required props

Node

Below is the data model for nodes:

Prop	Type	Description	Default
id	number	Node identifier
X *	number	The x position of the node
Y *	number	The y position of the node
text *	string	Node text
shape	string	Node shape can be rectangle, circle, or rhombus	rectangle

(*) required props

Connector

Below is the data model for connectors (links between nodes):

Prop	Type	Description	Default
from *	number	The id of the origin node
to *	number	The id of the destination node
text	string	Connector label

(*) required props

Contributing

• Fork the project.
• Make changes.
• Run the project in development mode: npm run ladle.
• Test your changes using flowchart.stories.tsx or your own Stories (*.stories.tsx).
• Update README with appropriate docs.
• Commit and PR

Dependencies

React Flowchart has no dependency. However the following peer dependencies must be specified by your project in order to avoid version conflicts: react, react-dom. NPM will not automatically install these for you but it will show you a warning message with instructions on how to install them.