# Antv G6 Graph

Use this skill whenever the user wants to create, customize, or troubleshoot G6 v5...

- Repository: https://github.com/antvis/chart-visualization-skills (523 stars)
- Category: Testing
- License: MIT
- Last updated: 2026-09-22
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add antvis/chart-visualization-skills --skill antv-g6-graph -g -a claude-code -y`
Codex: `npx skills add antvis/chart-visualization-skills --skill antv-g6-graph -g -a codex -y`
Cursor: `npx skills add antvis/chart-visualization-skills --skill antv-g6-graph -g -a cursor -y`
Gemini CLI: `npx skills add antvis/chart-visualization-skills --skill antv-g6-graph -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add antvis/chart-visualization-skills`

## Description

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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

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

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

## 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.

The rest: https://github.com/antvis/chart-visualization-skills/blob/HEAD/skills/antv-g6-graph/SKILL.md