Editor de diagramas de Gantt Mermaid
Un diagrama de Gantt coloca el trabajo sobre un calendario: qué va cuándo, qué se solapa y qué no puede empezar hasta que algo termine. Úsalo cuando las fechas y las dependencias sean el asunto. Si solo necesitas el orden y no las fechas, un diagrama de flujo pesa menos y no se pudre en cuanto el calendario se mueve.
Una planificación de release con dependencias y un hito
Lo que convierte esto en un Gantt y no en un dibujo de barras es `after a1`: la dependencia está declarada, así que mover la primera tarea arrastra todo lo que va detrás. El hito marca una fecha fija que no consume tiempo.
gantt
title Release 2.4
dateFormat DD/MM/YYYY
axisFormat %d %b
excludes weekends
section Desarrollo
Contrato de la API :done, a1, 07/01/2026, 10d
Implementación :active, a2, after a1, 20d
QA interna : a3, after a2, 8d
section Publicación
Periodo de pruebas : b1, after a3, 5d
Comité de aprobación :milestone, m1, after b1, 0d
Despliegue :crit, b2, after m1, 3dEjemplos resueltos
1. El diagrama válido más pequeño
`dateFormat` le dice a Mermaid cómo LEER las fechas que escribes; `axisFormat` controla cómo se MUESTRAN en el eje. Son ajustes distintos y confundirlos es la frustración número uno con los diagramas de Gantt.
gantt
title Sprint 14
dateFormat DD/MM/YYYY
section Trabajo
Construir el buscador :02/03/2026, 10d2. Identificadores y dependencias
Darle un identificador a una tarea permite que las siguientes digan `after <id>`. Una vez declaradas las dependencias, cambias una fecha de inicio en un solo sitio y el resto del calendario la sigue.
gantt
title Migración de datos
dateFormat DD/MM/YYYY
section Preparación
Auditoría del esquema :a1, 02/02/2026, 5d
Escribir el mapeo :a2, after a1, 8d
section Ejecución
Ensayo general :a3, after a2, 3d
Cambio en producción :a4, after a3, 1d3. Palabras de estado
`done`, `active` y `crit` cambian cómo se dibuja la barra. Son la forma más barata de que el diagrama responda «por dónde vamos» y no solo «cuál era el plan».
gantt
title Plataforma, primer trimestre
dateFormat DD/MM/YYYY
section Infraestructura
Limpieza de Terraform :done, t1, 05/01/2026, 12d
Subir Kubernetes :active, t2, 19/01/2026, 15d
Revisión de costes : t3, after t2, 5d
section Seguridad
Auditoría de dependencias :crit, s1, 12/01/2026, 6d4. Hitos
Un hito es un punto, no un intervalo: dale `0d`. Sirven para las fechas que fija algo ajeno al proyecto — una feria, un plazo contractual, un cierre de código.
gantt
title Plan de lanzamiento
dateFormat DD/MM/YYYY
section Ingeniería
Cierre de funcionalidades :milestone, m1, 01/04/2026, 0d
Caza de errores : e1, 01/04/2026, 5d
Rama de release :milestone, m2, after e1, 0d
section Marketing
Fin del embargo de prensa :milestone, m3, 15/04/2026, 0d5. Excluir fines de semana y festivos
`excludes weekends` impide que las duraciones cuenten sábados y domingos, así que una tarea de 10 días ocupa dos semanas laborables en lugar de terminar en mitad del fin de semana. Los festivos se excluyen uno a uno por fecha, que en España es imprescindible en primavera.
gantt
title Alta de un servicio nuevo
dateFormat DD/MM/YYYY
excludes weekends, 01/05/2026, 15/08/2026
section Puesta en marcha
Aprovisionar la infra :p1, 04/05/2026, 5d
Montar el CI/CD :p2, after p1, 5d
section Traspaso
Manual y formación :p3, after p2, 4dReferencia de sintaxis del diagrama de Gantt
De los seis tipos, el Gantt es el menos indulgente en un punto concreto — la línea de tarea — y el más indulgente en todo lo demás. Justamente por eso casi todos sus fallos son silenciosos.
| Sintaxis | Significado |
|---|---|
| gantt | Abre el diagrama. |
| title Texto | Título del diagrama. |
| dateFormat DD/MM/YYYY | Cómo se INTERPRETAN las fechas que escribes. |
| dateFormat YYYY-MM-DD | El formato ISO, el que trae por defecto. |
| axisFormat %d %b | Cómo se MUESTRAN las fechas en el eje. Ajuste distinto de dateFormat. |
| excludes weekends | No contar sábados ni domingos en las duraciones. |
| excludes 01/05/2026 | Excluir una fecha concreta. Así se sacan los festivos. |
| section Nombre | Agrupa tareas en una banda con etiqueta. |
| Tarea :id, 01/01/2026, 10d | Tarea con inicio y duración explícitos. |
| Tarea :id, after otra, 10d | Tarea que empieza cuando termina `otra`. |
| Tarea :done, id, ... | Terminada — se dibuja apagada. |
| Tarea :active, id, ... | En curso — se dibuja resaltada. |
| Tarea :crit, id, ... | Crítica — se dibuja en el color de acento. |
| Nombre :milestone, id, fecha, 0d | Un instante en lugar de un intervalo. |
| 10d / 3w / 2h | Duraciones en días, semanas y horas. La unidad no es opcional. |
Seis fallos de Gantt — y solo uno da error
Esto es lo que distingue al Gantt de los otros cinco tipos. Reproducido con Mermaid 11.12.2: exactamente uno de los seis de abajo impide que el diagrama se dibuje. Los otros cinco producen un calendario perfectamente verosímil y equivocado, que es mucho más peligroso, porque nadie revisa un diagrama que se ha dibujado bien.
Lo que ves
Parse error, termina en: Expecting 'taskData', got 'NL'
Por qué
Una línea de tarea sin dos puntos. Los dos puntos separan el nombre visible de sus datos, y sin ellos no hay datos que analizar. Es el único fallo de esta lista que Mermaid rechaza de plano.
Solución
Pon los dos puntos entre el nombre y el identificador.
gantt
dateFormat DD/MM/YYYY
section Trabajo
Diseño a1, 01/01/2026, 5dgantt
dateFormat DD/MM/YYYY
section Trabajo
Diseño :a1, 01/01/2026, 5dLo que ves
El diagrama se dibuja, pero las fechas caen dos meses antes
Por qué
Este es el fallo específico de escribir en español, y es el más caro de la lista. Escribimos las fechas como 01/03/2026 para el 1 de marzo, pero el `dateFormat` por defecto es `YYYY-MM-DD` y ante una fecha con barras Mermaid la interpreta al estilo estadounidense, mes primero. Medido: `01/03/2026` con `dateFormat YYYY-MM-DD` coloca la tarea el 3 de enero. No hay ningún aviso; el diagrama sale precioso y con dos meses de desfase.
Solución
Declara `dateFormat DD/MM/YYYY` y escribe las fechas como las escribes siempre. Comprobado: con ese formato declarado, `01/03/2026` cae en el 1 de marzo.
gantt
dateFormat YYYY-MM-DD
section S
Diseño :a1, 01/03/2026, 10dgantt
dateFormat DD/MM/YYYY
section S
Diseño :a1, 01/03/2026, 10dLo que ves
El diagrama se dibuja, pero el eje abarca de pronto muchos meses
Por qué
Un `after` que apunta a un identificador inexistente — normalmente una errata, o un identificador que se renombró. Mermaid no avisa: coloca la tarea en un punto arbitrario, y eso estira el eje hasta alcanzarla. Dos tareas de diez días pueden acabar sobre un eje de ocho meses.
Solución
Comprueba que cada `after <id>` coincide exactamente con un identificador declarado. El cambio brusco en la escala del eje es la pista.
gantt
dateFormat DD/MM/YYYY
section S
Diseño :a1, 01/01/2026, 10d
Construcción :a2, after diseño, 10dgantt
dateFormat DD/MM/YYYY
section S
Diseño :a1, 01/01/2026, 10d
Construcción :a2, after a1, 10dLo que ves
El nombre de una tarea aparece cortado
Por qué
Hay dos puntos dentro del nombre de la tarea. El primer signo de dos puntos es el separador, así que todo lo que va detrás se lee como datos: `Fase 1: diseño` se dibuja como una tarea llamada solo `Fase 1`, y la palabra diseño desaparece.
Solución
Nada de dos puntos en los nombres de tarea. Usa un guion o lleva el detalle al nombre de la sección.
gantt
dateFormat DD/MM/YYYY
section S
Fase 1: diseño :a1, 01/01/2026, 10dgantt
dateFormat DD/MM/YYYY
section S
Fase 1 - diseño :a1, 01/01/2026, 10dLo que ves
Una barra se queda en nada
Por qué
Una duración sin unidad. `5` no son cinco días: la unidad es obligatoria y sin ella la tarea no recibe una longitud con sentido. El diagrama se dibuja igualmente, con una tarea que aparenta no ocupar tiempo.
Solución
Escribe siempre la unidad: `5d`, `3w`, `2h`.
gantt
dateFormat DD/MM/YYYY
section S
Diseño :a1, 01/01/2026, 5gantt
dateFormat DD/MM/YYYY
section S
Diseño :a1, 01/01/2026, 5dLo que ves
Las duraciones cuadran pero las fechas de fin no cuadran con la realidad
Por qué
Falta `excludes weekends`. Por defecto una tarea de 10 días son diez días naturales, fines de semana incluidos, así que cualquier cosa más larga que una semana laboral termina antes en el diagrama que en la práctica. En España, con el añadido de los festivos de mayo y agosto, el desfase de un trimestre se vuelve difícil de defender en una reunión.
Solución
Añade `excludes weekends` cerca del principio, y las fechas de los festivos detrás, salvo que el trabajo sea de verdad de siete días a la semana.
gantt
dateFormat DD/MM/YYYY
section S
Migración :a1, 01/06/2026, 10dgantt
dateFormat DD/MM/YYYY
excludes weekends
section S
Migración :a1, 01/06/2026, 10dNotas sobre el dibujado
Medido sobre el Mermaid 11.12.2 que usa este sitio. El Gantt se comporta distinto a todos los demás tipos.
Es el único tipo con un ancho de dibujo fijo
Todos los demás diagramas de este sitio crecen en la dirección en que crece su contenido. Un Gantt mide siempre 1264 píxeles de ancho en su viewBox, tenga tres tareas o cuarenta; lo único que cambia es la altura, medida entre unos 172 y unos 1060 píxeles. El eje se comprime o se estira para caber en ese ancho fijo, y por eso un diagrama de dos años y otro de dos semanas se ven igual de densos. Si las barras salen ilegiblemente finas, el problema es el rango de fechas, no el número de tareas.
Las fechas con barras se interpretan a la americana si no dices otra cosa
Vale la pena repetirlo aquí porque es la trampa que más caro sale escribiendo en español. Medido: con `dateFormat YYYY-MM-DD`, la fecha `01/03/2026` no falla ni avisa, sino que se coloca el 3 de enero. Declarar `dateFormat DD/MM/YYYY` lo arregla del todo y permite escribir las fechas como se escriben aquí. Es la primera línea que deberías poner en cualquier Gantt en español.
La exportación a PNG es exacta al píxel
El Gantt dibuja sus etiquetas como texto SVG plano en lugar de HTML incrustado, así que, a diferencia de los diagramas de flujo, de clases, de estados y ER, se puede rasterizar directamente. El PNG exportado coincide exactamente con la pantalla, sin redibujado y sin cambios en la tipografía.
Fue el más perjudicado por el fallo de exportación a PNG
Como Mermaid emite `width="100%"` y ninguna altura, el navegador resolvía el tamaño de exportación contra una caja por defecto de 300×150, y la proporción ancha y baja del Gantt hacía que eso saliera lo peor posible: un diagrama de 1280×148 se exportaba como un PNG de 600×58. Ahora la exportación lee el viewBox y el mismo diagrama sale a 2560×296. Conviene saberlo si guardas PNG antiguos de diagramas de Gantt: no se van a poder ampliar.
La gramática es permisiva en todo menos en los dos puntos
Secciones que faltan, palabras de estado desconocidas, fechas en el formato equivocado y duraciones sin unidad: todo eso se dibuja. Lo único que se rechaza es una línea de tarea sin dos puntos. Esa asimetría es lo más útil que se puede saber sobre escribir diagramas de Gantt: que un diagrama se dibuje no dice casi nada sobre si es correcto.
Cuándo conviene otro diagrama
Si las fechas son suposiciones, un Gantt las presentará con una precisión que no se han ganado, y alguien te las recordará. Un diagrama de flujo que muestre el orden sin fechas es más honesto y no hay que mantenerlo cuando el calendario se mueva.
Si el plan cambia cada semana, un Gantt en texto bajo control de versiones es realmente bueno — el diff enseña qué se ha movido —, pero un diagrama que nadie actualiza es peor que ningún diagrama. Sé realista sobre cuál de los dos estás haciendo.
Y para cualquier cosa que tenga que ver con reparto de carga, capacidad o asignación por persona, esta es la herramienta equivocada. Mermaid dibuja barras sobre un calendario; no sabe quién hace el trabajo ni si esa persona ya está ocupada.
Otros tipos de diagrama
Escrito por Dominik Malsch · Última actualización: