基于g6的流程图编辑器Demo

Posted by kavience on 2020-10-14

✨ 特点

  • 拖拽式更新工作流程图
  • 数据与图双向转换

📦 原理

拖拽

基于 react-dndreact-dnd-html5-backend 创建拖拽节点与背景画布。

基于 g6 创建可视化图,根据 api 提供的 registerBehavior 注册行为,监听鼠标事件,基于 g6 提供的 ToolBar, Menu, Minimap, Grid 等插件,提供更多功能。

样式

基于 antd 提供的 UI 组件优化样式。

💡 预览

请查看 在线 Demo

🔨 说明

项目仅供学习和参考,或许不适合直接用于项目中,项目地址;