导读
去年 1122 上发布了 X6 的第一个正式版本，针对 X6 和 G6 的区别的讨论还历历在目，转眼一年，X6 已经在很多图编辑业务中大放异彩，可以看到很多可视化产品已经不仅仅满足于图形展示，在图形定制、图形交互上有更多高级的需求，并对 X6 的易用性和性能提出了更高要求。
为了让开发者更加高效的研发图编辑应用，X6 今年在保持版本稳定和无感升级的前提下，在易用性和性能方面进行了深度打磨，对画布、节点、连线、工具、动画进行了全面优化升级，并对画布元素渲染逻辑进行重新设计，首次渲染性能有了大幅提升。通过一年的基础夯实，我们有信心迎接未来跟多的挑战。
易用性提升
统一的画布
画布是 X6 的核心元素之一，承载着平移、缩放、对齐、居中等常用交互，在原来版本中需要开启 scroller 才能具备这些功能，然而很多用户并不喜欢 scroller 画布的滚动条样式，并且 scroller 画布也带来了一些性能损失。因此我们重新设计了平移、缩放、对齐、居中、小地图这几个功能，让它们同时兼容了两种画布，并对每个功能都做了大量细节优化。
丰富的节点定制方式
X6 中基于 HTML 和 React 低成本定制节点能力一直备受青睐，我们一直希望能够支持其他的渲染方式，让更多的开发者获利。在推出 Vue 渲染方式后，社区提供了对 Vue3 的支持，随后又有社区成员贡献了 Angular 渲染方式的代码。令人兴奋的是越来越多的社区贡献者参与到 X6 的建设中来，感谢给我们提 PR、提 Issue、在用户群答疑的小伙伴们。
易扩展的交互工具
工具为节点和连线的交互提供了强大的扩展能力。我们在 SVG 工具之外新增了第二种工具类型：HTML 工具，基于 HTML 工具，实现了右键菜单、Tooltip、文本编辑等常用功能，只需要简单的配置就可以使用起来。后续我们会继续沉淀业务中的通用工具，进一步降低开发成本。
| 右键菜单 | Tooltip |
|---|---|
| 文本编辑 | 连接桩 Tooltip |
更灵活的动画
之前可以通过 transition 来将指定属性值通过平滑动画的形式过渡到目标值，让一些交互变换显得不那么生硬。这次，我们基于 SVG SMIL Animation 实现了元素动画，可以精准定义元素的运动路径、淡入或淡出效果以及伸缩、旋转或改变颜色等变化，希望进一步发挥动画在图编辑应用的帮助作用， 提升开发者对元素运动和变换的控制能力。
| 沿路径运动 | 闪烁 |
|---|---|
成熟的布局能力
关于布局，G6 已经有很多卓越的工作和深入的研究。X6 完全复用了 G6 的布局能力，并做了数据格式的适配，在 X6 也可以很方便的使用布局功能。
| 网格布局 | Dagre 布局 |
|---|---|
| 椭圆布局 | 树形布局 |
更多的场景案例
除了经典的流程图、DAG 图、ER 图外，今年还给大家带来了更多的场景案例。下面梳理了 X6 比较擅长的应用场景，可以作为技术选型时的参考，同时提供了对应的源码，以便业务中快速接入。
| 流程图 | DAG 图 |
|---|---|
| ER 图 | BPMN |
| 脑图 | UML 类图 |
| 泳道图 | ELK |
| 组织架构图 | |
性能提升
性能一直是 X6 的一个重要方向，从 1.9 版本以后，X6 新支持了渐进渲染模式。在数千节点数量的场景下，如果一次性将所有节点内容完全渲染，很可能会造成界面的卡顿，在渐进渲染模式下，将节点属性分为同步渲染和异步渲染两类，同步渲染的属性一般是节点的结构属性，对体验影响较大，是需要马上看到效果的，异步渲染属性对体验影响程度较低，但是异步属性需要按照依赖关系进行排序，首次渲染时，优先渲染同步属性，等到浏览器空闲时渲染异步属性。这种渐进式渲染方案在保证最大限度保证用户体验的条件下，将首次渲染性能提升了 50%。
除了优化首次渲染性能外，交互的流畅度也有了较大的提升，针对实际业务过程中遇到的交互性能卡点，进行了大量的实践、优化和验证，交互体验在不断的改进中提升。
重磅推出
今年我们还重磅推出 XFlow，XFlow 是基于 X6 图编辑引擎的应用级图编辑解决方案，针对不同的业务场景，通过插件机制来降低组合封装 X6 原子能力的复杂度, 同时通过命令模式/状态管理的扩展的设计最终实现应用级场景的开箱即用。欢迎大家体验。
最后
感谢你的阅读，感谢所有使用过 X6，甚至参与过社区贡献的开发者，X6 还在图编辑方向不断的探索，正是你们才使得 X6 进一步发展成为可能。我们会以更大的热情投入到未来的开发中。
