Skip to content
Producto

El canvas visual de flujos de trabajo: arrastre, suelte y vea sus flujos de trabajo de IA ejecutarse

El nuevo canvas visual de JieGou le permite construir flujos de trabajo arrastrando y soltando pasos, conectándolos con aristas y observando la ejecución fluir a través del grafo en tiempo real.

JT
JieGou Team
· · 6 min de lectura

JieGou siempre ha ofrecido múltiples formas de ver flujos de trabajo: una lista de pasos para edición rápida, un diagrama para entender la estructura y una vista DAG para el orden de ejecución. Pero ninguna de ellas le permitía construir visualmente — organizar pasos en un canvas, dibujar conexiones entre ellos y ver las relaciones espaciales en su automatización.

El nuevo canvas visual de flujos de trabajo cambia eso. Es un editor SVG completo de arrastrar y soltar con zoom, desplazamiento, minimapa, ajuste a cuadrícula y visualización de ejecución en vivo.

Construir en el canvas

El canvas renderiza cada paso del flujo de trabajo como un nodo. Los nodos están codificados por color según el tipo de paso — pasos de receta, pasos LLM, ramas de condición, bucles, grupos paralelos, puertas de aprobación y más, cada uno tiene su propia identidad visual.

Para agregar una conexión entre pasos, arrastre desde el puerto de salida de un nodo (abajo) al puerto de entrada de otro nodo (arriba). Una línea punteada azul de vista previa sigue su cursor mientras arrastra, y los destinos válidos se resaltan cuando pasa sobre ellos. Suelte en un puerto para crear la arista. Las aristas se renderizan como curvas Bezier suaves entre nodos conectados.

Mover nodos es sencillo: haga clic y arrastre. Los nodos se ajustan a una cuadrícula de 20 píxeles, para que los diseños se mantengan limpios sin alineación manual. El umbral de ajuste es de 10 píxeles — lo suficientemente cerca de la línea de la cuadrícula y el nodo se fija en su lugar, pero aún tiene libertad para posicionar con precisión cuando lo necesite.

Los flujos de trabajo pequeños caben en una pantalla. Los flujos de trabajo de producción no. El canvas proporciona varias herramientas de navegación:

Zoom — La rueda del ratón (con Ctrl/Cmd) hace zoom de 0.15x a 2.5x, centrado en la posición de su cursor. Los atajos de teclado también funcionan: Cmd+0 reinicia a 1x, Cmd+= acerca, Cmd+- aleja.

Desplazamiento — Desplácese horizontal y verticalmente con su trackpad o rueda del ratón. El canvas se mueve suavemente bajo los nodos.

Minimapa — Una vista general de 200x140 píxeles en la esquina inferior derecha muestra el diseño completo del flujo de trabajo con un rectángulo blanco indicando su viewport actual. Haga clic en cualquier lugar del minimapa para saltar allí instantáneamente.

Seleccionar todoCmd+A selecciona cada nodo en el canvas. Escape deselecciona todo y cancela cualquier arrastre en progreso.

Visualización de ejecución en vivo

El canvas no es solo un constructor — es un visor para flujos de trabajo en ejecución.

Cuando un flujo de trabajo se ejecuta, el canvas muestra el estado de ejecución en tiempo real. El paso activo brilla. Los pasos completados muestran su estado. Los pasos fallidos son inmediatamente visibles. Puede observar su automatización fluir a través del grafo, paso a paso, mientras se ejecuta.

Para pasos que usan Claude u otros LLMs, una superposición de razonamiento aparece en la parte inferior del canvas cuando selecciona un paso en ejecución. Muestra el proceso de pensamiento del modelo — la cadena de razonamiento detrás de la salida. Esto es útil para depurar prompts y entender por qué la IA tomó una decisión particular.

Superposiciones multi-agente

Para flujos de trabajo que usan múltiples agentes de IA — un coordinador delegando a especialistas, un pipeline pasando trabajo entre agentes con roles específicos — el canvas muestra regiones de memoria compartida como cajas delimitadoras translúcidas con bordes punteados.

Cada región está codificada por color según el rol del agente: cian para coordinadores, rosa para especialistas, verde para trabajadores. Las etiquetas de región muestran qué variables compartidas conectan a los agentes. Esta visualización deja claro cómo fluyen los datos entre agentes en un flujo de trabajo multi-agente.

El canvas también ejecuta detección de ciclos en flujos de trabajo multi-agente. Si existen dependencias circulares entre pasos, los nodos afectados brillan en rojo y aparece una insignia de advertencia en la barra de herramientas con un conteo de ciclos detectados. Los ciclos en la delegación de agentes pueden causar bucles infinitos — mejor detectarlos en tiempo de diseño que en tiempo de ejecución.

Sistema de cuadrícula y puertos

El fondo de cuadrícula usa un patrón de doble capa: puntos de 20 píxeles para alineación fina y puntos de 100 píxeles para líneas de cuadrícula principales. La cuadrícula es conmutable vía la barra de herramientas si prefiere un canvas limpio.

Los puertos — los puntos de conexión en cada nodo — tienen 6 píxeles de radio con un área de detección de clic de 12 píxeles, haciéndolos fáciles de apuntar incluso a niveles de zoom bajos. Los puertos de entrada están en la parte superior de cada nodo, los puertos de salida en la parte inferior. Cuando pasa cerca de un puerto durante la creación de aristas, se resalta para confirmar que está apuntando al punto de conexión correcto.

Vistas del canvas junto con otros modos

El canvas es uno de cuatro modos de vista de flujo de trabajo, disponibles vía pestañas en la página de detalle del flujo de trabajo:

  • Lista — La lista de pasos original, mejor para ediciones rápidas a configuraciones de pasos individuales
  • Diagrama — Un diagrama estructural de solo lectura
  • DAG — Grafo acíclico dirigido mostrando dependencias de ejecución
  • Canvas — El nuevo editor visual con interactividad completa

Los cuatro modos reflejan el mismo flujo de trabajo. Edite la configuración de un paso en la vista de lista, cambie a la vista de canvas y vea el cambio reflejado inmediatamente. El canvas también está disponible en el flujo de creación de flujos de trabajo — cuando genera un flujo de trabajo desde lenguaje natural, el canvas muestra una vista previa de los pasos generados para que pueda reorganizarlos antes de guardar.

Disponibilidad

El canvas visual de flujos de trabajo está disponible en planes Team y Enterprise, junto con el modo de ejecución DAG y el conjunto completo de funcionalidades de orquestación de flujos de trabajo. Conozca más sobre la orquestación de flujos de trabajo o inicie su prueba gratuita.

workflow-canvas visual-editor drag-and-drop dag workflow-builder
Compartir este artículo

¿Le gustó este artículo?

Reciba consejos sobre flujos de trabajo, actualizaciones de producto y guías de automatización en su bandeja de entrada.

No spam. Unsubscribe anytime.