一、先搞懂两个工具到底是干嘛的
很多做前端开发的朋友，尤其是要做图形类功能的，经常会在X6和G6之间纠结，甚至有人觉得“不都是画图形的吗，随便用一个就行”，结果要么做出来的功能难用得要命，要么开发时踩一堆坑。其实这俩工具的定位完全不一样，就像你不能用炒菜的锅煮咖啡，也不能用咖啡机炖排骨，得先搞清楚各自的核心用途。
1.1 先拆G6：它是“数据分析师的可视化工具”
G6是蚂蚁金服出的，核心是帮你把复杂的关联数据，用图形的方式直观展示出来。它的重点是“看数据”，比如你有一堆用户、订单、商品的关联关系，或者企业的组织架构、供应链的上下游，G6能帮你把这些数据转成一张图，让你一眼看出谁和谁有关系、哪个节点是核心、数据有什么规律。
举个例子，你是做电商的，想分析用户的复购路径，把用户、浏览过的商品、加入购物车的商品、购买的商品都关联起来，G6能帮你把这些数据渲染成一张图，还能支持放大缩小、平移、选中节点看详情，但你不能随便改这张图——比如你不能直接在图上拖一个新的用户节点，或者把某个商品和另一个用户强行连起来，因为G6的核心是“展示”，不是“编辑”。
1.2 再拆X6：它是“用户自己改图的编辑器”
X6也是蚂蚁金服出的，和G6是同一家团队做的，定位却完全相反：X6是给用户“编辑”图形用的。也就是说，用户能自己拖元素、改属性、连线条、删内容，完全是一个可交互的图形编辑工具。
比如你要做一个在线流程图工具，让用户自己画审批流程，从“提交申请”到“部门审核”到“财务付款”，用户可以随便调整节点位置、加新的步骤、改连线的逻辑；或者做一个组织架构图编辑器，用户能自己加新的部门、改部门的上下级关系，这时候就必须用X6，因为只有X6支持这些编辑操作。
二、核心差异：从交互到数据的本质不同
搞懂了定位，再看具体的差异，主要集中在两个方面：交互模式和数据模型，这俩也是你选工具的核心判断依据。
2.1 交互模式：一个是“看”，一个是“改”
交互模式是用户和工具的互动方式，G6和X6的交互逻辑完全不一样。
G6的交互是“只读型”的，或者说“探索型”的。它的交互是帮用户更好地看数据：比如你点一个节点，能弹出这个节点的详细信息；你按住鼠标拖，能平移整个图；你滚动鼠标，能放大缩小；你还能搜索某个节点，快速定位。但所有交互都不会改变图本身的内容——你不能把A节点拖到B节点的位置，也不能在A和B之间加一条新的连线，因为G6的图是“数据驱动”的，数据是什么样，图就是什么样，用户不能直接改图。
X6的交互是“编辑型”的。它的交互是帮用户改图：你能拖一个节点到任何位置；你能从A节点拉一条线到B节点，建立新的关联；你能双击节点改节点的文字；你能选中多个节点批量删除；你还能自定义右键菜单，加“复制”“粘贴”“删除”这些操作。X6的图是“用户驱动”的，用户怎么改，图就变成什么样，最后还要能把用户改完的图导出成数据，存到后台。
举个实际的例子，比如你做一个企业的供应链分析系统，用户想看看供应商、制造商、经销商的关联关系，还要能找出哪个供应商是核心，哪个环节有瓶颈，这时候用G6，因为用户只需要看，不需要改；但如果你做一个供应链规划工具，让用户自己设计供应链的流程，比如选哪个供应商、怎么连制造商、怎么排运输路线，这时候用X6，因为用户需要自己编辑整个流程。
2.2 数据模型：一个是“展示数据”，一个是“编辑数据”
除了交互，两个工具的核心数据模型也完全不同，这是底层的差异。
G6的数据模型是“图数据”，也就是专门用来展示的结构。它的核心是节点（node）和边（edge），每个节点有自己的属性（比如id、名称、类型、大小、颜色），每个边也有自己的属性（比如id、起点、终点、类型、颜色）。G6会把这些数据渲染成图，所有的交互都是围绕展示这些数据展开的，你不能直接改节点或边的属性，除非你改后台的原始数据，再重新渲染图。
X6的数据模型是“编辑数据”，它的核心是“图实例”，这个实例包含了所有的编辑状态：比如节点的位置、连线的逻辑、用户改的文字、选中的元素、撤销的历史等等。X6的图实例是可以直接操作的，你能通过API修改节点的位置、添加新的边、删除某个元素，所有的修改都会实时反映在图上，最后你还能把这个图实例导出成JSON，存到后台，下次打开的时候再加载回来。
这里给大家看两个具体的代码示例，更直观地感受差异。首先明确两个示例的技术栈都是React+TypeScript，两个示例都要先安装对应的包：
# 安装G6
npm install @antv/g6
# 安装X6
npm install @antv/x6
2.2.1 G6的简单示例：展示用户关联数据
import React, { useEffect, useRef } from 'react';
import G6 from '@antv/g6';
// G6的核心：定义展示用的图数据
const graphData = {
// 节点：所有要展示的用户
nodes: [
{ id: 'user1', label: '张三', type: 'vip' }, // vip用户，颜色设为红色
{ id: 'user2', label: '李四', type: 'normal' }, // 普通用户，颜色设为蓝色
{ id: 'user3', label: '王五', type: 'normal' }
],
// 边：用户之间的关注关系
edges: [
{ source: 'user1', target: 'user2', label: '关注' },
{ source: 'user1', target: 'user3', label: '关注' },
{ source: 'user2', target: 'user3', label: '关注' }
]
};
const G6Demo: React.FC = () => {
const containerRef = useRef<HTMLDivElement>(null);
useEffect(() => {
if (!containerRef.current) return;
// 初始化G6图，核心是渲染数据
const graph = new G6.Graph({
container: containerRef.current,
width: 800,
height: 500,
// 自定义节点样式：根据type设颜色
nodeStyle: (model) => {
return {
fill: model.type === 'vip' ? '#ff4d4f' : '#1890ff',
stroke: '#fff',
lineWidth: 2
};
},
// 自定义边样式
edgeStyle: {
stroke: '#595959',
lineWidth: 2
}
});
// 核心操作：把数据渲染成图
graph.data(graphData);
graph.render();
// 额外的交互：点击节点弹出详情
graph.on('node:click', (e) => {
alert(`点击了用户：${e.item.getModel().label}`);
});
return () => graph.destroy();
}, []);
return <div ref={containerRef} style={{ border: '1px solid #e8e8e8' }} />;
};
export default G6Demo;
这个示例里，G6的所有操作都是围绕“展示”展开的：你定义好要展示的用户和关系，G6把它画出来，你点击节点能看详情，但你不能拖节点、不能加新的用户、不能改关注关系，因为G6的核心是展示数据。
2.2.2 X6的简单示例：用户自己画流程图
import React, { useEffect, useRef } from 'react';
import { Graph, Shape } from '@antv/x6';
// 先定义节点的样式，方便用户拖
const rect = Shape.Rect; // 矩形节点，用来做流程步骤
const X6Demo: React.FC = () => {
const containerRef = useRef<HTMLDivElement>(null);
useEffect(() => {
if (!containerRef.current) return;
// 初始化X6图实例，核心是支持编辑
const graph = new Graph({
container: containerRef.current,
width: 800,
height: 500,
// 开启编辑模式：允许拖节点、连边
interacting: {
nodeMovable: true, // 允许拖节点
edgeMovable: true, // 允许拖边
edgeAddable: true // 允许加边
}
});
// 核心操作：添加一个初始节点，用户可以自己改
graph.addNode({
shape: 'rect',
x: 100,
y: 100,
width: 120,
height: 40,
label: '提交申请',
attrs: {
body: {
fill: '#fff',
stroke: '#1890ff',
lineWidth: 2
},
label: {
fontSize: 14
}
}
});
// 额外的交互：双击节点改文字
graph.on('node:dblclick', (e) => {
const node = e.node;
const currentLabel = node.getLabel();
const newLabel = prompt('请输入新的节点名称', currentLabel);
if (newLabel) {
node.setLabel(newLabel); // 直接修改节点的属性，实时更新图
}
});
// 额外的功能：导出用户编辑后的图数据
const exportBtn = document.getElementById('export-btn');
if (exportBtn) {
exportBtn.addEventListener('click', () => {
const json = graph.toJSON(); // 把图实例导出成JSON，存到后台
console.log('导出的图数据：', json);
alert('已导出图数据，查看控制台');
});
}
return () => graph.dispose();
}, []);
return (
<div>
<button id="export-btn" style={{ marginBottom: 10 }}>导出图数据</button>
<div ref={containerRef} style={{ border: '1px solid #e8e8e8' }} />
</div>
);
};
export default X6Demo;
这个示例里，X6的所有操作都是围绕“编辑”展开的：你可以拖“提交申请”节点到任何位置；你可以从这个节点拉一条线到空白处，加一个新的节点；你可以双击节点改文字；你还能点导出按钮，把你改完的图存下来。X6的核心是让用户自己编辑图，最后把编辑结果存到后台。
三、选型决策：什么时候用G6，什么时候用X6？
搞懂了差异，再看选型就简单了，核心判断标准只有一个：用户能不能改图？或者说，你的需求是“展示数据”还是“让用户编辑图形”？
3.1 什么时候用G6？
只要你的需求是“展示关联数据，用户不需要改图”，就用G6。具体的场景包括：
- 数据可视化分析：比如用户关系分析、供应链分析、组织架构展示、知识图谱展示、风险传导分析等。
- 只读型图形展示：比如已经设计好的流程图、已经配置好的拓扑图，用户只能看，不能改。
- 探索型交互：比如需要用户搜索节点、定位节点、查看节点详情、筛选数据等，不需要修改图的内容。
G6的优点是：上手快，只需要准备好数据就能渲染；性能好，适合展示大量数据（比如几千个节点、几万条边）；交互简单，不需要处理复杂的编辑逻辑。
G6的缺点是：不支持编辑操作，用户不能改图；自定义编辑逻辑非常麻烦，甚至做不到。
3.2 什么时候用X6？
只要你的需求是“让用户自己编辑图形”，就用X6。具体的场景包括：
- 图形编辑器：比如在线流程图工具、在线拓扑图工具、在线思维导图工具、在线组织架构编辑器、在线建模工具等。
- 可配置型图形：比如让用户自己配置审批流程、自己配置监控拓扑、自己配置数据流转逻辑等。
- 自定义编辑需求：比如需要用户拖元素、改属性、连线条、批量操作、撤销重做等。
X6的优点是：编辑能力强，支持几乎所有的编辑操作；自定义程度高，能做复杂的编辑器；能导出编辑后的图数据，存到后台。
X6的缺点是：上手相对复杂，需要处理编辑逻辑、状态管理、数据导出等；性能相对差一点，适合编辑的图一般不会有太多节点（比如几百个以内）；需要自己处理很多细节，比如节点的验证、边的规则、撤销重做的逻辑等。
3.3 选型的注意事项
- 不要为了编辑能力选G6：很多人觉得G6是图工具，能改图，结果发现改不了，只能放弃；也不要为了展示大量数据选X6，X6的性能在大量数据下不如G6。
- 不要混淆“临时修改”和“永久编辑”：比如你只是想让用户临时调整节点的位置，方便看数据，调整完不存，这时候可以用G6的临时交互；但如果调整完要存到后台，下次打开还要保留，这时候必须用X6。
- 不要盲目追求自定义：如果你的需求只是展示，就用G6，不要自己写一套编辑逻辑，X6的编辑能力已经很成熟，自己写会花很多时间，还容易出问题。
四、总结
G6和X6都是非常优秀的图工具，核心差异就是“展示”和“编辑”：G6是给用户看数据的，X6是给用户改图的。选型的时候，先问自己一个问题：用户能不能改图？如果不能，就用G6；如果能，就用X6。
最后给大家一个快速选型的口诀：看数据用G6，改图用X6；只读用G6，可编辑用X6；展示用G6，配置用X6。
评论
围绕“X6图编辑引擎与G6的边界辨析：从交互模式到数据模型差异，哪些场景该用流程图编辑器而非图分析可视化的选型决策建议”参与讨论