蚂蚁 X6：图编辑与可视化引擎的完全指南

Fen9Pi2026/7/31大约 11 分钟

前言：当图编辑遇上可视化

想象这样一个场景：

你的业务系统需要一个图编辑器，让用户可以：

可视化设计 DAG 图、ER 图、流程图
自定义节点样式和交互
集成到现有系统中
支持服务端渲染

传统方案的痛点：

定制成本高，难以满足业务需求
缺乏内置扩展，需要大量开发工作
性能不佳，大型图渲染卡顿
缺少文档和示例，学习成本高

如果有一个开箱即用的图编辑引擎呢？

X6 正是这样的解决方案：一个基于 HTML 和 SVG 的图编辑引擎，提供低成本定制能力和开箱即用的内置扩展，让开发者可以快速构建各种图编辑应用。

今天，我们就来深入分析这个来自蚂蚁集团的开源项目。

一、项目概览

1.1 是什么？

X6 是蚂蚁集团 AntV 开源的图编辑和可视化引擎。

核心特点：

✅ 高度可定制：支持使用 SVG / HTML / React / Vue / Angular 自定义节点样式和交互
✅ 开箱即用：内置 10+ 图编辑扩展，如套索选择、对齐线、小地图等
✅ 数据驱动：基于 MVC 架构，让用户更专注于数据逻辑和业务逻辑
✅ 服务端渲染：支持服务端渲染，具有良好的浏览器兼容性
✅ TypeScript：完全使用 TypeScript 编写，类型安全
✅ SVG + HTML：基于 SVG 和 HTML 的渲染引擎，性能优异
✅ 开源免费：MIT 协议，完全开源

项目地址：https://github.com/antvis/X6 官网：https://x6.antv.antgroup.com NPM：https://www.npmjs.com/package/@antv/x6 开源协议：MIT License Stars：6.6k+

1.2 核心价值

传统图编辑器的痛点：

定制成本高，难以满足业务需求
缺乏内置扩展，需要大量开发工作
性能不佳，大型图渲染卡顿
缺少文档和示例，学习成本高

X6 的解决方案：

高度可定制：支持多种方式自定义节点和交互
开箱即用：内置 10+ 图编辑扩展
数据驱动：基于 MVC 架构，专注于业务逻辑
完善的文档：提供详细的文档和示例

二、核心架构

2.1 整体架构

核心思想： X6 采用 MVC 架构，将数据、视图和控制器分离，提供灵活的定制能力。

流程图1

2.2 核心模块

1. Model（数据模型）

Node Model：节点模型
Edge Model：边模型
数据驱动
状态管理

2. View（视图渲染）

SVG 渲染：基于 SVG 的渲染引擎
HTML 渲染：支持 HTML 节点渲染
React 组件：支持 React 组件渲染
Vue 组件：支持 Vue 组件渲染
Angular 组件：支持 Angular 组件渲染

3. Controller（交互控制）

事件系统：完善的事件系统
交互系统：拖拽、缩放、平移等交互
内置扩展：10+ 图编辑扩展

4. 内置扩展

Lasso：套索选择
Snapline：对齐线
Minimap：小地图
Clipboard：剪贴板
History：历史记录
Keyboard：键盘
Stencil：快捷键
Box Selection：框选
Scroll：滚动
Transform：变换

三、核心功能

3.1 高度可定制

核心思想：支持使用 SVG / HTML / React / Vue / Angular 自定义节点样式和交互，提供完善的事件系统，允许监听图中发生的任何事件。

定制能力：

1. SVG 节点

// 自定义 SVG 节点
Graph.registerNode('custom-node', {
  inherit: 'rect',
  width: 100,
  height: 40,
  attrs: {
    body: {
      stroke: '#5F95FF',
      strokeWidth: 1,
      fill: '#fff',
    },
    text: {
      fontSize: 12,
      fill: '#333',
    },
  },
});

2. HTML 节点

// 自定义 HTML 节点
Graph.registerNode('html-node', {
  inherit: 'html',
  width: 200,
  height: 100,
  html() {
    const div = document.createElement('div');
    div.innerHTML = 'Hello X6';
    return div;
  },
});

3. React 节点

// 自定义 React 节点
import { React } from '@antv/x6-react-shape';

const CustomReactNode = () => {
  return <div>Hello React</div>;
};

Graph.registerNode('react-node', {
  inherit: 'react',
  component: CustomReactNode,
});

4. Vue 节点

