Back to Details

antv-x6-editor

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

X6 v3 Graph Editor

X6 v3 图编辑器

Overview

概述

X6 v3 is AntV's diagram editing engine for flowcharts, DAGs, ER diagrams, org charts, and other interactive node-edge editors. Unlike G2/G6, X6 uses an imperative API — you create a 
Graph
instance, then call 
graph.addNode()
, 
graph.addEdge()
, and register plugins via 
graph.use()
.
javascript
import { Graph } from '@antv/x6';

const graph = new Graph({
  container: 'container',
  background: { color: '#F2F7FA' },
});

const source = graph.addNode({
  shape: 'rect',
  x: 40, y: 40, width: 100, height: 40,
  label: 'Source',
  attrs: { body: { stroke: '#8f8f8f', strokeWidth: 1, fill: '#fff', rx: 6, ry: 6 } },
});

const target = graph.addNode({
  shape: 'rect',
  x: 300, y: 200, width: 100, height: 40,
  label: 'Target',
  attrs: { body: { stroke: '#8f8f8f', strokeWidth: 1, fill: '#fff', rx: 6, ry: 6 } },
});

graph.addEdge({ source, target, attrs: { line: { stroke: '#8f8f8f', strokeWidth: 1 } } });
graph.centerContent();
X6 v3是AntV推出的图表编辑引擎，适用于流程图、DAG、ER图、组织架构图等交互式节点-边编辑器。与G2/G6不同，X6采用命令式API——你需要创建一个
Graph
实例，然后调用
graph.addNode()
、
graph.addEdge()
，并通过
graph.use()
注册插件。
javascript
import { Graph } from '@antv/x6';

const graph = new Graph({
  container: 'container',
  background: { color: '#F2F7FA' },
});

const source = graph.addNode({
  shape: 'rect',
  x: 40, y: 40, width: 100, height: 40,
  label: 'Source',
  attrs: { body: { stroke: '#8f8f8f', strokeWidth: 1, fill: '#fff', rx: 6, ry: 6 } },
});

const target = graph.addNode({
  shape: 'rect',
  x: 300, y: 200, width: 100, height: 40,
  label: 'Target',
  attrs: { body: { stroke: '#8f8f8f', strokeWidth: 1, fill: '#fff', rx: 6, ry: 6 } },
});

graph.addEdge({ source, target, attrs: { line: { stroke: '#8f8f8f', strokeWidth: 1 } } });
graph.centerContent();

CDN Usage

CDN 使用方式

html
<script src="https://unpkg.com/@antv/x6@3/dist/x6.js"></script>
<script>
  const graph = new X6.Graph({
    container: 'container',
    background: { color: '#F2F7FA' },
  });
  const source = graph.addNode({
    shape: 'rect',
    x: 40, y: 40, width: 100, height: 40,
    label: 'Source',
    attrs: { body: { stroke: '#8f8f8f', strokeWidth: 1, fill: '#fff', rx: 6, ry: 6 } },
  });
  const target = graph.addNode({
    shape: 'rect',
    x: 300, y: 200, width: 100, height: 40,
    label: 'Target',
    attrs: { body: { stroke: '#8f8f8f', strokeWidth: 1, fill: '#fff', rx: 6, ry: 6 } },
  });
  graph.addEdge({ source, target, attrs: { line: { stroke: '#8f8f8f', strokeWidth: 1 } } });
  graph.centerContent();
</script>
html
<script src="https://unpkg.com/@antv/x6@3/dist/x6.js"></script>
<script>
  const graph = new X6.Graph({
    container: 'container',
    background: { color: '#F2F7FA' },
  });
  const source = graph.addNode({
    shape: 'rect',
    x: 40, y: 40, width: 100, height: 40,
    label: 'Source',
    attrs: { body: { stroke: '#8f8f8f', strokeWidth: 1, fill: '#fff', rx: 6, ry: 6 } },
  });
  const target = graph.addNode({
    shape: 'rect',
    x: 300, y: 200, width: 100, height: 40,
    label: 'Target',
    attrs: { body: { stroke: '#8f8f8f', strokeWidth: 1, fill: '#fff', rx: 6, ry: 6 } },
  });
  graph.addEdge({ source, target, attrs: { line: { stroke: '#8f8f8f', strokeWidth: 1 } } });
  graph.centerContent();
