Editar Flujo

Editar un Flujo

El editor visual de Floogos permite modificar cualquier flujo existente: agregar, mover o eliminar nodos, cambiar conexiones y ajustar configuraciones.

Acceder al editor

1. Ve a la sección Flujos en el menú lateral
2. Haz clic sobre el flujo que quieres editar
3. Se abre el editor visual con todos los nodos del flujo

Operaciones basicas

Agregar nodos

• Arrastra un nodo desde el panel izquierdo al canvas
• O haz clic derecho en el canvas para ver el menú de nodos

Mover nodos

• Arrastra cualquier nodo para reposicionarlo en el canvas
• Los nodos mantienen sus conexiones al moverlos

Eliminar nodos

• Selecciona el nodo y presiona Delete/Suprimir
• O haz clic derecho sobre el nodo y selecciona Eliminar
• Las conexiones del nodo eliminado se desconectan automáticamente

Modificar conexiones

• Para crear una conexión: arrastra desde el punto de salida de un nodo al punto de entrada de otro
• Para eliminar una conexión: haz clic sobre la línea de conexión y presiona Delete
• Para cambiar una conexión: elimina la existente y crea la nueva

Configurar un nodo

1. Haz doble clic sobre el nodo
2. Se abre el panel de configuración a la derecha

El panel de configuración. Los campos que ves aquí son los que lista la página de referencia de cada nodo. 3. Modifica los campos necesarios 4. Los cambios se aplican al cerrar el panel

Organizar y alinear nodos

Al seleccionar 2 o más nodos aparece una barra de acciones flotante justo encima de la selección con todo lo necesario para ordenarlos.

Alinear y distribuir

• Alinear: izquierda · centro horizontal · derecha · arriba · centro vertical · abajo.
• Distribuir (con 3 o más nodos): horizontal o vertical, con espaciado equitativo.
• La misma barra incluye también Duplicar, Copiar, Agrupar y Eliminar.

Auto-organizar todo el flujo

En los controles del canvas (abajo a la izquierda) el botón Auto-organizar (icono de árbol) acomoda todo el flujo de izquierda a derecha automáticamente, respetando las conexiones. Los sub-nodos de los agentes IA (cerebro, herramientas, skills, RAG) se agrupan debajo de su agente; las notas adhesivas y los grupos se dejan como están. Al terminar, la vista se reencuadra.

Snap a la grilla y guías de alineación

• Snap a la grilla: el botón de cuadrícula en los controles activa el ajuste a una grilla de 16 px al mover nodos.
• Guías de alineación: con el snap desactivado, al arrastrar un nodo aparecen líneas guía punteadas y el nodo se “pega” a los bordes o centros de otros nodos (estilo Figma).

Todas estas operaciones son solo visuales: cambian la posición de los nodos en el editor, no la ejecución del workflow. Se deshacen con Ctrl+Z.

Editar con ayuda de FlooIA

Analizar errores de un nodo

Cuando un nodo falla durante la ejecución, FlooIA puede ayudarte a entender y resolver el problema:

1. Haz doble clic en el nodo que fallo
2. Ve a la pestana Trace para ver el error
3. Haz clic en “Analizar con IA”
4. FlooIA te mostrará:
   • Causa del error
   • Explicación detallada de por que ocurrio
   • Solución paso a paso
   • Configuración corregida (si aplica, con botón para aplicar directamente)
   • Tips de prevención para evitar el error en el futuro

Chat contextual

Puedes abrir el chat de FlooIA mientras editas para hacer preguntas sobre el flujo:

1. Haz clic en el botón IA del toolbar y activa “Floo AI”
2. Se abre un panel de chat a la derecha
3. FlooIA conoce el contexto de tu flujo actual (nodos, conexiones, errores)

Ejemplos de preguntas útiles:

Pregunta	Lo que FlooIA responde
”Por que falla el nodo Decision?”	Analiza la condición y los datos de entrada
”Como puedo filtrar solo pedidos de Portugal?”	Sugiere configuración del nodo Decision
”Que nodo necesito para enviar un email?”	Recomienda Postmark, Email o SMTP según tu caso
”Como guardo el resultado en un CSV?”	Explica como configurar CSV Create

Optimizar un flujo existente

FlooIA puede analizar tu flujo completo y sugerir mejoras:

1. Abre el menú IA del toolbar
2. FlooIA revisara la estructura del flujo
3. Te indicara posibles mejoras: nodos innecesarios, rutas de error faltantes, optimizaciones de rendimiento

Copiar y pegar nodos entre workflows

Agrupar nodos

El editor permite agrupar nodos relacionados dentro de un contenedor de color con título y descripción opcional. Los grupos son puramente visuales: no afectan la ejecución del workflow.

Crear un grupo

