Organiza hitos, eventos históricos y hojas de ruta de productos con bloques interactivos y vista previa SVG instantánea.
Listo.
Arrastra para ordenar o pulsa Alt+Arriba/Abajo
Pega aquí sintaxis Mermaid de cronograma válida. Las ediciones visuales normalizan el espaciado y eliminan comentarios; copia antes el código con comentarios.
El código válido se puede editar directamente y convertir en el constructor visual.
Vista previa en vivo
Cronograma del proyecto
La vista previa está lista.
El diagrama se carga cuando el espacio entra en pantalla o empiezas a editar.
Patrón de sintaxis
Los cronogramas ordenan la secuencia desde el encabezado del diagrama hasta los periodos y eventos. Usa esta referencia al escribir la sintaxis, revisar errores de línea o preparar diagramas para documentación Markdown.
Ejemplo para copiar y pegar
Sangra las líneas bajo un periodo con espacios iniciales y dos puntos.
timeline
title Incident Review
Detection : Elevated error rate
: On-call engineer paged
Recovery : Faulty release rolled back
: Service health confirmedEjemplo para copiar y pegar
Usa la palabra clave section para dividir visualmente cronogramas largos.
timeline
title Museum Exhibition
section Preparation
Research : Select artifacts : Secure loans
Conservation : Restore pieces : Photograph catalog
section Public Program
Opening week : Press preview : Member night
Closing week : Final tours : Return loansEjemplo para copiar y pegar
Añade LR para un flujo horizontal o TD para una orientación vertical.
timeline LR
title Migration Plan
Audit : Inventory workloads
Pilot : Move an internal service
Cutover : Move production trafficEjemplo para copiar y pegar
Usa entidades HTML como #58; cuando los dos puntos formen parte de una etiqueta temporal.
timeline
title Operations Log
Sprint #35;4 #58; 10#58;00 UTC : Deploy at 10:00 : Verify issue #123Sin la palabra clave del diagrama, Mermaid muestra un error. Empieza la primera línea que no sea un comentario con timeline, timeline LR o timeline TD.
Un signo de dos puntos sin escapar dentro de una etiqueta de periodo puede provocar un error de análisis. Escápalo como #58;.
Ejemplo con error
Abre este ejemplo para ver el error persistente y añade después la palabra clave.
title Release Plan
2026 : Public launchEjemplo con error
Cambia 10:00 por 10#58;00 en la etiqueta del periodo.
timeline
10:00 UTC : Public launchEjemplo para copiar y pegar
Organiza hitos, eventos históricos y hojas de ruta de productos con bloques interactivos y vista previa SVG instantánea.
Ejemplo para copiar y pegar
Ideal para secuencias cortas que no requieren títulos ni secciones.
timeline
Mañana : Reunión de equipo
Tarde : Decisión registradaEjemplo para copiar y pegar
Mantén varios hitos en el mismo mes usando separadores de dos puntos.
timeline
title Conferencia Comunitaria
Abril : Convocatoria ponentes : Sede confirmada
Junio : Programa publicado : Registro abierto
Septiembre : Día del evento : Grabaciones disponiblesEjemplo para copiar y pegar
Los comentarios se mantienen en el código pero la edición visual los normaliza.
timeline
title Revisión de Incidente
Detección : Tasa elevada de errores
: Ingeniero de guardia avisado
Recuperación : Versión problemática revertida
: Salud del servicio confirmadaEjemplo para copiar y pegar
Usa secciones para separar el trabajo de preparación de los hitos públicos.
timeline
title Exposición de Galería
section Curaduría
Ene : Selección de obras : Firma de acuerdos
section Montaje
Feb : Construcción de vitrinas : Calibración de luces
section Público
Mar : Apertura VIP : Entrada al público generalEjemplo para copiar y pegar
Usa TD cuando una hoja de ruta extensa se lee mejor de arriba hacia abajo.
timeline TD
title Migración de Centro de Datos
section Preparación
Auditoría : Inventario de cargas
Piloto : Migrar servicio interno : Validar reversión
section Transición
Fin de semana 1 : Migrar bases de datos : Verificar réplicas
Fin de semana 2 : Mover tráfico de producción : Retirar servidores antiguosEjemplo para copiar y pegar
Documenta meses exactos de lanzamiento sin convertir el diagrama en un calendario complejo.
timeline
title Notas de Versión de Atlas CLI
2025 Oct : Versión 0.8.0 : Caché offline introducida
2026 Feb : Versión 0.9.0 : Hooks de plugins : Validación mejorada
2026 Jun : Versión 1.0.0 : API de comandos estable : Guía de migración publicadaEjemplo para copiar y pegar
Comprueba cómo se adaptan descripciones largas antes de publicar el diagrama.
timeline
title Puesta en Servicio del Telescopio
Revisión de preparación : Verificar resultados térmicos y cerrar acciones de software
Ventana de lanzamiento : Completar integración y publicar traspaso de operaciones
Primera luz : Calibrar instrumentos primarios y publicar primera observación profundaUn cronograma Mermaid muestra hitos cronológicos, fases de lanzamiento o eventos agrupados en periodos de tiempo.
Sí. Cambia el selector de orientación para alternar entre formatos vertical TD y horizontal LR.
Separa los eventos con dos puntos o añade tarjetas de evento bajo el mismo bloque de periodo.