Diagrama BPMN

Proceso de negocio con decisiones y responsables.

Definición

Un diagrama BPMN dibuja un proceso de negocio con la notación estándar: eventos, tareas y puertas de decisión, cada participante en su propio carril. Aquí además cada flecha tiene el grosor del número de casos que la recorren, así que se ve por dónde pasa de verdad el trabajo. Se usa para revisar expedientes, pedidos o reclamaciones y comparar el camino diseñado con el recorrido real.

Editar con tus datos SVG Spec JSON

El paso más recorrido del proceso no lo recorre ningún expediente entero

Datos: category · label · group · source · target · value · order
Buena para: Ver qué caminos del proceso se llevan la mayoría de los casos y quién interviene en cada paso.
Evítala cuando: Cuando no tienes el recuento de casos por flujo: el grosor no tendría de dónde salir.
Se lee bien: Entre 3 y 19 elementos; dibuja hasta 19
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é
`category`	string	El tipo BPMN de la fila, y lo único que distingue las DOS clases de fila de esta tabla: los catorce tipos de elemento («inicio», «tarea-usuario», «puerta-exclusiva»…) o la palabra «flujo» si la fila es una flecha. Un tipo desconocido FALLA con la lista: pintarlo como caja genérica convertiría una puerta en una tarea sin que nadie lo cantara.
`label`	string	La etiqueta del elemento, que es además su CLAVE: es lo que los flujos escriben en «Desde» y «Hasta». Dos elementos con la misma etiqueta fallan, porque la flecha dejaría de saber a cuál apunta.
`group`	string	El participante (pool) del elemento. Decide su carril Y el tipo de cada flujo que lo toca: uno que cruza la frontera de un participante es de MENSAJE y se dibuja discontinuo, que es la regla de BPMN. Un participante es un pool: esta forma no distingue carriles dentro de él.
`source`	string	La etiqueta del elemento del que sale el flujo. Sólo se lee en las filas de tipo «flujo».
`target`	string	La etiqueta del elemento al que entra el flujo. Sólo se lee en las filas de tipo «flujo».
`value`	number	Los casos que recorren el flujo: la única magnitud de la figura, y el GROSOR de la flecha. Estrictamente positivo — un hueco NO se lee como cero, porque dibujaría un camino invisible por el que sí pasan expedientes. Sin recuentos, la forma honrada es «concept-workflow».
`order` · opcional	string	La condición escrita en la rama que sale de una puerta («incompleto», «sin cobertura»). OPCIONAL: sin ella la rama se rotula sólo con su cifra. Es el rol canónico más cercano —el vocabulario no tiene una palabra para «la guarda de una arista»— y por eso lleva esta nota.

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

¿Tienes el número de casos de cada flujo?

Sin recuentos, un diagrama de flujo de trabajo dibuja los pasos y bifurcaciones sin pretender cifras.

Sí: quédate con diagrama bpmn

No: usa Diagrama de flujo de trabajo

¿Importan los tipos de elemento y los participantes?

Si sólo interesa cuánto caudal pasa de cada etapa a la siguiente, un Sankey lo enseña sin notación BPMN.

Sí: quédate con diagrama bpmn

No: usa Diagrama de Sankey

¿Te basta el orden de los pasos, sin duraciones?

Si hay que ver cuánto dura cada tarea y cuándo empieza, un Gantt pone el tiempo en el eje.

Sí: quédate con diagrama bpmn

No: usa Diagrama de Gantt

Código

La misma pieza, con tus datos

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

const spec = await getPreset('bpmn');
spec.data.rows = misFilas; // category, label, group, source, target, value
const { svg, warnings } = await renderComposition(spec);

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

Dudas

¿Qué indica la posición horizontal?

El orden de los pasos dentro del proceso, no el tiempo. El gráfico no afirma ninguna duración.

¿Por qué algunas flechas son discontinuas?

Porque cruzan de un participante a otro: en BPMN eso es un flujo de mensaje y se dibuja así.

¿Cómo se escribe la tabla?

Hay dos clases de filas: los elementos, con su tipo, etiqueta y participante, y los flujos, con origen, destino y número de casos. La etiqueta de cada elemento no puede repetirse, porque es lo que usan las flechas para encontrarlo.

¿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 →