可视化官方

AntV G6 图可视化

当用户需要构建带自动布局和丰富交互的关系图，或明确要求 AntV G6 时，使用此 Skill。该库擅长：Dagre 层级图、环形图、组合节点图、同心圆图、3D 力导向图、D3 力导向图、鱼骨图、ForceAtlas2 网络图、通用力导向图、Fruchterman 网络图、网格图、MDS 降维关系图、径向图、随机布局图、蛇形布局图、紧凑树图、树状图、思维导图、缩进树图、知识图谱、社交网络图、关系图、网络拓扑图、流程层级图。不要用于可拖拽连线和建模的 X6 编辑器、只强调超大规模渲染的 Sigma.js，或普通统计图表。

去使用

Memo Agent

使用2,914

Skill 文件

Skill

SKILL.md

name	antv-g6-graph
title	AntV G6 图可视化
description	当用户需要构建带自动布局和丰富交互的关系图，或明确要求 AntV G6 时，使用此 Skill。该库擅长：Dagre 层级图、环形图、组合节点图、同心圆图、3D 力导向图、D3 力导向图、鱼骨图、ForceAtlas2 网络图、通用力导向图、Fruchterman 网络图、网格图、MDS 降维关系图、径向图、随机布局图、蛇形布局图、紧凑树图、树状图、思维导图、缩进树图、知识图谱、社交网络图、关系图、网络拓扑图、流程层级图。不要用于可拖拽连线和建模的 X6 编辑器、只强调超大规模渲染的 Sigma.js，或普通统计图表。
tools	curl

G6 v5 Graph Visualization

Overview

G6 v5 is AntV's graph visualization engine for network diagrams, tree graphs, and relationship visualizations. It uses a declarative configuration style where new Graph({...}) defines all nodes, edges, layouts, behaviors, and plugins in one constructor call.

javascript