Opción A — barra de selección múltiple:

1. Selecciona dos o mas nodos (Shift+Clic o arrastra una region)
2. Haz clic en Agrupar en la barra de acciones que aparece encima de la selección
3. Un contenedor envuelve la selección automáticamente con 52 px de margen en cada lado

Opción B — menú contextual:

1. Haz clic derecho sobre cualquier nodo seleccionado mientras hay dos o mas nodos seleccionados
2. Elige Agrupar selección

Que hace un grupo

• El contenedor mueve todos los nodos hijos juntos al arrastrarlo
• Los nodos hijos no pueden salir del grupo mientras lo arrastras
• Agregar un nodo desde el panel lateral: arrastralo y sueltalo dentro del área del grupo — el nodo se asigna automáticamente al grupo
• Agregar un nodo desde un handle (+): al conectar desde un nodo que ya pertenece a un grupo, el nuevo nodo se coloca dentro del mismo grupo

Editar el grupo

Acción	Como
Renombrar	Haz clic directamente sobre el texto del título dentro del contenedor
Agregar descripción	Haz clic en el área de descripción debajo del título
Cambiar color	Selecciona el grupo → haz clic en el icono de paleta de colores (esquina superior derecha)
Redimensionar	Arrastra cualquier esquina o borde del contenedor
Desagrupar	Clic derecho en el grupo → Desagrupar, o haz clic en el icono de papelera mientras el grupo esta seleccionado

El nombre y la descripción también estan disponibles en el panel de configuración de la derecha — haz doble clic en el grupo para abrirlo.

Grupos y ejecución

Los grupos se excluyen del motor de ejecución. El workflow_json enviado al motor solo contiene nodos ejecutables; los contenedores de grupo se eliminan automáticamente. Las conexiones entre nodos dentro de un grupo funcionan igual que entre cualquier otro par de nodos.

---

El editor permite copiar uno o varios nodos seleccionados y pegarlos en cualquier otro workflow, incluidos workflows de clientes distintos que compartan el mismo navegador. El portapapeles persiste en localStorage hasta que copies algo nuevo.

Seleccionar nodos

Acción	Como hacerlo
Seleccionar un nodo	Clic sobre el nodo
Seleccionar varios nodos	Shift + Clic sobre cada nodo adicional
Seleccionar region	Arrastra el cursor sobre un área vacía del canvas
Seleccionar todos	Ctrl + A
Deseleccionar	Clic en un área vacía del canvas

Copiar nodos — Ctrl + C

1. Selecciona uno o varios nodos
2. Pulsa Ctrl + C (o haz clic en el botón Copiar de la barra de herramientas)
3. Aparece un aviso: “N nodo(s) copiado(s)”

Que se guarda en el portapapeles:

• La configuración completa de cada nodo (tipo, label, campos)
• Las conexiones internas entre los nodos seleccionados (las conexiones hacia nodos no seleccionados se descartan)

Pegar nodos — Ctrl + V

1. Abre el workflow de destino (puede ser el mismo u otro workflow)
2. Pulsa Ctrl + V
3. Los nodos se pegan desplazados 40px respecto a su posición original, seleccionados y listos para mover
4. Las conexiones internas entre los nodos copiados se restauran con nuevos IDs

El portapapeles persiste entre workflows: puedes copiar en un workflow, navegar a otro y pegar. Los nodos pegados tienen nuevos IDs para no colisionar con los existentes.

Duplicar nodos en el mismo workflow — Ctrl + D

Para duplicar sin pasar por el portapapeles:

1. Selecciona los nodos que quieres duplicar
2. Pulsa Ctrl + D
3. Se crea una copia desplazada inmediatamente en el mismo canvas

Atajos de teclado del editor

Atajo	Acción
Ctrl + C	Copiar nodos seleccionados al portapapeles
Ctrl + V	Pegar nodos del portapapeles
Ctrl + D	Duplicar nodos seleccionados
Ctrl + Z	Deshacer
Ctrl + Y / Ctrl + Shift + Z	Rehacer
Ctrl + S	Guardar workflow
Ctrl + A	Seleccionar todos los nodos
Ctrl + Shift + L	Ver última ejecución
Delete / Supr	Eliminar nodos o conexiones seleccionados

Flujo tipico: reutilizar lógica entre workflows

Workflow A (procesamiento de pedidos)
  → Selecciona los nodos de validacion (Decision + HTTP + SendMail)
  → Ctrl + C

Workflow B (procesamiento de devoluciones)
  → Ctrl + V
  → Reposiciona y reconecta segun la nueva logica

Consejo: antes de pegar, guarda el workflow destino para evitar conflictos si el navegador se cierra inesperadamente.

Ver los bucles en el lienzo

