Vue Flow 🌊

top-language GitHub code size in bytes GitHub last commit

Vue Flow: 一个高度可定制的 Vue 3 流程图组件。

你可以在这里找到如何开始的详细说明，或直接查看示例。

⭐️ 特性

👶 简单设置：轻松上手 - 内置缩放和平移功能、元素拖拽、选择等多种功能
🎨 可定制：使用自定义节点、边和连接线，并扩展 Vue Flow 的功能
🚀 快速：响应式跟踪变化，只重新渲染适当的元素
🧲 实用工具和组合式函数：提供图形辅助函数和状态组合式函数，用于高级用途
📦 附加组件：
- 🖼 背景：内置两种模式，可配置高度、宽度或颜色等选项
- 🧭 小地图：在右下角以小地图形式显示当前节点
- 🕹 控制面板：在左下角控制缩放行为
- 🤖 更多组件陆续推出...
🦾 可靠：完全使用 TypeScript 编写

🛠 安装

$ npm i @vue-flow/core

# 或
$ pnpm i @vue-flow/core

# 或
$ yarn add @vue-flow/core

🎮 快速开始

在 Vue Flow 中，应用程序结构由__节点__和__边__组成，这些统称为__元素__。

每个元素都需要一个唯一的 id。

节点还需要一个 XY 坐标位置，而边则需要一个__源__和一个__目标__，它们都由节点 id 表示。

<!-- Flowchart.vue -->
<script setup>
import { ref } from 'vue'  
import { VueFlow } from '@vue-flow/core'

const nodes = ref([
  { id: '1', type: 'input', label: '节点 1', position: { x: 250, y: 5 } },
  { id: '2', label: '节点 2', position: { x: 100, y: 100 } },
  { id: '3', label: '节点 3', position: { x: 400, y: 100 } },
  { id: '4', label: '节点 4', position: { x: 400, y: 200 } },
])
  
const edges = ref([
  { id: 'e1-2', source: '1', target: '2', animated: true },
  { id: 'e1-3', source: '1', target: '3' },
])
</script>

<template>
  <VueFlow v-model:nodes="nodes" v-model:edges="edges"></VueFlow>
</template>

⚠️ 确保导入必要的样式：

/* 导入必需的样式 */
@import "@vue-flow/core/dist/style.css";

/* 导入默认主题（可选） */
@import "@vue-flow/core/dist/theme-default.css";

不要在组件中使用 scoped 限制这些样式。

🪴 Vue 2

本库不适用于 Vue 2。

Vue Flow 使用了 Vue 3 独有的特性，因此不支持 Vue 2，将来也不会提供支持，抱歉。

🧪 开发

先决条件

# 如果还没安装 pnpm，请先安装
$ npm i -g pnpm

# 启动示例
$ pnpm dev

# 构建所有包
$ pnpm build

🐳 开发容器

要开始使用开发容器，请为 VSCode 安装 Docker 扩展。安装扩展后，打开左下角的连接菜单或通过命令选项卡打开它。选择 在容器中打开文件夹 选项来挂载项目。

开发容器将启动所有包的示例应用程序，并将端口转发到你的机器。

Discord

加入 Vue Flow Discord 服务器！

在这里你可以向社区提问、提出新功能的想法，或分享你使用 Vue Flow 构建的作品。

💝 特别鸣谢

本项目基于以下技术构建：

React Flow
- Vue Flow 很大程度上基于 webkids 的 ReactFlow。我衷心感谢他们出色的工作！没有他们，VueFlow 就不会存在。请考虑捐赠或订阅 ReactFlow Pro。
D3.js
- D3 使 Vue Flow 中的所有缩放和平移操作成为可能。
VueUse
- VueUse 是一个基本的 Vue 组合式工具集合