Flowchart-react NPM

Flowchart React

Lightweight flowchart & flowchart designer for React.js

English | 中文

Install

npm install --save flowchart-react
# or
yarn add flowchart-react

Usage

import React, { useState } from "react";
import Flowchart from "flowchart-react";
import { ConnectionData, NodeData } from "flowchart-react/dist/schema";

const App = () => {
  const [nodes, setNodes] = useState<NodeData[]>([
    {
      type: "start",
      title: "Start",
      x: 150,
      y: 190,
      id: 1,
    },
    {
      type: "end",
      title: "End",
      x: 500,
      y: 190,
      id: 2,
    },
    {
      x: 330,
      y: 190,
      id: 3,
      title: "Joyce",
    },
    {
      x: 330,
      y: 300,
      id: 4,
      title: () => {
        return "No approver";
      },
    },
  ]);
  const [conns, setConns] = useState<ConnectionData[]>([
    {
      source: { id: 1, position: "right" },
      destination: { id: 3, position: "left" },
    },
    {
      source: { id: 3, position: "right" },
      destination: { id: 2, position: "left" },
    },
    {
      source: { id: 1, position: "bottom" },
      destination: { id: 4, position: "left" },
    },
    {
      source: { id: 4, position: "right" },
      destination: { id: 2, position: "bottom" },
    },
  ]);

  return (
    <Flowchart
      onChange={(nodes, connections) => {
        setNodes(nodes);
        setConns(connections);
      }}
      style={{ width: 800, height: 600 }}
      nodes={nodes}
      connections={conns}
    />
  );
};

export default App;

Demo

CodeSandbox

API

Flowchart use nodes and connections to describe a flowchart.

Props

nodes: `NodeData[]`

Array of nodes.

NodeData

Props	Description	Type	Default	Required
id	Identity	number		true
title	Title of node	string, `(node: NodeData) => string`, JSX.Element		true
type	Type of node	`start`, `end`, `operation`, `decision`	`operation`	false
x	X axis	number		true
y	Y axis	number		true
payload	Custom data	`{[key: string]: unknown}`		false
width	Node width	number	`120`	false
height	Node height	number	`60`	false
connectionPosition	Connection position	`top`, `bottom`	`top`	false
containerProps		SupportedSVGShapeProps		false
textProps		SupportedSVGTextProps		false

SupportedSVGShapeProps

Node shape props, only fill and stroke are supported, for more information, please refer to MDN.

Props	Description	Type	Default	Required
fill		string		false
stroke		string		false

SupportedSVGTextProps

Node text props, only fill is supported, for more information, please refer to MDN.

Works when title is a string.

Props	Description	Type	Default	Required
fill		string		false

connections: `ConnectionData[]`

Connections between nodes.

ConnectionData

Use type to describe the type of connection, success will draw a green line, fail will draw a red line.

Props	Description	Type	Default	Required
type	Type of connection	`success`, `fail`	`success`	false
source	Source info	`{id: number, position: 'left', 'right', 'top', 'bottom'}`		true
destination	Destination info	`{id: number, position: 'left', 'right', 'top', 'bottom'}`		true
title	Title of connection	string		false

readonly: `boolean | undefined`

Prop to disabled drag, connect and delete nodes.

style: `React.CSSProperties`

Style of container.

defaultNodeSize: `{width: number, height: number} | undefined`

Global node size, works when width or height of node is not set.

Default: { width: 120, height: 60 }.

showToolbar: `boolean | undefined | ("start-end" | "operation" | "decision")[]`

false to hide toolbar.

Events

onChange: `(nodes: NodeData[], connections: ConnectionData[]) => void`

Triggered when a node is deleted(click a node and press delete), moved, disconnected(click a connection and press delete) or connected.

onNodeDoubleClick: `(node: NodeData) => void`

Triggered when a node is double-clicked.

Tip: Double-click to edit.

onDoubleClick: `(event: React.MouseEvent<SVGGElement, MouseEvent>, zoom: number) => void`

Triggered when the background svg is double-clicked.

Tip: Double-click to create a node.

function handleDoubleClick(event: React.MouseEvent<SVGGElement, MouseEvent>, zoom: number): void {
  const point = {
    x: event.nativeEvent.offsetX / zoom,
    y: event.nativeEvent.offsetY / zoom,
    id: +new Date(),
  };
  let nodeData: NodeData;
  if (!nodes.find((item) => item.type === "start")) {
    nodeData = {
      type: "start",
      title: "Start",
      ...point,
    };
  } else if (!nodes.find((item) => item.type === "end")) {
    nodeData = {
      type: "end",
      title: "End",
      ...point,
    };
  } else {
    nodeData = {
      ...point,
      title: "New",
      type: "operation",
    };
  }
  setNodes((prevState) => [...prevState, nodeData]);
}