Originales Skill-Dokument
Aus dem Quell-Repository gerendert; Überschriften, Beispiele, Code, Tabellen, Links und Bilder bleiben erhalten.
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
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"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 availableMUST: 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 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 bothMUST: 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 (exportsGraph+ 11 plugin classes)
