概览
本页是 relation-graph 架构与能力的总览页。它对应英文版 Overview，重点说明 relation-graph 作为一个跨平台的图展示与图编辑组件体系，如何在统一核心之上，向 Vue 2、Vue 3、React、Svelte 与 Web Components 提供一致能力。
能力范围
- 通过节点与连线表达复杂关系数据，适用于知识图谱、组织架构、拓扑关系、流程建模等场景。
- 提供自动布局、画布缩放和平移、节点拖拽、交互编辑、插槽定制、性能模式等完整能力。
- 在不同前端框架下共享同一套核心数据结构、事件模型、布局系统与渲染逻辑。
系统架构
- relation-graph 采用“共享核心 + 平台适配器”的设计。
- 核心能力集中在
RelationGraphCore及其相关模型、布局器、工具方法中。 - Vue、React、Svelte 与 Web Components 只负责响应式集成、组件封装和平台生命周期对接。
数据模型
- 用户输入层主要由
JsonNode、JsonLine等 JSON 结构组成。 - 运行时层会转换为
RGNode、RGLine、RGLink、RGFakeLine等增强对象。 - 数据在进入系统后会补齐默认值、运行时状态、布局信息与渲染辅助字段。
组件组织
- 顶层入口组件负责创建图实例并协调 UI 结构。
- 节点、连线、文字、连接点、工具栏、小地图、编辑控制器等组件在统一上下文中协作。
- 平台组件只负责渲染与事件桥接，核心业务逻辑并不分散在各个平台组件内部。
配置、布局与交互
- 配置系统统一管理布局、样式、交互、性能模式、编辑模式与模板行为。
- 布局系统支持树形、力导向、中心布局、圆形布局、固定布局等多种策略。
- 交互系统支持点击、拖拽、缩放、创建节点、创建连线、编辑控制点等操作。
性能与文件结构
- 对大图场景，系统提供视口裁剪、EasyView、Canvas 渲染等性能优化手段。
- 仓库采用多包结构，平台包、核心模型、类型定义与站点文档相互独立但协同工作。
开始阅读建议
如果你第一次接触 relation-graph，建议按下面顺序阅读：