A React based Flow Editor
npm install kitchen-flow-editor
[![NPM version][npm-image]][npm-url] [![NPM downloads][download-image]][download-url] [![install size][npm-size]][npm-size-url]
[![Test CI status][test-ci]][test-ci-url] [![Deploy CI][release-ci]][release-ci-url] [![Coverage][coverage]][codecov-url]
[![contributors][contributors-shield]][contributors-url] [![forks][forks-shield]][forks-url] [![stargazers][stargazers-shield]][stargazers-url] [![issues][issues-shield]][issues-url]
[![ docs by dumi][dumi-url]](https://d.umijs.org/) [![Build With father][father-url]](https://github.com/umijs/father/)
[gitpod-badge]: https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod
[gitpod-url]: https://gitpod.io/#https://github.com/ant-design/kitchen-flow-editor
[dumi-url]: https://img.shields.io/badge/docs%20by-dumi-blue
[father-url]: https://img.shields.io/badge/build%20with-father-028fe4.svg
[npm-image]: http://img.shields.io/npm/v/kitchen-flow-editor.svg?style=flat-square&color=deepgreen&label=latest
[npm-url]: http://npmjs.org/package/kitchen-flow-editor
[npm-size]: https://img.shields.io/bundlephobia/minzip/kitchen-flow-editor?color=deepgreen&label=gizpped%20size&style=flat-square
[npm-size-url]: https://packagephobia.com/result?p=kitchen-flow-editor
[coverage]: https://codecov.io/gh/ant-design/kitchen-flow-editor/branch/master/graph/badge.svg
[codecov-url]: https://codecov.io/gh/ant-design/kitchen-flow-editor/branch/master
[test-ci]: https://github.com/ant-design/kitchen-flow-editor/workflows/Test%20CI/badge.svg
[release-ci]: https://github.com/ant-design/kitchen-flow-editor/workflows/Release%20CI/badge.svg
[test-ci-url]: https://github.com/ant-design/kitchen-flow-editor/actions?query=workflow%3ATest%20CI
[release-ci-url]: https://github.com/ant-design/kitchen-flow-editor/actions?query=workflow%3ARelease%20CI
[download-image]: https://img.shields.io/npm/dm/kitchen-flow-editor.svg?style=flat-square
[download-url]: https://npmjs.org/package/kitchen-flow-editor
Kitchen Flow Editor 是一款基于 react-flow 构建的画布编辑器。具有的特性如下:
- 🎨 自定义节点类型:用户可以通过传入自定义 React 组件的方式创建不同类型的节点,从而满足不同的业务需求;
- 🎉 灵活的事件处理:支持用户对节点的拖拽、连接、删除等事件进行自定义处理,满足不同业务场景的需求;
- 🚀 高度可定制:支持用户对节点外观、连线样式、节点大小等多个方面进行自定义,方便用户根据自己的需求进行定制化开发。
- 🔙 撤销重做:支持用户对节点编辑操作进行撤销和重做,提高用户操作的便利性和效率;
- 🌓 亮暗色主题模式一键切换:支持用户在亮色和暗色主题之间快速切换,适应不同的环境和用户习惯;
推荐使用 pnpm 安装
``bash``
pnpm i kitchen-flow-editor -S
详情:CHANGELOG
> 📊 Total: 4
[![][back-to-top]](#readme-top)
#### 📝 License
Copyright © 2020 - present [Arvin Xu][profile-url].
This project is MIT licensed.
[profile-url]: https://github.com/arvinxx
[back-to-top]: https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square
[contributors-shield]: https://img.shields.io/github/contributors/ant-design/kitchen-flow-editor.svg?style=flat
[contributors-url]: https://github.com/ant-design/kitchen-flow-editor/graphs/contributors
[forks-shield]: https://img.shields.io/github/forks/ant-design/kitchen-flow-editor.svg?style=flat
[forks-url]: https://github.com/ant-design/kitchen-flow-editor/network/members
[stargazers-shield]: https://img.shields.io/github/stars/ant-design/kitchen-flow-editor.svg?style=flat
[stargazers-url]: https://github.com/ant-design/kitchen-flow-editor/stargazers
[issues-shield]: https://img.shields.io/github/issues/ant-design/kitchen-flow-editor.svg?style=flat
[issues-url]: https://github.com/ant-design/kitchen-flow-editor/issues/new/choose