react-flowchart-designer

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

Features

• 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

Usage

Install react-flowchart-designer using npm.

npm install react-flowchart-designer

Then you can just import the component and its hook:

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

and use it as below:

const { setHandles, flowchart } = useFlowchart();

<button onClick={() => { flowchart.addRectNode(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.

Mouse and Keyboard events

• 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

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

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 links	false
onReady	FlowchartHandles => any	When the flowchart is mounted

(*) required props

Handles

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:

Handle	Type	Description
addRectNode	(left: number, top: number, text: string, id?: number, color?: string) => number	Adds a rectangle node at (left, top), returns its id
addCircleNode	(left: number, top: number, text: string, id?: number, color?: string) => number	Adds a circle node at (left, top), returns its id
addRhomNode	(left: number, top: number, text: string, id?: number, color?: string) => number	Adds a rhombus node at (left, top), returns its id
addNodes	(nodes: NodeData[], links?: LinkData[]) => void	Adds multiple nodes and links (see Loading a Flowchart)
getData	() => { nodes: NodeData[], links: LinkData[] }	Gets all nodes and links (see Saving a Flowchart)
changeLinkType	(id: number, type: string) => void	Changes the type of a link (solid/dashed)

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
color	string	Node color	white
shape	string	Node shape can be rectangle, circle, or rhombus	rectangle

(*) required props

Link

Below is the data model for links:

Prop	Type	Description	Default
from *	number	The id of the origin node
to *	number	The id of the destination node
text	string	Link label
type	string	Link type (solid/dashed)	solid
meta	object	Information about the shape of the link

(*) required props

Contributing

• Fork the project.
• Make changes.
• Run the project in development mode: npm run ladle.
• Write your own tests and/or update existing ones in src/flowchart/test dir.
• Check the new features and 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.