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`