Línea de tiempo
Cuenta una historia año a año
¿Qué es un Línea de tiempo?
Una línea de tiempo dispone los eventos cronológicamente: historia de la empresa, hitos de proyecto, evolución del producto, retrospectivas de incidentes. Las líneas de tiempo de Mermaid agrupan varios eventos por periodo y siguen siendo legibles a cualquier tamaño.
Las líneas de tiempo son el diagrama de la retrospectiva: postmortems de incidentes, diapositivas de historia de la empresa, la sección «cómo hemos llegado hasta aquí» de un documento de estrategia. Son especialmente buenas haciendo visibles los huecos — tres eventos en marzo y nada hasta septiembre ya cuentan una historia. Lo que no saben hacer es escalar: los periodos son etiquetas, separadas por igual sea cual sea el intervalo, y nada se ordena por ti. Un periodo tampoco lleva más que texto: ni responsable, ni enlace, ni estado por el que filtrar.
Ejemplo en directo
timeline
title History of the project
2024 : Idea & prototype
2025 : First customers
: Seed funding
2026 : EU expansion
: AI featuresCuándo usarlo
Errores frecuentes
Los periodos nunca se ordenan
Mermaid dibuja los periodos en el orden en que los escribiste, así que una entrada de 2026 puesta por encima de otra de 2024 se queda ahí. No hay comprobación cronológica ni aviso: ordena tú el código antes de publicar.
Periodos antes de la primera sección
En cuanto una línea de tiempo tiene una sección, todos los periodos declarados antes de esa primera línea section desaparecen del render, en silencio y sin ningún error. Dales a esos periodos iniciales una sección propia, o no uses ninguna sección.
Frases en lugar de eventos
El texto de un evento se parte a un ancho fijo, así que una frase entera se convierte en cuatro líneas apiladas e infla la altura del diagrama. Deja los eventos en unas pocas palabras y lleva el detalle al documento.
Sintaxis básica
timeline
title My timeline
2025 : Event A
: Event B
2026 : Event Ctimeline title History of the projectEl título es opcional, pero hace de pie de figura, algo que importa en cuanto el diagrama se exporta por su cuenta a una diapositiva o a un postmortem.
2025 : First customersA la izquierda de los dos puntos va la etiqueta del periodo — un año, un trimestre, Sprint 12, lo que sea. Nunca se interpreta como fecha, así que vale cualquier formato.
2024 : Idea : PrototypeLos dos puntos adicionales de la misma línea añaden más eventos al mismo periodo, lo que mantiene compacto el código cuando un año concentra varios momentos destacados.
section Early days 2024 : IdeaLas secciones agrupan periodos consecutivos en una era y los colorean juntos — útil para separar el antes y el después de una ronda de financiación, una migración o una caída.
Preguntas sobre este diagrama
¿Puede un periodo contener varios eventos?
Sí — añade líneas adicionales que empiecen por «:» bajo el mismo periodo y se apilarán verticalmente bajo esa fecha.
¿Línea de tiempo o diagrama de Gantt?
La línea de tiempo para contar el pasado o dar una visión general (eventos con fechas). El Gantt para planificar el trabajo (tareas con duraciones y dependencias).
¿Puedo añadir una línea de tiempo de Mermaid a un postmortem en Confluence?
Confluence no tiene soporte nativo de Mermaid: usa una macro del Marketplace o pega un SVG o PNG exportado. GitHub y GitLab renderizan las líneas de tiempo directamente desde un bloque delimitado, así que un informe guardado en un repositorio no necesita nada más.
¿Cómo doy color a las secciones de una línea de tiempo?
Las secciones toman su color de la escala del tema. Sobrescríbelo con una directiva init en la primera línea — %%{init: {"themeVariables": {"cScale0": "#4f46e5"}}}%% —, donde cScale0 es la primera sección, cScale1 la segunda, y así hasta cScale11. La paleta queda incrustada en el SVG exportado.
¿Puedo poner una línea de tiempo en vertical?
No: se renderizan siempre en horizontal y no hay ajuste de dirección. Nunca se parten en varias filas: el diagrama solo se hace más ancho. Para un historial largo que deba caber en una columna estrecha, un diagrama de flujo de arriba abajo o un gitGraph TB: aprovechan mucho mejor el espacio.
¿Puedo convertir automáticamente un informe de incidente en una línea de tiempo?
Pega el informe en Mermaid Studio y la IA extrae los eventos con fecha en una línea de tiempo que luego puedes editar. Tómalo como un primer borrador: los periodos conservan el orden en que se extrajeron, así que comprueba la cronología antes de publicar.
¿Línea de tiempo u otro tipo de diagrama?
¿Línea de tiempo o recorrido del usuario?
Ambos despliegan pasos de izquierda a derecha. La línea de tiempo trata del cuándo: eventos con fecha, sin actor y sin puntuación. El recorrido trata de cómo se vivió: pasos ordenados, un actor, una puntuación. Si nadie vivió los eventos, quieres una línea de tiempo.
¿Línea de tiempo o grafo Git?
La línea de tiempo es plana: cada evento va sobre una sola línea. El grafo Git se ramifica y sus líneas vuelven a unirse. Un historial de releases con ramas de mantenimiento en paralelo pide el grafo Git; una historia de producto donde importa la secuencia y no el paralelismo, la línea de tiempo.
Crea tu Línea de tiempo ahora
Descríbelo en lenguaje natural — la IA escribe el código Mermaid por ti.
Abrir Mermaid Studio