Pasos e hitos

Secuencia de etapas hasta una meta.

Definición

Pasos e hitos dibuja una serie de paradas en orden, cada una con su título, un texto breve y lo que deja al terminar. Se lee siguiendo la línea, y una flecha de retorno dice que el proceso vuelve a empezar. Sirve para explicar un método de trabajo, una implantación o un ciclo de mejora.

Editar con tus datos SVG Spec JSON

Tres normas distintas piden lo mismo: no borrar el asiento anterior

Datos: paso · detalle · artefacto · momento · rol
Buena para: Explicar una secuencia de pasos y lo que deja cada uno.
Evítala cuando: Cuando la duración o las fechas son el argumento: la distancia entre paradas no mide nada.
Se lee bien: Entre 3 y 7 elementos; dibuja hasta 10
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é
`paso` · opcional	string	El título del paso. Medido: sin él la parada sigue dibujada con su número.
`detalle` · opcional	string	El cuerpo breve bajo el título.
`artefacto` · opcional	string	Lo que deja el paso. Medido: sin la columna la figura pierde 6 marcas — es la mitad del argumento.
`momento` · opcional	string	El año o la etiqueta temporal. Se imprime tal cual: no hay eje de tiempo, así que la distancia entre dos paradas no mide nada.
`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 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 más lo que deja cada paso que su fecha?

Si lo que cuenta son las fechas clave, la línea de hitos las coloca en el tiempo.

Sí: quédate con pasos e hitos

No: usa Línea de hitos

¿Los pasos van en una sola línea, sin bifurcarse?

Si hay decisiones y caminos alternativos, el diagrama de flujo de trabajo los dibuja.

Sí: quédate con pasos e hitos

No: usa Diagrama de flujo de trabajo

¿Basta con el orden, sin duraciones ni solapes?

Si cada paso tiene duración y algunos se solapan, un Gantt lo enseña.

Sí: quédate con pasos e hitos

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-steps');
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é es el artefacto?

Lo que deja cada paso: la prueba de que ocurrió. Es la mitad del argumento de la pieza.

¿El momento de cada paso marca una posición en el tiempo?

No. Se imprime tal cual, como etiqueta: no hay eje de tiempo y la distancia entre dos paradas no mide nada.

¿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 «flujos y recorridos»

Guía para elegir: flujos y recorridos →