{"id":18976412,"url":"https://github.com/ant-design/pro-flow","last_synced_at":"2025-04-05T15:09:01.419Z","repository":{"id":168496390,"uuid":"644220380","full_name":"ant-design/pro-flow","owner":"ant-design","description":"๐Ÿชข A React based Flow Framework, include Flow View and Flow Editor","archived":false,"fork":false,"pushed_at":"2024-04-08T03:50:53.000Z","size":32348,"stargazers_count":180,"open_issues_count":2,"forks_count":14,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-05-01T09:53:03.182Z","etag":null,"topics":["ant-design","flow","flow-editor","pro-components","pro-editor","react","react-flow"],"latest_commit_sha":null,"homepage":"https://pro-flow.antdigital.dev","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ant-design.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-05-23T04:28:14.000Z","updated_at":"2024-05-30T05:04:51.512Z","dependencies_parsed_at":"2023-12-18T03:26:28.849Z","dependency_job_id":"66788e76-6f50-4cae-8682-a1d241064a26","html_url":"https://github.com/ant-design/pro-flow","commit_stats":null,"previous_names":["arvinxx/kitchen-flow-editor","ant-design/pro-flow-editor","ant-design/kitchen-flow-editor"],"tags_count":67,"template":false,"template_full_name":"arvinxx/npm-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ant-design%2Fpro-flow","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ant-design%2Fpro-flow/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ant-design%2Fpro-flow/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ant-design%2Fpro-flow/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ant-design","download_url":"https://codeload.github.com/ant-design/pro-flow/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246709923,"owners_count":20821297,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ant-design","flow","flow-editor","pro-components","pro-editor","react","react-flow"],"created_at":"2024-11-08T15:24:37.236Z","updated_at":"2025-04-05T15:09:01.384Z","avatar_url":"https://github.com/ant-design.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n\u003cimg height=\"120\" src=\"https://gw.alipayobjects.com/zos/kitchen/wzToJwlSw%24/logo.svg\"\u003e\n\u003cimg height=\"120\" src=\"https://gw.alipayobjects.com/zos/kitchen/qJ3l3EPsdW/split.svg\"\u003e\n\u003cimg height=\"120\" src=\"https://mdn.alipayobjects.com/huamei_d2ejos/afts/img/A*j10nRoiMh0MAAAAAAAAAAAAADvl6AQ/original\"\u003e\n\n\u003ch1\u003eProFlow\u003c/h1\u003e\n\nA Flow Editor Framework base on React-Flow.\n\n[![][npm-release-shield]][npm-release-link] [![][npm-downloads-shield]][npm-downloads-link] [![][github-releasedate-shield]][github-releasedate-link] [![][github-action-test-shield]][github-action-test-link] [![][github-action-release-shield]][github-action-release-link] [![][codecov-shield]][codecov-link] \u003cbr/\u003e [![][github-contributors-shield]][github-contributors-link] [![][github-forks-shield]][github-forks-link] [![][github-stars-shield]][github-stars-link] [![][github-issues-shield]][github-issues-link] [![][github-license-shield]][github-license-link] \u003cbr/\u003e [![][ant-design-shield]][ant-design-link] [![][devops-dumi-shield]][devops-dumi-link] [![][devops-father-shield]][devops-father-link]\n\nEnglish ยท [็ฎ€ไฝ“ไธญๆ–‡](./README.zh-CN.md) ยท [Changelog](./CHANGELOG.md) . [Report Bug][github-issues-link] ยท [Request Feature][github-issues-link]\n\n![](https://gw.alipayobjects.com/zos/kitchen/XkL0M58aSZ/pro-flow.webp)\n\n\u003c/div\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ckbd\u003eTable of contents\u003c/kbd\u003e\u003c/summary\u003e\n\n#### TOC\n\n- [๐Ÿ“ฆ Installation](#-installation)\n - [Compile with Next.js](#compile-with-nextjs)\n- [โœจ Features](#-features)\n- [๐Ÿ”จ Usage](#-usage)\n - [Add Data](#add-data)\n - [Add Interaction](#add-interaction)\n- [๐Ÿ–ฅ Browser compatibility](#-browser-compatibility)\n- [โŒจ๏ธ Local Development](#๏ธ-local-development)\n- [๐Ÿค Contributing](#-contributing)\n- [๐Ÿ›ฃ๏ธ Ecosystem](#๏ธ-ecosystem)\n\n####\n\n\u003c/details\u003e\n\n## ๐Ÿ“ฆ Installation\n\n\u003e \\[!IMPORTANT]\n\u003e\n\u003e This package is [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c).\n\nTo install `@ant-design/pro-flow`, run the following command:\n\n```bash\n$ pnpm install @ant-design/pro-flow\n```\n\n### Compile with Next.js\n\n\u003e \\[!NOTE]\n\u003e\n\u003e By work correct with Next.js SSR, add `transpilePackages: ['@ant-design/pro-flow']` to `next.config.js`. For example:\n\n```js\nconst nextConfig = {\n transpilePackages: ['@ant-design/pro-flow'],\n};\n```\n\n\u003cbr/\u003e\n\n## โœจ Features\n\n\u003e \\[!NOTE]\n\u003e\n\u003e ProFlow focuses on quickly setting up a flow node-editor framework. It aims to empower developers to easily create rich, dynamic, and intuitive flow editor interfaces.\n\n[![](https://next.ossinsight.io/widgets/official/compose-activity-trends/thumbnail.png?repo_id=644220380\u0026image_size=auto\u0026color_scheme=dark)](https://next.ossinsight.io/widgets/official/compose-activity-trends?repo_id=644220380)\n\n**ProFlow is a canvas editor built on react-flow. It has the following features:**\n\n- ๐Ÿ’  **Modern Node Design**: It features modern default nodes and grouped node components, making the interface more intuitive, readable, and user-friendly.\n- ๐ŸŒ **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.\n- ๐ŸŽจ **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.\n- ๐Ÿ–ฑ๏ธ **Flowchart Data Manipulation**: It provides the useFlowViewer feature, allowing users to easily manipulate and manage canvas-related data, achieving a personalized interactive experience.\n- ๐Ÿงฉ **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.\n- ๐Ÿ“ฑ **Mobile-Friendly**: It defaults to providing touchpad interactive canvas logic in figma mode, adapting to mobile operations for a smoother user experience.\n- ๐ŸŽจ **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.\n\n\u003cbr/\u003e\n\n## ๐Ÿ”จ Usage\n\n```jsx\nimport { FlowView } from '@ant-design/pro-flow';\n\nfunction App() {\n const { styles } = useStyles();\n\n return (\n \u003cdiv className={'container'}\u003e\n \u003cFlowView nodes={[]} edges={[]} /\u003e\n \u003c/div\u003e\n );\n}\n\nexport default App;\n```\n\n### Add Data\n\n```js\nexport const nodes = [\n {\n id: 'a1',\n data: {\n title: 'XXX_API_a1',\n logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',\n description: 'XXX_XXX_XXX_API',\n },\n },\n {\n id: 'a2',\n data: {\n title: 'XXX_API_a2',\n logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',\n description: 'XXX_XXX_XXX_API',\n },\n },\n {\n id: 'a3',\n data: {\n title: 'XXX_API_a3',\n logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',\n description: 'XXX_XXX_XXX_API',\n },\n },\n];\nexport const edges = [\n {\n id: 'a1-a2',\n source: 'a1',\n target: 'a2',\n },\n {\n id: 'a1-a3',\n source: 'a1',\n target: 'a3',\n type: 'radius',\n },\n];\n```\n\n### Add Interaction\n\n```js\nimport { FlowView } from '@ant-design/pro-flow';\nimport useStyles from './css/index.style';\nimport { edges, nodes } from './data';\n\nfunction App() {\n const { styles } = useStyles();\n\n return (\n \u003cdiv className={styles.container}\u003e\n \u003cFlowView nodes={nodes} edges={edges} /\u003e\n \u003c/div\u003e\n );\n}\n\nexport default App;\n```\n\n\u003cbr/\u003e\n\n## ๐Ÿ–ฅ Browser compatibility\n\n\u003e \\[!NOTE]\n\u003e\n\u003e - Modern browsers and Internet Explorer 11 (with [polyfills](https://stackoverflow.com/questions/57020976/polyfills-in-2019-for-ie11))\n\u003e - [Electron](https://www.electronjs.org/)\n\n| [![edge](https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png)](http://godban.github.io/browsers-support-badges/) | [![Edge](https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png)](http://godban.github.io/browsers-support-badges/) | [![chrome](https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png)](http://godban.github.io/browsers-support-badges/) | [![safari](https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png)](http://godban.github.io/browsers-support-badges/) | [![electron_48x48](https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png)](http://godban.github.io/browsers-support-badges/) |\n| ------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |\n\n\u003cbr/\u003e\n\n## โŒจ๏ธ Local Development\n\nYou can use Github Codespaces for online development:\n\n[![][github-codespace-shield]][github-codespace-link]\n\nOr clone it for local development:\n\n```bash\n$ git clone https://github.com/ant-design/pro-flow.git\n$ cd pro-flow\n$ pnpm install\n$ pnpm dev\n```\n\n\u003cbr/\u003e\n\n## ๐Ÿค Contributing\n\n\u003e \\[!IMPORTANT]\n\u003e\n\u003e Join our collaborative ecosystem. Your contributions are the heartbeat of our project. Here's how you can be an integral part of our vibrant community:\n\n- **Integrate and Innovate**: Incorporate Ant Design Pro, umi, and ProFlow into your projects. Your real-world usage and feedback are invaluable to us.\n- **Voice Your Insights**: Encounter a glitch? Have a query? Your perspectives matter. Share them by submitting [issues][github-issues-link] and help us enhance the user experience.\n- **Shape the Future**: Have code enhancements or feature ideas? We invite you to propose [pull requests][pr-welcome-link] and contribute directly to the evolution of our codebase.\n\nEvery contribution, big or small, is celebrated. Join us in our mission to refine and elevate the world of open-source enterprise UI components. ๐Ÿ˜ƒ\n\n[![][pr-welcome-shield]][pr-welcome-link]\n\n\u003ca href=\"https://github.com/ant-design/pro-flow/graphs/contributors\" target=\"_blank\"\u003e\n \u003ctable\u003e\n \u003ctr\u003e\n \u003cth colspan=\"2\"\u003e\n \u003cbr\u003e\u003cimg src=\"https://contrib.rocks/image?repo=ant-design/pro-flow\"\u003e\u003cbr\u003e\u003cbr\u003e\n \u003c/th\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\n \u003cimg src=\"https://next.ossinsight.io/widgets/official/compose-org-active-contributors/thumbnail.png?activity=active\u0026period=past_28_days\u0026owner_id=12101536\u0026repo_ids=644220380\u0026image_size=2x3\u0026color_scheme=dark\"\u003e\n \u003c/td\u003e\n \u003ctd rowspan=\"2\"\u003e\n \u003cimg src=\"https://next.ossinsight.io/widgets/official/compose-org-participants-growth/thumbnail.png?activity=active\u0026period=past_28_days\u0026owner_id=12101536\u0026repo_ids=644220380\u0026image_size=4x7\u0026color_scheme=dark\"\u003e\n \u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e\n \u003cimg src=\"https://next.ossinsight.io/widgets/official/compose-org-active-contributors/thumbnail.png?activity=new\u0026period=past_28_days\u0026owner_id=12101536\u0026repo_ids=644220380\u0026image_size=2x3\u0026color_scheme=dark\"\u003e\n \u003c/td\u003e\n \u003c/tr\u003e\n \u003c/table\u003e\n\u003c/a\u003e\n\n\u003cbr/\u003e\n\n## ๐Ÿ›ฃ๏ธ Ecosystem\n\n- **[ProComponents](https://github.com/ant-design/pro-components)** - Designed for Enterprise-Level Application, Use Ant Design like a Pro!.\n- **[ProEditor](https://github.com/ant-design/pro-editor)** - The Ultimate Editor UI Framework and Components.\n- **[ProFlow](https://github.com/ant-design/pro-flow)** - A Flow Editor Framework base on React-Flow.\n- **[ProChat](https://github.com/ant-design/pro-chat)** - Components Library for Quickly Building LLM Chat Interfaces.\n\n\u003cbr/\u003e\n\n---\n\n#### ๐Ÿ“ License\n\nCopyright ยฉ 2023 - present [AFX][ant-design-link] \u0026 [Ant Digital](https://antdigital.com). \u003cbr/\u003e This project is [MIT](./LICENSE) licensed.\n\n\u003c!-- LINK GROUP --\u003e\n\n[ant-design-link]: https://ant.design\n[ant-design-shield]: https://img.shields.io/badge/-Ant%20Design-1677FF?labelColor=black\u0026logo=antdesign\u0026style=flat-square\n[codecov-link]: https://codecov.io/gh/ant-design/pro-flow\n[codecov-shield]: https://img.shields.io/codecov/c/github/ant-design/pro-flow?color=1677FF\u0026labelColor=black\u0026style=flat-square\u0026logo=codecov\u0026logoColor=white\n[devops-dumi-link]: https://d.umijs.org/\n[devops-dumi-shield]: https://img.shields.io/badge/docs%20by-dumi-blue?color=1677FF\u0026labelColor=black\u0026style=flat-square\n[devops-father-link]: https://github.com/umijs/father\n[devops-father-shield]: https://img.shields.io/badge/build%20with-father-028fe4.svg?color=1677FF\u0026labelColor=black\u0026style=flat-square\n[github-action-release-link]: https://github.com/ant-design/pro-flow/actions/workflows/release.yml\n[github-action-release-shield]: https://img.shields.io/github/actions/workflow/status/ant-design/pro-flow/release.yml?color=1677FF\u0026label=release\u0026labelColor=black\u0026logo=githubactions\u0026logoColor=white\u0026style=flat-square\n[github-action-test-link]: https://github.com/ant-design/pro-flow/actions/workflows/test.yml\n[github-action-test-shield]: https://img.shields.io/github/actions/workflow/status/ant-design/pro-flow/test.yml?color=1677FF\u0026label=test\u0026labelColor=black\u0026logo=githubactions\u0026logoColor=white\u0026style=flat-square\n[github-codespace-link]: https://codespaces.new/ant-design/pro-flow\n[github-codespace-shield]: https://github.com/codespaces/badge.svg\n[github-contributors-link]: https://github.com/ant-design/pro-flow/graphs/contributors\n[github-contributors-shield]: https://img.shields.io/github/contributors/ant-design/pro-flow?color=1677FF\u0026labelColor=black\u0026style=flat-square\n[github-forks-link]: https://github.com/ant-design/pro-flow/network/members\n[github-forks-shield]: https://img.shields.io/github/forks/ant-design/pro-flow?color=1677FF\u0026labelColor=black\u0026style=flat-square\n[github-issues-link]: https://github.com/ant-design/pro-flow/issues\n[github-issues-shield]: https://img.shields.io/github/issues/ant-design/pro-flow?color=1677FF\u0026labelColor=black\u0026style=flat-square\n[github-license-link]: https://github.com/ant-design/pro-flow/blob/master/LICENSE\n[github-license-shield]: https://img.shields.io/github/license/ant-design/pro-flow?color=1677FF\u0026labelColor=black\u0026style=flat-square\n[github-releasedate-link]: https://github.com/ant-design/pro-flow/releases\n[github-releasedate-shield]: https://img.shields.io/github/release-date/ant-design/pro-flow?color=1677FF\u0026labelColor=black\u0026style=flat-square\n[github-stars-link]: https://github.com/ant-design/pro-flow/network/stargazers\n[github-stars-shield]: https://img.shields.io/github/stars/ant-design/pro-flow?color=1677FF\u0026labelColor=black\u0026style=flat-square\n[npm-downloads-link]: https://www.npmjs.com/package/@ant-design/pro-flow\n[npm-downloads-shield]: https://img.shields.io/npm/dt/@ant-design/pro-flow?labelColor=black\u0026style=flat-square\u0026color=1677FF\n[npm-release-link]: https://www.npmjs.com/package/@ant-design/pro-flow\n[npm-release-shield]: https://img.shields.io/npm/v/@ant-design/pro-flow?color=1677FF\u0026labelColor=black\u0026logo=npm\u0026logoColor=white\u0026style=flat-square\n[pr-welcome-link]: https://github.com/ant-design/pro-flow/pulls\n[pr-welcome-shield]: https://img.shields.io/badge/%E2%9D%A4%EF%B8%8F%20PR%20WELCOME-%E2%86%92-1677FF?labelColor=black\u0026style=for-the-badge\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fant-design%2Fpro-flow","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fant-design%2Fpro-flow","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fant-design%2Fpro-flow/lists"}