DevBento logoDevBento
Herramientas/Editor de Diagramas Mermaid/Diagrama Gantt Mermaid

Diagrama Gantt Mermaid

Crea diagramas Gantt de proyectos con sintaxis Mermaid. Define tareas, duraciones, dependencias, hitos y secciones con vista previa en vivo en tu navegador.

Plantillas:

Cargando editor...

La vista previa del diagrama aparecerá aquí...

Herramientas Relacionadas
.mdPrevisualización Markdown
Convierte Markdown a HTML en tiempo real. Con soporte GFM para tablas, listas de tareas, bloques de código y texto tachado. Copia la salida HTML con un clic.
</>Formateador de SQL / CSS / HTML
Formatea y minifica consultas SQL, hojas de estilo CSS y marcado HTML con resaltado de sintaxis. Embellece o comprime tu código en tu navegador.
{}Formateador y Validador de JSON
Formatea, minifica y valida datos JSON al instante. Resaltado de sintaxis, vista de árbol interactiva y detección de errores. Herramienta en tu navegador.
+/-Comparador de Texto (Diff Checker)
Compara dos bloques de texto en vista lado a lado o en línea con resaltado a nivel de carácter. Encuentra adiciones, eliminaciones y cambios al instante.
◇SVG Viewer & Optimizer
Export diagram as SVG

Sintaxis de Diagrama Gantt Mermaid

Los diagramas Gantt trazan tareas contra una línea de tiempo. Cada tarea tiene una fecha de inicio (explicita o relativa a otra tarea), una duración y, opcionalmente, un estado y agrupación por sección. Mermaid los renderiza como graficos de barras horizontales con eje de tiempo.

Estructura Basica

gantt
    title Nombre del Proyecto
    dateFormat YYYY-MM-DD
    axisFormat %b %d

    section Fase 1
        Tarea A :a1, 2024-01-01, 7d
        Tarea B :after a1, 5d

Cada diagrama Gantt comienza con gantt. title, dateFormat y axisFormat son opcionales pero recomendados.

Definición de Tarea

Cada línea de tarea tiene el formato:

Nombre tarea :estado, idTarea, fechaInicio, duración
Campo Ejemplo Notas
nombre Compilar API La etiqueta mostrada
estado done, active, crit Opcional, combinable
idTarea api1 Necesario si otras tareas dependen de ella
inicio 2024-03-01 o after otra Fecha explicita o dependencia
duración 5d, 2s Dias o semanas

Dependencias

Las dependencias son la parte más útil de los diagramas Gantt. Define relaciones en lugar de codificar fechas:

gantt
    dateFormat YYYY-MM-DD
    Diseño      :dis, 2024-01-01, 5d
    Implementación :impl, after dis, 10d
    Pruebas     :prue, after impl, 5d
    Despliegue  :after prue, 2d

Estado de Tarea

Estado Renderizado Uso
done Relleno tenue Trabajo completado
active Resaltado Sprint/tarea actual
crit Resalte rojo Elementos de ruta critica
(ninguno) Relleno por defecto Trabajo futuro planificado

Secciones

Las secciones agrupan visualmente tareas relacionadas con una etiqueta y bandas de fondo alternas:

section Backend
    Puntos finales API  :api, 2024-01-01, 10d
    Configuración BD    :db, 2024-01-01, 5d

Patrones Practicos

Plan de sprint

gantt
    title Sprint 12
    dateFormat YYYY-MM-DD
    section Historias
        Inicio de sesión   :done, s1, 2024-03-04, 3d
        Página de perfil   :active, s2, after s1, 4d

Cronograma de migración

El ejemplo precargado muestra una migración de API con fases de planificación, implementación y despliegue, cadenas de dependencia y un hito de puesta en producción.

Para documentar las interacciones API dentro de este cronograma, prueba la herramienta Diagrama de Secuencia Mermaid.

🔒

Nothing you paste leaves this tab. Every tool runs entirely in your browser — no upload, no server, no account.

© 2026 devbento.dev · construido localmenteChangelog