antv-g6-graph

What the source does

• FilesystemNone observedNo reads or writes in the source
• NetworkNone observedNo outbound calls in the source
• ShellNone observedNo commands run in the source
• DependenciesPinnedNothing floats
• SecretsNone foundNo keys in source

Five audit layers

Gates applied: no behavioural pass.

Audit 0.4.1 · source sha 34615c1ed06b · 21 Oct 2026Report an issue or request a re-scan

• Publisherantvis GitHub organizationOwner of the repository this skill is read from
• Source folderantvis/chart-visualization-skills/skills/antv-g6-graphThe exact folder we audited
• LicenceMITAs the repository states it
• Commit pinned for this verdict34615c1ed06bA new audit runs when the source changes
• Repository statusNot archivedLast push 29 days ago
• Sandboxed runNot runSkills are read, not executed; layer L4 is skipped

Its 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 图', '网络图', '关系图', '拓扑图',…

---
name: antv-g6-graph
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."
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();
```

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

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

## Critical Rules

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

```javascript
// ❌ 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()`

```javascript
// ❌ 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`

```javascript
// ❌ 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`

```javascript
// ❌ 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

```javascript
// ❌ 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`

```javascript
// ❌ 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

```javascript
// ❌ 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'`

```javascript
// ❌ 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, circl

Excerpt, first 6,000 characters of SKILL.md, verbatim from the audited commit. It is text from someone else’s repository, quoted so you can judge it before your agent reads it.

git clone https://github.com/antvis/chart-visualization-skills
git -C chart-visualization-skills checkout 34615c1ed06b

Works in

1. 2026-10-21
   ✓SAFE B 89 / 100

   first audit · source 34615c1ed06b

Questions about antv-g6-graph

• github.com/antvis/chart-visualization-skills/tree/master/skills/ — the audited source at commit 34615c1ed06b and every finding aboveObserved · 21 Oct 2026

Spotted something wrong? Report a correction · Methodology