</script>

Content Retrieval Service

内容检索服务

When using AntV X6 for data visualization, if you need to understand the concepts, usage, API, examples, and other aspects of X6 v3, you can use the provided context retrieval service. When using the skill, content is retrieved via an antv HTTP API server using GET requests.
  • Host: 
    https://sive.antv.antgroup.com
  • Endpoint: 
    /api/v1/context/retrieve
  • Method: 
    GET
  • Parameters: 
    query
    , 
    library
    , 
    topK
    , 
    content
    , 
    maxTokens
    , 
    progressiveLevel
Retrieve skills by query (hybrid search = FTS + vector + RRF fusion). Constraints docs are indexed as regular skill documents and will appear in search results naturally.
ParameterTypeRequiredDescription
query
string✅Search keywords, e.g. 
flowchart stencil port
library
string✅Library name: 
g2
, 
g6
, 
x6
topK
numberNumber of results to return (default: 5)
content
booleanReturn full reference doc markdown (default: true)
maxTokens
numberMax tokens per result (default: unlimited)
progressiveLevel
numberProgressive disclosure level: 
0
=full, 
1
=summary+code, 
2
=summary-only
bash
curl "https://sive.antv.antgroup.com/api/v1/context/retrieve?query=flowchart+stencil+port&library=x6"
在使用AntV X6进行数据可视化时，如果你需要了解X6 v3的概念、用法、API、示例等内容，可以使用提供的上下文检索服务。使用本技能时，会通过AntV的HTTP API服务器发送GET请求来检索内容。
  • Host: 
    https://sive.antv.antgroup.com
  • Endpoint: 
    /api/v1/context/retrieve
  • Method: 
    GET
  • Parameters: 
    query
    , 
    library
    , 
    topK
    , 
    content
    , 
    maxTokens
    , 
    progressiveLevel
通过查询检索技能（混合搜索=FTS+向量+RRF融合）。约束文档会被索引为常规技能文档，并自然出现在搜索结果中。
参数类型必填描述
query
string✅搜索关键词，例如
flowchart stencil port
library
string✅库名称：
g2
、
g6
、
x6
topK
number返回结果数量（默认值：5）
content
boolean返回完整参考文档的markdown内容（默认值：true）
maxTokens
number每个结果的最大token数（默认值：无限制）
progressiveLevel
number渐进式披露级别：
0
=完整内容，
1
=摘要+代码，
2
=仅摘要
bash
curl "https://sive.antv.antgroup.com/api/v1/context/retrieve?query=flowchart+stencil+port&library=x6"

Critical Rules

重要规则

MUST: 
graph.render()
does NOT exist in X6 v3

必须遵守：X6 v3中不存在
graph.render()
方法

javascript
// ❌ WRONG — graph.render() is G6 API, not X6
const graph = new Graph({ container: 'container' });
graph.render();

// ✅ CORRECT — X6 auto-renders on addNode/addEdge/fromJSON
const graph = new Graph({ container: 'container', background: { color: '#F2F7FA' } });
graph.addNode({ shape: 'rect', x: 40, y: 40, width: 100, height: 40 });
javascript
// ❌ 错误——graph.render()是G6的API，不属于X6
const graph = new Graph({ container: 'container' });
graph.render();

// ✅ 正确——X6会在调用addNode/addEdge/fromJSON时自动渲染
const graph = new Graph({ container: 'container', background: { color: '#F2F7FA' } });
graph.addNode({ shape: 'rect', x: 40, y: 40, width: 100, height: 40 });

