什么是 relation-graph
relation-graph 是一个面向关系数据可视化与图形编辑的前端组件。它适合用于构建流程编辑器、知识图谱工具、系统架构图、关系数据分析看板等应用。
核心能力
- 原生支持 React、Vue3、Vue2、Svelte 与 HTML/Web Components。
- 内置多种布局算法（树布局、中心布局、力导向等），并支持集成第三方布局器。
- 支持通过插槽与 CSS 深度定制节点、连线、画布和视图层内容。
- 提供完善的运行时 API，可动态增删改节点和连线。
- 提供丰富的事件与 hooks，便于实现复杂交互逻辑。
- 支持 fake line 与 connect target，可连接非节点元素，满足复杂建模需求。
典型场景
- 组织架构与股权穿透图。
- 数据血缘与依赖关系图。
- 流程编排与工作流编辑器。
- Agent 编排与知识图谱构建工具。
- 具备交互编辑能力的关系图设计器。
安装
# Vue2
npm install --save @relation-graph/vue2
# Vue3
npm install --save @relation-graph/vue
# React
npm install --save @relation-graph/react
# Svelte
npm install --save @relation-graph/svelte
# HTML / Web Components
npm install --save @relation-graph/web-components
旧包名（例如
relation-graph-vue3）依然可用。