一、简介

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

二、图编辑引擎栈

三、XFlow 的架构

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

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

每个库会承载不同的功能，解决不同的问题，下面会详细介绍一下：

3.1 xflow-core

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

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

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

XFlow 通过命令的方式统一调用 X6 的 API
XFlow 的 内置命令

3.1.3 Model: 全局状态管理服务

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

3.1.4 画布与交互组件联动

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

3.2 xflow-extension

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

3.3 xflow-hooks

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

扩展钩子 - 注册修改graphConfig的钩子

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

3.4 xflow-docs

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

3.4.1 DAG 解决方案

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

3.4.2 ER 建模解决方案

3.4.3 流程图(Flowchart )解决方案

Flowchart中 的主要组件

Flowchart 中的分层结构

四、XFlow 的痛点

4.1 上手成本高

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

来自用户的吐槽～

4.2 官方文档简略

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

面向源码编程两个月，寒了谁的心？

4.3 源码抽象，不利于维护

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