Proceso en carriles

Quién hace cada paso de un proceso.

Definición

El proceso en carriles pone a cada actor en una banda horizontal y los momentos del proceso en columnas comunes a todos. Dos celdas en la misma columna son el mismo momento aunque las hagan actores distintos. Sirve para explicar quién hace cada paso en un proceso compartido entre equipos.

Editar con tus datos SVG Spec JSON

Cada paso lo produce una mano distinta, y la frontera decide qué lee el modelo

Datos: carril · columna · paso · detalle · rol
Buena para: Ver quién hace qué en cada momento de un proceso.
Evítala cuando: Cuando el proceso tiene decisiones y caminos alternativos: las columnas son una sola línea de avance.
Se lee bien: Entre 4 y 15 elementos; dibuja hasta 15
Datos que faltan: No usa valores que puedan faltar.
Accesibilidad: Lector de pantalla: tabla de datos · respeta «reducir movimiento»

Forma de los datos

Qué columnas pide

Columna	Tipo	Para qué
`carril` · opcional	string	El actor: la banda horizontal en la que cae el paso. Medido: sin la columna la figura dibuja igual con un carril más (6→8 marcas).
`columna` · opcional	string	El momento del proceso: la columna comparable entre carriles. Es lo que hace que dos celdas se puedan leer como simultáneas.
`paso` · opcional	string	El rótulo de la celda.
`detalle` · opcional	string	La línea de apoyo dentro de la celda.
`rol` · opcional	string	neutro · foco · alerta · ausente · favorable.

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 el motor se niega y explica por qué: Process cards: increase width for lane labels and stages. 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

¿El proceso avanza sin bifurcaciones?

Si hay decisiones y caminos alternativos con responsables, un BPMN los dibuja con su notación.

Sí: quédate con proceso en carriles

No: usa Diagrama BPMN

¿Importa quién hace cada paso más que los mensajes entre actores?

Si el argumento es el orden en que las partes se hablan, el diagrama de secuencia lo enseña.

Sí: quédate con proceso en carriles

No: usa Diagrama de secuencia

¿Las columnas son momentos y no fechas?

Si cada paso tiene fecha y duración, un Gantt los pone en un eje de tiempo.

Sí: quédate con proceso en carriles

No: usa Diagrama de Gantt

Código

La misma pieza, con tus datos

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

const spec = await getPreset('concept-lanes');
spec.data.rows = misFilas; // tus columnas
const { svg, warnings } = await renderComposition(spec);

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

Dudas

¿Qué significa que dos pasos estén en la misma columna?

Que ocurren en el mismo momento del proceso. El eje de avance es común y los carriles solo dicen quién.

¿Cuántos pasos caben?

Se lee bien entre cuatro y quince celdas, repartidas entre los carriles.

¿Qué hace si faltan datos?

No usa valores que puedan faltar.

¿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 «cómo funciona algo»

Guía para elegir: cómo funciona algo →