开发或排查 AntV X6 v3…

需要创建、定制或调试 X6 v3 节点边图编辑器时使用。

适用场景

解决思路

1. 引入 @antv/x6（X6 v3 图编辑引擎，导出 Graph 与 11 个插件类）；X6 使用命令式 API：创建 Graph 实例，再调用 graph.addNode()、graph.addEdge()，并通过 graph.use() 注册插件。
2. 基础用法：`import { Graph } from '@antv/x6'; const graph = new Graph({ container: 'container', background: { color: '#F2F7FA' } });` 然后用 `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 } } })` 添加节点，用 `graph.addEdge({ source, target, attrs: { line: { stroke: '#8f8f8f', strokeWidth: 1 } } })` 添加边，最后调用 `graph.centerContent()`。
3. CDN 用法：通过 `<script src='https://unpkg.com/@antv/x6@3/dist/x6.js'></script>` 引入，然后使用 `X6.Graph` 创建实例，并用 `X6.Graph` 的 `addNode`、`addEdge`、`centerContent` 等方法。
4. 使用内容检索服务理解 X6 v3 概念、用法、API、示例：`GET https://sive.antv.antgroup.com/api/v1/context/retrieve`，参数 `query`（必填，搜索关键词，如 `flowchart stencil port`）、`library`（必填，X6 用 `x6`）、`topK`（默认 5）、`content`（默认 true，返回完整参考文档 markdown）、`maxTokens`（默认不限）；检索使用混合搜索（FTS + vector + RRF fusion），约束文档被索引为普通技能文档并自然出现在结果中。
5. 检索示例：`curl "https://sive.antv.antgroup.com/api/v1/context/retrieve?query=flowchart+stencil+port&library=x6"`。
6. 不要调用 `graph.render()`；X6 v3 没有该方法（它是 G6 API），X6 会在 `addNode`、`addEdge`、`fromJSON` 时自动渲染。
7. 使用字符串字面量 `container: 'container'`，不要写 `const container = document.getElementById('container')` 再传入；运行时自动解析。
8. 使用插件方法前先注册插件：`import { Graph, Export, Selection } from '@antv/x6';` 然后 `graph.use(new Export()); graph.use(new Selection({ enabled: true, rubberband: true }));`，之后才能调用 `graph.toPNG()`、`graph.select()`。
9. 只把 11 个插件类用 `graph.use()` 注册：`Clipboard`、`Dnd`、`Export`、`History`、`Keyboard`、`MiniMap`、`Scroller`、`Selection`、`Snapline`、`Stencil`、`Transform`；不要 import 不存在的 `Embedding` 等类，`mousewheel`、`embedding`、`panning`、`connecting`、`translating`、`interacting`、`background`、`grid` 是 Graph 构造选项，不是插件。
10. 所有使用的类必须出现在 import 语句中，例如 `import { Graph, Selection, Keyboard, History } from '@antv/x6';`，否则会回退到 `window.Selection` 导致 Illegal constructor。
11. 添加完所有节点/边后调用 `graph.centerContent()`；或者调用 `graph.zoomToFit({ padding: 20, maxScale: 1 })`，但不要同时使用两者，否则内容会漂移到左上角。
12. 总是设置背景色和默认节点/边样式：`new Graph({ container: 'container', background: { color: '#F2F7FA' } })`；节点 `attrs.body` 设置 `stroke`、`strokeWidth`、`fill`、`rx`、`ry`；边 `attrs.line` 设置 `stroke`、`strokeWidth`。
13. 处理 `mousewheel`、`panning`、`Selection.rubberband` 冲突时使用 modifiers：`panning: { enabled: true, eventTypes: ['leftMouseDown'], modifiers: 'shift' }`，`mousewheel: { enabled: true, zoomAtMousePosition: true, modifiers: ['ctrl'] }`，`Selection({ enabled: true, rubberband: true })`。
14. 输出纯 JavaScript，不要使用 TypeScript 语法（如 `private width: number = 100;`、`const node: Node = graph.addNode({...}) as Node;`）。
15. HTML 节点使用 `Shape.HTML.register`：`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; } });`，不要用 `class extends Node`。
16. 需要图谱初始化、容器、背景时，调用 `GET /api/v1/context/retrieve?query=graph+init+container+background&library=x6`。
17. 需要流程图/审批流时，调用 `GET /api/v1/context/retrieve?query=flowchart+approval&library=x6`。
18. 需要 DAG/数据管道时，调用 `GET /api/v1/context/retrieve?query=DAG+pipeline+port&library=x6`。
19. 需要 ER 图/实体关系图时，调用 `GET /api/v1/context/retrieve?query=ER+diagram+entity+relationship&library=x6`。
20. 需要血缘图/数据血缘图时，调用 `GET /api/v1/context/retrieve?query=lineage+data+lineage&library=x6`。
21. 需要组织架构图/层级图时，调用 `GET /api/v1/context/retrieve?query=org+chart+hierarchy&library=x6`。
22. 需要 UML 类图时，调用 `GET /api/v1/context/retrieve?query=UML+class+diagram&library=x6`。
23. 需要节点配置/自定义节点时，调用 `GET /api/v1/context/retrieve?query=node+custom+shape+rect+circle&library=x6`。
24. 需要边配置/router/connector 时，调用 `GET /api/v1/context/retrieve?query=edge+router+connector+orth+smooth&library=x6`。
25. 需要 Ports/连接桩时，调用 `GET /api/v1/context/retrieve?query=ports+connection+layout&library=x6`。
26. 需要 HTML shape 节点时，调用 `GET /api/v1/context/retrieve?query=html+shape+register&library=x6`。
27. 需要 Stencil/拖拽面板时，调用 `GET /api/v1/context/retrieve?query=stencil+drag+drop+panel&library=x6`。
28. 需要插件 Selection、History、Clipboard 时，调用 `GET /api/v1/context/retrieve?query=Selection+History+Clipboard+plugin&library=x6`。
29. 需要插件 MiniMap、Scroller、Snapline 时，调用 `GET /api/v1/context/retrieve?query=MiniMap+Scroller+Snapline+plugin&library=x6`。
30. 需要插件 Keyboard、Export、Transform 时，调用 `GET /api/v1/context/retrieve?query=Keyboard+Export+Transform+plugin&library=x6`。
31. 需要 Panning/mousewheel/embedding 时，调用 `GET /api/v1/context/retrieve?query=panning+mousewheel+embedding&library=x6`。
32. 需要 Tools（button-remove 等）时，调用 `GET /api/v1/context/retrieve?query=tools+button-remove+hover&library=x6`。
33. 需要 Events（click、mouseenter、moved）时，调用 `GET /api/v1/context/retrieve?query=events+node+click+mouse&library=x6`。
34. 需要序列化（toJSON、fromJSON）时，调用 `GET /api/v1/context/retrieve?query=serialization+toJSON+fromJSON&library=x6`。
35. 需要 Animation/gradient 时，调用 `GET /api/v1/context/retrieve?query=animation+gradient+defs+marker&library=x6`。
36. 需要 Group/nesting/embedding 时，调用 `GET /api/v1/context/retrieve?query=group+nesting+embedding+parent+child&library=x6`。

适用边界 · 注意事项

• 不要用于 G2 统计图表。
• 不要用于 G6 网络图。
• 不要用于 S2 透视表。