用 AI 构建 G6Lite 图
使用 G6Lite Skill、本地 AI Agent 与 Sive 创建、排查和优化关系图
AI for graph visualization
把意图变成可验证的关系图
G6Lite Skill 帮助 AI Agent 识别数据规模、布局、交互和浏览器边界，再使用当前包根 API 生成可以继续验证和迭代的实现。
两种使用方式
本地 Agent + G6Lite Skill
让支持 Skill 的 Agent 按 G6Lite 的真实 API、能力边界和性能路径完成开发。
Sive 在线问答
带着 G6Lite 上下文发起在线提问。回答能力取决于 Sive 当前知识库状态。
理解技术架构
了解数据、布局、调度、WebGL 渲染、Canvas 信息层与扩展如何协作。
在本地使用 Skill
将 GitHub 中的 skills/antv-g6lite-graph
目录作为 Skill 源交给支持 Skill 的 Agent，然后在任务中显式调用：
Use $antv-g6lite-graph to build a force-directed dependency graph
with hover highlighting and node dragging.也可以直接让 Agent 从 GitHub 安装：
Install the skill from
https://github.com/antvis/G6Lite/tree/master/skills/antv-g6lite-graphSkill 会重点约束：
- 只从
@antv/g6-lite包根导入，不依赖src/或dist/深层路径。 - 使用 ESM 和真实浏览器的 DOM、Canvas、WebGL 生命周期。
- 只生成 G6Lite 已支持的节点、边、布局、Behavior、Combo 和扩展能力。
- 区分 G6Lite 与 G6 v5，不机械复制插件、事件或元素配置。
- 对大图优先检查布局、标签密度、增量更新、DPR、GPU 和真实设备。
适合交给 Agent 的任务
| 任务 | 推荐提示词重点 |
|---|---|
| 创建关系图 | 数据字段、节点/边数量、布局、容器尺寸 |
| 增加交互 | 选择、拖拽、Tooltip、高亮、框选或套索 |
| 迁移 G6 v5 | 先列能力差异和不支持项，再修改代码 |
| 排查空白画布 | 容器尺寸、数据端点、WebGL、生命周期和版本 |
| 优化大图 | 首屏、布局、标签、状态 patch、内存和真实设备 |
| 创建扩展 | 扩展类别、生命周期、公开 ExtensionContext 和清理 |
推荐工作流
- 澄清输入确认数据、规模、坐标、布局、交互和运行环境。
- 最小渲染先完成可见、可销毁、只使用包根 API 的最小图。
- 逐层增强依次加入样式、布局、Behavior、状态、Combo 与扩展。
- 真实验证在目标浏览器、DPR、GPU 和容器尺寸下检查结果。
AI 生成的代码仍需要类型检查、浏览器验证和业务数据验收。不要把 Agent 输出直接视为生产结果。
Agent 需要理解的引擎
使用方与 Agent
- Prompt
- GraphData
- React / Vue / Web
公开 API
- Graph
- register()
- extensionFactory()
- runLayout()
- Public types
图运行时编排
- DataModel
- Layout & Transform
- RenderScheduler
- InteractionDispatcher
- Behavior & Plugin
渲染与拾取
- regl Programs
- GPU Picking
- Label overlay
- Combo underlay
浏览器平台
- WebGL2 → WebGL1
- DOM & Canvas
- Worker
- ResizeObserver
- rAF
首次渲染数据 → Transform → 布局 → DataModel → WebGL 与 Canvas 图层 → 页面
高频更新状态或位置 → RenderScheduler → GPU Buffer Patch 或 Overlay Redraw
架构图只展示稳定职责层。详细的数据流、更新路径和扩展边界见技术架构。