Home

Awesome

Flowchart React

Lightweight flowchart & flowchart designer for React.js

NPM JavaScript Style Guide

English | 中文

<img width="802" alt="image" src="https://github.com/joyceworks/flowchart-react/assets/5696485/7ec9078b-950c-4ba1-8d85-1ea3de514fa1">

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

API

Flowchart use nodes and connections to describe a flowchart.

Props

nodes: NodeData[]

Array of nodes.

NodeData
PropsDescriptionTypeDefaultRequired
idIdentitynumbertrue
titleTitle of nodestring, (node: NodeData) => string, JSX.Elementtrue
typeType of nodestart, end, operation, decisionoperationfalse
xX axisnumbertrue
yY axisnumbertrue
payloadCustom data{[key: string]: unknown}false
widthNode widthnumber120false
heightNode heightnumber60false
connectionPositionConnection positiontop, bottomtopfalse
containerPropsSupportedSVGShapePropsfalse
textPropsSupportedSVGTextPropsfalse
SupportedSVGShapeProps

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

PropsDescriptionTypeDefaultRequired
fillstringfalse
strokestringfalse
SupportedSVGTextProps

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

Works when title is a string.

PropsDescriptionTypeDefaultRequired
fillstringfalse

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.

PropsDescriptionTypeDefaultRequired
typeType of connectionsuccess, failsuccessfalse
sourceSource info{id: number, position: 'left', 'right', 'top', 'bottom'}true
destinationDestination info{id: number, position: 'left', 'right', 'top', 'bottom'}true
titleTitle of connectionstringfalse
colorSpecify a color for the connection linestringfalse

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