antv-x6-editor

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

X6 v3 Graph Editor

X6 v3 图编辑器

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

X6 v3是AntV推出的图表编辑引擎，适用于流程图、DAG、ER图、组织架构图等交互式节点-边编辑器。与G2/G6不同，X6采用命令式API——你需要创建一个

Graph

实例，然后调用

graph.addNode()

、

graph.addEdge()

，并通过

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

CDN 使用方式

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>

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"

在使用AntV X6进行数据可视化时，如果你需要了解X6 v3的概念、用法、API、示例等内容，可以使用提供的上下文检索服务。使用本技能时，会通过AntV的HTTP API服务器发送GET请求来检索内容。

Host:
```
https://sive.antv.antgroup.com
```
Endpoint:
```
/api/v1/context/retrieve
```
Method:
```
GET
```

Parameters:

query

library

topK

content

maxTokens

progressiveLevel

通过查询检索技能（混合搜索=FTS+向量+RRF融合）。约束文档会被索引为常规技能文档，并自然出现在搜索结果中。

参数	类型	必填	描述
`query`	string	✅	搜索关键词，例如 `flowchart stencil port`
`library`	string	✅	库名称： `g2` 、 `g6` 、 `x6`
`topK`	number		返回结果数量（默认值：5）
`content`	boolean		返回完整参考文档的markdown内容（默认值：true）
`maxTokens`	number		每个结果的最大token数（默认值：无限制）
`progressiveLevel`	number		渐进式披露级别： `0` =完整内容， `1` =摘要+代码， `2` =仅摘要

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

必须遵守：X6 v3中不存在

graph.render()

方法

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

javascript

// ❌ 错误——graph.render()是G6的API，不属于X6
const graph = new Graph({ container: 'container' });
graph.render();

// ✅ 正确——X6会在调用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

必须遵守：使用字符串字面量

container: 'container'

——禁止使用变量声明

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

javascript

// ❌ 错误——禁止声明container变量
const container = document.getElementById('container');
const graph = new Graph({ container });

// ✅ 正确——使用字符串字面量，运行时自动解析
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

javascript

// ❌ 错误——未注册插件就调用其方法
graph.toPNG();       // 错误：找不到方法
graph.select();      // 错误：找不到方法

// ✅ 正确——先注册，再调用
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 }));
// 现在可以调用graph.toPNG()和graph.select()了

MUST: Only 11 plugin classes exist — NOT constructor options

必须遵守：仅存在11个插件类——不要混淆为构造函数选项

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

✅ 插件类（导入后通过 `graph.use` 使用）	❌ 不属于插件（是构造函数选项）
`Clipboard` , `Dnd` , `Export` , `History` , `Keyboard` , `MiniMap` , `Scroller` , `Selection` , `Snapline` , `Stencil` , `Transform`	`mousewheel` , `embedding` , `panning` , `connecting` , `translating` , `interacting` , `background` , `grid`

✅ 插件类（导入后通过

graph.use

使用）

❌ 不属于插件（是构造函数选项）

Clipboard

Dnd

Export

History

Keyboard

MiniMap

Scroller

Selection

Snapline

Stencil

Transform

mousewheel

embedding

panning

connecting

translating

interacting

background

grid

javascript

// ❌ 错误——将构造函数选项当作“插件”导入
import { Graph, Embedding } from '@antv/x6';  // Embedding不存在！
graph.use(new Embedding());                   // 错误：不是构造函数

// ✅ 正确——embedding是Graph的构造函数选项
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 }));

javascript

// ❌ 错误——使用了Selection但未导入
import { Graph } from '@antv/x6';
graph.use(new Selection({...}));  // 会回退到window.Selection → 非法构造函数

// ✅ 正确——所有使用的类都已导入
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

必须遵守：添加节点/边后务必调用

graph.centerContent()

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

javascript

// ❌ 错误——未调用centerContent，内容会偏移到左上角
graph.addNode({ ... });
graph.addEdge({ ... });

// ✅ 正确——添加完成后居中内容
graph.addNode({ ... });
graph.addEdge({ ... });
graph.centerContent();
// 或者：graph.zoomToFit({ padding: 20, maxScale: 1 })——但不要同时使用两者

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

javascript

// ❌ 错误——未设置背景和默认样式
const graph = new Graph({ container: 'container' });

// ✅ 正确——必须设置背景+默认样式
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

必须遵守：

mousewheel

、

panning

、

Selection.rubberband

——使用修饰键避免冲突

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

javascript

// ❌ 错误——panning和mousewheel都会捕获滚动事件
const graph = new Graph({
  panning: { enabled: true },
  mousewheel: { enabled: true },
});
graph.use(new Selection({ enabled: true, rubberband: true }));

// ✅ 正确——使用修饰键区分交互
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代码——禁止使用TypeScript语法

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

javascript

// ❌ 错误——TypeScript语法
private width: number = 100;
const node: Node = graph.addNode({...}) as Node;

// ✅ 正确——仅使用纯JavaScript
const node = graph.addNode({ shape: 'rect', x: 40, y: 40 });

MUST:

Shape.HTML.register

for HTML nodes — NOT

class extends Node

必须遵守：使用

Shape.HTML.register

创建HTML节点——不要使用

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

javascript

// ❌ 错误——基于类的HTML节点（2.x版本写法）
class MyNode extends Node { ... }