MUST: Use string literal 
container: 'container'
— no variable declaration

必须遵守：使用字符串字面量
container: 'container'
——禁止使用变量声明

javascript
// ❌ WRONG — declaring container variable is forbidden
const container = document.getElementById('container');
const graph = new Graph({ container });

// ✅ CORRECT — string literal, runtime auto-resolves
const graph = new Graph({ container: 'container', background: { color: '#F2F7FA' } });
javascript
// ❌ 错误——禁止声明container变量
const container = document.getElementById('container');
const graph = new Graph({ container });

// ✅ 正确——使用字符串字面量，运行时自动解析
const graph = new Graph({ container: 'container', background: { color: '#F2F7FA' } });

MUST: Register plugins before using their methods

必须遵守：调用插件方法前先注册插件

javascript
// ❌ WRONG — calling plugin method without registration
graph.toPNG();       // Error: method not found
graph.select();      // Error: method not found

// ✅ CORRECT — register first, then call
import { Graph, Export, Selection } from '@antv/x6';
const graph = new Graph({ container: 'container', background: { color: '#F2F7FA' } });
graph.use(new Export());
graph.use(new Selection({ enabled: true, rubberband: true }));
// Now graph.toPNG() and graph.select() are available
javascript
// ❌ 错误——未注册插件就调用其方法
graph.toPNG();       // 错误：找不到方法
graph.select();      // 错误：找不到方法

// ✅ 正确——先注册，再调用
import { Graph, Export, Selection } from '@antv/x6';
const graph = new Graph({ container: 'container', background: { color: '#F2F7FA' } });
graph.use(new Export());
graph.use(new Selection({ enabled: true, rubberband: true }));
// 现在可以调用graph.toPNG()和graph.select()了

MUST: Only 11 plugin classes exist — NOT constructor options

必须遵守：仅存在11个插件类——不要混淆为构造函数选项

✅ Plugin class (import + 
graph.use
)		❌ NOT a plugin (constructor option)
Clipboard
, 
Dnd
, 
Export
, 
History
, 
Keyboard
, 
MiniMap
, 
Scroller
, 
Selection
, 
Snapline
, 
Stencil
, 
Transform
mousewheel
, 
embedding
, 
panning
, 
connecting
, 
translating
, 
interacting
, 
background
, 
grid
javascript
// ❌ WRONG — importing constructor option as "plugin"
import { Graph, Embedding } from '@antv/x6';  // Embedding doesn't exist!
graph.use(new Embedding());                   // Error: not a constructor

// ✅ CORRECT — embedding is a Graph constructor option
import { Graph, Selection } from '@antv/x6';
const graph = new Graph({
  container: 'container',
  embedding: { enabled: true, findParent: 'bbox' },
  mousewheel: { enabled: true, zoomAtMousePosition: true, modifiers: ['ctrl'] },
});
graph.use(new Selection({ enabled: true, rubberband: true }));
✅ 插件类（导入后通过
graph.use
使用）		❌ 不属于插件（是构造函数选项）
Clipboard
, 
Dnd
, 
Export
, 
History
, 
Keyboard
, 
MiniMap
, 
Scroller
, 
Selection
, 
Snapline
, 
Stencil
, 
Transform
mousewheel
, 
embedding
, 
panning
, 
connecting
, 
translating
, 
interacting
, 
background
, 
grid
javascript
// ❌ 错误——将构造函数选项当作“插件”导入
import { Graph, Embedding } from '@antv/x6';  // Embedding不存在！
graph.use(new Embedding());                   // 错误：不是构造函数

// ✅ 正确——embedding是Graph的构造函数选项
import { Graph, Selection } from '@antv/x6';
const graph = new Graph({
  container: 'container',
  embedding: { enabled: true, findParent: 'bbox' },
  mousewheel: { enabled: true, zoomAtMousePosition: true, modifiers: ['ctrl'] },
});
graph.use(new Selection({ enabled: true, rubberband: true }));

