RG Template Vault
Covers over 200 graph application scenarios, providing 7 Studio domains and enterprise-grade delivery support.
relation-graphGraph Viz & Edit
Open Source SDK · GraphPilot · Expert KB
Build stable, interactive complex graph applications with relation-graph
relation-graph is an MIT-licensed relationship graph component for React, Vue, and Svelte relationship data visualization. Through its slot-based customization model, users can fully customize graph elements with plain HTML elements, Vue components, or React components, while its practical API set helps developers build interactive graph applications with less friction. relation-graph also uses an LLM-friendly architecture and provides knowledge content, including Skills and knowledge bases, designed to work with AI tools.
Native Support
React
Vue 3
Vue 2
Svelte
HTML
From visual experience to data structures, interaction logic, and technical concepts,
relation-graph stays remarkably consistent across platforms, end to end.
This reflects relation-graph's rigorously coherent architecture and its role as a reliable graph technology foundation---View architecture
Combined with AI + the RG graph expert knowledge base,
you only need to write once,
complex graph visualization / graph editing applications adapt cleanly across every platform.
Cross-platform is not the point. What matters is that relation-graph is flexible enough that, combined with the RG Graph Expert Knowledge Base, natural-language intent can directly drive implementation---View knowledge base
The 200+ multi-platform scenario examples on this site are built this way.
MIT licensed
LLM friendly
Mature, stable, and deeply flexible
Native isomorphic support across platforms
SSR support
Enterprise-ready
Graph View
Graph Expert AI Knowledge Base
We provide relation-graph AI knowledge assets and skills that directly enhance Codex / Claude Code, so AI can better understand requirements, data, and implementation in graph application development tasks.
RG GraphPilot
A graph-drawing agent built on the RG Graph Expert Knowledge Base and hundreds of relation-graph scenario patterns. It generates graph application code that remains AI-iterable, can interact with your own system code, and supports every frontend stack; RG GraphPilot better understands scenarios, data, and algorithms.
MIT licensed
Fit for technical validation and production projects
View on GitHub5 frontend stacks
Provides a consistent API and rendering experience across Vue 2, Vue 3, React, Svelte, and native HTML, with SSR support.
View architecture docs200+ scenarios + display/edit
Covers full graph application needs from relationship visualization to advanced graph editors, with reusable examples.
Browse examplesLLM friendly
We provide relation-graph AI knowledge assets and skills that directly enhance Codex / Claude Code.
View KB and skillsEnterprise services
Backed by support experience with nearly a hundred enterprise users to land graph applications quickly and methodically.
View enterprise servicesinstall-react.sh
npm
npm install @relation-graph/react Ready-to-Use Scenario Code Examples
RG Template Vault
Scenarios are grouped by real-world usage so you can quickly find relevant relation-graph examples. Hover a category on the left to inspect descriptions and thumbnails on the right.
Supply Chain and Industry Networks
This category focuses on production, trade, and circulation relationships across multi-party networks. - Map suppliers, channels, warehouses, and partner dependencies. - Present hierarchy, grouping, and map-linked operational context. - Support analysis of chain structure and collaboration paths.
From Data Presentation to Complex Graph Data Management
relation-graph is not only a reliable graph viewer/editor component, but also a capability foundation for delivering production-grade graph applications quickly and effectively.
Rich layouts in motion make relationship data more vivid
This example shows relation-graph's native support for multiple layouts. The graph moves smoothly between them, so data is not merely placed on screen, but presented in a richer, more vivid, and more expressive way.
Loading graph showcase
AI products
Generate graph applications with AI and give AI better graph knowledge
RG GraphPilot
A graph-drawing agent built on the RG Graph Expert Knowledge Base and hundreds of relation-graph scenario patterns. It generates graph application code that remains AI-iterable, can interact with your own system code, and supports every frontend stack; RG GraphPilot better understands scenarios, data, and algorithms.
- Outputs code that can continue to be understood, edited, and iterated by AI
- Can interact with and integrate into your existing system code
- Supports Vue 2, Vue 3, React, Svelte, and native HTML stacks
- Understands scenarios: can choose the most suitable viewing or editing approach from the needs and data you describe
- Understands algorithms: is fluent in dozens of professional graph layout and graph operation algorithms, including center, force, multiple tree layouts, workflow, area-based layouts, shortest path, data flow routing, grouping, undo and redo, and drag-to-create links
RG-Dev Skill
A relation-graph specialist skill for Codex, Claude Code, and local AI coding agents. It helps agents implement graph visualization and graph editing features inside real projects.
- Packages relation-graph guides, type notes, and API guardrails
- Covers React, Vue3, Vue2, Svelte, and Web Components
- Includes scenario patterns from layout and use-case examples
- Available for Pro, Team, and Enterprise users to download locally
Graph Expert AI Knowledge Base
We provide relation-graph AI knowledge assets and skills that directly enhance Codex / Claude Code, so AI can better understand requirements, data, and implementation when building graph applications.
- Strengthens AI understanding of relation-graph APIs, options, layout algorithms, and interaction patterns
- Supports end-to-end reasoning from requirement input to data modeling, visual structure design, and code implementation
- Covers advanced scenarios including complex layouts, rich interactions, industrial-grade canvas software, and AI workflow editors
- Helps produce maintainable, continuously evolvable code structures and implementation guidance with less trial-and-error
Whether you are building a new graph product or upgrading an existing system, these knowledge assets significantly improve the professionalism and deployability of AI-generated outputs.
Enterprise services
AI capability licensing and enterprise services
The relation-graph team is specialized in relationship-data analysis and visualization. We have supported close to one hundred enterprise users and helped them roll out graph applications into their own systems in an orderly and efficient way, building strong trust over time. We also know a practical truth: even when a component is easy to use, well-documented, and rich in examples, that alone is still not enough for every delivery challenge. That is why we provide human technical support services, using our expertise to help enterprise users land faster and spend more time on higher-value work.
Implementation and long-term services
Support integration, rollout, version governance, stable operation, and dedicated needs with services that match real enterprise delivery instead of generic product support.
RG Graph Expert KB commercial licensing
Provide commercial-use licensing for the RG Graph Expert Knowledge Base across internal AI, RAG, agent, and knowledge-enhancement workflows.
RG GraphPilot private onboarding
Run the RG GraphPilot drawing agent inside your company or integrate it directly into internal platforms, copilots, engineering consoles, and business software.
FAQ
Common questions
Quickly understand licensing, AI products, enterprise services, and typical usage scenarios.
Is relation-graph open source?
Yes. The SDK foundation remains MIT licensed and can be used for evaluation and commercial project integration.
What is the difference between GraphPilot and RG Graph Expert KB?
RG GraphPilot is a graph-drawing agent built on the RG Graph Expert Knowledge Base and hundreds of relation-graph scenario patterns. It generates graph application code that remains AI-iterable, can interact with your own system code, and supports every frontend stack; RG GraphPilot better understands scenarios, data, and algorithms. RG Graph Expert KB is the official knowledge asset and private-use licensing target behind that capability.
Can RG Graph Expert KB be imported into internal AI or RAG systems?
Yes. It is designed as an official knowledge asset for internal AI, RAG, prompt, and agent workflows.
How does Enterprise relate to knowledge-base authorization?
Enterprise plans can include commercial-use knowledge-base authorization, and teams that only need the knowledge base can also ask for a standalone standard license.
Does it support graph editors, whiteboards, and heavier interaction scenarios?
Yes. relation-graph can be used for graph editors, whiteboards, element-line editing, and other heavy interactive workspaces.
Where should an enterprise team start?
Start from the services page, describe your deployment model, business scenario, and licensing needs, and we can recommend the right path.