Antv G6 Graph

This generates G6 v5 visualization code for networks, trees, flowcharts, and more. It's built around the core gotcha that G6 v5 broke API compatibility with v4, so if you're migrating or copy-pasting old examples you'll hit silent failures and white screens. The skill enforces constructor-based initialization, corrects data structure mistakes like putting labels at the top level instead of in the data field, and handles the removed Mode concept. Useful constraints include catching the autoFit white screen bug with async force layouts and blocking negative nodeStrength values that break physics. Ships with layout recommendations, a full table of built-in node types and behaviors, and error patterns to avoid.

skills.sh installs: 1.2K
GitHub stars: 530
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add antvis/chart-visualization-skills --skill antv-g6-graph --agent claude-code

Installs into .claude/skills of the current project.

Files

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>