流程图编辑器-拖拉拽-antV X6流程可视化-VUE

最新推荐文章于 2025-04-02 16:21:03 发布

作业应急宝

最新推荐文章于 2025-04-02 16:21:03 发布

阅读量3.4k

点赞数 8

分类专栏：数据可视化文章标签：流程图

本文链接：https://blog.youkuaiyun.com/weixin_47917431/article/details/141872673

版权

前言：

上个我记录的relation-graph关系图本来是以后有需要我可以翻阅自己的博客可以当作备胎，使用的时候看一下让自己也知道还有个这么个不错的库，新的项目要有一个流程编辑器，relation-graph提供例子，无论动画效果还是操作手感都挺不错，唯一的遗憾是阅读示例代码要钱（上一个文章C友留言说VIP的，我本以为可以一直白嫖B站视频，没想到要再次白嫖的时候，一个都找不到了），所以我选择了这个，还是阿里实在，不搞vip文档那些。

1. X6·图编辑引擎

X6官方是这么介绍它的：X6 是基于 HTML 和 SVG 的图编辑引擎，提供低成本的定制能力和开箱即用的内置扩展，方便我们快速搭建 DAG 图、ER 图、流程图、血缘图等应用。

2. X6---官方地址
点击此处进入-antV X6 官方地址https://x6.antv.antgroup.com/

3. 选择AntV-X6的理由

主要是免费、免费、免费(这次真免费，没有vip文档，全部随意查阅)😵
支持Vue3、React
完全自定义，可随意定制样式

4. 项目中引用relation-graph

4.1 下载命令

# npm

$ npm install @antv/x6 --save

# yarn

$ yarn add @antv/x6

5. 简单的实例代码

## 下载好后直接复制下面代码到你的vue/react项目中，先看看运行效果(来源官网示例)

import { Graph, Shape } from '@antv/x6'
import { Stencil } from '@antv/x6-plugin-stencil'
import { Transform } from '@antv/x6-plugin-transform'
import { Selection } from '@antv/x6-plugin-selection'
import { Snapline } from '@antv/x6-plugin-snapline'
import { Keyboard } from '@antv/x6-plugin-keyboard'
import { Clipboard } from '@antv/x6-plugin-clipboard'
import { History } from '@antv/x6-plugin-history'
import insertCss from 'insert-css'

// 为了协助代码演示
preWork()

// #region 初始化画布
const graph = new Graph({
  container: document.getElementById('graph-container')!,
  grid: true,
  mousewheel: {
    enabled: true,
    zoomAtMousePosition: true,
    m