relation-graph: Relationship Data Visualization for React, Vue, and Svelte

What relation-graph Renders and Who Uses It

relation-graph renders nodes and directed edges from a JSON data structure. The typical use cases listed in the README include knowledge graphs, organization charts, equity structure diagrams, and group relationship graphs. The library also supports a drawing board mode where you place arbitrary content on a canvas, assign IDs to elements you want to connect, define element lines between them, and get drag-and-drop, zoom, and API-driven interactions for free.

The library targets frontend developers who already work in React, Vue 2, Vue 3, Svelte, or Web Components and need a graph visualization that feels native to their framework. Unlike D3-based solutions that require you to handle the DOM layer yourself, relation-graph delivers a component that accepts data and renders interactively without manual SVG manipulation.

The package.json lists keywords including knowledge graph, graph editor, graph visualization, network topology, flowchart, force layout, DAG, UML, and ER diagram, which reflects the range of diagram types the library targets.

The Slot-Based Customization Model

The defining feature of relation-graph is how it handles custom node rendering. Rather than a fixed set of built-in shapes, the library exposes slots where you provide a React or Vue component. Whatever that component renders becomes the node appearance. The README describes this as users being able to fully customize graphical elements using common HTML elements, Vue components, React components through slots.

In the React example from the README, a CustomNode component receives RGNodeSlotProps and renders one of several Lucide React icons based on a data field:

import React from 'react';
import type { RGNodeSlotProps } from '@relation-graph/react';
import {HelpCircle, Monitor, Sandwich, Trophy, Truck, Utensils} from "lucide-react";

const IconSwitcher = ({ iconName, size = 24, color = 'currentColor' }) => {
    const props = { size, color };
    switch (iconName) {
        case 'desktop':
            return <Monitor {...props} />;
        case 'burger':
            return <Sandwich {...props} />;
        case 'delivery_truck':
            return <Truck {...props} />;

This pattern means the same relation-graph core can render data-driven org charts, icon-based network diagrams, or custom dashboard node shapes without any library modification.

Installing relation-graph

Each supported framework has its own package. Install the one matching your project:

# React
npm install --save @relation-graph/react
# Vue3
npm install --save @relation-graph/vue
# Vue2
npm install --save @relation-graph/vue2
# Svelte
npm install --save @relation-graph/svelte

For Web Components, the library is available via esm.sh:

import { ... } from "https://esm.sh/@relation-graph/web-components";

The package names follow a consistent pattern: @relation-graph/ followed by the framework name. Import the default export in your component file:

import RelationGraph from '@relation-graph/react'

The React package requires wrapping your graph component in RGProvider at the application level, as shown in the README. No additional CSS imports or configuration files are needed for basic usage.

Complete starter projects for all supported frameworks are available in separate repositories linked from the README, each runnable on CodeSandbox.

Data Format and Core API

Graph data is passed as a JSON object with a rootId, a nodes array, and a lines array. Each node has an id and a text property at minimum, with optional width, height, and a data object for custom fields. Lines define edges between nodes by referencing source and target node IDs.

From the React example in the README:

const staticJsonData: RGJsonData = {
    rootId: '2',
    nodes: [
        { id: '2', text: 'Initrode', width: 100, height: 100, data: { myicon: 'delivery_truck' } },

The library exposes an imperative API for dynamic interactions. The README mentions the API supports zooming, dragging, and programmatic node operations, which is relevant for applications where the graph data changes at runtime in response to user actions or live data.

The repository contains a knowledge-for-ai/ directory. The README notes that relation-graph's architecture is LLM-friendly, meaning the library's structure and knowledge are designed to be easy for language models to understand. This is a design consideration rather than a runtime feature.

v3.x Multi-Platform Architecture

The v3.x release rebuilt the library around a shared core. The README links to the multi-platform architecture documentation at relation-graph.com/docs/multi-platform-architecture. The packages/ directory in the repository holds the framework-specific adapters while the core logic is shared.

Prior to v3, the Vue 2, Vue 3, and React packages were maintained separately and could diverge. The v3 architecture addresses this by keeping rendering-agnostic graph logic in a single codebase and providing framework-specific entry points.

The repository structure has separate release tracks: v3 packages live under one set of version numbers (currently 3.0.13) while the older Vue 2 package (relation-graph-vue2) at version 2.2.11 represents the previous generation. Both coexist in the release history.

Limitations and Comparisons

relation-graph's documentation is hosted at relation-graph.com, which is a separate site from the GitHub repository. The README does not document the data format or API options in the README itself; it links out to the documentation site. Engineers evaluating the library before consulting the docs will find limited inline reference material in the repository. The online demos at relation-graph.com/examples are the most direct way to assess whether the built-in interaction model fits your requirements before reading the full API documentation.

For layout algorithms, the README mentions force layout, DAG, and tree layouts in the package.json keywords but does not describe them in the README text. The actual algorithm options would need to be confirmed in the documentation at relation-graph.com.

ReactFlow is a commonly used alternative in the React ecosystem. ReactFlow provides a similar node-and-edge diagram component with extensive built-in controls, TypeScript support, and handles (connection points on nodes). Where relation-graph's strength is slot-based node customization with minimal configuration, ReactFlow has a larger set of built-in node types and more detailed interactive edge handling. relation-graph's multi-framework support (Vue 2, Vue 3, Svelte) is a differentiator for teams that are not React-only.

License, Maintenance, and Community

relation-graph is licensed under MIT, with no additional restrictions. The package.json lists no runtime dependencies, which keeps the install size predictable regardless of which framework package you install. The devDependencies include ESLint plugins for Vue and React, TypeScript, and Prettier.

The last push was on 2026-05-20. The most recent release, v3.0.13, was published on 2026-05-08. The project is maintained by WanLian ([email protected]) according to the package.json author field, and contact is also available via QQ and WhatsApp as listed in the README.

Complete working sample projects are linked for each framework, including CodeSandbox links for Vue 2, Vue 3, React, Svelte, and Web Components. These are separate repositories under the relation-graph GitHub organization and provide the fastest way to see the component rendering live data before committing to integrating it into a production codebase.

Editorial conclusion

relation-graph is a practical choice for developers who need to display hierarchical or network-style relationship data inside a React, Vue, or Svelte application and want to customize how individual nodes look without forking the library. The slot model is the main differentiator: you pass your own React or Vue components as node renderers rather than working with a fixed set of shapes. The last push was on 2026-05-20. The library is MIT-licensed and has no runtime dependencies, as shown in its package.json. Before adopting it, run the live demos at relation-graph.com to verify that the built-in layout algorithms (force, DAG, tree) match your data structure.

Frequently asked questions

Official sources

1. License: MIT
2. Project website
3. README
4. relation-graph/relation-graph on GitHub
5. Releases