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/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
color	Specify a color for the connection line	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]);
}

onConnectionDoubleClick: (connection: ConnectionData) => void

Triggered when a connection is double-clicked.

Tip: Double-click to edit connection.

onMouseUp: (event: React.MouseEvent<SVGSVGElement>, zoom: number) => void

Triggered when the mouse is up on the background svg.

Tip: Drop something to here to implement node creation.

className: string | undefined

Custom class name of container.

License

MIT © Joyceworks