Diagrama de Gantt
El diagrama de Gantt es un tipo de gráfico de barras que se usa para mostrar el avance de un proyecto y el tiempo necesario para completarlo. El diagrama de Gantt muestra el número de días entre las fechas de inicio y de finalización de los elementos terminales y los elementos de resumen del proyecto.
Notas
El diagrama de Gantt registra cada tarea planificada como una barra continua que se extiende de izquierda a derecha. El eje x representa el tiempo y el eje y registra las distintas tareas y el orden en que se completan.
Es más importante aún que, cuando se excluyen las fechas, los días o un conjunto de fechas concretas de una tarea, el diagrama de Gantt se adapta a estos cambios prolongando la misma cantidad de días hacia la derecha, en lugar de crear huecos dentro de la tarea.
Copiar
Insertar
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
excludes 2026-03-16,2026-03-18,2026-03-19
section Section
A task :a1, 2026-03-07, 7d
Another task :after a1, 5d
Sin embargo, si las fechas excluidas se encuentran entre dos tareas que comienzan de forma consecutiva, las fechas excluidas se omitirán y quedarán en blanco en el gráfico, y después la tarea comenzará cuando terminen las fechas excluidas. Como se muestra a continuación:
Copiar
Insertar
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
excludes Sunday, Friday, Saturday
section Section
A task :a1, 2026-03-07, 5d
Another task :after a1, 7d
El diagrama de Gantt es útil para hacer seguimiento del tiempo necesario para completar un proyecto, pero con algunos ajustes también puede usarse para representar gráficamente los "días no laborables".
Sintaxis
Copiar
Insertar
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
excludes weekends
%% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)
section A section
Completed task :done, des1, 2026-01-06,2026-01-08
Active task :active, des2, 2026-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2026-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :until isadded
Functionality added :milestone, isadded, 2026-01-25, 0d
section Documentation
Describe gantt syntax :active, a1, after des1, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h
section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page :20h
Add another diagram to demo page :48h
De forma predeterminada, las tareas son consecutivas; la fecha de inicio de la siguiente tarea es de forma predeterminada la fecha de fin de la tarea anterior.
El título de la tarea y sus metadatos se separan con dos puntos (:), y los elementos de metadatos entre sí con comas (,). Las etiquetas válidas incluyen active, done, crit y milestone. Las etiquetas son opcionales, pero si se usan deben ir en primer lugar. Una vez procesadas las etiquetas, los elementos de metadatos restantes se interpretan así:
- Si se especifica un solo elemento, este determina cuándo termina la tarea. Puede ser una fecha o hora concreta, o una duración. Si se especifica una duración, se suma a la fecha de inicio de la tarea para determinar su fecha de fin, teniendo en cuenta cualquier exclusión.
- Si se especifican dos elementos, el último se interpreta igual que en el caso anterior. El primer elemento puede especificar una fecha u hora de inicio explícita (con el formato indicado por dateFormat) o puede referenciar otra tarea mediante after <otherTaskID> [[otherTaskID2 [otherTaskID3]]...]. En este último caso, la fecha de inicio de la tarea se establecerá según la fecha de fin más tardía de cualquier tarea referenciada.
- Si se especifican tres elementos, los dos últimos se interpretan como en los casos anteriores. El primer elemento indicará el ID de la tarea y puede referenciarse con la sintaxis later <taskID>.
| Sintaxis de metadatos | Fecha de inicio | Fecha de fin | ID |
|---|---|---|---|
| <taskID>, <startDate>, <endDate> | startdate interpretado con dateformat | endDate interpretado con dateformat | taskID |
| <taskID>, <startDate>, <length> | startdate interpretado con dateformat | Fecha de inicio + length | taskID |
| <taskID>, after <otherTaskId>, <endDate> | La fecha de fin de la tarea otherTaskID especificada previamente | endDate interpretado con dateformat | taskID |
| <taskID>, after <otherTaskId>, <length> | La fecha de fin de la tarea otherTaskID especificada previamente | Fecha de inicio + length | taskID |
| <taskID>, <startDate>, until <otherTaskId> | startdate interpretado con dateformat | La fecha de inicio de la tarea otherTaskID especificada previamente | taskID |
| <taskID>, after <otherTaskId>, until <otherTaskId> | La fecha de fin de la tarea otherTaskID especificada previamente | La fecha de inicio de la tarea otherTaskID especificada previamente | taskID |
| <startDate>, <endDate> | startdate interpretado con dateformat | 使用 dateformat 解释的 enddate | No aplicable |
| <startDate>, <length> | startdate interpretado con dateformat | Fecha de inicio + length | No aplicable |
| after <otherTaskID>, <endDate> | La fecha de fin de la tarea otherTaskID especificada previamente | 使用 dateformat 解释的 enddate | No aplicable |
| after <otherTaskID>, <length> | La fecha de fin de la tarea otherTaskID especificada previamente | Fecha de inicio + length | No aplicable |
| <startDate>, until <otherTaskId> | startdate interpretado con dateformat | La fecha de inicio de la tarea otherTaskID especificada previamente | No aplicable |
| after <otherTaskId>, until <otherTaskId> | La fecha de fin de la tarea otherTaskID especificada previamente | La fecha de inicio de la tarea otherTaskID especificada previamente | No aplicable |
| <endDate> | La fecha de fin de la tarea anterior | 使用 dateformat 解释的 enddate | No aplicable |
| <length> | La fecha de fin de la tarea anterior | Fecha de inicio + length | No aplicable |
| until <otherTaskId> | La fecha de fin de la tarea anterior | La fecha de inicio de la tarea otherTaskID especificada previamente | No aplicable |
Formato de duración
Al especificar <length>, usa un número seguido de uno de los siguientes sufijos de unidad:
| Unidad | Sufijo | Ejemplo |
|---|---|---|
| Milisegundo | ms | 50ms |
| Segundo | s | 30s |
| Minuto | m | 30m |
| Hora | h | 4h |
| Día | d | 7d |
| Semana | w | 3w |
| Mes | m | 2m |
| Año | y | 1y |
También se admiten valores decimales (por ejemplo, 2.5d). Los marcadores de duración no válidos (por ejemplo, 3dX) se ignoran y la tarea tendrá por defecto una duración de cero.
Por simplicidad, la tabla no muestra varios elementos listados con la sintaxis after. A continuación se muestra un ejemplo:
Copiar
Insertar
gantt
apple :a, 2026-07-20, 1w
banana :crit, b, 2026-07-23, 1d
cherry :active, c, after b a, 1d
kiwi :d, 2026-07-20, until b c
Título
title es una cadena opcional que se muestra en la parte superior del diagrama de Gantt y describe todo el gráfico.
Exclusión
excludes es una propiedad opcional que acepta fechas concretas (formato AAAA-MM-DD), días de la semana (por ejemplo "sunday") o "weekends", pero no puede usar la palabra "weekdays". Estas fechas se marcarán en el gráfico y se excluirán del cálculo de la duración de las tareas. Esto significa que, si el periodo de duración de una tarea incluye fechas excluidas, los días excluidos se añadirán al tiempo de fin de la tarea, para garantizar que la duración de la tarea coincida con la especificada en el código.
Fin de semana
Al excluir el fin de semana, puedes establecer el fin de semana como viernes y sábado, o sábado y domingo. De forma predeterminada, el fin de semana es sábado y domingo. Para definir el día de inicio del fin de semana, puedes añadir en una nueva línea una propiedad opcional weekend, seguida de friday o saturday.
Copiar
Insertar
gantt
title A Gantt Diagram Excluding Fri - Sat weekends
dateFormat Букмекерлар-MM-DD
excludes weekends
weekend friday
section Section
A task :a1, 2026-01-01, 30d
Another task :after a1, 20d
Declaración de sección
Puedes dividir el gráfico en varias secciones para separar distintas partes del proyecto (por ejemplo, desarrollo y documentación).
Para ello, usa la sintaxis section al principio de una línea y asígnale un nombre. Ten en cuenta que, a diferencia del título de todo el gráfico, este nombre es obligatorio.
Hito
Puedes añadir hitos al gráfico. Los hitos se diferencian de las tareas porque representan un momento concreto y se identifican con la sintaxis milestone. A continuación se muestra un ejemplo del uso de hitos: la ubicación exacta del hito viene determinada por su fecha de inicio y la duración de la tarea, como se muestra a continuación:
Copiar
Insertar
gantt
dateFormat HH:mm
axisFormat %H:%M
Initial milestone : milestone, m1, 17:49, 2m
Task A : 10m
Task B : 5m
Final milestone : milestone, m2, 18:08, 4m
Marca vertical
vert indica que se añade una línea vertical en el diagrama de Gantt para resaltar fácilmente fechas importantes, como fechas límite, eventos importantes o puntos de control. Estas marcas se extienden por todo el gráfico y se posicionan según la fecha que proporciones. A diferencia de los hitos, las marcas verticales no ocupan una línea. Son puramente puntos de referencia visuales que ayudan a descomponer la línea de tiempo y hacen que los momentos importantes se identifiquen con más facilidad.
Copiar
Insertar
gantt
dateFormat HH:mm
axisFormat %H:%M
Initial vert : vert, v1, 17:30, 2m
Task A : 3m
Task B : 8m
Final vert : vert, v2, 17:58, 4m
Establecer la fecha
dateFormat define el formato de entrada de fecha de los elementos del diagrama de Gantt; axisFormat define el formato de salida de la fecha al renderizar el gráfico.
Formato de fecha de entrada
El formato de fecha de entrada predeterminado es YYYY-MM-DD; puedes personalizar dateFormat.
Copiar
Insertar
dateFormat YYYY-MM-DD
Se admiten las siguientes opciones de formato:
| 输入 | Ejemplo | Descripción |
|---|---|---|
| YYYY | 2026 | Año de 4 dígitos |
| YY | 26 | Año de 2 dígitos |
| Q | 1..4 | Número de trimestre |
| M MM | 1..12 | Número de mes |
| D DD | 1..31 | Día del mes |
| Do | 1st..31st | Día del mes con ordinal |
| DDD DDDD | 1..365 | Día del año |
| X | 1410715640.579 | Marca de tiempo Unix |
| x | 1410715640579 | Marca de tiempo Unix en milisegundos |
| H HH | 0..23 | Hora en formato de 24 horas |
| h hh | 1..12 | Hora en formato de 12 horas, se usa junto con a A |
| a A | am pm | AM o PM |
| m mm | 0..59 | Minuto |
| s ss | 0..59 | Segundos |
| S | 0..9 | Décima de segundo |
| SS | 0..99 | Centésima de segundo |
| SSS | 0..999 | Milésima de segundo |
| Z ZZ | +12:00 | Desplazamiento respecto a UTC, con el formato +-HH:mm, +-HHmm o Z |
El formato de fecha de salida del eje
El formato de fecha de salida predeterminado es YYYY-MM-DD. Puedes personalizar axisFormat, por ejemplo 2026-Q1 representa el primer trimestre de 2026.
Copiar
Insertar
axisFormat %Y-%m-%d
Se admiten las siguientes cadenas de formato:
| Formato,Definición | |
|---|---|
| %a | Nombre abreviado del día de la semana |
| %A | Nombre completo del día de la semana |
| %b | Nombre abreviado del mes |
| %B | Nombre completo del mes |
| %c | Fecha y hora localizadas |
| %d | Fecha, número decimal [01,31] |
| %e | Fecha, número decimal rellenado con espacios [1,31], equivale a %_d |
| %H | Hora (formato de 24 horas), número decimal [00,23] |
| %I | Hora (formato de 12 horas), número decimal [01,12] |
| %j | Día del año, número decimal [001,366] |
| %m | Mes, número decimal [01,12] |
| %M | Minuto, número decimal [00,59] |
| %L | Milisegundo, número decimal [000, 999] |
| %p | AM o PM |
| %S | Segundo, número decimal [00,59] |
| %U | Semana del año (con el domingo como primer día de la semana), número decimal [00,53] |
| %w | Día de la semana, número decimal rellenado con espacios [0,6], donde 0 representa el domingo |
| %W | Semana del año (con el lunes como primer día de la semana), número decimal [00,53] |
| %x | Representación de fecha localizada, como: 2026-09-18 |
| %X | Representación de hora localizada, como: 14:30:00 |
| %y | Año sin siglo, número decimal [00,99], por ejemplo 26 representa el año 2026 |
| %Y | Año con siglo, número decimal |
| %Z | Abreviatura del nombre de la zona horaria, por ejemplo "-0700" |
| %% | Carácter de escape, se usa para mostrar el propio signo de porcentaje % |
Marcas del eje
Las marcas de salida predeterminadas son automáticas. Puedes personalizar tickInterval, por ejemplo 1day o 1week.
Copiar
Insertar
tickInterval 1day
El modo es
Copiar
Insertar
/^([1-9][0-9]*)(millisecond|second|minute|hour|day|week|month)$/;
El tickInterval basado en semanas comienza por domingo de forma predeterminada. Si quieres especificar otro día de la semana en el que comience tickInterval, usa la opción weekday, con el siguiente código:
Copiar
Insertar
gantt
tickInterval 1week
weekday monday
Salida en modo compacto
El modo compacto te permite mostrar varias tareas en la misma línea. El modo de visualización del gráfico se controla con la configuración de YAML anterior, que habilita el modo compacto para el diagrama de Gantt.
Copiar
Insertar
---
displayMode: compact
---
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2026-01-01, 30d
Another task :a2, 2026-01-20, 25d
Another one :a3, 2026-02-10, 20d
Puedes introducir comentarios en el diagrama de Gantt; el analizador los ignorará. El comentario debe ocupar una línea propia y empezar con %% (doble signo de porcentaje). Todo el texto desde el inicio del comentario hasta el siguiente salto de línea se considerará comentario, incluida cualquier sintaxis del gráfico.
Copiar
Insertar
gantt
title A Gantt Diagram
%% This is a comment
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1, 20d
section Another
Task in Another :2014-01-12, 12d
another task :24d
Marca de hoy
Puedes establecer el estilo de la marca de la fecha actual u ocultarla. Para establecer el estilo, añade un valor a la clave todayMarker.
Copiar
Insertar
todayMarker stroke-width:5px,stroke:#0f0,opacity:0.5
Para ocultar la marca, establece todayMarker en off.
Copiar
Insertar
todayMarker off
Ejemplo
Diagrama de Gantt de barras
Copiar
Insertar
gantt
title Git Issues - days since last update
dateFormat X
axisFormat %s
section Issue19062
71 : 0, 71
section Issue19401
36 : 0, 36
section Issue193
34 : 0, 34
section Issue7441
9 : 0, 9
section Issue1300
5 : 0, 5
Línea de tiempo (con comentarios, CSS y configuración previa)
Copiar
Insertar
---
# Frontmatter config, YAML comments
title: Ignored if specified in chart
displayMode: compact #gantt specific setting but works at this level too
config:
# theme: forest
# themeCSS: " #item36 { fill: CadetBlue } "
themeCSS: " // YAML supports multiline strings using a newline markers:
#item36 { fill: CadetBlue }
// Custom marker workaround CSS from forum (below)
rect[id^=workaround] { height: calc(100% - 50px) ; transform: translate(9px, 25px); y: 0; width: 1.5px; stroke: none; fill: red; }
text[id^=workaround] { fill: red; y: 100%; font-size: 15px;}
"
gantt:
useWidth: 400
rightPadding: 0
topAxis: true #false
numberSectionStyles: 2
---
gantt
title Timeline - Gantt Sampler
dateFormat YYYY
axisFormat %y
%% this next line doesn't recognise 'decade' or 'year', but will silently ignore
tickInterval 1decade
section Issue19062
71 : item71, 1900, 1930
section Issue19401
36 : item36, 1913, 1935
section Issue1300
94 : item94, 1910, 1915
5 : item5, 1920, 1925
0 : milestone, item0, 1918, 1s
9 : vert, 1906, 1s %% not yet official
64 : workaround, 1923, 1s %% custom CSS object https://github.com/mermaid-js/mermaid/issues/3250