// 自定义 Vue 节点
import { Vue } from '@antv/x6-vue-shape';

const CustomVueNode = {
  template: '<div>Hello Vue</div>',
};

Graph.registerNode('vue-node', {
  inherit: 'vue',
  component: CustomVueNode,
});

优势：

多种定制方式
灵活扩展
易于集成

3.2 开箱即用

核心思想：内置 10+ 图编辑扩展，如套索选择、对齐线、小地图等，开箱即用。

内置扩展：

1. Lasso（套索选择）

import { Lasso } from '@antv/x6-plugin-lasso';

graph.use(new Lasso({
  enabled: true,
  className: 'my-lasso',
}));

2. Snapline（对齐线）

import { Snapline } from '@antv/x6-plugin-snapline';

graph.use(new Snapline({
  enabled: true,
}));

3. Minimap（小地图）

import { Minimap } from '@antv/x6-plugin-minimap';

graph.use(new Minimap({
  enabled: true,
  container: document.getElementById('minimap'),
}));

4. Clipboard（剪贴板）

import { Clipboard } from '@antv/x6-plugin-clipboard';

graph.use(new Clipboard({
  enabled: true,
}));

5. History（历史记录）

import { History } from '@antv/x6-plugin-history';

graph.use(new History({
  enabled: true,
}));

6. Keyboard（键盘）

import { Keyboard } from '@antv/x6-plugin-keyboard';

graph.use(new Keyboard({
  enabled: true,
}));

优势：

内置丰富扩展
开箱即用
易于配置

3.3 数据驱动

核心思想：基于 MVC 架构，让用户更专注于数据逻辑和业务逻辑。

MVC 架构：

Model（数据模型）：管理图的数据
View（视图渲染）：渲染图的视图
Controller（交互控制）：处理图的交互

示例：

// 创建图
const graph = new Graph({
  container: document.getElementById('container'),
  grid: true,
});

// 添加节点
const node = graph.addNode({
  x: 100,
  y: 100,
  width: 80,
  height: 40,
  label: 'Hello',
});

// 添加边
graph.addEdge({
  source: node,
  target: { x: 300, y: 100 },
});

// 获取数据
const data = graph.toJSON();

优势：

数据驱动
易于管理
易于扩展

3.4 服务端渲染

核心思想：支持服务端渲染，具有良好的浏览器兼容性。

能力：

服务端渲染：支持在服务端渲染图
浏览器兼容性：兼容主流浏览器
性能优异：渲染性能优异

示例：

// 服务端渲染
const graph = new Graph({
  container: document.getElementById('container'),
  grid: true,
});

// 渲染图
graph.fromJSON(data);

// 导出图片
graph.toPNG((dataUrl) => {
  console.log(dataUrl);
});

优势：

支持服务端渲染
浏览器兼容性好
性能优异

四、安装与使用

4.1 安装

NPM：

npm install @antv/x6 --save

Yarn：

yarn add @antv/x6

4.2 快速上手

1. 准备容器：

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

2. 创建图：

import { Graph } from '@antv/x6'

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

3. 添加节点：

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',
});

4. 添加边：

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

4.3 使用插件

1. Lasso 插件：

import { Lasso } from '@antv/x6-plugin-lasso';

graph.use(new Lasso({
  enabled: true,
}));

2. Snapline 插件：

import { Snapline } from '@antv/x6-plugin-snapline';

graph.use(new Snapline({
  enabled: true,
}));

3. Minimap 插件：

import { Minimap } from '@antv/x6-plugin-minimap';

graph.use(new Minimap({
  enabled: true,
  container: document.getElementById('minimap'),
}));

4.4 自定义节点

1. 注册节点：

Graph.registerNode('custom-node', {
  inherit: 'rect',
  width: 100,
  height: 40,
  attrs: {
    body: {
      stroke: '#5F95FF',
      strokeWidth: 1,
      fill: '#fff',
    },
    text: {
      fontSize: 12,
      fill: '#333',
    },
  },
});

2. 使用节点：

graph.addNode({
  x: 100,
  y: 100,
  shape: 'custom-node',
  label: 'Custom Node',
});

五、实际应用场景

5.1 DAG 图编辑器

场景：

工作流设计
任务调度
依赖关系图

使用 X6：

// 创建 DAG 图
const graph = new Graph({
  container: document.getElementById('container'),
  grid: true,
});

