Build Interactive Flow Diagrams with ProFlow’s FlowView and FlowEditor

What Can ProFlow Do?

ProFlow addresses inconsistent UI design and implementation in graph display and editing tasks by offering modern UI components with React‑friendly APIs, including features such as infinite scaling, automatic layout, and multi‑line overlap optimization.

Graph Display Scenario – FlowView

Use the FlowView component for complex node logic visualization; it includes built‑in selection, auto‑layout, and other capabilities.

Graph Editing Scenario – FlowEditor

Use the FlowEditor component when you need interactive editing without maintaining your own data flow; it provides out‑of‑the‑box add, delete, undo/redo functionality.

Quick Start (FlowView)

Install Dependency

pnpm i @ant-design/pro-flow -S

Import FlowView

import { FlowView } from '@ant-design/pro-flow';
import { createStyles } from 'antd-style';

const useStyles = createStyles(() => ({
  container: {
    width: '100%',
    height: '400px',
  },
}));

function App() {
  const { styles } = useStyles();
  return (
    <div className={styles.container}>
      <FlowView nodes={[]} edges={[]} />
    </div>
  );
}

export default App;

Note: The component must be wrapped in an element with defined width and height.

Add Nodes and Edges Data

Define nodes and edges arrays; ProFlow uses the dagre layout algorithm to automatically arrange them without requiring explicit coordinates.

export const nodes = [
  { id: 'a1', data: { title: 'XXX_API_a1', logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original', description: 'XXX_XXX_XXX_API' } },
  { id: 'a2', data: { title: 'XXX_API_a2', logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original', description: 'XXX_XXX_XXX_API' } },
  { id: 'a3', data: { title: 'XXX_API_a3', logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original', description: 'XXX_XXX_XXX_API' } },
];

export const edges = [
  { id: 'a1-a2', source: 'a1', target: 'a2' },
  { id: 'a1-a3', source: 'a1', target: 'a3', type: 'radius' },
];

Import them into FlowView:

import { FlowView } from '@ant-design/pro-flow';
import { edges, nodes } from './data';

function App() {
  const { styles } = useStyles();
  return (
    <div className={styles.container}>
      <FlowView nodes={nodes} edges={edges} />
    </div>
  );
}

export default App;

Add Interactivity

Listen to user interactions such as node click, edge click, and canvas click using callbacks like onNodeClick, onEdgeClick, and onPaneClick. ProFlow provides a SelectType enum to control selection states.

Use useFlowViewer to simplify SelectType changes.

import { FlowPanel, FlowView, FlowViewProvider, SelectType, useFlowViewer } from '@ant-design/pro-flow';
import { useState } from 'react';
import { edges, nodes } from './data';

function App() {
  const { selectNode, selectEdges, selectNodes } = useFlowViewer();
  const [node, setNode] = useState(null);
  const { styles } = useStyles();
  return (
    <div className={styles.container}>
      <FlowView
        onNodeClick={(e, node) => {
          setNode(node);
          selectNodes(['a1', 'a2', 'a3'], SelectType.SUB_SELECT);
          selectNode(node.id, SelectType.SELECT);
          selectEdges(['a1-a2', 'a1-a3'], SelectType.SUB_SELECT);
        }}
        onPaneClick={() => {
          setNode(null);
          selectNodes(['a1', 'a2', 'a3'], SelectType.DEFAULT);
          selectEdges(['a1-a2', 'a1-a3'], SelectType.DEFAULT);
        }}
        nodes={nodes}
        edges={edges}
      >
        <FlowPanel>
          <div className="panel-title">{node ? `当前选中的是：${node.id}` : `当前没有选中节点`}</div>
        </FlowPanel>
      </FlowView>
    </div>
  );
}

function ProApp() {
  return (
    <FlowViewProvider>
      <App />
    </FlowViewProvider>
  );
}

export default ProApp;

Advanced Usage (FlowEditor)

When you need to add, delete, or modify nodes and edges, use the FlowEditor component, which offers drag‑and‑drop, zoom/pan, multi‑selection, shortcuts, clipboard, and undo/redo capabilities.

Create a Custom Node

Custom nodes are regular React components that can render any content.

import { Handle, Position } from '@ant-design/pro-flow';

const StringRender = (node) => {
  const { handles, id } = node;
  return (
    <div className='stringNode'>
      <Handle id={typeof handles?.source === 'string' ? handles?.source : id} type='target' position={Position.Left} />
      {node.data.title}
      <Handle id={typeof handles?.source === 'string' ? handles?.source : id} type='source' position={Position.Right} />
    </div>
  );
};

This component displays a title with connection handles on both sides.

Add Node Types

Register custom node types and pass them via the nodeTypes prop to FlowView or FlowEditor. Define them outside the component to avoid unnecessary re‑creation.

// Register custom node type
const nodeTypes = { StringNode: StringRender };

function App() {
  const { styles } = useStyles();
  return (
    <div className={styles.container}>
      <FlowEditor nodeTypes={nodeTypes} />
    </div>
  );
}

Data‑Driven Editing with useFlowEditor

const editor = useFlowEditor();
const { styles } = useStyles();

useEffect(() => {
  editor.addNode({
    id: 'a1',
    type: 'StringNode',
    position: { x: 0, y: 100 },
    data: { title: 'String Node' },
  });
}, [editor]);

return (
  <div className={styles.container}>
    <FlowEditor nodeTypes={nodeTypes} />
  </div>
);

const ProApp = () => (
  <FlowEditorProvider>
    <App />
  </FlowEditorProvider>
);

The editor supports drag, copy, paste, undo, and redo out of the box.

Case Showcase

Multiple Handle Connections

Pipeline Flow

Open‑Source & Contact

ProFlow website: https://pro-flow.antdigital.dev

GitHub: https://github.com/ant-design/pro-flow

We will continue to improve the product based on user feedback. If you encounter issues, feel free to submit requests or report bugs.