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,
      bgColor: "lightgreen",
    },
    {
      type: "end",
      title: "End",
      x: 500,
      y: 190,
      id: 2,
      bgColor: "lightblue",
    },
    {
      x: 330,
      y: 190,
      id: 3,
      title: "Matheus",
      type: "operation",
      bgColor: "lightpink",
    },
  ]);
  const [conns, setConns] = useState<ConnectionData[]>([
    {
      source: { id: 1, position: "right" },
      destination: { id: 3, position: "left" },
      color: "purple",
    },
    {
      source: { id: 3, position: "right" },
      destination: { id: 2, position: "left" },
      color: "orange",
    },
  ]);

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

export default App;

Demo

• CodeSandbox

API

Props

nodes: NodeData[]

Array of nodes.

NodeData

| Props | Description | Type | Default | Required | |---------|---------------|:----------------------------------------|---------|----------| | id | Identity | number | | true | | title | Title of node | string, (node: NodeData) => string | | true | | type | Type of node | start, end, operation, decision | | true | | 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 | | bgColor | Node background color | string | white | false |

connections: ConnectionData[]

Connections between nodes.

ConnectionData

| Props | Description | Type | Default | Required | |-------------|--------------------|:-----------------------------------------------------------|---------|----------| | type | Type of connection | success, fail | | false | | source | Source info | {id: number, position: 'left', 'right', 'top', 'bottom'} | | true | | destination | Destination info | {id: number, position: 'left', 'right', 'top', 'bottom'} | | true | | color | Connection color | Any RGB/HEX color | black | false |

readonly: boolean | undefined

Prop to disabled drag, connect and delete action.

style: React.CSSProperties

Style of background svg.

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

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

showToolbar: boolean | undefined

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.

License

MIT © Joyceworks