Flexi Flowchart Library

> Lightweight flowchart & flowchart designer for React.js

Install

``bash
npm install --save flowchart-react

or

yarn add flowchart-react
`

Usage

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

const App = () => {
const [nodes, setNodes] = useState([
{
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([
{
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 (
onChange={(nodes, connections) => {
setNodes(nodes);
setConns(connections);
}}
style={{ width: 800, height: 600 }}
nodes={nodes}
connections={conns}
/>
);
};

export default App;
`

API

Flowchart use nodes and connections to describe a flowchart.

$3

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

$3

#### 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, zoom: number) => void

Triggered when the background svg is double-clicked.

> Tip: Double-click to create a node.

`typescript
function handleDoubleClick(event: React.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]);
}
``