FlowGraph
Previous
OrganizationChart
Next
FlowDirectionGraph
Loading...
Used to visually represent the steps and decision points of a process or system.
import { FlowGraph } from '@ant-design/graphs';
A flowchart shows the entire process from start to finish. Each node represents a specific step or decision point, and the edges indicate the sequence and relationships between steps.
For general graph properties, refer to: General Graph Properties
| Property | Description | Type | Default Value |
|---|---|---|---|
| data | The dataset | Data | - |
| labelField | Specifies the node label content - Select a field from the data, and the corresponding field value will be used as the node label - Dynamically generated: this function will be called with node data as a parameter, and its return value will be used as the node label | string | ((node: NodeData) => string) | Node ID |
| layout | Dagre layout configuration | Layout | - |
Graph data. If the expand-collapse behavior is enabled, make sure the children field is included in the data.
const graphData = {nodes: [{ id: '1', data: { label: 'Node 1' }, children: ['2', '3'] },{ id: '2', data: { label: 'Node 2' }, children: ['4'] },{ id: '3', data: { label: 'Node 3' } },{ id: '4', data: { label: 'Node 4' } },],edges: [{ source: '1', target: '2' },{ source: '1', target: '3' },{ source: '2', target: '4' },],};
Dagre Hierarchical Layout. The configuration options are as follows:
For more details, refer to the Dagre Wiki.
| Property | Description | Type | Default Value |
|---|---|---|---|
rankdir | The direction of node arrangement. Options include TB, BT, LR, or RL, where T = Top, B = Bottom, L = Left, and R = Right. | string | TB |
align | Node alignment mode. Options include UL, UR, DL, or DR, where U = Up, D = Down, L = Left, and R = Right. | string | undefined |
nodesep | The horizontal spacing between nodes in the layout, in pixels. | number | 50 |
edgesep | The horizontal spacing between edges in the layout, in pixels. | number | 10 |
ranksep | The spacing between levels in the layout, in pixels. | number | 50 |
marginx | The margin on the left and right sides of the graph, in pixels. | number | 0 |
marginy | The margin on the top and bottom sides of the graph, in pixels. | number | 0 |
acyclicer | If set to greedy, uses a greedy heuristic algorithm to find the feedback arc set of the graph. The feedback arc set consists of edges that can be removed to make the graph acyclic. | string | undefined |
ranker | The algorithm used to assign ranks to nodes in the input graph. Possible values are network-simplex, tight-tree, or longest-path. | string | network-simplex |