Introduction
relation-graph is a graph visualization and editing component for relationship data. It is designed for building tools such as workflow editors, knowledge graph applications, architecture mapping tools, and data relationship explorers.
Why relation-graph
- Native support for Vue2, Vue3, React, Svelte, and HTML/Web Components.
- Rich built-in layouts (tree, center, force) and support for third-party layout engines.
- Strong customization with slots, CSS, and reusable inner components.
- Powerful runtime APIs for adding, removing, and updating nodes and lines.
- A comprehensive event and hook system for interaction-driven applications.
- Fake line and connect target capabilities for connecting non-node elements.
Common Scenarios
- Org chart and ownership graph.
- Data lineage and dependency graph.
- Process or pipeline editor.
- Agent orchestration and knowledge graph tooling.
- Diagram-style relation board with interactive editing.
Install
# 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
Legacy package names such as
relation-graph-vue3are still available.