A lightweight component to design flowcharts. Check out the demo for some examples.
- Different shapes of nodes.
- Add/Remove links between nodes using the mouse
- Enable/Disable adding/removing links
- Drag nodes
- 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 connections.
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>
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
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
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
- 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.