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

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>

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.

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)
`progressiveLevel`	number		Progressive 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"

Critical Rules

MUST:

graph.render()

does NOT exist in X6 v3

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

MUST: Use string literal

container: 'container'

— no variable declaration

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

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

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`

✅ 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 }));

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

MUST: Always call

graph.centerContent()

after adding nodes/edges

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

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

MUST:

mousewheel

panning

Selection.rubberband

— use modifiers to avoid conflicts

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

MUST: Output pure JavaScript — NO TypeScript syntax

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

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

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)

antv-x6-editor

NPX Install

Tags

SKILL.md Content

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

antv-x6-editor

NPX Install

Tags

SKILL.md Content

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

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`