XFLOW，基于 X6 图编辑引擎、面向 React 技术栈用户的专业图编辑应用级解决方案, 帮助您轻松开发复杂的图编辑应用。目前已经在蚂蚁大数据/人工智能场景中深度打磨验证。 官网地址

本文主要介绍xflow在大数据平台的ER图应用、sql低代码功能的DAG图应用、算法开发人工智能场景下的DAG图的应用等。通过利用xflow的开箱即用能力快速实现流程图的前端开发，文内涉及到一定技术细节和优化部分会尽量提供解决问题的思路和方法，并不一定适用所有业务场景，但可提供一定的参考借鉴价值。

xflow官方代码解读

packages/xflow-docs/docs/tutorial/solutions/dag/demos/basic/index.tsx

首先官方文档提供的示例基本涵盖了xflow的全部能力，从github把代码clone下来后，可以找到packages/xflow-docs/docs/tutorial/solutions/路径，下面有dag、er、flow 3个文件夹分别对应3种解决方案：DAG解决方案、ER建模解决方案、流程图解决方案。我们这里重点介绍DAG方案。

吐槽一下官方文档很多内容没有更新，逻辑也比较混乱，对新手很不友好，官方也已经意识到这个问题，并且已有xflow 2.0规划，目前来看距离规划的最后时间又过去大半年了，也不知道是不是弃坑了😂

DAG解决方案

DAG: 在图论中，如果一个有向图从任意顶点出发无法经过若干条边回到该点，则这个图是一个有向无环图（DAG, Directed Acyclic Graph）。利用 DAG 图的数据结构可以使用算法解决拓扑排序/构建子图/路径查找等问题，因被应用在任务调度/因果结构/族谱血缘等场景。

首先我们来认识一下实现一个DAG图界面需要的组件

• DagGraphExtension DAG 的 Hook 集合
• NodeCollapsePanel 左侧的组件拖拽面板，组件从这里拖拽到右侧画布去
• CanvasToolbar 画布通用工具栏，一般放一些自定义的工具按钮
• XFlowCanvas XFlow 最核心的画布组件
  • CanvasScaleToolbar 缩放工具栏，固定几种常用的工具按钮
  • CanvasContextMenu 右键菜单
  • CanvasSnapline 辅助对齐线
  • CanvasNodePortTooltip 组件链接桩tooltip
• JsonSchemaForm 右侧的配置式表单
• KeyBindings 键盘快捷键

这些组件没啥好说的，都是些常见基础的功能组件，但建议开发者不要去看官方文档（不准确），建议直接打开源码进行阅读，有啥功能看下代码才是最准确的，这些组件的路径packages/xflow-extension/src/index.tsx

可以在根目录yarn dev:ext 然后再yarn dev:docs，这样可以直接修改xflow-extension里面的代码并且实时更新到docs预览界面上，非常方便

问题

这里列一些组件方面的坑，希望对新的使用者有帮助

• 左侧的组件拖拽面板只支持一层，不能作为一个组件树展示，如果需要树形结构只能自己定制开发一个组件
• 画布通用工具栏与缩放工具栏是两个独立的组件，不要搞混了
• 右侧的配置式表单只支持几种基础的select、input等组件，且antd本身的props基本没有做处理，需要自己自定义，自定义起来也还算比较方便
• 没有选中画布中组件的时候，右侧的配置式表单不能收起（我这边采用改造源码打补丁的方法加上了这个功能）

最后欢迎在评论区留言哦~