Build G6Lite graphs with AI
Use the G6Lite Skill, local AI agents, and Sive to create, troubleshoot, and optimize graph visualizations
Turn intent into a graph you can verify
The G6Lite Skill helps an AI agent identify data scale, layout, interaction, and browser boundaries before it generates an implementation through the current package-root API.
Two ways to use it
Local agent + G6Lite Skill
Keep implementation aligned with G6Lite's real API, capability boundary, and performance paths.
Ask Sive online
Start an online question with G6Lite context. Answers depend on Sive's current knowledge state.
Understand the architecture
See how data, layout, scheduling, WebGL rendering, Canvas information layers, and extensions work together.
Use the Skill locally
Provide the GitHub skills/antv-g6lite-graph
directory as a Skill source to a compatible agent, then invoke it explicitly:
Use $antv-g6lite-graph to build a force-directed dependency graph
with hover highlighting and node dragging.You can also ask an agent to install it directly from GitHub:
Install the skill from
https://github.com/antvis/G6Lite/tree/master/skills/antv-g6lite-graphThe Skill keeps the agent focused on these constraints:
- Import only from the
@antv/g6-litepackage root, neversrc/ordist/internals. - Use ESM and a real browser lifecycle with DOM, Canvas, and WebGL.
- Generate only the node, edge, layout, Behavior, Combo, and extension capabilities G6Lite supports.
- Distinguish G6Lite from G6 v5 instead of copying plugin, event, or element configuration.
- For large graphs, examine layout, label density, incremental updates, DPR, GPU, and real devices.
Good agent tasks
| Task | Include in the prompt |
|---|---|
| Create a relationship graph | Data fields, node/edge count, layout, container size |
| Add interactions | Selection, drag, tooltip, highlight, brush, or lasso |
| Migrate from G6 v5 | List capability differences and unsupported needs before editing |
| Diagnose a blank canvas | Container size, endpoints, WebGL, lifecycle, and version |
| Optimize a large graph | First render, layout, labels, state patches, memory, and devices |
| Create an extension | Category, lifecycle, public ExtensionContext, and cleanup |
Recommended workflow
- Clarify inputConfirm data, scale, coordinates, layout, interactions, and runtime.
- Render the minimumProve a visible, disposable graph through package-root APIs.
- Add layersIntroduce styling, layout, behaviors, states, Combo, and extensions in sequence.
- Validate for realCheck the target browser, DPR, GPU, and container dimensions.
AI-generated code still needs type checking, browser validation, and product-data review. Do not treat agent output as a production result by itself.
The engine an agent should understand
Applications and agents
- Prompt
- GraphData
- React / Vue / Web
Public API
- Graph
- register()
- extensionFactory()
- runLayout()
- Public types
Graph runtime
- DataModel
- Layout & Transform
- RenderScheduler
- InteractionDispatcher
- Behavior & Plugin
Rendering and picking
- regl Programs
- GPU Picking
- Label overlay
- Combo underlay
Browser platform
- WebGL2 → WebGL1
- DOM & Canvas
- Worker
- ResizeObserver
- rAF
The diagram shows stable responsibilities only. See Technical architecture for data flow, update paths, and extension boundaries.