antv-x6-editor

X6 v3 图编辑器

概述

X6 v3 是 AntV 的图表编辑引擎，可用于流程图、DAG、ER 图、组织结构图以及其他交互式节点-边编辑器。与 G2/G6 不同，X6 使用命令式 API——你需要创建一个 Graph 实例，然后调用 graph.addNode()、graph.addEdge()，并通过 graph.use() 注册插件。

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 用法

<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>

内容检索服务

使用 AntV X6 进行数据可视化时，如果你需要了解 X6 v3 的概念、用法、API、示例等内容，可以使用提供的上下文检索服务。使用该技能时，内容会通过 GET 请求从 antv HTTP API 服务检索。

• 主机：https://sive.antv.antgroup.com
• 端点：/api/v1/context/retrieve
• 方法：GET
• 参数：query、library、topK、content、maxTokens

按查询检索技能（混合搜索 = FTS + 向量 + RRF 融合）。约束文档会作为常规技能文档编入索引，并自然出现在搜索结果中。

参数	类型	必填	描述
query	string	✅	搜索关键词，例如 flowchart stencil port
library	string	✅	库名称：g2、g6、x6
topK	number		返回的结果数量（默认值：5）
content	boolean		返回完整的参考文档 Markdown（默认值：true）
maxTokens	number		每条结果的最大 token 数（默认值：unlimited）

curl "https://sive.antv.antgroup.com/api/v1/context/retrieve?query=flowchart+stencil+port&library=x6"

关键规则

必须：X6 v3 中不存在 graph.render()

// ❌ 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 });

必须：使用字符串字面量 container: 'container'——不要声明变量

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

必须：先注册插件，再使用其方法

// ❌ 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

必须：仅有 11 个插件类——不是构造函数选项

✅ 插件类（导入 + graph.use）	❌ 不是插件（构造函数选项）
Clipboard、Dnd、Export、History、Keyboard、MiniMap、Scroller、Selection、Snapline、Stencil、Transform	mousewheel、embedding、panning、connecting、translating、interacting、background、grid

// ❌ 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 }));

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

// ❌ 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 }));

必须：添加节点/边后始终调用 graph.centerContent()

// ❌ 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

必须：始终设置背景颜色以及默认的节点/边样式

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

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

// ❌ 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——不得包含 TypeScript 语法

// ❌ 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 });

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

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

快速参考

用户意图	检索查询
图初始化、容器、背景	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
模板面板／拖放面板	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

依赖项

• @antv/x6 — X6 v3 图表编辑引擎（导出 Graph 和 11 个插件类）