← Back to the summary

VGraph Ships a Relationship Graph Library Built for Product UX, Not Just Rendering

VGraph is now officially open source. If you're working on data lineage, knowledge graphs, relationship networks, tree analysis, process orchestration, or graph editors, you can now use a relationship graph library that's closer to real business scenarios, directly turning complex relationships into readable, interactive, and product-ready experiences.

What is VGraph: A Relationship Graph Library for Real Business Scenarios

VGraph is a relationship graph library built for real business scenarios, focused on visual expression, interactive editing, and productization of relational data.

Relationship graph products often fail not because of algorithms or data, but because of experience: users can't understand them, interactions are clunky, details aren't deep enough, and engineering can't keep up.

The value VGraph brings with this open-source release is: making relationship graphs not just a technical demo capability, but a product capability that can enter everyday business systems.

In one sentence: If you want to turn complex relationships into truly usable, interactive, and continuously evolving business products, VGraph deserves a spot on your technology shortlist.

What Problems VGraph Solves

Many teams have encountered the same problem: relational data isn't hard to obtain; what's hard is making it clear, running it smoothly, and making it feel like a product.

The graph renders, but as nodes increase it becomes chaotic, and users can't grasp the key points
It can display static relationships, but lacks the interaction and editing capabilities real business demands
Implementing complex nodes, info cards, right-click menus, tooltips, and form editing comes with high integration costs
Graph analysis, graph editing, tree diagrams, lineage, and process scenarios often require stitching together many capabilities, leading to high engineering complexity

VGraph aims to solve exactly this "last mile" from graphical display to business product. It doesn't just focus on "drawing nodes and edges," but emphasizes the ability to express complex relationships, interaction capabilities, and product landing ability.

More complete relationship expression: Supports directed graphs, relationship graphs, tree diagrams, nested layouts, force-directed layouts, and more
More business-friendly components: Built-in nodes, edges, groups, legends, and interaction behaviors, while supporting deep customization
Strong React node capabilities: Complex nodes, tabs, buttons, forms, and state switching can all be naturally integrated
Graph editing capabilities closer to products: Suitable for process orchestration, node editing, free arrangement, batch operations, and similar scenarios
Integrated from display to analysis: Can serve as both dashboard-style analysis graphs and interactive, operable business graph applications

Application Scenarios You Can Imagine at a Glance

Data Lineage: Table-level lineage, field-level lineage, upstream/downstream impact analysis
Knowledge Graph: Person relationships, enterprise relationships, event relationships, social networks
Process & Orchestration: DAG processes, approval flows, task orchestration, pipeline editing
Tree Analysis: Organizational structures, administrative divisions, hierarchical indicators, directory structures
Graph Editor: Low-code process designer, strategy editor, graphical configuration panel

Get Started Now

Welcome to try VGraph and see if it can become the foundation for your next-generation relationship graph product.

Quick Start

If you want to first experience VGraph's expressive power, you don't need to build from scratch. The fastest path is:

Run the examples first: Open the demos in the official documentation directly, prioritizing representative scenarios like data lineage, knowledge graphs, and process orchestration.
Then install dependencies: Integrate the core packages into your frontend project and quickly get a relationship graph running.

npm install @visactor/vgraph @visactor/react-vgraph @visactor/react-vgraph-ui

Third step, swap in your business data: First map out business relationships using real nodes and edges, then gradually layer on complex nodes, interactive operations, and editing capabilities.

Classic Business Scenarios

If you want to quickly determine whether VGraph fits your business, the most direct method isn't checking the parameter table first, but doing a minimal validation with a typical scenario. The following 4 categories basically cover the first batch of landing requirements for most relationship graph products.

1. Data Lineage

Suitable for table-level / field-level upstream/downstream tracing, impact scope analysis, and link investigation.

Corresponding Demo: https://www.visactor.io/vgraph/demo/solutions/dataLineage

import { GraphStructure } from '@visactor/vgraph';
import { DataLineageGraph } from '@visactor/react-vgraph';

const data = new GraphStructure({
  directed: true,
  nodes,
  edges
});

<DataLineageGraph
  data={data}
  baseTableId="table_a"
  size={[width, height]}
  minDepth={-2}
  maxDepth={2}
/>;

2. Knowledge Graph

Suitable for exploring relationships among people, enterprises, events, and assets, moving from "seeing relationships" to "finding clues."

Corresponding Demo: https://www.visactor.io/vgraph/demo/force/redMansions

import { Graph, defaultForces, ForceX, ForceY, ForceLink } from '@visactor/vgraph';

const forces = defaultForces();
forces.set('posX', new ForceX({ options: { x: width / 2, strength: 0.05 } }));
forces.set('posY', new ForceY({ options: { y: height / 2, strength: 0.05 } }));
forces.set('link', new ForceLink({ options: { distance: 50 } }));

const graph = new Graph({
  container: 'container',
  width,
  height,
  layout: { type: 'force', options: { forces } }
});

graph.data({ nodes, edges });

3. Process Orchestration & Graph Editor

Suitable for DAGs, approval flows, task orchestration, and low-code process designers, making the graph both displayable and editable.

Corresponding Demo: https://www.visactor.io/vgraph/demo/editor/commonFlowEditorForm

import { CommonFlowEditor } from '@visactor/vgraph';

const editor = new CommonFlowEditor({
  container: 'container',
  graphSize: [width, height],
  renderMode: 'dom',
  setDefaultNode() {
    return {
      width: 140,
      height: 40,
      anchors: [
        { show: 'hover', position: [0, 0.5] },
        { show: 'hover', position: [1, 0.5] }
      ]
    };
  },
  setDefaultEdge(edgeData) {
    return {
      type: edgeData.target ? 'turningLine' : 'line',
      endArrow: true,
      radius: 10
    };
  }
});

editor.getGraph().data({ nodes, edges });

4. Tree Analysis & Hierarchical Relationships

Suitable for organizational charts, directory structures, hierarchical indicators, and administrative division tree scenarios.

Corresponding Demo: https://www.visactor.io/vgraph/demo/tree/basic

import { TreeGraph } from '@visactor/vgraph';

const graph = new TreeGraph({
  container: 'container',
  width,
  height,
  layout: {
    type: 'dendrogram',
    options: { direction: 'LR', radial: true }
  }
});

graph.data({
  id: 'root',
  children: [{ id: 'child1' }, { id: 'child2' }]
});

If you're evaluating the technical foundation for a relationship graph product, the most direct approach is to test it with a real business scenario and see whether VGraph can truly turn your relational data into a product.