vue-flow 是一个基于 Vue.js 的强大且灵活的可视化流程图库，它允许开发者轻松创建交互式的流程图、工作流图、节点图等。
主要特点
- 易于使用 ：提供了简洁的 API 和组件，开发者可以快速上手并创建复杂的流程图。
- 高度可定制 ：支持自定义节点、边、连接点等元素的样式和行为，能够满足不同项目的设计需求。
- 交互功能丰富 ：内置了节点拖拽、连接、缩放、平移等交互功能，增强用户体验。
- 响应式设计 ：能够自适应不同的屏幕尺寸和容器大小，保证在各种设备上都有良好的显示效果。
- 性能优化 ：采用了高效的渲染机制，即使在处理大量节点和边时也能保持流畅的性能。
组件
- VueFlow ：主组件，用于包裹整个流程图区域，负责管理流程图的状态和交互。
- Node ：表示流程图中的节点，可以自定义节点的内容和样式。
- Edge ：表示节点之间的连接边，支持不同的连接类型和样式。
- Handle ：连接点组件，用于定义节点上的输入和输出点，用户可以通过拖拽连接点来创建边。
- @vue-flow/background 用于在流程图的背景添加网格或图案，增强流程图的视觉效果，方便用户更直观地定位节点和边。
- @vue-flow/controls 用于控制流程图视图的工具按钮，包含缩放、平移等常用操作。
- @vue-flow/minimap 用于显示流程图的缩略图，方便用户在处理大型复杂流程图时快速导航到指定区域。
安装
# 创建vue项目
yarn create vue@latest
cd <your-project-name>
# 安装依赖
yarn
yarn add @vue-flow/core
yarn add @vue-flow/minimap
yarn add @vue-flow/controls
yarn add @vue-flow/background
# 运行
yarn dev
使用示例
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
main.js
import {
createApp } from "vue";
import "./assets/index.css";
import App from "./App.vue";
createApp(App).mount("#app");
index.css
/* import the required styles */
@import '@vue-flow/core/dist/style.css';
/* import the default theme (optional) */
@import '@vue-flow/core/dist/theme-default.css';
@import