Antv X6 Editor

antvis/chart-visualization-skills/skills/antv-x6-editor

作者 antvisa105fa12a9fa无许可证506 个星标收录于 2026年10月8日更新于 2026年10月8日仓库2周前更新

Use this skill whenever the user wants to create, customize, or troubleshoot X6 v3 graph editor diagrams. Triggers include: any mention of 'X6', 'antv x6', '@antv/x6', 'X6 editor', 'X6 图编辑', '流程图', 'DAG', 'ER图', '实体关系图', '血缘图', '组织架构图', 'UML类图', 'flowchart', 'DAG diagram', 'ER diagram', 'lineage graph', 'org chart', 'network topology', 'stencil', 'drag-and-drop editor', 'port connection', 'node port edge', 'graph editor', 'diagram editor', or requests about X6 node/edge styling, plugins (Selection, History, Clipboard, Keyboard, MiniMap, Scroller, Snapline, Stencil, Dnd, Transform, Export), interactions (panning, mousewheel, connecting, embedding), HTML shape nodes, custom shapes, serialization, or layout. Also use when debugging X6 rendering errors, v2→v3 migration, or editor interaction issues. Do NOT use for G2 statistical charts, G6 network graphs, or S2 pivot tables.

仅含说明Software Development Design & Creative

AI 生成的概览

指导使用命令式 API 规则和检索服务来构建与调试 AntV X6 v3 图编辑器图表。

功能: 该技能提供创建、定制和排查 AntV X6 v3 节点-边图编辑器（如流程图、DAG、ER 图、组织架构图和血缘图）的说明。它记录了命令式 Graph API、插件注册、构造函数选项、样式、HTML 形状节点以及常见的 v2 到 v3 迁移陷阱，并列出用于查询 X6 文档的托管上下文检索接口。它产出的是 JavaScript 代码示例和检索查询，而不是文件或脚本。
适用场景: 当用户提到 X6、@antv/x6 或 X6 编辑器相关工作，或要求流程图、DAG、ER 图、血缘图、组织架构图、UML 类图、stencil、端口或图交互时使用。它也用于调试 X6 渲染或交互错误以及 v2 到 v3 迁移问题。它不适用于 G2 图表、G6 网络图或 S2 透视表。
运行要求: 需要所编写代码使用的 @antv/x6 v3 包，并需要访问 AntV 上下文检索 HTTP 服务的网络连接（curl 被列为工具）。它不附带脚本，仅为说明文档。

X6 v3 Graph Editor

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();

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

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>

<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

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.

Parameter	Type	Required	Description
`query`	string	✅	Search keywords, e.g. `flowchart stencil port`
`library`	string	✅	Library name: `g2`, `g6`, `x6`
`topK`	number		Number of results to return (default: 5)
`content`	boolean		Return full reference doc markdown (default: true)
`maxTokens`	number		Max tokens per result (default: unlimited)

bash

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

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

javascript

// ❌ WRONG — graph.render() is G6 API, not X6const graph = new Graph({ container: 'container' });graph.render();
// ✅ CORRECT — X6 auto-renders on addNode/addEdge/fromJSONconst graph = new Graph({ container: 'container', background: { color: '#F2F7FA' } });graph.addNode({ shape: 'rect', x: 40, y: 40, width: 100, height: 40 });

// ❌ WRONG — graph.render() is G6 API, not X6const graph = new Graph({ container: 'container' });graph.render();
// ✅ CORRECT — X6 auto-renders on addNode/addEdge/fromJSONconst 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

javascript

// ❌ WRONG — declaring container variable is forbiddenconst container = document.getElementById('container');const graph = new Graph({ container });
// ✅ CORRECT — string literal, runtime auto-resolvesconst graph = new Graph({ container: 'container', background: { color: '#F2F7FA' } });

// ❌ WRONG — declaring container variable is forbiddenconst container = document.getElementById('container');const graph = new Graph({ container });
// ✅ CORRECT — string literal, runtime auto-resolvesconst graph = new Graph({ container: 'container', background: { color: '#F2F7FA' } });

MUST: Register plugins before using their methods

javascript

// ❌ WRONG — calling plugin method without registrationgraph.toPNG();       // Error: method not foundgraph.select();      // Error: method not found
// ✅ CORRECT — register first, then callimport { 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

