無程式碼也能輕鬆打造專業LINE官方帳號！一鍵導入模板，讓AI助你行銷加分！
Construir interfaces interactivas basadas en nodos – ya sea para editores de flujo de trabajo, herramientas de programación visual o diseñadores de pipelines de datos – es una de las tareas más desafiantes en el desarrollo frontend. Necesita manejar zoom y panorámica, arrastre y posicionamiento de nodos, enrutamiento y renderizado de aristas, y toda la complejidad de la interacción con grafos. Vue Flow trae el poder del modelo de interacción de React Flow al ecosistema de Vue 3, proporcionando un componente de diagrama de flujo pulido, de alto rendimiento y profundamente personalizable.
Creado por bcakmakoglu, Vue Flow está diseñado específicamente para la Composition API de Vue 3, aprovechando el sistema de reactividad de Vue para actualizaciones receptivas de nodos y gestión de estado sin fricciones. La biblioteca ha ganado una tracción significativa en el ecosistema de Vue, con desarrolladores usándola para construir desde editores de flujo de trabajo de IA hasta plataformas low-code y visualizadores de topología de red.
Lo que distingue a Vue Flow es su combinación de funcionalidad lista para usar y personalización profunda. Obtiene zoom, panorámica, minimapa, selección, arrastrar y soltar, y atajos de teclado sin escribir una sola línea de código de interacción. Pero cada elemento visual – desde el renderizado de nodos hasta el estilo de aristas y el componente de controles – puede reemplazarse con sus propios componentes Vue personalizados.
¿Cómo Funciona la Arquitectura de Vue Flow?
Vue Flow está construido alrededor de una arquitectura en capas que separa la gestión del estado del grafo, el renderizado y el manejo de interacciones.
graph TD
A[Componente Vue Flow] --> B[Gestión de Estado del Grafo]
A --> C[Controlador de Viewport]
A --> D[Capa de Interacción]
B --> E[Almacén de Nodos]
B --> F[Almacén de Aristas]
C --> G[Zoom y Panorámica]
C --> H[Minimapa]
D --> I[Selección]
D --> J[Arrastrar y Soltar]
D --> K[Teclado]
E --> L[Renderizador de Nodos]
F --> M[Renderizador de Aristas]
L --> N[Componentes Vue Personalizados]
M --> N
La capa de gestión de estado mantiene almacenes reactivos para nodos y aristas, el controlador de viewport maneja las transformaciones de la cámara y la capa de interacción traduce la entrada del usuario en cambios de estado. Esta separación asegura que los componentes personalizados solo necesiten preocuparse por el renderizado, no por la lógica de interacción.
¿Qué Tipos de Nodos y Aristas Soporta Vue Flow?
Vue Flow incluye un conjunto de tipos de nodos y aristas incorporados, mientras que hace trivial crear tipos personalizados.
| Tipo | Categoría | Opciones | Personalización |
|---|---|---|---|
| Nodo predeterminado | Incorporado | Etiqueta, icono, manejadores | Props de estilo, variables CSS |
| Nodo de entrada | Incorporado | Manejador de destino único | Estilo, tamaño, colores |
| Nodo de salida | Incorporado | Manejador de origen único | Estilo, tamaño, colores |
| Nodo personalizado | Definido por usuario | Cualquier componente Vue 3 | Control total sobre el renderizado |
| Arista bezier | Incorporado | Animada, etiqueta, marcador | Ruta, color, ancho |
| Arista de paso | Incorporado | Rutas en ángulo recto | Estilo, animada |
| Smoothstep | Incorporado | Rutas en ángulo recto redondeadas | Estilo, animada |
| Arista recta | Incorporado | Línea directa | Estilo, animada |
Los nodos personalizados son componentes Vue 3 estándar que reciben los datos del nodo como props y pueden contener cualquier HTML, componentes hijos o elementos interactivos. Las aristas personalizadas siguen el mismo patrón, con acceso a las posiciones de los nodos de origen y destino.
¿Qué Eventos de Interacción Expone Vue Flow?
La biblioteca proporciona un sistema de eventos integral que cubre cada interacción del usuario y cambio de estado.
| Evento | Se Dispara Cuando | Carga Útil |
|---|---|---|
nodeClick | El usuario hace clic en un nodo | ID del nodo, evento, posición |
nodeDrag | El usuario arrastra un nodo | ID del nodo, delta de posición |
edgeClick | El usuario hace clic en una arista | ID de la arista, evento |
connect | El usuario crea una arista | Nodo origen, nodo destino |
selectionChange | Cambian los nodos/aristas seleccionados | Array de IDs seleccionados |
viewportChange | Cambia el zoom o la panorámica | Nivel de zoom, posición central |
nodeDoubleClick | El usuario hace doble clic en un nodo | ID del nodo, evento |
nodesChange | Cualquier cambio en nodos | Tipo de cambio y datos |
edgesChange | Cualquier cambio en aristas | Tipo de cambio y datos |
Los eventos siguen el patrón emit de Vue 3 y pueden manejarse con la sintaxis estándar @event en las plantillas. Las cargas útiles de eventos están tipadas en TypeScript, haciendo que la integración con bases de código type-safe sea sencilla.
¿Cómo se Crean Nodos Personalizados en Vue Flow?
Crear nodos personalizados es el punto de extensión más común en las aplicaciones Vue Flow, y la biblioteca lo hace notablemente sencillo.
| Aspecto de Personalización | Enfoque de Vue Flow | Ejemplo |
|---|---|---|
| Renderizado de nodos | Componente Vue 3 personalizado | <template> con cualquier HTML |
| Datos del nodo | Interfaz de props tipada | defineProps<NodeProps>() |
| Manejadores de nodo | Componente <Handle /> | Posición, tipo, estilo |
| Conexiones de nodo | Tipos de manejador configurables | Origen/destino, múltiples manejadores |
| Redimensionamiento de nodo | Directiva de redimensionamiento | Arrastrar para redimensionar nodo |
| Menú contextual de nodo | Implementación personalizada | Componente de clic derecho |
| Agrupación de nodos | Soporte de nodos anidados | Nodos padre-hijo |
| Validación de nodos | Callback antes de conectar | Rechazar conexiones inválidas |
Un nodo personalizado es esencialmente un componente Vue 3 estándar que recibe props específicas del nodo y puede usar el componente Handle para definir puntos de conexión. Este patrón familiar significa que cualquier desarrollador Vue puede crear nodos personalizados sofisticados sin aprender un nuevo paradigma.
FAQ
¿Qué es Vue Flow? Vue Flow es una biblioteca de componentes de diagrama de flujo altamente personalizable para Vue 3, inspirada en React Flow. Proporciona zoom, panorámica, minimapa, nodos y aristas personalizados, y soporte completo de TypeScript para construir aplicaciones interactivas basadas en nodos.
¿Cómo se compara Vue Flow con React Flow? Vue Flow se inspiró en React Flow pero es una reimplementación completa para la Composition API de Vue 3. Ofrece funcionalidad similar – nodos personalizados, aristas, minimapa, controles – con rendimiento optimizado para el sistema de reactividad de Vue.
¿Qué tipos de nodos y aristas soporta Vue Flow? Vue Flow soporta tipos de nodos incorporados incluyendo nodos de entrada, salida y predeterminados. Los nodos personalizados se pueden crear como componentes de Vue 3. Los tipos de aristas incluyen bezier, paso, smoothstep y recta, todas con soporte para estilos y marcadores personalizados.
¿Vue Flow soporta dispositivos táctiles y móviles? Sí, Vue Flow incluye manejo de eventos táctiles para dispositivos móviles. Los usuarios pueden arrastrar nodos, desplazar el viewport y hacer zoom usando gestos táctiles en tabletas y teléfonos.
¿Qué tipo de aplicaciones se pueden construir con Vue Flow? Vue Flow se utiliza para editores de programación visual, herramientas de automatización de flujos de trabajo, constructores de chatbots, diseñadores de pipelines de datos, aplicaciones de mapas mentales, editores de topología de red y cualquier aplicación que requiera interfaces interactivas basadas en nodos.
Lecturas Adicionales
- Repositorio de GitHub de Vue Flow – Código fuente, ejemplos y problemas de la comunidad
- Documentación de Vue Flow – Documentos oficiales con guías y referencia de API
- React Flow – La inspiración para Vue Flow (versión React)
- Documentación de la Composition API de Vue 3 – La API de Vue 3 en la que se basa Vue Flow
- Documentación de TypeScript – Referencia del lenguaje TypeScript para uso de Vue Flow con seguridad de tipos
