ProFlow

A Flow Editor Framework base on React-Flow.

English · 简体中文 · Changelog . Report Bug · Request Feature

To install @ant-design/pro-flow, run the following command:

$ pnpm install @ant-design/pro-flow

const nextConfig = {
  transpilePackages: ['@ant-design/pro-flow'],
};

ProFlow is a canvas editor built on react-flow. It has the following features:

• 💠 Modern Node Design: It features modern default nodes and grouped node components, making the interface more intuitive, readable, and user-friendly.
• 🌐 Out-of-the-box Components: It supports components such as MiniMap, Inspector, and Loading, providing rich extension capabilities and customization options, allowing users to easily customize the canvas interface.
• 🎨 Automatic Layout Algorithm: It comes with the dagre layout algorithm, allowing users to achieve automatic layout effects with just nodes and relationships, making it easy to achieve an aesthetically pleasing presentation of flowcharts.
• 🖱️ Flowchart Data Manipulation: It provides the useFlowViewer feature, allowing users to easily manipulate and manage canvas-related data, achieving a personalized interactive experience.
• 🧩 Custom Nodes and Edges: It supports the ability to customize nodes, custom edges, and provides additional attributes such as label, zoom, and selectType to meet personalized customization needs.
• 📱 Mobile-Friendly: It defaults to providing touchpad interactive canvas logic in figma mode, adapting to mobile operations for a smoother user experience.
• 🎨 Canvas Editor Capabilities: It provides out-of-the-box canvas editor capabilities, including rich canvas and node operation functions such as copy-paste, undo-redo, enhancing user operation efficiency and convenience.

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

function App() {
  const { styles } = useStyles();

  return (
    <div className={'container'}>
      <FlowView nodes={[]} edges={[]} />
    </div>
  );
}

export default App;

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 { FlowView } from '@ant-design/pro-flow';
import useStyles from './css/index.style';
import { edges, nodes } from './data';

function App() {
  const { styles } = useStyles();

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

export default App;

Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions

You can use Github Codespaces for online development:

Or clone it for local development:

$ git clone https://github.com/ant-design/pro-flow.git
$ cd pro-flow
$ pnpm install
$ pnpm dev

• Integrate and Innovate: Incorporate Ant Design Pro, umi, and ProFlow into your projects. Your real-world usage and feedback are invaluable to us.
• Voice Your Insights: Encounter a glitch? Have a query? Your perspectives matter. Share them by submitting issues and help us enhance the user experience.
• Shape the Future: Have code enhancements or feature ideas? We invite you to propose pull requests and contribute directly to the evolution of our codebase.

Every contribution, big or small, is celebrated. Join us in our mission to refine and elevate the world of open-source enterprise UI components. 😃

• ProComponents - Designed for Enterprise-Level Application, Use Ant Design like a Pro!.
• ProEditor - The Ultimate Editor UI Framework and Components.
• ProFlow - A Flow Editor Framework base on React-Flow.
• ProChat - Components Library for Quickly Building LLM Chat Interfaces.

Copyright © 2023 - present AFX & Ant Digital.
This project is MIT licensed.