// ❌ WRONG — calling plugin method without registrationgraph.toPNG();       // Error: method not foundgraph.select();      // Error: method not found
// ✅ CORRECT — register first, then callimport { 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

MUST: Only 11 plugin classes exist — NOT constructor options

✅ 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 optionimport { 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 — 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 optionimport { 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 importedimport { Graph } from '@antv/x6';graph.use(new Selection({...}));  // falls back to window.Selection → Illegal constructor
// ✅ CORRECT — every used class importedimport { 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 }));

// ❌ WRONG — Selection used but not importedimport { Graph } from '@antv/x6';graph.use(new Selection({...}));  // falls back to window.Selection → Illegal constructor
// ✅ CORRECT — every used class importedimport { 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

javascript

// ❌ WRONG — no centerContent, content drifts to top-leftgraph.addNode({ ... });graph.addEdge({ ... });
// ✅ CORRECT — content centered after all additionsgraph.addNode({ ... });graph.addEdge({ ... });graph.centerContent();// OR: graph.zoomToFit({ padding: 20, maxScale: 1 }) — but NOT both

// ❌ WRONG — no centerContent, content drifts to top-leftgraph.addNode({ ... });graph.addEdge({ ... });
// ✅ CORRECT — content centered after all additionsgraph.addNode({ ... });graph.addEdge({ ... });graph.centerContent();// OR: graph.zoomToFit({ padding: 20, maxScale: 1 }) — but NOT both

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

javascript

// ❌ WRONG — no background, no default stylesconst graph = new Graph({ container: 'container' });
// ✅ CORRECT — mandatory background + default stylesconst 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 } },});

// ❌ WRONG — no background, no default stylesconst graph = new Graph({ container: 'container' });
// ✅ CORRECT — mandatory background + default stylesconst 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

javascript

// ❌ WRONG — panning and mousewheel both grab scroll eventsconst graph = new Graph({  panning: { enabled: true },  mousewheel: { enabled: true },});graph.use(new Selection({ enabled: true, rubberband: true }));
// ✅ CORRECT — modifiers separate the interactionsconst 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 }));

// ❌ WRONG — panning and mousewheel both grab scroll eventsconst graph = new Graph({  panning: { enabled: true },  mousewheel: { enabled: true },});graph.use(new Selection({ enabled: true, rubberband: true }));
// ✅ CORRECT — modifiers separate the interactionsconst 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

// ❌ WRONG — TypeScript syntaxprivate width: number = 100;const node: Node = graph.addNode({...}) as Node;
// ✅ CORRECT — pure JavaScript onlyconst node = graph.addNode({ shape: 'rect', x: 40, y: 40 });

// ❌ WRONG — TypeScript syntaxprivate width: number = 100;const node: Node = graph.addNode({...}) as Node;
// ✅ CORRECT — pure JavaScript onlyconst node = graph.addNode({ shape: 'rect', x: 40, y: 40 });

MUST: `Shape.HTML.register` for HTML nodes — NOT `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;  },});

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

Quick Reference

User Intent	Retrieve 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`

Dependencies

@antv/x6 — X6 v3 diagram editing engine (exports Graph + 11 plugin classes)

来源与署名

来源：antvis/chart-visualization-skills位于skills/antv-x6-editor提交a105fa1

许可证：无许可证

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架

Antv X6 Editor

X6 v3 Graph Editor

Overview

CDN Usage

Content Retrieval Service

Critical Rules

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

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

MUST: Register plugins before using their methods

MUST: Only 11 plugin classes exist — NOT constructor options

MUST: All used classes MUST appear in import statement

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

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

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

MUST: Output pure JavaScript — NO TypeScript syntax

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

Quick Reference

Dependencies

来源与署名

更多来自 antvis/chart-visualization-skills 的技能

Icon Retrieval

Antv G6 Graph

Antv G2 Chart

更多Software Development技能

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices

Antv X6 Editor

X6 v3 Graph Editor

Overview

CDN Usage

Content Retrieval Service

Critical Rules

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

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

MUST: Register plugins before using their methods

MUST: Only 11 plugin classes exist — NOT constructor options

MUST: All used classes MUST appear in import statement

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

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

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

MUST: Output pure JavaScript — NO TypeScript syntax

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

Quick Reference

Dependencies

来源与署名

更多来自 antvis/chart-visualization-skills 的技能

Icon Retrieval

Antv G6 Graph

Antv G2 Chart

更多Software Development技能

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices

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

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

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

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

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