MUST: All used classes MUST appear in import statement

必须遵守：所有使用的类必须出现在导入语句中

javascript
// ❌ WRONG — Selection used but not imported
import { Graph } from '@antv/x6';
graph.use(new Selection({...}));  // falls back to window.Selection → Illegal constructor

// ✅ CORRECT — every used class imported
import { Graph, Selection, Keyboard, History } from '@antv/x6';
graph.use(new Selection({ enabled: true, rubberband: true }));
graph.use(new Keyboard({ enabled: true }));
graph.use(new History({ enabled: true }));
javascript
// ❌ 错误——使用了Selection但未导入
import { Graph } from '@antv/x6';
graph.use(new Selection({...}));  // 会回退到window.Selection → 非法构造函数

// ✅ 正确——所有使用的类都已导入
import { Graph, Selection, Keyboard, History } from '@antv/x6';
graph.use(new Selection({ enabled: true, rubberband: true }));
graph.use(new Keyboard({ enabled: true }));
graph.use(new History({ enabled: true }));

MUST: Always call 
graph.centerContent()
after adding nodes/edges

必须遵守：添加节点/边后务必调用
graph.centerContent()

javascript
// ❌ WRONG — no centerContent, content drifts to top-left
graph.addNode({ ... });
graph.addEdge({ ... });

// ✅ CORRECT — content centered after all additions
graph.addNode({ ... });
graph.addEdge({ ... });
graph.centerContent();
// OR: graph.zoomToFit({ padding: 20, maxScale: 1 }) — but NOT both
javascript
// ❌ 错误——未调用centerContent，内容会偏移到左上角
graph.addNode({ ... });
graph.addEdge({ ... });

// ✅ 正确——添加完成后居中内容
graph.addNode({ ... });
graph.addEdge({ ... });
graph.centerContent();
// 或者：graph.zoomToFit({ padding: 20, maxScale: 1 })——但不要同时使用两者

MUST: Always set background color, default node/edge style

必须遵守：始终设置背景颜色、默认节点/边样式

javascript
// ❌ WRONG — no background, no default styles
const graph = new Graph({ container: 'container' });

// ✅ CORRECT — mandatory background + default styles
const graph = new Graph({ container: 'container', background: { color: '#F2F7FA' } });
graph.addNode({
  shape: 'rect', x: 40, y: 40, width: 100, height: 40,
  label: 'Node',
  attrs: { body: { stroke: '#8f8f8f', strokeWidth: 1, fill: '#fff', rx: 6, ry: 6 } },
});
graph.addEdge({
  source: 'node-1', target: 'node-2',
  attrs: { line: { stroke: '#8f8f8f', strokeWidth: 1 } },
});
javascript
// ❌ 错误——未设置背景和默认样式
const graph = new Graph({ container: 'container' });

// ✅ 正确——必须设置背景+默认样式
const graph = new Graph({ container: 'container', background: { color: '#F2F7FA' } });
graph.addNode({
  shape: 'rect', x: 40, y: 40, width: 100, height: 40,
  label: 'Node',
  attrs: { body: { stroke: '#8f8f8f', strokeWidth: 1, fill: '#fff', rx: 6, ry: 6 } },
});
graph.addEdge({
  source: 'node-1', target: 'node-2',
  attrs: { line: { stroke: '#8f8f8f', strokeWidth: 1 } },
});

MUST: 
mousewheel
, 
panning
, 
Selection.rubberband
— use modifiers to avoid conflicts

必须遵守：
mousewheel
、
panning
、
Selection.rubberband
——使用修饰键避免冲突

javascript
// ❌ WRONG — panning and mousewheel both grab scroll events
const graph = new Graph({
  panning: { enabled: true },
  mousewheel: { enabled: true },
});
graph.use(new Selection({ enabled: true, rubberband: true }));

