Guía de sintaxis de diagramas de línea de tiempo de Mermaid.js

¿Qué es un diagrama de línea de tiempo?

Un diagrama de línea de tiempo es una herramienta de visualización cronológica utilizada para representar eventos o hitos de proyectos a lo largo de una línea temporal lineal. Mientras que los diagramas de Gantt manejan dependencias y duraciones complejas de tareas, el diagrama de línea de tiempo se centra en el cuándo—proporcionando una narrativa clara y fácil de escanear sobre la evolución de un proyecto o el ciclo de lanzamiento de un sistema.

Con Mermaid.js, puedes definir tu línea de tiempo utilizando un formato de texto simple y jerárquico. El motor maneja automáticamente el espaciado, el formato de fechas o etiquetas de período, y la alineación de los marcadores de eventos a lo largo del eje temporal central.

Guía de sintaxis básica

Para diseñar una línea de tiempo válida y ejecutable, debes definir el período del eje y asignar eventos a secciones específicas.

1. Inicializar la línea de tiempo

Inicializas el lienzo utilizando la palabra clave timelinepalabra clave. La estructura se construye definiendo secciones (que actúan como agrupaciones) y asignando eventos (o fechas) a esas secciones.

timeline
    título Historia del desarrollo del sistema
    sección 2025
        Q1 : Lanzamiento Alpha
    sección 2026
        Q2 : Lanzamiento Beta

2. Agregar detalles a los eventos

Puedes agregar múltiples detalles a un marcador de tiempo único utilizando una lista separada por dos puntos. Esto es útil para resumir resultados clave o números de versión asociados con una fecha o período específico.

timeline
    sección T3 2026
        Lanzamiento : v1.0.0
                : Mejoras de rendimiento
                : Parches de seguridad

Ejemplo de diagrama de tiempo de Mermaid.js en el mundo real: Plan de lanzamiento de producto

Este plano modelo una hoja de ruta de producto de varios años, agrupando los lanzamientos por año fiscal y destacando los entregables clave de cada ciclo.

cronología
    título Mapa de producto 2026-2027
    sección 2026
        T1 : Fase de descubrimiento
           : Entrevistas con partes interesadas
        T2 : Desarrollo de MVP
           : Diseño de la API principal
        T3 : Lanzamiento beta
           : Bucles de retroalimentación de usuarios
    sección 2027
        T1 : Lanzamiento completo
           : Escalado global

Mejores prácticas para cronologías

• Mantenga las categorías breves: Use sección para denotar agrupaciones de alto nivel (como años o fases principales), manteniendo los eventos reales debajo específicos y accionables.
• Formato de fechas consistente: Asegúrese de que sus eventos de cronología estén en orden cronológico en el código, ya que el motor Mermaid sigue la secuencia de su script para determinar la colocación del diseño.
• Use detalles para contexto: No abarrote el eje central con demasiado texto. Use el formato de evento de múltiples líneas para desglosar “qué sucedió” en lugar de hacer que la etiqueta de fecha sea demasiado larga.