// 添加节点
const nodes = [
  { id: '1', x: 100, y: 100, label: '任务 1' },
  { id: '2', x: 300, y: 100, label: '任务 2' },
  { id: '3', x: 500, y: 100, label: '任务 3' },
];

// 添加边
const edges = [
  { source: '1', target: '2' },
  { source: '2', target: '3' },
];

// 渲染图
graph.fromJSON({ nodes, edges });

优势：

可视化设计
易于定制
性能优异

5.2 ER 图编辑器

场景：

数据库设计
表关系设计
数据模型设计

使用 X6：

// 创建 ER 图
const graph = new Graph({
  container: document.getElementById('container'),
  grid: true,
});

// 添加表节点
const tables = [
  { id: '1', x: 100, y: 100, label: '用户表' },
  { id: '2', x: 300, y: 100, label: '订单表' },
];

// 添加关系边
const relations = [
  { source: '1', target: '2', label: '1:N' },
];

// 渲染图
graph.fromJSON({ nodes: tables, edges: relations });

优势：

可视化设计
关系清晰
易于维护

5.3 流程图编辑器

场景：

业务流程设计
审批流程设计
工作流设计

使用 X6：

// 创建流程图
const graph = new Graph({
  container: document.getElementById('container'),
  grid: true,
});

// 添加流程节点
const flowNodes = [
  { id: '1', x: 100, y: 100, label: '开始' },
  { id: '2', x: 300, y: 100, label: '处理' },
  { id: '3', x: 500, y: 100, label: '结束' },
];

// 添加流程边
const flowEdges = [
  { source: '1', target: '2' },
  { source: '2', target: '3' },
];

// 渲染图
graph.fromJSON({ nodes: flowNodes, edges: flowEdges });

优势：

可视化设计
流程清晰
易于定制

5.4 血缘图编辑器

场景：

数据血缘关系
数据流向追踪
数据依赖分析

使用 X6：

// 创建血缘图
const graph = new Graph({
  container: document.getElementById('container'),
  grid: true,
});

// 添加数据节点
const dataNodes = [
  { id: '1', x: 100, y: 100, label: '数据源 1' },
  { id: '2', x: 300, y: 100, label: '数据仓库' },
  { id: '3', x: 500, y: 100, label: '数据应用' },
];

// 添加血缘边
const lineageEdges = [
  { source: '1', target: '2', label: 'ETL' },
  { source: '2', target: '3', label: '查询' },
];

// 渲染图
graph.fromJSON({ nodes: dataNodes, edges: lineageEdges });

优势：

可视化追踪
血缘清晰
易于分析

六、优势与局限

6.1 优势

1. 高度可定制

支持 SVG / HTML / React / Vue / Angular
完善的事件系统
灵活扩展

2. 开箱即用

内置 10+ 图编辑扩展
易于配置
功能完善

3. 数据驱动

基于 MVC 架构
易于管理
易于扩展

4. 服务端渲染

支持服务端渲染
浏览器兼容性好
性能优异

5. 完善的文档

详细的文档
丰富的示例
活跃的社区

6. TypeScript

完全使用 TypeScript 编写
类型安全
易于维护

6.2 局限

1. 学习曲线

需要了解 SVG 和 Canvas
需要了解 TypeScript
需要了解图编辑概念

2. 性能问题

大型图可能会有性能问题
需要优化渲染逻辑
需要使用虚拟滚动

3. 浏览器兼容性

需要现代浏览器
不支持 IE
部分功能需要特定浏览器

4. 文档语言

中文文档为主
英文文档较少
可能影响国际化

七、最佳实践

7.1 节点设计

原则：

保持简单
清晰明了
易于理解

实践：

使用合适的节点类型
保持节点样式一致
提供清晰的文本标签

7.2 边设计

原则：

避免交叉
清晰明了
易于理解

实践：

使用合适的边类型
保持边样式一致
使用标签说明关系

7.3 性能优化

原则：

减少节点数量
优化渲染逻辑
使用虚拟滚动

实践：

使用 Minimap 优化导航
使用 Lasso 优化选择
使用 Snapline 优化对齐

7.4 事件监听

原则：

监听必要事件
避免过度监听
及时清理监听器

实践：

// 监听节点点击事件
graph.on('node:click', ({ node }) => {
  console.log('Node clicked:', node);
});

// 监听边点击事件
graph.on('edge:click', ({ edge }) => {
  console.log('Edge clicked:', edge);
});

// 清理监听器
graph.off('node:click');