Cuando un flujo tiene un nodo Iterator o Repeater, el editor dibuja encima del lienzo qué parte se ejecuta por cada item. No cambia nada del flujo: es una ayuda visual que se calcula al pintar y no se guarda.

Qué significa cada cosa

• El contorno rodea el cuerpo del bucle y lleva el nombre del iterador, precedido del símbolo de bucle. Si el iterador se llama «Por país», el contorno dice ↻ Por país.
• La línea discontinua une el iterador con el nodo que lo cierra (MergeIterator o End). No lleva flecha a propósito: no es una conexión por la que pasen datos, solo indica que esos dos nodos se corresponden. Los datos van por el cuerpo, nodo a nodo.
• El nodo de cierre queda FUERA del contorno, porque se ejecuta una sola vez al agrupar los resultados, no una vez por item.
• Al pasar el ratón por el iterador, su bucle se resalta y el resto del lienzo baja de intensidad. Es lo que más ayuda en flujos grandes.

Bucles anidados

Un iterador dentro de otro se dibuja con anillos concéntricos, cada nivel con su color y con más separación hacia fuera, de modo que se ve cuál contiene a cuál.

Los merges encadenados no cierran uno por nivel

El motor cierra el cuerpo del bucle en el primer MergeIterator que encuentra siguiendo la cadena. Si encadenas tres merges esperando cerrar tres niveles, los tres bucles cerrarán en el primero y los otros dos quedarán fuera de todos los contornos. El dibujo lo hace evidente.

Cuando algo no cuadra

El editor avisa en tres situaciones, y cada una significa algo distinto:

Aviso	Qué pasa
El bucle no termina en MergeIterator ni End	El bucle se ejecuta, pero el resultado agrupado de las iteraciones no llega a ningún sitio. Puede ser intencionado si el trabajo lo hace el último nodo del cuerpo. El contorno se pinta en ámbar.
El iterador no tiene ningún nodo después	Genera los items y no hace nada con cada uno.
El iterador no está conectado a nada	No se ejecuta nunca. Suele ser un nodo olvidado en el lienzo; el aviso es informativo.

Cambiar el nombre del bucle

El nombre que aparece en el contorno es el del propio nodo iterador. Para cambiarlo, doble clic en el nodo y edita el campo Label: el contorno se actualiza al guardar. No hay un nombre aparte que mantener sincronizado.

Desactivarlo

En Ajustes → Preferencias del editor se puede apagar con Mostrar bucles en el lienzo. Viene activado.

Operaciones avanzadas

Clonar un flujo

Si necesitas una variante de un flujo existente:

1. En la lista de flujos, haz clic en el menú (tres puntos) del flujo
2. Selecciona Clonar
3. Se crea una copia editable con un nuevo nombre

Trabajar con variables dinámicas

Dentro de cualquier campo de configuración puedes usar:

Sintaxis	Descripción	Ejemplo
{{campo}}	Campo del data actual	{{email}}
{{campo.subcampo}}	Campo anidado	{{billing_address.name}}
{{@NombreNodo.campo}}	Dato de un nodo especifico	{{@Webhook_1.order_id}}
{{#1.campo}}	Dato del nodo anterior (1 atras)	{{#1.total}}
{{var.nombre}}	Variable de memoria	{{var.contador}}
{{$guid}}	UUID único	a1b2c3d4-...
{{$timestamp}}	Timestamp actual en ms	1712345678000
{{$datetime}}	Fecha ISO actual	2026-04-07T10:30:00Z

Ver el historial de ejecuciones

Desde el editor, haz clic en el icono de Historial para ver las ejecuciones anteriores del flujo. Puedes inspeccionar los datos de entrada y salida de cada nodo en cada ejecución.

Precauciones

• Flujo activo: si el flujo esta activo y recibe datos mientras lo editas, las ejecuciones en curso usan la versión guardada. Tus cambios no afectan hasta que guardes.
• Desactivar antes de cambios grandes: si vas a reorganizar nodos o cambiar lógica, desactiva primero el flujo para evitar ejecuciones con configuración incompleta.
• Credenciales: al agregar nodos que requieren credenciales (APIs, bases de datos), asegurate de configurarlas antes de probar.
• Guardar frecuentemente: no hay autoguardado. Usa Ctrl+S o el botón de guardar.

Recomendaciones

• Prueba después de cada cambio importante usando el modo Test
• Nombra los nodos de forma descriptiva para que el equipo entienda el flujo
• Agrega nodos Decision para manejar errores en nodos criticos (APIs externas, bases de datos)
• Usa el trace para inspeccionar que datos pasan entre nodos
• No elimines nodos activos sin verificar que no rompen otras conexiones del flujo

Siguiente paso

Cuando termines de editar, consulta Ejecutar un Flujo para probar y activar tus cambios.