Saltar al contenido principal

Mermaid 11.15.0

Guía rápida de líneas de tiempo en Mermaid

Una línea de tiempo agrupa eventos bajo períodos ordenados. Usa Gantt si necesitas fechas, duraciones o dependencias: los períodos son etiquetas, no un calendario a escala.

Crear con el Generador de cronogramas Mermaid →

Inicio rápido

Separa el período del evento con dos puntos; cada separador adicional añade otro evento.

Mermaid
Abrir en el editor → 
timeline
  title Ciclo de documentación
  Borrador : Esquema acordado
  Revisión : Comentarios recibidos : Cambios aprobados
  Publicación : Guía publicada

Cargando…

Referencia de sintaxis

Referencia de sintaxis
SintaxisSignificado
timeline / title TextDeclara la línea de tiempo y su título opcional.
section TextAgrupa los períodos siguientes en una sección.
Period : Event : Another eventAñade varios eventos separados por dos puntos.
: Another eventContinúa el período anterior con otro evento.
<br>Introduce un salto en una etiqueta.
config.timeline.disableMulticolorDesactiva la alternancia de colores en períodos sin secciones.
theme: base / themeVariables.cScale0…cScale11Personaliza fondos con cScale y textos con cScaleLabel usando theme base.
%% / accTitle: / accDescr:Comentarios y descripciones accesibles.

Períodos y eventos

Los períodos no tienen que ser fechas. Los eventos tras dos puntos adicionales pertenecen al mismo período; el orden del código determina la secuencia.

Mermaid
Abrir en el editor → 
timeline
  title Notación de revisión
  Pasada 1 : Estructura comprobada
         : Referencias comprobadas
  Pasada 2 : Redacción comprobada : Enlaces comprobados

Cargando…

Secciones y saltos de línea

section afecta a los períodos siguientes hasta otra sección. Usa etiquetas breves y <br> para saltos intencionales.

Mermaid
Abrir en el editor → 
timeline
  title Etapas editoriales
  section Preparación
    Revisión<br>del esquema : Alcance acordado
  section Entrega
    Revisión<br>final : Correcciones integradas
    Publicación : Lectores avisados

Cargando…

Períodos de un solo color

disableMulticolor evita alternar colores en una línea sin secciones. No añade escala temporal ni relaciones.

Mermaid
Abrir en el editor → 
---
config:
  timeline:
    disableMulticolor: true
---
timeline
  title Pasos de aprobación
  Borrador : Enviado
  Revisión : Aceptado
  Publicación : Archivado

Cargando…

Colores de sección

Usa theme base con cScale0…cScale11 y cScaleLabel0…cScaleLabel11. Mantén buen contraste; los colores se repiten al agotar la paleta.

Mermaid
Abrir en el editor → 
---
config:
  theme: base
  themeVariables:
    cScale0: "#d3e5ff"
    cScaleLabel0: "#171717"
    cScale1: "#f5f5f5"
    cScaleLabel1: "#171717"
---
timeline
  title Revisión en dos fases
  section Redacción
    Esquema : Listo
  section Publicación
    Guía : Disponible

Cargando…

Errores frecuentes

Dejar un evento vacío

Cada separador necesita texto de evento. Un período sin separador es válido, pero no contiene eventos.

Sintaxis incorrecta: ejemplo corregido abajo

timeline
  :

Esperar distancias proporcionales

Año y mes son solo etiquetas; usa Gantt para intervalos proporcionales.

Limitaciones

  • Los períodos son categorías ordenadas, sin distancia temporal proporcional.
  • No hay duraciones, dependencias ni coordenadas por evento.
  • Muchas etiquetas largas dificultan la lectura.

Preguntas frecuentes

¿Puede un período incluir varios eventos?
Sí: usa varios eventos separados por dos puntos o una continuación que empiece con dos puntos.
¿Cómo cambio los colores?
Configura theme base y las variables cScale y cScaleLabel en el frontmatter.
¿Cuándo conviene usar Gantt?
Usa Gantt para intervalos reales, duraciones y dependencias; timeline sirve para una narración breve.