English | 简体中文

X6：图编辑可视化引擎

官网文档 • 快速开始 • 图表示例 • 常见问题 • Demo 模板 • Awesome X6

AntV X6 是基于 HTML 和 SVG 的图编辑引擎，提供低成本的定制能力和开箱即用的内置扩展，方便我们快速搭建 DAG 图、ER 图、流程图、血缘图等应用。我们期望开发者基于 X6 可以快速构建自己需要的各种图编辑应用，让流程关系数据变得可控、可交互，以及可视化。

✨ 特性

X6 作为一款专业的图编辑可视化引擎，具有以下特性：

• 🌱 极易定制：支持使用 SVG / HTML / React / Vue / Angular 定制节点样式和交互，完备的事件系统，可以监听图表内发生的任何事件
• 🚀 开箱即用：内置 10+ 图编辑配套扩展，如框选、对齐线、小地图等
• 🧲 数据驱动：基于 MVC 架构，用户更加专注于数据逻辑和业务逻辑
• 💯 服务端渲染：支持服务端渲染，且有不错的浏览器兼容性。

🔨 开始使用

可以通过 NPM 或 Yarn 等包管理器来安装。

# npm
$ npm install @antv/x6 --save

# yarn
$ yarn add @antv/x6

成功安装之后，可以通过 import 导入 Graph 对象。

<div id="container" style="width: 600px; height: 400px"></div>

import { Graph } from '@antv/x6'

const graph = new Graph({
  container: document.getElementById('container'),
  grid: true,
})

const source = graph.addNode({
  x: 300,
  y: 40,
  width: 80,
  height: 40,
  label: 'Hello',
});

const target = graph.addNode({
  x: 420,
  y: 180,
  width: 80,
  height: 40,
  label: 'World',
});

graph.addEdge({
  source,
  target,
});

一切顺利，你可以得到下面的简单的流程图画布。

🧑🏻‍💻 本地开发

# 安装项目依赖和初始化构建
$ pnpm install

# 启动 examples 查看效果
pnpm run start:examples

📮 贡献

感谢所有为这个项目做出贡献的人，感谢所有支持者！🙏

• 问题反馈：使用过程遇到的 X6 的问题，欢迎提交 Issue，并附上可以复现问题的最小案例代码。
• 贡献指南：如何参与到 X6 的开发和贡献。
• 想法讨论：在 GitHub Discussion 上或者钉钉群里面讨论。

📄 License

MIT.

@antv/x6 3.0.0 (2025-11-21)

重大变更

• 插件整合：所有 @antv/x6-plugin-xxxx 包并入主包并统一导出，原有 graph.use(new Xxx()) 用法保持不变，仅需替换导入路径（参见 src/plugin/index.ts:1-11）。
• 动画 API：移除 2.x 的 transition 用法，引入全新的动画系统 animate，支持命令式/配置式/自定义 Shape 动效（参见 src/model/animation/animation.ts:10-21, src/model/animation/index.ts:1-8）。
• 交互默认值调整：画布平移 panning 默认开启；当使用 Scroller 时为避免交互冲突，默认禁用画布 panning（参见文档 site/docs/tutorial/update.zh.md:69-71）。

功能增强

• 虚拟渲染能力：在大图场景可开启 virtual: true，仅渲染可视区域并自动加入缓冲边距以提升性能（参见 src/graph/virtual-render.ts:94-106；示例见 site/examples/showcase/practices/demo/virtualRender.ts:7-15）。
• 动画系统：提供 Animation、KeyframeEffect 与 AnimationManager，支持播放、暂停、反向、速率调整与完成/取消事件（参见 src/model/animation/animation.ts:75-144, src/model/animation/animationManager.ts:3-19, src/model/animation/index.ts:1-8）。
• 插件统一导出：Clipboard、Dnd、Export、History、Keyboard、Selection、MiniMap、Scroller、Stencil、Snapline、Transform 统一从 @antv/x6 导出（参见 src/plugin/index.ts:1-11）。

优化

• 交互体验：panning 默认开启，Selection 在与 panning 触发冲突时具备更合理的优先级（参见 site/docs/tutorial/update.zh.md:69-71）。
• 虚拟渲染性能：滚动/平移/缩放事件节流控制与渲染区域动态扩展（固定边距 120px）（参见 src/graph/virtual-render.ts:15-18,99-103）。

迁移指南

1. 升级依赖：

   {
     "dependencies": {
       "@antv/x6": "^3.0.0"
     }
   }

2. 移除旧插件依赖：@antv/x6-plugin-selection、@antv/x6-plugin-transform、@antv/x6-plugin-scroller、@antv/x6-plugin-keyboard、@antv/x6-plugin-history、@antv/x6-plugin-clipboard、@antv/x6-plugin-snapline、@antv/x6-plugin-dnd、@antv/x6-plugin-minimap、@antv/x6-plugin-stencil、@antv/x6-plugin-export（参见 site/docs/tutorial/update.zh.md:30-43）。

3. 替换导入路径：

   // 2.x
   import { Scroller } from '@antv/x6-plugin-scroller'
   import { Selection } from '@antv/x6-plugin-selection'
   graph.use(new Scroller())
   graph.use(new Selection())
   
   // 3.x
   import { Scroller, Selection } from '@antv/x6'
   graph.use(new Scroller())
   graph.use(new Selection())

4. 动画迁移：将 2.x 的 transition 用法迁移至 3.x 的 animate 能力，参考动画文档与 API（参见 site/docs/tutorial/update.zh.md:61-66）。

5. 配置检查：
   • 若需要关闭画布平移，显式设置 panning: false。
   • 使用 Scroller 时可开启 virtual: true 以优化大图渲染。