Antv X6 Editor

by antvisa105fa12a9faNo license506 starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 2 weeks ago

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.

Instructions onlySoftware Development Design & Creative

AI-generated overview

Guides building and debugging AntV X6 v3 graph editor diagrams with imperative API rules and a retrieval service.

What it does: This skill provides instructions for creating, customizing, and troubleshooting AntV X6 v3 node-edge diagram editors such as flowcharts, DAGs, ER diagrams, org charts, and lineage graphs. It documents the imperative Graph API, plugin registration, constructor options, styling, HTML shape nodes, and common v2-to-v3 migration pitfalls, and it lists a hosted context retrieval endpoint for looking up X6 documentation. It produces JavaScript code examples and retrieval queries rather than files or scripts.
When to use it: Use it when a user mentions X6, @antv/x6, or X6 editor work, or asks for flowcharts, DAGs, ER diagrams, lineage graphs, org charts, UML class diagrams, stencils, ports, or diagram interactions. It is also meant for debugging X6 rendering or interaction errors and for v2-to-v3 migration questions. It is not intended for G2 charts, G6 network graphs, or S2 pivot tables.
Requirements: Requires the @antv/x6 v3 package for the code being written, and network access to the AntV context retrieval HTTP service (curl is listed as a tool). It ships no scripts; it is instructions only.

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)

Source and attribution

Source:antvis/chart-visualization-skillsinskills/antv-x6-editorat commita105fa1

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

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

Source and attribution

More from antvis/chart-visualization-skills

Icon Retrieval

Antv G6 Graph

Antv G2 Chart

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

Source and attribution

More from antvis/chart-visualization-skills

Icon Retrieval

Antv G6 Graph

Antv G2 Chart

More in 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`