// ✅ 正确——使用Shape.HTML.register（3.x版本写法）
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`

用户意图	检索查询语句
图初始化、容器、背景	`GET /api/v1/context/retrieve?query=graph+init+container+background&library=x6`
流程图/审批流	`GET /api/v1/context/retrieve?query=flowchart+approval&library=x6`
DAG/数据管道	`GET /api/v1/context/retrieve?query=DAG+pipeline+port&library=x6`
ER图/实体关系	`GET /api/v1/context/retrieve?query=ER+diagram+entity+relationship&library=x6`
血缘图/数据血缘	`GET /api/v1/context/retrieve?query=lineage+data+lineage&library=x6`
组织架构图/层级结构	`GET /api/v1/context/retrieve?query=org+chart+hierarchy&library=x6`
UML类图	`GET /api/v1/context/retrieve?query=UML+class+diagram&library=x6`
节点配置/自定义节点	`GET /api/v1/context/retrieve?query=node+custom+shape+rect+circle&library=x6`
边配置/路由/连接器	`GET /api/v1/context/retrieve?query=edge+router+connector+orth+smooth&library=x6`
端口/连接桩	`GET /api/v1/context/retrieve?query=ports+connection+layout&library=x6`
HTML形状节点	`GET /api/v1/context/retrieve?query=html+shape+register&library=x6`
Stencil/拖拽面板	`GET /api/v1/context/retrieve?query=stencil+drag+drop+panel&library=x6`
插件：Selection、History、Clipboard	`GET /api/v1/context/retrieve?query=Selection+History+Clipboard+plugin&library=x6`
插件：MiniMap、Scroller、Snapline	`GET /api/v1/context/retrieve?query=MiniMap+Scroller+Snapline+plugin&library=x6`
插件：Keyboard、Export、Transform	`GET /api/v1/context/retrieve?query=Keyboard+Export+Transform+plugin&library=x6`
平移/鼠标滚轮/嵌入	`GET /api/v1/context/retrieve?query=panning+mousewheel+embedding&library=x6`
工具（button-remove等）	`GET /api/v1/context/retrieve?query=tools+button-remove+hover&library=x6`
事件（click、mouseenter、moved等）	`GET /api/v1/context/retrieve?query=events+node+click+mouse&library=x6`
序列化（toJSON、fromJSON）	`GET /api/v1/context/retrieve?query=serialization+toJSON+fromJSON&library=x6`
动画/渐变	`GET /api/v1/context/retrieve?query=animation+gradient+defs+marker&library=x6`
分组/嵌套/嵌入	`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
```
— X6 v3图表编辑引擎（导出
```
Graph
```
+11个插件类）

antv-x6-editor

Original

Translation

X6 v3 Graph Editor

X6 v3 图编辑器

Overview

概述

CDN Usage

CDN 使用方式

Content Retrieval Service

内容检索服务

Critical Rules

重要规则

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

必须遵守：X6 v3中不存在
`graph.render()`
方法

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

必须遵守：使用字符串字面量
`container: 'container'`
——禁止使用变量声明

MUST: Register plugins before using their methods

必须遵守：调用插件方法前先注册插件

MUST: Only 11 plugin classes exist — NOT constructor options

必须遵守：仅存在11个插件类——不要混淆为构造函数选项

MUST: All used classes MUST appear in import statement

必须遵守：所有使用的类必须出现在导入语句中

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

必须遵守：添加节点/边后务必调用
`graph.centerContent()`

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

必须遵守：始终设置背景颜色、默认节点/边样式

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

必须遵守：
`mousewheel`
、
`panning`
、
`Selection.rubberband`
——使用修饰键避免冲突

MUST: Output pure JavaScript — NO TypeScript syntax

必须遵守：输出纯JavaScript代码——禁止使用TypeScript语法

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

必须遵守：使用
`Shape.HTML.register`
创建HTML节点——不要使用
`class extends Node`

Quick Reference

快速参考

Dependencies

依赖项

antv-x6-editor

Original

Translation

X6 v3 Graph Editor

X6 v3 图编辑器

Overview

概述

CDN Usage

CDN 使用方式

Content Retrieval Service

内容检索服务

Critical Rules

重要规则

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

必须遵守：X6 v3中不存在graph.render()方法

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

必须遵守：使用字符串字面量container: 'container'——禁止使用变量声明

MUST: Register plugins before using their methods

必须遵守：调用插件方法前先注册插件

MUST: Only 11 plugin classes exist — NOT constructor options

必须遵守：仅存在11个插件类——不要混淆为构造函数选项

MUST: All used classes MUST appear in import statement

必须遵守：所有使用的类必须出现在导入语句中

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

必须遵守：添加节点/边后务必调用graph.centerContent()

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

必须遵守：始终设置背景颜色、默认节点/边样式

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

必须遵守：mousewheel、panning、Selection.rubberband——使用修饰键避免冲突

MUST: Output pure JavaScript — NO TypeScript syntax

必须遵守：输出纯JavaScript代码——禁止使用TypeScript语法

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

必须遵守：使用Shape.HTML.register创建HTML节点——不要使用class extends Node

Quick Reference

快速参考

Dependencies

依赖项

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

必须遵守：X6 v3中不存在
`graph.render()`
方法

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

必须遵守：使用字符串字面量
`container: 'container'`
——禁止使用变量声明

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

必须遵守：添加节点/边后务必调用
`graph.centerContent()`

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

必须遵守：
`mousewheel`
、
`panning`
、
`Selection.rubberband`
——使用修饰键避免冲突

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

必须遵守：使用
`Shape.HTML.register`
创建HTML节点——不要使用
`class extends Node`