数字工作平台审批流程图优化

最近数字工作平台项目中审批流程图想要优化，做了一些技术选型对比后，X6 很好的满足了我们的流程图的需求同时也满足了我们对性能优化的要求。今天分享给大家。

AntV X6介绍

X6 是 AntV 旗下的图编辑引擎，提供了一系列开箱即用的交互组件和简单易用的节点定制能力，X6 提供了图编辑场景的常用扩展，如小地图、网格系统、对齐线、框选、撤销/重做等，内置了图编辑场景的常规交互和设计，如群组、链接桩、节点缩放、旋转、连线交互，并提供了基于 HTML 和 React 低成本定制节点能力。

基本原理

讲到这里有朋友可能会好奇 X6 的基本原理，在这里给大家简单的说一下。 X6 整体是基于MVVM的架构进行设计的，对外整体暴露Graph的类，其中的Node、Edge、Port等都有对外暴露的方法，可以单独使用，其中提供了类Jquery的一些dom操作方法，整体的Graph基于了一个事件基类，对事件进行的整体的处理，其中使用了dispose来对实例进行显示判定。整体设计符合SOLID原则，提供事件机制进行发布订阅解耦，对于扩展性结构则提供注册机制，进行扩展性插件组织。

选择 X6 的原因

更新稳定

X6 自2020年发布以来，为了让开发者更加高效的研发图编辑应用，X6 在多年一直保持版本稳定和无感升级的前提下，同时易用性和性能方面也进行了深度打磨，对画布、节点、连线、工具、动画进行了全面优化升级。

性能良好

1.9 版本以后，X6 新支持了渐进渲染模式。在数千节点数量的场景下，如果一次性将所有节点内容完全渲染，很可能会造成界面的卡顿。在渐进渲染模式下，将节点属性分为同步渲染和异步渲染两类，同步渲染的属性一般是节点的结构属性，对体验影响较大，是需要马上看到效果的，异步渲染属性对体验影响程度较低，但是异步属性需要按照依赖关系进行排序，首次渲染时，优先渲染同步属性，等到浏览器空闲时渲染异步属性。这种渐进式渲染方案在保证最大限度保证用户体验的条件下，将首次渲染性能提升了 50%。

扩展性

X6 在扩展依赖方面由官方提供了多种依赖，如实现拖拽生成节点的x6-plugin-stencil、增加拖拽辅助线的x6-plugin-snapline等等。

易用性

X6 在使用方式上与Echarts类似，可以通过指定DOM节点，然后通过Api配置参数的方式来进行设置。配置项也有很多，方便按照需求定制所需的页面。

完整的官方文档

X6的文档对X6、扩展插件的Api描写非常详细，也有多种示例以便学习、使用。

总结

React在开发中 X6 对程序员来说，需要掌握一定的React基础使用相对复杂，文档对于初学者来说也并不算友好。虽然 X6 也有着种种缺陷，但也并不影响它是一款功能强大的图编辑引擎。