About relation-graph

relation-graph is not a component that only draws dots and lines.
It is a relationship-data application engine for real business systems: capable of high-quality data presentation, advanced graph editing, and runtime data orchestration.

If you are building organization relationship maps, industry-chain graphs, system topology views, workflow editors, Agent orchestration tools, knowledge graph platforms, or any application that combines relationship data with interactive editing, relation-graph has one clear goal: help you deliver production-ready products faster instead of stopping at demo stage.

What relation-graph really is

relation-graph is a graph component ecosystem with multi-frontend support, including:

• Vue 2 / Vue 3 / React / Svelte / HTML (Web Components)
• both visualization and graph-editing modes
• a complete capability path from lightweight adoption to deep extension

It is not designed as a single visualization widget. It is built around the full lifecycle of graph applications: data models, layout engine, rendering layer, interaction events, editing controllers, state management, instance APIs, styling system, and export capabilities that work together.

What it can do for you

1. Make relationship data professional, clear, and expressive

You can use built-in layouts for immediate readability, or integrate third-party layout engines for more complex structures.
With multi-layer slot customization for nodes, lines, canvas, and view plus CSS control, you can render the same dataset into very different product experiences instead of being locked into one visual skin.

2. Upgrade from “viewable” to “editable”

relation-graph is built for editing scenarios from day one:
node and line creation, endpoint adjustment, path editing, box selection, multi-select, alignment guides, undo or redo, contextual toolbars, context menus, and runtime controls can be combined into a full editor experience.

That means you can ship workflow orchestration, relationship maintenance, and architecture-design capabilities quickly, without building a graph-editing foundation from scratch.

3. Drive business logic with runtime APIs, not the other way around

relation-graph provides a complete graphInstance API and event system for CRUD, state coordination, path analysis, viewport control, and incremental data updates.
You can integrate it directly into your business state machine, permission model, audit process, and backend pipelines to build truly maintainable graph applications.

4. Connect almost anything

With RGFakeLine and RGConnectTarget, connections are not limited to standard nodes.
You can connect fields inside cards, external DOM elements, panel controls, map markers, and arbitrary canvas elements, so relationships can reflect real business semantics more naturally.

Why relation-graph is trustworthy

relation-graph’s value is not only its feature breadth, but also its delivery quality and long-term practical accumulation:

• extensive scenario experience proven in real production environments, not just demos
• high-frequency problem-solving experience from ongoing conversations with thousands of real paying users
• hands-on technical support experience with nearly one hundred enterprise customers, helping teams land graph applications in their own systems in an orderly and fast way
• a complete engineering support system: docs, examples, capability layering, and issue-to-solution feedback loops

This represents a core strength: not just “can be built,” but “can go live, evolve, and be maintained over time.”

Get started now

• Documentation: https://relation-graph.com/docs
• Examples (200+ professional examples): https://relation-graph.com/examples
• GitHub: https://github.com/seeksdream/relation-graph

If you want to build relationship-data applications that are truly deployable, extensible, and continuously evolvable, relation-graph is a proven path.