Diagrama de flujo de trabajo

Pasos y bifurcaciones de un flujo.

Definición

Un diagrama de flujo de trabajo dibuja los nodos de un flujo —de ocho tipos— y las aristas que los unen, con el rótulo de cada rama. Dentro de cada nodo se lee el campo de configuración que decide su comportamiento y, en los nodos de acción, qué acción declarada invocan. Sirve para documentar una automatización y su costura con el modelo de datos.

Editar con tus datos SVG Spec JSON

Datos: tipo · nombre · fila · columna · config · invoca · nota · carril · desde · hasta · etiqueta · desvio · rol
Buena para: Explicar qué hace cada paso de un flujo, por qué lo hace y qué acción dispara.
Evítala cuando: Cuando el flujo es una línea recta de pocos pasos sin ramas: los tipos de nodo y su configuración sobran.
Se lee bien: Entre 3 y 16 elementos; dibuja hasta 28
Datos que faltan: Se niega a dibujar y dice qué valor falta.
Accesibilidad: Lector de pantalla: tabla de datos · respeta «reducir movimiento»

Forma de los datos

Qué columnas pide

Columna	Tipo	Para qué
`tipo`	string	Si la fila es un nodo —y de cuál de los ocho tipos— o una arista. Cerrada y obligatoria: cualquier otra cosa hace FALLAR con los once valores válidos escritos.
`nombre`	string	El rótulo del nodo, que es la clave con la que las aristas lo citan. Obligatorio en los nodos.
`fila` · opcional	number	Coordenada vertical del nodo. Va EN PAREJA con `columna`: medido, una sin la otra hace fallar, y quitando las dos la colocación automática sitúa el nodo.
`columna` · opcional	number	Coordenada horizontal. Pareja de `fila`.
`config` · opcional	string	El campo de configuración que decide el comportamiento del nodo. Medido: sin la columna se pierden 18 textos y la figura deja de decir por qué cada nodo hace lo que hace.
`invoca` · opcional	string	Qué acción declarada de la ontología invoca un nodo de acción.
`nota` · opcional	string	El matiz bajo el nodo.
`carril` · opcional	string	El carril de responsabilidad en el que cae el nodo.
`desde`	string	El `nombre` del nodo de origen. Obligatorio en las aristas.
`hasta`	string	El `nombre` del nodo de destino. Obligatorio en las aristas.
`etiqueta` · opcional	string	El rótulo de la rama sobre la arista.
`desvio` · opcional	number	Desvío de la arista para que dos que unen los mismos nodos no se pisen.
`rol` · opcional	string	neutro · foco · alerta · ausente · favorable. `ausente` dibuja las primitivas que el vocabulario contempla y nadie ha construido.

Tamaños

Ancha por necesidad

Esta pieza necesita anchura para que cada rótulo quepa entero. El motor prefiere decirlo a apretarla.

A menos de 480 px sus rótulos no caben sin pisarse o recortarse, y el motor no la publica así. En el móvil se ve la versión ancha, a tamaño legible y sin recortar, dentro de un marco que se desliza.

Cuándo usarla

Tres preguntas antes de elegirla

¿Cada nodo tiene una configuración que decide lo que hace?

Si basta con contar los pasos en orden, sin explicar cómo se comporta cada uno, pasos e hitos es más directo.

Sí: quédate con diagrama de flujo de trabajo

No: usa Pasos e hitos

¿Lo que avanza es el trabajo, de nodo en nodo?

Si lo que cambia es el estado de un mismo objeto —borrador, enviado, aprobado—, se dibuja como máquina de estados.

Sí: quédate con diagrama de flujo de trabajo

No: usa Máquina de estados

¿Te vale una notación propia de nodos y aristas?

Si el proceso tiene que seguir la notación estándar de eventos, tareas y compuertas, usa BPMN.

Sí: quédate con diagrama de flujo de trabajo

No: usa Diagrama BPMN

Código

La misma pieza, con tus datos

import { getPreset, renderComposition } from 'visx-render/node';

const spec = await getPreset('concept-workflow');
spec.data.rows = misFilas; // tipo, nombre, desde, hasta
const { svg, warnings } = await renderComposition(spec);

También en React con Chart y prepareComposition. Guía para desarrolladores →

Dudas

¿Tengo que dar coordenadas a cada nodo?

No. Fila y columna van en pareja: si no das ninguna, la colocación automática sitúa el nodo; si das sólo una, la pieza falla.

¿Cómo se distinguen los nodos de las aristas?

Por la columna de tipo, obligatoria y cerrada: cada fila dice si es uno de los ocho tipos de nodo o una arista. Las aristas citan sus extremos por el nombre del nodo.

¿Puedo marcar piezas que todavía no existen?

Sí: con el rol «ausente» se dibujan las primitivas que el vocabulario contempla y nadie ha construido todavía.

¿Qué hace si faltan datos?

Se niega a dibujar y dice qué valor falta.

¿Cómo se ve en el móvil?

A menos de 480 px el motor no la compone sin pisar o cortar rótulos, y lo dice. En el móvil se ve la versión ancha, a tamaño legible, dentro de un marco que se desliza.

Relacionadas

Otras formas de responder «flujos y recorridos»

Guía para elegir: flujos y recorridos →