Antv G6 Graph

antvis/chart-visualization-skills/skills/antv-g6-graph

作者 antvisa105fa12a9fa無授權條款506 個星標收錄於 2026年10月8日更新於 2026年10月8日儲存庫2 週前更新

Use this skill whenever the user wants to create, customize, or troubleshoot G6 v5 graph/network visualizations. Triggers include: any mention of 'G6', 'antv g6', '@antv/g6', 'G6 graph', 'G6 图', '网络图', '关系图', '拓扑图', '树形图', '流程图', '思维导图', '鱼骨图', '力导向图', 'force graph', 'network visualization', 'node-edge diagram', 'graph layout', 'tree layout', 'dagre layout', 'mindmap', 'social network', or requests about G6 node styles, edge types, behaviors, plugins, layouts, combos, or data structures. Also use when debugging G6 rendering errors, v4→v5 migration, or graph interaction issues. Do NOT use for G2 statistical charts, X6 editor diagrams, or S2 pivot tables.

僅含說明Software Development Data & Analytics

AI 產生的概覽

指導建立、自訂與排解 AntV G6 v5 圖形與網路視覺化。

功能: 此技能提供建立與排解 G6 v5 圖形視覺化的說明，涵蓋網路圖、樹狀圖、心智圖與流程圖等。它說明了 v5 的宣告式建構子寫法、資料格式、標籤樣式、版面選項、互動行為，以及常見的 v4 到 v5 移轉錯誤。它也描述了一個用來查詢 G6 文件與範例的 HTTP 內容檢索服務。
適用情境: 當使用者想要建立、自訂或偵錯 G6 v5 圖形或網路視覺化時使用，包括版面、節點與邊樣式、互動行為、外掛與組合。它也適用於 v4 到 v5 移轉問題與圖形互動問題。不適用於 G2 統計圖表、X6 編輯器圖表或 S2 樞紐分析表。
執行需求: 需要 @antv/g6 v5 套件來執行所述程式碼，並需要網路存取 AntV 內容檢索 HTTP API（主機 sive.antv.antgroup.com）以查詢文件。此技能不含指令碼，僅為說明文件。

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://unpkg.com/@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://unpkg.com/@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 Service

When using AntV G6 for data visualization, if you need to understand the concepts, usage, API, examples, and other aspects of G6 v5, 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. `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)

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

來源與署名

來源：antvis/chart-visualization-skills位於skills/antv-g6-graph提交a105fa1

授權條款：無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架

Antv G6 Graph

G6 v5 Graph Visualization

Overview

CDN Usage

Content Retrieval Service

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

來源與署名

更多來自 antvis/chart-visualization-skills 的技能

Antv X6 Editor

Icon Retrieval

Antv G2 Chart

更多Software Development技能

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices

Antv G6 Graph

G6 v5 Graph Visualization

Overview

CDN Usage

Content Retrieval Service

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

來源與署名

更多來自 antvis/chart-visualization-skills 的技能

Antv X6 Editor

Icon Retrieval

Antv G2 Chart

更多Software Development技能

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices

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'`