antv-g6-graph

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