AntV 旗下图编辑引擎 X6

newbyvector
2,601 阅读8分钟

前言

我们在去年 11-22 上发布了 X6 的 V1.0 版本，获得了开发者社区很多的反响。有很多朋友给我们提出了宝贵的建议，也有很多人想进一步了解 X6。在下面这篇文章里，主要介绍一下 X6 的功能与设计。

介绍

X6 到底是一个什么样的框架？

首先说一下诞生背景，近年来内部业务中流程编排功能场景越来越多，比如服务资源调度编排、审批流程编排、组织架构管理、机器学习算法建模平台的可视化编排等。我们将蚂蚁内部的在机器学习算法建模平台打磨多年的可视编排能力内核抽取出来，形成 AntV 旗下图编辑引擎 X6。

很多人认为 X6 只是一个流程图开发库。其实远远不止如此，X6 的核心功能在 SVG 的渲染能力，在渲染能力之外，我们还有网格、背景、剪切板、对齐线、框选、撤销重做、小地图、快捷键、导出等必备功能，除此之外，我们还提供了配套的 UI 组件库、React/Vue 渲染、布局等能力。所以 X6 是一个为图编辑场景提供的全套解决方案，我们可以基于 X6 做流程图、ER 图、脑图、组织结构图、DAG 图等。

典型场景

流程编排场景（流程图）

流程图能将业务流程表现得更加清晰、顺畅，经常应用到流程编排的场景。X6 因为优秀的节点定制以及连线规则定制能力，能很好的解决流程图场景中的各类问题。 ER 建模场景（ER 图）

用 ER 图表示的概念模型比数据模型更一般、更抽象、更接近现实世界。X6 支持 HTML/React/Vue 节点渲染方式，可以定制像 Table 这样复杂的节点。 算法建模场景（DAG 图）

DAG（有向无环）有着严密的拓扑性质，在机器学习算法建模平台应用很广泛，通过可视化建模方式能大大提升建模调参的效率。X6 在内部算法建模场景经过大量的实践和验证，结果表明 X6 完全胜任 DAG 图。 组织架构管理场景（组织架构图）

组织结构图是直观地展示企业结构的工具。X6 有简单的样式定制能力以及布局能力，在处理组织架构图中得心应手。

选择 X6 的理由

节点一边极易定制

X6 内部预置了业务中常用的节点和边，每个节点和边的样式都可以通过属性配置。而且我们提供了继承的方式来自定义节点和边，在边上我们还能定制标签文本以及箭头，自由度极高。针对更复杂的场景，我们还支持使用 HTML/React/Vue 来渲染节点。这样我们在实际开发中，可以根据项目的技术栈和自己擅长方向，选取适合自己的方式。

开箱即用的功能

X6 提供了大量的图编辑功能，它们基本上都是基于配置式，而且配置参数是经过大量业务实践出来的，开发过程中充分考虑可扩展性以及兼容性，能覆盖到大部分的功能场景。

  • **画布常规功能一应俱全：**网格、背景、剪切板、对齐线、滚动画布、小地图、框选、撤销重做、快捷键、滚轮缩放、导出等。
  • 卓越的交互能力：
    • X6 支持在节点上固定连接桩，方便达到连线的效果，可以指定链接桩的位置，同时也可以为链接桩指定标签。

  • X6 支持使用群组来表述节点之间的父子关系，可以通过交互拖拽成组，支持限制群组内的子节点的移动范围以及折叠、展开群组。

  • 为了进一步扩展交互能力，X6 提供了辅助工具的功能，内置了 10+ 常用工具，并且提供了简单的方式来扩展工具集。

  • 在业务中会遇到各种不同的连线规则，X6 通过组合连线和路由机制，能满足大部分场景下的连线规则。

  • 强大易用的动画：X6 提供了完整的动画解决方案，内置 30+ 定时函数，只对外暴露 transition 和 stopTransition 方法，使用方式简单的不能再简单。

  • 配套 UI 组件：搭建一个复杂的图编辑应用还需要用到 Menubar、Toolbar、Dropdown、ContextMenu、Splitbox 等 UI 组件，我们在 x6-react-components 中提供了一些这样的 React 组件，可以搭配 antd 使用。

  • 完善的布局方案：想让画布中图形按照一定的规则进行排列，少不了布局算法。 X6 直接使用从 G6 中提取出来的 layout 库，支持 G6 中所有的布局算法。

