使用antv/X6实现流程图（包括线条动画流动，路径标签，悬浮窗口等）快速搭建流程图，DAG图等初始实践记录

最新推荐文章于 2025-10-11 17:39:10 发布

原创

最新推荐文章于 2025-10-11 17:39:10 发布 · 2.6w 阅读

95 ·

CC 4.0 BY-SA版权

文章标签：

#html #vue #javascript #css #canvas

文章目录

- 开始使用

最近需要将深度学习网络结构图以比较直观的形式在前端显示出来，对于数据的传输，计划使用数据路径流动的形式来做，因为我也没怎么学过前端变成，对于自己写js和css代码，感觉之后会出不少问题，前端显示的美观度，自适应窗口大小，组件位置的自适应等都是问题，搜了搜相关的教程推荐，发现阿里开发的antv/X6插件用来做流程图，以及网络结构图还是具有不错的效果的，以下是我的按照教程的一些学习操作：

开始使用

接下来我们就一起来创建一个最简单的 start--> end 应用。

Step 1 创建容器

在页面中创建一个用于容纳 X6 绘图的容器，可以是一个 div 标签。

<html>
<head>
    <style type="text/css">
        .expa {
     
     
            width: 400px;
            height: 400px;
            //将边框显示出来
            border: 3px solid #F00;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="expa" id="container"></div>
</body>
</html>

Step 2 准备数据

X6 支持 JSON 格式数据，该对象中需要有节点 nodes 和边 edges 字段，分别用数组表示：

<script>
	const data = {
     
     
            // 节点
        nodes: [
            {
     
     
                id: 'node1', // String，可选，节点的唯一标识
                x: 100, // Number，必选，节点位置的 x 值
                y: 100, // Number，必选，节点位置的 y 值
                width: 80, // Number，可选，节点大小的 width 值
                height: 40, // Number，可选，节点大小的 height 值
                label: 'start', // String，节点标签
        	},
        	{
     
     
                id: 'node2', // String，节点的唯一标识
                x: 200, // Number，必选，节点位置的 x 值
                y: 200, // Number，必选，节点位置的 y 值
                width: 80, // Number，可选，节点大小的 width 值
                height: 40, // Number，可选，节点大小的 height 值
                label: 'end', // String，节点标签
             },
        ],
        // 边
        edges: [{
     
     
            source: 'node1', // String，必须，起始节点 id
            target: 'node2', // String，必须，目标节点 id
        }, ],
    };
</script>

Step 3 渲染画布

首先，我们需要创建一个 Graph 对象，并为其指定一个页面上的绘图容器，通常也会指定画布的大小。我在之前已经指定container的大小，不需要重新指定了

//使用npm安装x6,之后引用，使用的就是下面的形式，在vue里面可以这么使用
import {
   
    Graph } from '@antv/x6';
const graph = new Graph({
   
   
  container: document.getElementById('container'),
  //width: 800,
  //height: 600,
});

我使用的是js文件引入形式，在html页面相对来说好操作

<script src="https://unpkg.com/@antv/x6/dist/x6.js"></script>
<script>
  const graph = new X6.Graph({
     
     
    container: document.getElementById('container'),
    //width: 800,
    //height: 600,
  });
</script>

然后，我们就可以使用刚刚创建的 graph 来渲染我们的节点和边。

graph.fromJSON(data)

在这里插入图片描述

得到下图：

取消节点的移动

此时节点node是可以移动的，有时候我们并不想让它移动，可以使用以下代码:

const graph = new X6.Graph({
    container: docu

最低0.47元/天解锁文章