// ✅ CORRECT — modifiers separate the interactions
const graph = new Graph({
  panning: { enabled: true, eventTypes: ['leftMouseDown'], modifiers: 'shift' },
  mousewheel: { enabled: true, zoomAtMousePosition: true, modifiers: ['ctrl'] },
});
graph.use(new Selection({ enabled: true, rubberband: true }));
javascript
// ❌ 错误——panning和mousewheel都会捕获滚动事件
const graph = new Graph({
  panning: { enabled: true },
  mousewheel: { enabled: true },
});
graph.use(new Selection({ enabled: true, rubberband: true }));

// ✅ 正确——使用修饰键区分交互
const graph = new Graph({
  panning: { enabled: true, eventTypes: ['leftMouseDown'], modifiers: 'shift' },
  mousewheel: { enabled: true, zoomAtMousePosition: true, modifiers: ['ctrl'] },
});
graph.use(new Selection({ enabled: true, rubberband: true }));

MUST: Output pure JavaScript — NO TypeScript syntax

必须遵守：输出纯JavaScript代码——禁止使用TypeScript语法

javascript
// ❌ WRONG — TypeScript syntax
private width: number = 100;
const node: Node = graph.addNode({...}) as Node;

// ✅ CORRECT — pure JavaScript only
const node = graph.addNode({ shape: 'rect', x: 40, y: 40 });
javascript
// ❌ 错误——TypeScript语法
private width: number = 100;
const node: Node = graph.addNode({...}) as Node;

// ✅ 正确——仅使用纯JavaScript
const node = graph.addNode({ shape: 'rect', x: 40, y: 40 });

MUST: 
Shape.HTML.register
for HTML nodes — NOT 
class extends Node

必须遵守：使用
Shape.HTML.register
创建HTML节点——不要使用
class extends Node

javascript
// ❌ WRONG — class-based HTML node (2.x pattern)
class MyNode extends Node { ... }

// ✅ CORRECT — Shape.HTML.register (3.x pattern)
import { Graph, Shape } from '@antv/x6';
Shape.HTML.register({
  shape: 'my-html',
  effect: ['data'],
  html(node) {
    const div = document.createElement('div');
    div.innerHTML = node.getData().content || '';
    return div;
  },
});
javascript
// ❌ 错误——基于类的HTML节点（2.x版本写法）
class MyNode extends Node { ... }

// ✅ 正确——使用Shape.HTML.register（3.x版本写法）
import { Graph, Shape } from '@antv/x6';
Shape.HTML.register({
  shape: 'my-html',
  effect: ['data'],
  html(node) {
    const div = document.createElement('div');
    div.innerHTML = node.getData().content || '';
    return div;
  },
});

Quick Reference

快速参考