import { Graph } from '@antv/g6';
const graph = new Graph({  container: 'container',  data: {    nodes: [{ id: 'node-1', style: { labelText: 'Node 1' } }],    edges: [{ source: 'node-1', target: 'node-2' }],  },  layout: { type: 'force' },  behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element'],});
await graph.render();

import { Graph } from '@antv/g6';
const graph = new Graph({  container: 'container',  data: {    nodes: [{ id: 'node-1', style: { labelText: 'Node 1' } }],    edges: [{ source: 'node-1', target: 'node-2' }],  },  layout: { type: 'force' },  behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element'],});
await graph.render();

CDN Usage

html

<script src="https://cdn.jsdmirror.com/npm/@antv/g6@5/dist/g6.min.js"></script><script>  const graph = new G6.Graph({    container: 'container',    data: {      nodes: [{ id: 'node-1', style: { labelText: 'Node 1' } }],      edges: [{ source: 'node-1', target: 'node-2' }],    },    layout: { type: 'force' },    behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element'],  });  graph.render();</script>

<script src="https://cdn.jsdmirror.com/npm/@antv/g6@5/dist/g6.min.js"></script><script>  const graph = new G6.Graph({    container: 'container',    data: {      nodes: [{ id: 'node-1', style: { labelText: 'Node 1' } }],      edges: [{ source: 'node-1', target: 'node-2' }],    },    layout: { type: 'force' },    behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element'],  });  graph.render();</script>

Content Retrieval

Skill content is retrieved via an antv HTTP API server using GET requests.

MUST invoke the Sive curl tool for these retrieval requests and pass the complete HTTPS URL through its url input. Never substitute web_fetch or another fetching tool for this endpoint.

`GET /api/v1/context/retrieve`

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. `force layout node`
`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=force+layout+node+style&library=g6"

curl "https://sive.antv.antgroup.com/api/v1/context/retrieve?query=force+layout+node+style&library=g6"

Critical Rules

MUST: Use `new Graph({...})` — NOT v4 `new G6.Graph()`

javascript

// ❌ WRONG — v4 constructornew G6.Graph({ container: 'container', ... });
// ✅ CORRECT — v5 constructorimport { Graph } from '@antv/g6';new Graph({ container: 'container', ... });

// ❌ WRONG — v4 constructornew G6.Graph({ container: 'container', ... });
// ✅ CORRECT — v5 constructorimport { Graph } from '@antv/g6';new Graph({ container: 'container', ... });

MUST: All config in one constructor call, `await graph.render()`

javascript

// ❌ WRONG — v4 separate data methodgraph.data(data);graph.render();
// ✅ CORRECT — v5 declarative config + async renderconst graph = new Graph({  container: 'container',  data: { nodes: [...], edges: [...] },  layout: { type: 'force' },  behaviors: ['drag-canvas', 'zoom-canvas'],});await graph.render();

// ❌ WRONG — v4 separate data methodgraph.data(data);graph.render();
// ✅ CORRECT — v5 declarative config + async renderconst graph = new Graph({  container: 'container',  data: { nodes: [...], edges: [...] },  layout: { type: 'force' },  behaviors: ['drag-canvas', 'zoom-canvas'],});await graph.render();

MUST: Data format with `id`, `source`, `target`

javascript

// ❌ WRONG — missing node id, missing edge endpointsconst data = { nodes: [{ label: 'A' }], edges: [{ from: 'A', to: 'B' }] };
// ✅ CORRECT — each node has unique id, each edge has source/targetconst data = {  nodes: [{ id: 'node-1', style: { labelText: 'A' } }],  edges: [{ source: 'node-1', target: 'node-2' }],};

// ❌ WRONG — missing node id, missing edge endpointsconst data = { nodes: [{ label: 'A' }], edges: [{ from: 'A', to: 'B' }] };
// ✅ CORRECT — each node has unique id, each edge has source/targetconst data = {  nodes: [{ id: 'node-1', style: { labelText: 'A' } }],  edges: [{ source: 'node-1', target: 'node-2' }],};

MUST: Use `style.labelText` for labels — NOT `label` or `labelCfg`

javascript

// ❌ WRONG — v4 label confignode: { labelCfg: { text: 'Node 1' } }
// ✅ CORRECT — v5 style.labelTextnode: { style: { labelText: 'Node 1' } }

// ❌ WRONG — v4 label confignode: { labelCfg: { text: 'Node 1' } }
// ✅ CORRECT — v5 style.labelTextnode: { style: { labelText: 'Node 1' } }

MUST: `nodeStrength` must be ≥ 0 in force layout

javascript

// ❌ WRONG — negative nodeStrength causes unpredictable behaviorlayout: { type: 'force', nodeStrength: -300 }
// ✅ CORRECT — non-negative valuelayout: { type: 'force', nodeStrength: 300 }

// ❌ WRONG — negative nodeStrength causes unpredictable behaviorlayout: { type: 'force', nodeStrength: -300 }
// ✅ CORRECT — non-negative valuelayout: { type: 'force', nodeStrength: 300 }

MUST: `force` layout does NOT support `preventOverlap` / `nodeSize`

javascript

// ❌ WRONG — v4 params silently ignored in v5layout: { type: 'force', preventOverlap: true, nodeSize: 30 }
// ✅ CORRECT — use d3-force collide for overlap preventionlayout: { type: 'd3-force', collide: { radius: 30 } }

// ❌ WRONG — v4 params silently ignored in v5layout: { type: 'force', preventOverlap: true, nodeSize: 30 }
// ✅ CORRECT — use d3-force collide for overlap preventionlayout: { type: 'd3-force', collide: { radius: 30 } }

MUST: No Mode concept — behaviors are flat array

javascript

// ❌ WRONG — v4 mode-based behavior configmodes: { default: ['drag-canvas', 'zoom-canvas'] }
// ✅ CORRECT — v5 flat behavior arraybehaviors: ['drag-canvas', 'zoom-canvas', 'drag-element']

// ❌ WRONG — v4 mode-based behavior configmodes: { default: ['drag-canvas', 'zoom-canvas'] }
// ✅ CORRECT — v5 flat behavior arraybehaviors: ['drag-canvas', 'zoom-canvas', 'drag-element']

MUST: `container` is mandatory, default `'container'`

javascript

// ❌ WRONG — no container specifiedconst graph = new Graph({ data });
// ✅ CORRECTconst graph = new Graph({ container: 'container', data, ... });

// ❌ WRONG — no container specifiedconst graph = new Graph({ data });
// ✅ CORRECTconst graph = new Graph({ container: 'container', data, ... });

Quick Reference

User Intent	Retrieve Query
Graph initialization, container, render	`GET /api/v1/context/retrieve?query=graph+init+render&library=g6`
Network / force graph	`GET /api/v1/context/retrieve?query=network+force+layout&library=g6`
Tree / mindmap / fishbone	`GET /api/v1/context/retrieve?query=tree+mindmap+fishbone+layout&library=g6`
Dagre / hierarchy / flow chart	`GET /api/v1/context/retrieve?query=dagre+hierarchy+flow+chart&library=g6`
Circular / radial / grid layout	`GET /api/v1/context/retrieve?query=circular+radial+grid+layout&library=g6`
Node styles (rect, circle, diamond, html)	`GET /api/v1/context/retrieve?query=node+style+rect+circle+diamond+html&library=g6`
Edge types (line, cubic, polyline, loop)	`GET /api/v1/context/retrieve?query=edge+line+cubic+polyline+loop&library=g6`
Combo / group nodes	`GET /api/v1/context/retrieve?query=combo+group+node&library=g6`
Custom node / edge	`GET /api/v1/context/retrieve?query=custom+node+edge+element&library=g6`
Behaviors (drag, zoom, click-select, hover)	`GET /api/v1/context/retrieve?query=behavior+drag+zoom+click-select+hover&library=g6`
Plugins (minimap, tooltip, toolbar, legend)	`GET /api/v1/context/retrieve?query=plugin+minimap+tooltip+toolbar+legend&library=g6`
Events system	`GET /api/v1/context/retrieve?query=events+system+click+mouse&library=g6`
State / style animation	`GET /api/v1/context/retrieve?query=state+animation+transform&library=g6`
Data structure / transforms	`GET /api/v1/context/retrieve?query=data+structure+transforms&library=g6`
Theme / background	`GET /api/v1/context/retrieve?query=theme+background+style&library=g6`
Lasso select / collapse-expand	`GET /api/v1/context/retrieve?query=lasso+collapse+expand+select&library=g6`

Dependencies

@antv/g6 — G6 v5 graph visualization engine

Ln 1, Col 1MarkdownSpaces: 2

No errors

AntV G6 图可视化

Skill 文件

G6 v5 Graph Visualization

Overview

CDN Usage

Content Retrieval

GET /api/v1/context/retrieve

Critical Rules

MUST: Use new Graph({...}) — NOT v4 new G6.Graph()

MUST: All config in one constructor call, await graph.render()

MUST: Data format with id, source, target

MUST: Use style.labelText for labels — NOT label or labelCfg

MUST: nodeStrength must be ≥ 0 in force layout

MUST: force layout does NOT support preventOverlap / nodeSize

MUST: No Mode concept — behaviors are flat array

MUST: container is mandatory, default 'container'

Quick Reference

Dependencies

`GET /api/v1/context/retrieve`

MUST: Use `new Graph({...})` — NOT v4 `new G6.Graph()`

MUST: All config in one constructor call, `await graph.render()`

MUST: Data format with `id`, `source`, `target`

MUST: Use `style.labelText` for labels — NOT `label` or `labelCfg`

MUST: `nodeStrength` must be ≥ 0 in force layout

MUST: `force` layout does NOT support `preventOverlap` / `nodeSize`

MUST: `container` is mandatory, default `'container'`