VisActor全新图可视化开源项目：VGraph

VGraph 正式开源了。如果你正在做数据血缘、知识图谱、关系网络、树图分析、流程编排或图编辑器，现在可以用一套更贴近真实业务场景的关系图库，直接把复杂关系变成可读、可交互、可落地的产品体验。

什么是 VGraph：面向真实业务场景的关系图库

VGraph 是一套面向真实业务场景的关系图库，聚焦关系数据的可视化表达、交互编辑与产品化落地。

关系图产品常常不是输在算法或数据，而是输在体验：用户看不明白、交互不顺、细节做不深、工程接不住。

VGraph 这次开源，带来的价值就在于：让关系图不再只是一个技术展示能力，而是一种可以进入日常业务系统的产品能力。

一句话总结：如果你希望把复杂关系做成真正可用、可交互、可持续演进的业务产品，VGraph 值得加入你的技术选型清单。

VGraph能解决什么问题

很多团队都遇到过同一个问题：关系数据不难拿到，难的是把它讲清楚、跑顺畅、做得像产品。

图画出来了，但节点一多就乱，用户看不懂重点
能展示静态关系，但缺少真实业务需要的交互和编辑能力
想做复杂节点、信息卡片、右键菜单、Tooltip、表单编辑，接入成本很高
图分析、图编辑、树图、血缘、流程场景往往要拼很多能力，工程复杂度高

VGraph 想解决的，正是这类"从图形展示到业务产品"之间的最后一公里。它不只关注"把点和边画出来"，更强调复杂关系的表达能力、交互能力和产品落地能力。

关系表达更完整：支持有向图、关系图、树图、嵌套布局、力导向布局等多种结构
业务组件更友好：内置节点、连线、分组、图例、交互行为，同时支持高度定制
React 节点能力强：复杂节点、标签页、按钮、表单、状态切换都能自然接进来
图编辑能力更贴近产品：适合做流程编排、节点编辑、自由排布、批量操作等场景
从展示到分析一体化：既能做看板式分析图，也能做可交互、可操作的业务图应用

一眼就能想到的应用场景

数据血缘：表级血缘、字段级血缘、上下游影响分析
知识图谱：人物关系、企业关系、事件关系、社交网络
流程与编排：DAG 流程、审批流、任务编排、流水线编辑
树状分析：组织架构、行政区划、分层指标、目录结构
图编辑器：低代码流程设计器、策略编辑器、图形化配置面板

现在就开始

如果你想先感受 VGraph 的表达力，不需要从零造轮子，最快可以按下面这条路径开始：

先跑示例：直接打开官方文档里的 demo，优先看数据血缘、知识图谱和流程编排几个代表场景。
再装依赖：在你的前端项目里接入核心包，快速把一张关系图先跑起来。

bash 复制代码

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

第三步，替换成你的业务数据：先用真实节点和边把业务关系映射出来，再逐步叠加复杂节点、交互操作和编辑能力。

经典业务场景

如果你希望快速判断 VGraph 是否适合自己的业务，最直接的方法不是先看参数表，而是拿一个典型场景做最小验证。下面这 4 类场景，基本覆盖了大多数关系图产品的第一批落地需求。

数据血缘

适合表级 / 字段级上下游追踪、影响范围分析和链路排查。

对应 Demo ：www.visactor.io/vgraph/demo...

ini 复制代码

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}
/>;

知识图谱

适合人物、企业、事件、资产之间的关系探索，从"看关系"走向"找线索"。

对应 Demo ：www.visactor.io/vgraph/demo...

less 复制代码

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 });

流程编排与图编辑器

适合 DAG、审批流、任务编排和低代码流程设计器，让图既能展示，也能编辑。

对应 Demo ：www.visactor.io/vgraph/demo...

arduino 复制代码

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 });

树状分析与层级关系

适合组织架构、目录结构、分层指标和行政区划等树图场景。

对应 Demo ：www.visactor.io/vgraph/demo...

css 复制代码

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' }]
});

如果你正在评估关系图产品的技术底座，最直接的方式就是拿一个真实业务场景试一遍，看看 VGraph 能不能把你的关系数据真正做成产品。

GitHub 开源仓库： github.com/VisActor/VG...
官方文档与示例：www.visactor.com/vgraph