User IntentRetrieve Query
Graph init, container, background
GET /api/v1/context/retrieve?query=graph+init+container+background&library=x6
Flowchart / approval flow
GET /api/v1/context/retrieve?query=flowchart+approval&library=x6
DAG / data pipeline
GET /api/v1/context/retrieve?query=DAG+pipeline+port&library=x6
ER diagram / entity relationship
GET /api/v1/context/retrieve?query=ER+diagram+entity+relationship&library=x6
Lineage / data lineage graph
GET /api/v1/context/retrieve?query=lineage+data+lineage&library=x6
Org chart / hierarchy
GET /api/v1/context/retrieve?query=org+chart+hierarchy&library=x6
UML class diagram
GET /api/v1/context/retrieve?query=UML+class+diagram&library=x6
Node config / custom node
GET /api/v1/context/retrieve?query=node+custom+shape+rect+circle&library=x6
Edge config / router / connector
GET /api/v1/context/retrieve?query=edge+router+connector+orth+smooth&library=x6
Ports / connection桩
GET /api/v1/context/retrieve?query=ports+connection+layout&library=x6
HTML shape node
GET /api/v1/context/retrieve?query=html+shape+register&library=x6
Stencil / drag-and-drop panel
GET /api/v1/context/retrieve?query=stencil+drag+drop+panel&library=x6
Plugin: Selection, History, Clipboard
GET /api/v1/context/retrieve?query=Selection+History+Clipboard+plugin&library=x6
Plugin: MiniMap, Scroller, Snapline
GET /api/v1/context/retrieve?query=MiniMap+Scroller+Snapline+plugin&library=x6
Plugin: Keyboard, Export, Transform
GET /api/v1/context/retrieve?query=Keyboard+Export+Transform+plugin&library=x6
Panning / mousewheel / embedding
GET /api/v1/context/retrieve?query=panning+mousewheel+embedding&library=x6
Tools (button-remove, etc.)
GET /api/v1/context/retrieve?query=tools+button-remove+hover&library=x6
Events (click,mouseenter,moved)
GET /api/v1/context/retrieve?query=events+node+click+mouse&library=x6
Serialization (toJSON, fromJSON)
GET /api/v1/context/retrieve?query=serialization+toJSON+fromJSON&library=x6
Animation / gradient
GET /api/v1/context/retrieve?query=animation+gradient+defs+marker&library=x6
Group / nesting / embedding
GET /api/v1/context/retrieve?query=group+nesting+embedding+parent+child&library=x6
用户意图检索查询语句
图初始化、容器、背景
GET /api/v1/context/retrieve?query=graph+init+container+background&library=x6
流程图/审批流
GET /api/v1/context/retrieve?query=flowchart+approval&library=x6
DAG/数据管道
GET /api/v1/context/retrieve?query=DAG+pipeline+port&library=x6
ER图/实体关系
GET /api/v1/context/retrieve?query=ER+diagram+entity+relationship&library=x6
血缘图/数据血缘
GET /api/v1/context/retrieve?query=lineage+data+lineage&library=x6
组织架构图/层级结构
GET /api/v1/context/retrieve?query=org+chart+hierarchy&library=x6
UML类图
GET /api/v1/context/retrieve?query=UML+class+diagram&library=x6
节点配置/自定义节点
GET /api/v1/context/retrieve?query=node+custom+shape+rect+circle&library=x6
边配置/路由/连接器
GET /api/v1/context/retrieve?query=edge+router+connector+orth+smooth&library=x6
端口/连接桩
GET /api/v1/context/retrieve?query=ports+connection+layout&library=x6
HTML形状节点
GET /api/v1/context/retrieve?query=html+shape+register&library=x6
Stencil/拖拽面板
GET /api/v1/context/retrieve?query=stencil+drag+drop+panel&library=x6
插件：Selection、History、Clipboard
GET /api/v1/context/retrieve?query=Selection+History+Clipboard+plugin&library=x6
插件：MiniMap、Scroller、Snapline
GET /api/v1/context/retrieve?query=MiniMap+Scroller+Snapline+plugin&library=x6
插件：Keyboard、Export、Transform
GET /api/v1/context/retrieve?query=Keyboard+Export+Transform+plugin&library=x6
平移/鼠标滚轮/嵌入
GET /api/v1/context/retrieve?query=panning+mousewheel+embedding&library=x6
工具（button-remove等）
GET /api/v1/context/retrieve?query=tools+button-remove+hover&library=x6
事件（click、mouseenter、moved等）
GET /api/v1/context/retrieve?query=events+node+click+mouse&library=x6
序列化（toJSON、fromJSON）
GET /api/v1/context/retrieve?query=serialization+toJSON+fromJSON&library=x6
动画/渐变
GET /api/v1/context/retrieve?query=animation+gradient+defs+marker&library=x6
分组/嵌套/嵌入
GET /api/v1/context/retrieve?query=group+nesting+embedding+parent+child&library=x6

Dependencies

依赖项

  • @antv/x6
    — X6 v3 diagram editing engine (exports 
    Graph
    + 11 plugin classes)
  • @antv/x6
    — X6 v3图表编辑引擎（导出
    Graph
    +11个插件类）