Diagrama de secuencia

Quién habla con quién y en qué orden.

Definición

El diagrama de secuencia dibuja las partes de un procedimiento como líneas de vida paralelas y los mensajes como flechas que cruzan entre ellas, de arriba abajo en el orden en que ocurren. Se lee bajando: quién llama a quién, quién responde y qué sale antes de tiempo. Sirve para revisar una integración, un protocolo de atención o cualquier intercambio entre personas y sistemas.

Editar con tus datos SVG Spec JSON

La factura sale antes de que llegue la autorización

Datos: category · label · order · x · source · target · group · series · value · note · side · color
Buena para: Ver en qué orden se hablan las partes y dónde ese orden falla.
Evítala cuando: Cuando el argumento es cuánto se tarda: el hueco entre dos flechas es fijo y no mide tiempo.
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	Lo único que distingue las DOS clases de fila de esta tabla: «actor» si la fila es una línea de vida, «mensaje» si es una flecha. Un valor desconocido FALLA con los dos admitidos y una sugerencia; un spec con filas y sin ninguna legible FALLA diciendo cuántas trajo y qué columnas sí traía, en vez de dibujar el ejemplo de la pieza.
`label`	string	En un actor, el nombre —que es además su CLAVE: es lo que los mensajes escriben en «Desde» y «Hasta», y dos actores con el mismo nombre fallan—. En un mensaje, el VERBO que se lee sobre la flecha, o sea lo único que la figura dice de él.
`order` · opcional	number	Clave de ORDEN del mensaje, de arriba abajo. OPCIONAL: sin ella los mensajes se dibujan en el orden en que están declarados. NO es una coordenada ni un instante: sólo decide quién va antes. Un texto no numérico falla en vez de valer 0.
`x` · opcional	number	Clave de ORDEN del actor, de izquierda a derecha. OPCIONAL y con la misma regla: ordena, no coloca. Dos actores con 0 y 7000 se dibujan igual de juntos que con 0 y 1.
`source`	string	El Nombre del actor que envía. Sólo se lee en las filas de tipo «mensaje», y ahí es obligatorio: un nombre que no existe falla citándolo y listando los actores declarados, nunca desaparece del dibujo.
`target`	string	El Nombre del actor que recibe. Obligatorio en todo mensaje. Si coincide con «Desde», el mensaje es a sí mismo y se dibuja como un bucle que sale y vuelve a su propia línea de vida; todos los bucles miden lo mismo.
`group` · opcional	string	Vocabulario CERRADO de dos: «llamada» (punta maciza) o «respuesta» (punta abierta). Es lo único que separa las dos SIN depender del color. En blanco vale «llamada»; cualquier otra cosa falla con las dos admitidas. Es el rol canónico más cercano: el vocabulario no tiene una palabra para «sentido del mensaje».
`series` · opcional	string	Qué clase de actor es —persona, sistema, equipo, tercero—, estampado en versalitas dentro de su cabecera. OPCIONAL, una línea. NO es el rol semántico: ése es «Rol». Es el rol canónico más cercano; el vocabulario no tiene «papel».
`value` · opcional	string	La condición del mensaje, escrita bajo el verbo en cuerpo de nota: «fuera de tarifa», «sin esperar respuesta». OPCIONAL, una línea. Es TEXTO y nada más: no dimensiona ninguna marca. Es el rol canónico más cercano; el vocabulario no tiene «condición».
`note` · opcional	string	Una línea al pie de la cabecera del actor. OPCIONAL.
`side` · opcional	string	Sólo en un mensaje a sí mismo: por qué lado sale el bucle, «izquierda» o «derecha». OPCIONAL; sin él sale por la derecha. Cualquier otro valor falla con los dos admitidos.
`color` · opcional	string	neutro · foco · alerta · ausente · favorable. `ausente` es el único con trazo discontinuo y significa UNA cosa: el mensaje que el procedimiento declara y nadie envía. Un rol desconocido no cae a `neutro` en silencio: falla citando lo que se escribió. Aquí NO se admiten los alias «tipo» ni «estado», porque `Tipo` ya es la clase de fila.

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

¿Importa el orden de los mensajes y no cuánto tardan?

Si las duraciones son el argumento, un Gantt las pone en un eje de tiempo.

Sí: quédate con diagrama de secuencia

No: usa Diagrama de Gantt

¿Lo que pasa son mensajes entre partes y no tareas?

Si basta con decir quién hace cada paso, el proceso en carriles es más simple.

Sí: quédate con diagrama de secuencia

No: usa Proceso en carriles

¿Sigues una conversación y no los estados de un objeto?

Si lo que importa es por qué estados pasa un objeto, la máquina de estados lo dibuja.

Sí: quédate con diagrama de secuencia

No: usa Máquina de estados

Código

La misma pieza, con tus datos

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

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

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

Dudas

¿La distancia entre flechas mide tiempo?

No. Es una constante de la figura, y una columna de duración o latencia hace fallar el dibujo.

¿Cómo se distinguen llamada y respuesta?

Por la punta: maciza en la llamada, abierta en la respuesta. No depende del color.

¿Qué diferencia hay entre «ausente» y «alerta»?

«Ausente» es el mensaje que el procedimiento prevé y nadie envía: discontinuo y sin relleno. «Alerta» es un mensaje que sí ocurre, pero mal.

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