UI para la creación de workflows

Como ya hemos comentado en la entrada anterior, Argo Workflows se ha consolidado como una herramienta robusta y altamente configurable para la orquestación de pipelines sobre Kubernetes. Su enfoque declarativo y su integración nativa con contenedores lo convierten en una pieza clave para arquitecturas modernas de datos, ML y CI/CD.

Pero estos workflows se crean en una interfaz declarativa en formato YAML, lo cual puede ser una barrera de entrada para determinado tipo de usuarios. Hay que pensar en DAGs mentalmente, escribirlos como texto, validar dependencias manualmente y luego desplegarlos. Esto funciona bien para usuarios técnicos avanzados… pero ¿y si quisiéramos facilitar este proceso con una interfaz visual?

Esa es precisamente la idea que estamos explorando: usar React Flow para permitir construir DAGs de forma visual e intuitiva, y a partir de ahí generar automáticamente el manifiesto YAML necesario para Argo Workflows.

¿Por qué React Flow?

React Flow es una librería de visualización de grafos y diagramas interactivos escrita en React. Está pensada para casos como:

Builders de pipelines
Modeladores de flujos de datos
Interfaces low-code/no-code
Sistemas visuales de reglas o lógica

Nos permite arrastrar nodos, conectar flechas entre ellos, editar metadatos, y renderizar todo con gran control sobre la lógica interna. Es ligera, extensible y cuenta con un ecosistema activo.

Para nuestro objetivo —diseñar DAGs que luego se traduzcan en flujos de Argo— es una elección casi natural.

El objetivo: del canvas al YAML

La aplicación que estamos esbozando tendría dos objetivos principales:

Permitir al usuario crear un DAG visualmente: añadiendo nodos (que representan pasos del flujo) y conectándolos para expresar dependencias.
Exportar ese DAG como manifiesto de Argo Workflows: generando un .yaml válido que se pueda desplegar directamente sobre Kubernetes.

Cada nodo del flujo representará una tarea en Argo, con sus propiedades editables desde la interfaz: nombre, imagen de contenedor, comandos, argumentos, artefactos, etc. Las conexiones entre nodos se traducirán en dependencias explícitas en el DAG de Argo.

¿Cómo estructuraríamos la app?

Aquí un desglose conceptual de los componentes clave:

1. Editor de flujo visual (React Flow)

Cada nodo = plantilla de template de Argo (container, script, etc.)
Flechas = dependencias (dependencies en tareas DAG)
El estado global del DAG se mantiene como una lista de nodos y edges en React Flow

jsxCopiarEditarconst [nodes, setNodes] = useState<Node[]>([]);
const [edges, setEdges] = useState<Edge[]>([]);

2. Formulario lateral de edición

Cuando el usuario selecciona un nodo, aparece un panel con campos editables:

Nombre
Imagen del contenedor
Comando y argumentos
Variables de entorno, recursos, retries…

Esto se almacena en los data del nodo de React Flow:

jsCopiarEditar{
  id: "train-model",
  type: "default",
  data: {
    label: "Entrenamiento",
    image: "myrepo/train:latest",
    command: ["python"],
    args: ["train.py"]
  },
  position: { x: 100, y: 200 }
}

3. Exportador YAML

Este componente se encarga de traducir el grafo visual a un flujo Argo válido.

Genera el DAG desde los edges
Convierte los nodos en templates
Detecta nodos raíz y define entrypoint
Serializa a YAML (usando js-yaml o similar)

jsCopiarEditarimport yaml from 'js-yaml';

function generateArgoWorkflow(nodes, edges) {
  // construir dependencias
  const dag = buildDagStructure(nodes, edges);
  const templates = nodes.map(toArgoTemplate);
  
  return yaml.dump({
    apiVersion: 'argoproj.io/v1alpha1',
    kind: 'Workflow',
    metadata: { generateName: 'visual-workflow-' },
    spec: {
      entrypoint: 'main',
      templates: [
        {
          name: 'main',
          dag: { tasks: dag }
        },
        ...templates
      ]
    }
  });
}

Retos a tener en cuenta

Diseñar una herramienta así implica resolver varios retos técnicos interesantes:

Validación del DAG: asegurar que no haya ciclos (Argo requiere un DAG acíclico), y que todos los nodos tengan nombres únicos.
Transformación de estructuras: pasar de grafos visuales a listas de tareas y dependencias explícitas.
Persistencia del estado: guardar y recuperar flujos, idealmente con serialización JSON y YAML.
Interacción avanzada: permitir reordenar nodos, duplicarlos, importar nodos predefinidos, etc.
Preview en tiempo real: ver el YAML generado mientras se edita el DAG, útil para debugging y aprendizaje.

¿Qué ganamos con esta aproximación?

Barrera de entrada más baja: usuarios no expertos en YAML o Kubernetes pueden diseñar flujos complejos.
Rapidez en la iteración: es más fácil ajustar un flujo visual que editar nodos y espacios en YAML.
Reutilización y templates: podemos permitir importar nodos comunes como “entrenamiento básico” o “descarga de datos de S3”.
Integración futura: el sistema podría conectarse con un clúster Argo real para lanzar flujos directamente desde la UI.

Próximos pasos

Este es solo el inicio de la exploración. Algunas direcciones interesantes que podríamos tomar:

Exportar el flujo no solo como YAML, sino como un .json de React Flow para compartir entre usuarios.
Añadir validaciones dinámicas (por ejemplo, que no falten campos obligatorios en el contenedor).
Implementar un modo de simulación: permitir ver cómo se ejecutaría el flujo paso a paso.
Ofrecer integración con Git (guardar versiones de DAGs) o incluso CI/CD (disparar flujos desde repositorios).

Conclusión

Explorar cómo combinar React Flow con Argo Workflows abre la puerta a herramientas visuales potentes para diseñar flujos complejos de forma accesible. Si conseguimos abstraer correctamente las estructuras de Argo y reflejarlas en un canvas visual editable, no solo democratizamos el uso de esta tecnología, sino que además construimos una plataforma extensible, portable y productiva para equipos multidisciplinares.

¿Estamos hablando del futuro de los orquestadores visuales sobre Kubernetes? Puede que sí. De momento, vamos paso a paso. Pero las posibilidades son tan interesantes como el reto que tenemos delante.

AUDITAI

IA3migdem