Vue3使用AntV | X6绘制流程图:开箱即用
x6官方地址X6·图编辑引擎 | AntV
官方文档仔细地介绍了很多丰富的功能，这里的demo可以满足基本的使用，具体拓展还需要仔细看文档内容
先上效果图
1、安装
通过 npm 或 yarn 命令安装 X6。
# npm
npm install @antv/x6 --save# yarn
yarn add @antv/x6初始化画布
<div id="container"></div>import { Graph } from '@antv/x6'const graph = new Graph({container: document.getElementById('container'),width: 800,height: 600,background: {color: '#F2F7FA',},
})使用插件
import { Snapline } from '@antv/x6-plugin-snapline'graph.use(new Snapline({enabled: true,}),
)数据导出
graph.toJSON()具体依赖package.json
{"@antv/x6": "^2.0.0","@antv/x6-plugin-clipboard": "^2.0.0", // 如果使用剪切板功能，需要安装此包"@antv/x6-plugin-history": "^2.0.0", // 如果使用撤销重做功能，需要安装此包"@antv/x6-plugin-keyboard": "^2.0.0", // 如果使用快捷键功能，需要安装此包"@antv/x6-plugin-minimap": "^2.0.0", // 如果使用小地图功能，需要安装此包"@antv/x6-plugin-scroller": "^2.0.0", // 如果使用滚动画布功能，需要安装此包"@antv/x6-plugin-selection": "^2.0.0", // 如果使用框选功能，需要安装此包"@antv/x6-plugin-snapline": "^2.0.0", // 如果使用对齐线功能，需要安装此包"@antv/x6-plugin-dnd": "^2.0.0", // 如果使用 dnd 功能，需要安装此包"@antv/x6-plugin-stencil": "^2.0.0", // 如果使用 stencil 功能，需要安装此包"@antv/x6-plugin-transform": "^2.0.0", // 如果使用图形变换功能，需要安装此包"@antv/x6-plugin-export": "^2.0.0", // 如果使用图片导出功能，需要安装此包"@antv/x6-react-components": "^2.0.0", // 如果使用配套 UI 组件，需要安装此包"@antv/x6-react-shape": "^2.0.0", // 如果使用 react 渲染功能，需要安装此包"@antv/x6-vue-shape": "^2.0.0" // 如果使用 vue 渲染功能，需要安装此包
}本文依赖
"dependencies": {"@element-plus/icons-vue": "^2.3.1","element-plus": "^2.7.6","pinia": "^2.1.7","vue": "^3.4.29","vue-router": "^4.3.3","@antv/x6": "latest","@antv/x6-plugin-clipboard": "latest","@antv/x6-plugin-history": "latest","@antv/x6-plugin-keyboard": "latest","@antv/x6-plugin-selection": "latest","@antv/x6-plugin-snapline": "latest","@antv/x6-plugin-stencil": "latest","@antv/x6-plugin-transform": "latest","@antv/x6-plugin-node-editor": "latest","insert-css": "latest"},完整代码，开箱即用