Antv/X6流程图绘制

安装:

npm i @antv/x6 --save

引入:

import { Graph } from ‘@antv/x6’;

在页面创建一个流程图容器，例如div:

<div id="container" style="position: relative"></div>

创建流程图需要节点nodes、边edges:

const data = {
    // 节点
    nodes: [
        {
            id: 'node1', // String，可选，节点的唯一标识
            x: 100, // Number，必选，节点位置的 x 值
            y: 100, // Number，必选，节点位置的 y 值
            width: 80, // Number，可选，节点大小的 width 值
            height: 40, // Number，可选，节点大小的 height 值
            // size: [300,200],
            label: 'start', // String，节点标签
        },
        {
            id: 'node2', // String，节点的唯一标识
            shape: 'ellipse'