一、简介

XFlow 是 AntV 旗下, 基于 X6 图编辑引擎、面向 React 技术栈用户的图编辑应用级解决方案, 旨在让复杂的图编辑应用开发简单高效。
类比antd体系, X6 是图编辑场景的 antd, 提供图编辑的各种原子能力。而 XFlow 是图编辑场景的 ProComponent, 通过 App 扩展系统/状态管理/命令模式来实现对 X6 的原子能力的组合封装, 最终实现应用级场景的开箱即用。
XFlow 源自蚂蚁体验技术部数据智能团队, 已经在蚂蚁大数据部、人工智能中台业务场景深度打磨验证, 值得信赖!
如果您还没有使用过 XFlow, 建议通过 快速上手 抢先体验 XFlow 的魅力。

二、图编辑引擎栈

image.png

三、XFlow 的架构

如下图所示,XFlow 分为以下四个部分

  • xflow-core(核心库)
  • xflow-extension(UI组件库)
  • xflow-hooks(扩展机制)
  • xflow-docs(业务最佳实践)

每个库会承载不同的功能,解决不同的问题,下面会详细介绍一下:
image.png

3.1 xflow-core

image.png

3.1.1 XFlowCanvas:降低 x6 使用的复杂度。

画布是图编辑应用中必备的内容,XFlow 默认生成画布实例,内置了画布配置项、React 节点/连线上 React 内容渲染逻辑、画布状态等。
通过 createGraphConfig可以快捷生产画布配置。
image.png

3.1.2 Command:封装 X6 层各种原子API

XFlow 通过命令的方式统一调用 X6 的 API
XFlow 的 内置命令
XFlow 简介 - 图6

3.1.3 Model: 全局状态管理服务

在 XFlow 通过 Model 来驱动 React UI 组件更新渲染,我们通过监听事件可以在事件的回调函数中调用 Model 的 setValue 方法来更新 Model,UI 组件中通过 Model 的 watch 方法来更新组件内部的 State,从而实现组件渲染的更新。
XFlow 的 内置 model
XFlow 简介 - 图7

3.1.4 画布与交互组件联动

在实际业务中,我们经常会遇到画布内容与配套 UI 组件交互的需求。如下图所示,XFlow 借鉴了读写分离架构,画布内容的任何变化都会直接修改 modelService 中的变量值,从而影响UI交互组件的表现形式。而UI交互组件则通过调用 command 来更新画布内容。
image.png

3.2 xflow-extension

xflow-extension包里的内容是基于xflow-core提供的api定制出的交互组件。
在实际业务中,诸如小地图 Minimap、右键菜单栏 Contextmenu、工具栏 Toolbar、对齐线 Snapline 等都是比较常用的,XFlow 默认将这些常用交互组件封装成 React 组件,开发者使用时就跟使用普通 React 组件一样。基于这些开箱即用的组件,我们可以快速搭建自己的图编辑应用。
XFlow 简介 - 图9

3.3 xflow-hooks

XFlow 对于 graphConfig、commandService、modelService 都封装了一些默认的逻辑,但是当默认逻辑不满足用户的业务需求时,或者需要动态修改逻辑时,或者需要自定义增强行为时,也允许用户通过自定义扩展机制来实现。

扩展钩子 - 注册修改graphConfig的钩子
image.png

扩展行为 - 自定义command增强行为:
image.png

3.4 xflow-docs

沉淀了 Flow、DAG、ER 三个较为成熟的图编辑场景,可以直接使用。

3.4.1 DAG 解决方案

在图论中,如果一个有向图从任意顶点出发无法经过若干条边回到该点,则这个图是一个有向无环图(DAG, Directed Acyclic Graph)

image.png

3.4.2 ER 建模解决方案

image.png

3.4.3 流程图(Flowchart )解决方案

image.png

Flowchart中 的主要组件
image.png
Flowchart 中的分层结构
XFlow 简介 - 图16

四、XFlow 的痛点

4.1 上手成本高

当我想注册一个 model 的时候,看到下面这段代码直接劝退了…
image.png

来自用户的吐槽~
image.png

4.2 官方文档简略

由于 XFlow 很多概念还是相对抽象,而官方文档又比较简略,导致用户理解困难。此外官网上的 demo 也很少。
image.png

面向源码编程两个月,寒了谁的心?

4.3 源码抽象,不利于维护

核心代码通过 IOC-container 进行依赖管理,用了大量的依赖注入,增加了学习门槛。
image.png