文档传送门 - https://resources.jointjs.com/docs/jointjs/v3.2/joint.html#layout
我是使用的vue，所以，
第一步：先安装 Dagre and Graphlib 依赖
npm install dagre
npm install @dagrejs/graphlib
第二步：引入
import dagre from 'dagre';
import graphlib from 'graphlib';
import * as joint from 'jointjs';
第三步：使用
this.graph = new joint.dia.Graph;
this.paper = new joint.dia.Paper({
el: document.getElementById('model'),
model: this.graph,
"100%",
height: 500,
gridSize: 1,
});
//注意：这个要放在生成节点之后的位置，否则不会生效
例如
var rect = new joint.shapes.standard.Rectangle();
rect.addTo(this_.graph);
joint.layout.DirectedGraph.layout(this.graph, {
dagre: dagre,
graphlib: graphlib,
setLinkVertices: false,
rankDir: "TB", //节点方向 有几个选项
"TB" (top-to-bottom) / "BT" (bottom-to-top) / "LR" (left-to-right) / "RL" (right-to-left) align:"UL",
rankSep: 150, //节点方向 有几个选项 TB / BT / RL / LR
marginX: 100,
marginY: 200,
nodeSep: 80,
edgeSep: 50
});