Welcome to relation-graph Documentation Center
relation-graph is a highly customizable and powerful front-end component for visualizing and editing complex relationship data. Whether you are building simple organization charts and social networks, or developing complex knowledge graph building tools, workflow editors, Agent orchestration tools, and relational database clients, relation-graph provides comprehensive underlying support for your applications.
๐ฆ Choose Your Framework
relation-graph provides native support for mainstream front-end platforms, allowing you to use it completely according to the programming paradigms of these frameworks. You can choose the specific package for your tech stack:
- โ๏ธ 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
๐งญ Documentation Guide
To help you quickly master relation-graph, our documentation is carefully organized from basic concepts to advanced customizations. Please choose a section to start your journey:
๐ 1. Getting Started
This is your starting point. Here, you will learn the core concepts of the component (such as Nodes, Lines, Graph Instances, and Canvas) and learn how to install and run your first graph application across different platforms,.
๐ 2. Data & State Management
Data is the core of the graph. This module breaks down the data models for nodes (JsonNode / RGNode) and lines (JsonLine / RGLine),. You will learn how to dynamically add, remove, and update data using the powerful graphInstance APIs, and how to access reactive graph states via RGHooks,.
๐จ 3. Options, Styling & Advanced Customization
Explore how to control the canvas appearance and interactive behavior through the global configuration object RGOptions,. Most importantly, you will master relation-graphโs unique Slot System: by using slots like #node, #line, and #canvas, you can use JSX or native components to customize the visual presentation completely, allowing nodes to display images, videos, forms, or any complex DOM structure,.
๐ธ๏ธ 4. Layout Engine
Layout determines the morphology of the graph. Understand and utilize the rich built-in layout algorithms, including tree layout, force-directed layout, center layout, smart-tree, and io-tree,. If you have more complex arrangement requirements, relation-graph offers an open layout architecture that seamlessly integrates with third-party professional algorithm libraries like d3-force, dagre, or elkjs,.
๐ฑ๏ธ 5. Interaction & Inner UI
The component is not only for display but also serves as a robust editor foundation:
- Event System: Utilize over 30 event hooks (
RGListeners), such asonNodeClick,onNodeDragStart,onLineClick, and canvas zooming/dragging,. - Built-in Widgets: Learn how to integrate out-of-the-box inner components, including the ToolBar (
RGToolBar), MiniView (RGMiniView), reference lines (RGEditingReferenceLine), and node/line editing controllers,. - Connect Anything: Master the combination of
RGFakeLineandRGConnectTargetto break the limitations of standard nodes, allowing lines to connect to internal node elements or any blank space on the canvas,.
๐ 6. API Reference
A detailed dictionary for developers. It contains all the public methods of RelationGraphInstance (e.g., zoomToFit, moveToCenter, getNodes) and comprehensive TypeScript type definitions (like RGNodeShape, RGLineShape, RGJunctionPoint, etc.) that underpin the component,.
โก Performance Tip
High-Performance Rendering: When dealing with massive amounts of relationship data, do not forget to enable performanceMode. Once enabled, it optimizes rendering and ensures a smooth zooming and interaction experience, even when handling up to 50,000 nodes and lines on standard client devices,.