antv-g6-graph

Q: How do I install antv-g6-graph?

Run npx skills add https://github.com/antvis/chart-visualization-skills --skill antv-g6-graph in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/antv-g6-graph/ (personal) or .claude/skills/antv-g6-graph/ (project).

by antvisFrontend & Design

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.

Installs: 1.1K
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/antvis/chart-visualization-skills --skill antv-g6-graph

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads antv-g6-graph automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

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.

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)

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

// ❌ WRONG — v4 constructor
new G6.Graph({ container: 'container', ... });

// ✅ CORRECT — v5 constructor
import { Graph } from '@antv/g6';
new Graph({ container: 'container', ... });

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

// ❌ WRONG — v4 separate data method
graph.data(data);
graph.render();

// ✅ CORRECT — v5 declarative config + async render
const 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`

// ❌ WRONG — missing node id, missing edge endpoints
const data = { nodes: [{ label: 'A' }], edges: [{ from: 'A', to: 'B' }] };

// ✅ CORRECT — each node has unique id, each edge has source/target
const 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`

// ❌ WRONG — v4 label config
node: { labelCfg: { text: 'Node 1' } }

// ✅ CORRECT — v5 style.labelText
node: { style: { labelText: 'Node 1' } }

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

// ❌ WRONG — negative nodeStrength causes unpredictable behavior
layout: { type: 'force', nodeStrength: -300 }

// ✅ CORRECT — non-negative value
layout: { type: 'force', nodeStrength: 300 }

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

// ❌ WRONG — v4 params silently ignored in v5
layout: { type: 'force', preventOverlap: true, nodeSize: 30 }

// ✅ CORRECT — use d3-force collide for overlap prevention
layout: { type: 'd3-force', collide: { radius: 30 } }

MUST: No Mode concept — behaviors are flat array

// ❌ WRONG — v4 mode-based behavior config
modes: { default: ['drag-canvas', 'zoom-canvas'] }

// ✅ CORRECT — v5 flat behavior array
behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element']

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

// ❌ WRONG — no container specified
const graph = new Graph({ data });

// ✅ CORRECT
const 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

FAQ

What does the antv-g6-graph skill do?

How do I install antv-g6-graph?

Run npx skills add https://github.com/antvis/chart-visualization-skills --skill antv-g6-graph in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/antv-g6-graph/ (personal) or .claude/skills/antv-g6-graph/ (project).

Which AI agents can use antv-g6-graph?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is antv-g6-graph safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains antv-g6-graph?

It is published by antvis in antvis/chart-visualization-skills. It has 1,147 recorded installs.