Saltar al contenido principal

Mermaid 11.15.0

Guía rápida de diagramas de Gantt en Mermaid

Gantt representa tareas con fechas, duración y dependencias. Elige una línea de tiempo para narrar acontecimientos o un diagrama de secuencia para mensajes entre sistemas.

Crear con el Creador de diagramas de Gantt →

Inicio rápido

Asigna un id estable a cada tarea y usa after para empezar cuando termine otra.

Mermaid
Abrir en el editor → 
gantt
  title Publicación de documentación
  dateFormat YYYY-MM-DD
  todayMarker off
  section Preparación
  Esquema :done, outline, 2026-10-05, 2d
  Revisión :active, review, after outline, 3d
  Publicar :milestone, publish, after review, 0d

Cargando…

Referencia de sintaxis

Referencia de sintaxis
SintaxisSignificado
gantt / title / sectionInicia el diagrama, añade un título y agrupa las tareas.
dateFormat YYYY-MM-DD / axisFormat %d %bdateFormat usa tokens de Day.js; axisFormat usa tokens de D3.
tickInterval 1week / weekday mondayDefine el intervalo y el día inicial de las marcas semanales.
weekend friday / excludes weekends, 2026-10-12Configura el fin de semana; los días excluidos alargan las tareas definidas por duración.
includes 2026-10-10Una fecha incluida anula la exclusión; usa fechas, no nombres de días.
inclusiveEndDatesIncluye la fecha final indicada explícitamente.
todayMarker off / todayMarker stroke:#0070f3,stroke-width:2pxOculta o modifica la línea de la fecha actual.
Task :id, start, end / Task :id, start, 2dSepara el nombre con dos puntos y los metadatos con comas.
after a b / until c dafter espera al último final; until termina en el primer inicio de los ids indicados.
500ms / 30s / 30m / 4h / 3d / 2w / 1M / 1yLas unidades distinguen mayúsculas: m son minutos y M meses; se admiten decimales.
done / active / crit / milestone / vertLas etiquetas preceden al id; milestone marca un instante y vert no ocupa una fila.
click id href "https://example.com" / click id call callback()Los enlaces y callbacks dependen del anfitrión; el modo estricto desactiva la interacción.
topAxis / config.gantt.topAxis / config.gantt.displayMode: compactMuestra el eje superior y comparte filas entre tareas que no se solapan.
%% / accTitle: / accDescr:Comentarios y descripciones accesibles.

Calendario laboral

Los días excluidos alargan una duración sin dividir la barra. includes recupera fechas concretas; las fechas finales explícitas conservan su límite, salvo inclusiveEndDates.

Mermaid
Abrir en el editor → 
gantt
  dateFormat YYYY-MM-DD
  axisFormat %d %b
  tickInterval 1week
  weekday monday
  excludes weekends, 2026-10-12
  includes 2026-10-10
  todayMarker off
  section Redacción
  Manual :handbook, 2026-10-09, 4d
  Corrección :proof, after handbook, 2d

Cargando…

Dependencias entre tareas

Usa ids, no nombres visibles. after con varios ids espera al último final; until termina en el primer inicio. Evita referencias inexistentes y ciclos.

Mermaid
Abrir en el editor → 
gantt
  dateFormat YYYY-MM-DD
  todayMarker off
  section Publicación
  Visto bueno :milestone, signoff, 2026-10-15, 0d
  Edición :edit, 2026-10-05, until signoff
  Pruebas :test, 2026-10-07, 3d
  Paquete :package, after edit test, 1d

Cargando…

Estados, hitos y marcadores

Combina crit con done o active. Un hito de duración cero se sitúa al inicio; con duración, en su punto medio. vert atraviesa el gráfico sin fila propia.

Mermaid
Abrir en el editor → 
gantt
  dateFormat YYYY-MM-DD
  todayMarker off
  section Entrega
  Borrador :done, draft, 2026-10-05, 2d
  Validar :crit, active, validate, after draft, 3d
  Fecha límite :vert, deadline, 2026-10-09, 0d
  Aprobación :milestone, approval, after validate, 0d

Cargando…

Enlaces y seguridad

click asigna una URL o un callback. Esta web usa seguridad estricta y desactiva la interacción dentro del diagrama; mantén esa protección con código no fiable.

Mermaid
Abrir en el editor → 
gantt
  dateFormat YYYY-MM-DD
  todayMarker off
  section Notas
  Leer guía :guide, 2026-10-05, 2d
  click guide href "https://themarkdowner.com"

Cargando…

Diseño compacto y eje superior

Coloca la configuración YAML antes de gantt. compact comparte filas cuando es posible, sin asignar recursos. La directiva antigua %%{init: ...}%% también funciona.

Mermaid
Abrir en el editor → 
---
config:
  gantt:
    displayMode: compact
    topAxis: true
---
gantt
  dateFormat YYYY-MM-DD
  todayMarker off
  section Tareas
  Primera pasada :first, 2026-10-05, 2d
  Segunda pasada :second, after first, 2d

Cargando…

Errores frecuentes

Confundir formatos de fecha

YYYY-MM-DD pertenece a dateFormat y %d %b a axisFormat; cambiar el eje no cambia la lectura de fechas.

Inventar unidades de duración

Una unidad inválida puede producir duración cero sin avisar; comprueba el resultado.

Usar una directiva inexistente

No existe dates. Usa dateFormat en su propia línea.

Sintaxis incorrecta: ejemplo corregido abajo

gantt
  dates YYYY-MM-DD
Mermaid
Abrir en el editor → 
gantt
  dateFormat YYYY-MM-DD
  todayMarker off
  section Comprobación
  Verificar :check, 2026-10-05, 1d

Cargando…

Limitaciones

  • Mermaid no calcula la ruta crítica ni controla la capacidad de recursos.
  • Las exclusiones modifican duraciones, pero no desplazan automáticamente una fecha final explícita.
  • La seguridad estricta desactiva los clics en tareas.

Preguntas frecuentes

¿Cómo excluyo fines de semana?
Usa excludes weekends; weekend friday selecciona viernes y sábado. includes recupera una fecha concreta.
¿Cómo enlazo dos tareas?
Asigna un id a la primera tarea y usa after con ese id en la segunda; varios ids esperan al último final.
¿Cómo imprimo esta guía?
Imprime desde el navegador y selecciona PDF; permanecen el código y los diagramas.