欢迎使用 relation-graph 文档中心

relation-graph 是一个极具灵活性、高性能的用于关系数据可视化的前端组件，旨在帮助开发者以图形化的方式展示和编辑复杂的关系数据。无论您是需要构建简单的组织结构图、社交网络图，还是开发复杂的知识图谱构建工具、流程编辑器或Agent 编排平台，这里都为您提供了全方位的指导。

📦 选择您的开发框架

relation-graph 实现了跨平台的核心逻辑，对当前主流的前端框架提供了原生级别的支持。您可以直接选择对应的包开始您的旅程：

⚛️ React: @relation-graph/react
🟢 Vue 3: @relation-graph/vue
🟢 Vue 2: @relation-graph/vue2
🟠 Svelte: @relation-graph/svelte
🌐 纯 HTML / Web Components: @relation-graph/web-components

🧭 文档导读

为了帮助您快速掌握并精通 relation-graph，我们的文档按照从基础入门到深度定制的逻辑进行了精心组织。请根据您的需求选择阅读：

🚀 1. 基础指南 (Getting Started)

这是您的起点。在这里，您将了解组件的核心概念（如节点、连线、图谱实例、画布等），并学习如何在不同的前端框架中引入并运行您的第一个图谱应用,。

📊 2. 数据与状态管理 (Data & State)

图谱的核心是数据。本模块详细剖析了节点 (JsonNode / RGNode) 和连线 (JsonLine / RGLine) 的数据模型,。您将学习如何使用 graphInstance 的强大 API 进行数据的动态增删改查,，以及如何通过 RGHooks 获取响应式的图谱状态数据。

🎨 3. 配置、样式与高级定制 (Options & Customization)

探索如何通过全局配置项 RGOptions 控制画布外观和交互行为。更重要的是，您将在这里掌握 relation-graph 独具特色的插槽系统 (Slots)：通过自定义节点插槽 (#node)、线条插槽 (#line) 以及画布插槽 (#canvas) 等，实现极其自由的视觉呈现（例如在图谱中嵌入图片、表单、视频或粒子动画）。

🕸️ 4. 布局系统 (Layout Engine)

布局决定了图谱的形态。了解并使用组件内置的丰富布局算法，包括树状布局 (tree)、力导向布局 (force)、中心布局 (center) 等。如果您有更复杂的排列需求，这里也提供了接入 d3-force、dagre 或 elkjs 等第三方专业算法库的完整集成方案。

🖱️ 5. 交互与内置组件 (Interaction & Inner UI)

组件不仅用于展示，更是一个强大的编辑器基座。

事件系统：查阅多达 30 种以上的事件监听器（RGListeners），如节点拖拽 (onNodeDragStart)、连线点击 (onLineClick)、画布缩放等。
内置UI组件：学习如何集成开箱即用的小组件，例如工具栏 (RGToolBar)、缩略图 (RGMiniView)、对齐参考线、节点/连线编辑控制器等,。
万物皆可连：掌握 RGFakeLine 与 RGConnectTarget 的组合使用，让连线突破节点的限制，连接到节点内部元素或画布的任意空白位置,。

📖 6. API 参考手册 (API Reference)

为开发者准备的详细字典库。包含 RelationGraphInstance 的所有公开方法字典，以及组件底层核心的 TypeScript 类型定义（如 RGNodeShape, RGLineShape, RGJunctionPoint 等枚举与接口）,。

⚡ 性能与扩展提示

当您处理海量关系数据（高达 5 万个节点与连线）时，别忘了开启图谱的性能模式 (performanceMode)，以确保即使在普通客户端配置下依然能保持流畅的交互体验,。