Antv G6 Graph
Use this skill whenever the user wants to create, customize, or troubleshoot G6 v5...
Install
npx skills add antvis/chart-visualization-skills --skill antv-g6-graph -g -a claude-code -y- Repository
- antvis/chart-visualization-skills523
- Category
- Testing
- Updated
- 1mo ago
- License
- MIT
- Context cost
- Mediumabout 1,638 tokens
- Runs scripts
- No, instructions only
What it does
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.
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.
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
<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.
