![]()
流程与编排：DAG 流程、审批流、任务编排、流水线编辑
图编辑器：低代码流程设计器、策略编辑器、图形化配置面板
如果你想先感受 VGraph 的表达力，不需要从零造轮子，最快可以按下面这条路径开始：
先跑示例：直接打开官方文档里的 demo，优先看数据血缘、知识图谱和流程编排几个代表场景。
再装依赖：在你的前端项目里接入核心包，快速把一张关系图先跑起来。
npm install @visactor/vgraph @visactor/react-vgraph @visactor/react-vgraph-ui
第三步，替换成你的业务数据：先用真实节点和边把业务关系映射出来，再逐步叠加复杂节点、交互操作和编辑能力。
如果你希望快速判断 VGraph 是否适合自己的业务，最直接的方法不是先看参数表，而是拿一个典型场景做最小验证。下面这 4 类场景，基本覆盖了大多数关系图产品的第一批落地需求。
数据血缘
适合表级 / 字段级上下游追踪、影响范围分析和链路排查。
![]()
对应 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
});
知识图谱
适合人物、企业、事件、资产之间的关系探索，从“看关系”走向“找线索”。
![]()
对应 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 });
流程编排与图编辑器
适合 DAG、审批流、任务编排和低代码流程设计器，让图既能展示，也能编辑。
![]()
对应 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 });
树状分析与层级关系
适合组织架构、目录结构、分层指标和行政区划等树图场景。
![]()
对应 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' }]
});
如果你正在评估关系图产品的技术底座，最直接的方式就是拿一个真实业务场景试一遍，看看 VGraph 能不能把你的关系数据真正做成产品。
粤ICP备14082021号
免费POC，
零成本试错