未来计划

  1. 我们正在准备 V2.0 的开发计划，主要聚焦在下面两个点：
    1. 优化性能：现阶段 X6 在大数据渲染下存在着性能瓶颈，可以在这里查看性能测试报告，性能还存在着很大的提升空间，在下阶段，我们会专注分析性能卡点，设计优化方式，将 X6 打造成一个高性能的图编辑引擎。
    2. 提高易用性：X6 始终秉承简单、易用的原则，在内外用户的声音中不断优化，但 X6 还是一个新生儿，要成为高可用的框架还需要进行大量的验证、优化、创新。在去年我们已经完成了官网文档开发，增加了 100+ 示例 Demo，但还是不够的，我们还会花大量的精力去优化官网，去增加具有代表性的 Demo，去将我们的 API 设计的简单明了，达到用户看了 Demo 就能完成功能开发的目标。
  2. 过去的一年，我们很少做 X6 的推广工作，以至于很多内外用户在开发图编辑应用过程中没有足够信息找到我们，我们也缺少了用户需求的输入，因为只有贴着业务、贴着用户需求的框架才能走的远。后面我们每个月会出一版 X6 相关的文章，主题主要包括两点： 第一个是怎么使用 X6 实现功能需求，第二个是系统性的介绍技术实现。当然，这远远不够的，X6 的共建需要大家的力量，如果大家在使用 X6 过程中有自己的心得，欢迎分享。

最后

欢迎大家访问我们的 Github 以及官网，去体验一把 X6 的能力。如果你喜欢开源，相信合作的力量，看好图编辑的未来，欢迎加入我们，开源社区需要大家的力量。接下来是 X6 的技术介绍，如果大家感兴趣，可以继续阅读。

扩展阅读

X6 的设计

X6 采用典型的 MVVM 架构，模块之间通过事件解耦。最上层 Graph 提供对外 API 支持。第二层分为三部分，在 Shape 中内置常用的节点以及边，画布中提供网格、背景、缩放平移等能力，右侧是常用功能模块。API 调用或者 UI 交互都会体现在 Model 层数据的修改，Model 层数据修改后会通知 View 层进行视图更新。最底层包括两部分，Registry 是 X6 的注册中心，提供可扩展的能力，Geometry 提供点、线、矩形、路径、圆、椭圆等图形的基础计算能力。我们看到最外层还有四个项目模块，x6-react-component 是图编辑引擎周边的 UI 组件库，x6-react-shape 提供在 X6 节点中渲染 React 组件能力，x6-vue-shape 提供在 X6 节点中渲染 Vue 组件的能力，layout 提供了布局能力。

  1. MVVM架构，专注数据和业务

X6 的数据驱动是通过 MVVM 架构来实现的，Model 层管理着节点、边、连接桩的数据对象，View 层提供边、节点、工具等元素的渲染能力，中间通过 ViewModel 层来实现通讯，这样业务中只要专注数据处理，不需要去关心渲染逻辑。举个例子：

// 修改节点的边框颜色
node.attr('body/stroke', '#f00')
// 修改连接桩
edge.prop('target/port', 'portId')
  1. 订阅事件，模块解耦

在 X6 画布内的任何操作都会触发事件，各功能模块可以订阅与自己相关的事件，在事件回调中处理自身的逻辑，而不去影响主流程的实现。这样每个功能模块与主流程实现了解耦，新增、修改、删除功能的时候可以不用去考虑对别的模块造成影响，可维护性高。 3.注册机制，灵活扩展

  1. X6 在设计之初就充分考虑了可扩展性，精心设计了简单、高可拓展的接口，使用注册机制，将所有可扩展内容注册到注册中心，这些内容可插拔、可自定义，自由度极高，可扩展性极强。看下面定制路由的例子，可以感受 X6 注册机制的灵活性：
// 注册 random 路由
function randomRouter(vertices: Point.PointLike[], args: RandomRouterArgs, view: EdgeView) {
  // 具体实现
}
Graph.registerRouter('random', randomRouter)

// 使用刚才注册的路由
const graph = new Graph({
  connecting: {
  	router: {
    	name: 'random',
      args: {
      	bounces: 5,
      }
    }
  }
})
avatar
文章
阅读
粉丝