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

• Different shapes of nodes.
• Add/Remove/Move nodes
• Add/Remove/Reshape links between nodes
• Enable/Disable adding/editting/removing links
• Zoom and Pan
• Raw or typed input/output

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 links.

• click: Edit/Stop Edit Links - Select Node/Link
• double click: Edit Node/Link text
• mouse wheel: Zoom
• mouse drag: Pan - Move Node/Link
• Delete key: Delete Node/Link

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 links = [
    { from: 1, to: 2 },
    { from: 2, to: 2 },
  ];
  flowchart.addNodes(nodes, links);
}

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

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

The following props can be defined on Flowchart:

(*) required props

You can access the handles using the Flowchart object as follows:

<button onClick={() => { flowchart!.addRhomNode(100, 100, txt) }}>Add Rhombus Node</button>

Below is a list of all handles:

Below is the data model for nodes:

(*) required props

Below is the data model for links:

(*) required props

• 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

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.