AntV 推出全新的图编辑引擎 X6,让你们久等了

AntV 推出全新的图编辑引擎 X6,让你们久等了
最新回答
骑猪赏月看嫦娥

2026-04-29 13:12:25

AntV 推出全新的图编辑引擎 X6

X6 是蚂蚁金服 AntV 旗下的图编辑引擎,专为图编辑场景设计,旨在提供高效、灵活且易用的图编辑解决方案。以下是关于 X6 的详细介绍:

一、背景与起源

  • 命名由来:X6 中的“X”象形图编辑场景的关系链接,同时“6”沿用了 AntV 另一产品 G6 中的数字,源于《六度分隔理论》,表达了对关系数据、关系网络的敬畏和着迷。
  • 业务背景:X6 脱胎于蚂蚁实际的业务场景,如数据研发中的 ER 图、运维中台的流程图等,并在此基础上进行了完善和扩展。

二、核心特性

  1. 快速上手

    只需掌握创建画布、添加/更新/删除节点/边等几个 API 即可开始使用。

    提供了系统默认的配置文件 preset.ts,包含 50 多个配置项,300 多行配置代码,便于快速定制画布。

  2. 节点、连线与画布

    节点:预置了常用节点样式,通过 shape 指定图形即可使用,且大部分节点样式和交互可自定义。

    连线:内置了直线、曲线、拐线等多种连线样式和 10 多种箭头样式。

    画布:支持无限大画布,节点/边移动到画布边缘时画布会自动扩充。

  3. 易定制节点

    提供了灵活的自定义节点能力,包括使用 HTMLElement 或 HTML 代码片段定义节点,以及使用 React 组件渲染节点。

  4. 网格系统与无限画布

    提供了 line 和 dot 两种风格的网格,支持自定义网格大小和颜色。

    开启无限大画布功能,节点/边移动到画布边缘时自动扩充画布。

  5. 交互能力与配套组件

    链接桩与锚点:通过父子节点和 isPort 选项设置链接桩,内置多种边框布局,支持定制锚点数量和位置。

    点选和框选:支持点击和框选节点/边,同时选中多个节点,支持自定义选中样式。

    对齐线:提供移动节点排版的辅助工具,支持定制对齐线样式。

    小地图:支持渲染粒度和样式定制,用色块代替节点,便于查看全局。

    UI 组件:提供了 Menubar、Toolbar 等 React 组件,搭配 antd 使用更顺滑。

三、关注与反馈

  • X6 作为一个新生儿,虽然已在内部多个产品应用上线,但仍有很多问题有待完善。
  • 欢迎在 GitHub 上给 X6 反馈问题,关注 AntV 的最新动态和产品更新。

四、联系方式

  • GitHub:
    https://github.com/antvis/x6
  • AntV 官网:
    https://antv.vision
  • AntV GitHub:
    https://github.com/antvis

X6 的推出为图编辑场景提供了全新的解决方案,其高效、灵活且易用的特性将极大地提升开发者的开发效率和用户体验。欢迎广大开发者试用并反馈问题,共同推动 X6 的不断完善和发展。