Cómo Crear un Diagrama de Gantt en Línea

Navega a gantttool.com/es/app en cualquier navegador moderno. La aplicación se carga instantáneamente — sin cuenta, sin instalación, sin esperas. Llegas directamente al editor con una única tarea en blanco lista para completar.

Tu trabajo se guarda automáticamente en el LocalStorage del navegador de forma continua, por lo que actualizar la página o cerrar la pestaña no hará que pierdas tu proyecto. Los datos permanecen en tu navegador hasta que los borres manualmente o importes un proyecto diferente.

Haz clic en el botón "Cargar Demo" en la barra de herramientas. Con un solo clic, el editor se llena con un Plan de Desarrollo de Producto SaaS realista que contiene:

• 2 separadores de fase — "Preparación" e "Implementación"
• 15 tareas regulares — desde el Análisis de Requisitos hasta el Despliegue en Producción
• 1 hito — "Reunión de lanzamiento" situada al final de la fase de preparación
• Dependencias encadenadas — las tareas se vinculan mediante relaciones "al final de la tarea" formando una ruta crítica realista
• Seguimiento de finalización — las tareas de preparación están marcadas como completadas al 50–100%
• Fecha de inicio del proyecto establecida en 2025-08-20, escala diaria, fines de semana cerrados

La demo es la forma más rápida de entender cada funcionalidad antes de editar tu propio proyecto. Puedes modificar libremente cualquier tarea de la demo — o hacer clic en "Restablecer" para volver a un lienzo en blanco en cualquier momento.

Haz clic en el acordeón "Configuración" (el panel con el icono de engranaje en la parte superior de la barra lateral). Tiene dos pestañas: Básico y Colores y Estilo.

Pestaña Básico

Campo	Qué hace
Nombre del Proyecto	El título impreso en la parte superior del diagrama generado.
Inicio del Proyecto	La fecha de anclaje (AAAA-MM-DD) a partir de la cual se calculan todas las tareas de "Inicio del Proyecto".
Escala de Tiempo	Diaria para sprints cortos, Semanal para proyectos medianos, Mensual para hojas de ruta largas.
Nivel de Zoom	Un multiplicador (1–4) que amplía cada columna, útil cuando muchas tareas se superponen.
Fines de Semana Cerrados	Marca los sábados y domingos como días no laborables en el diagrama.
Otros Días Cerrados	Fechas o rangos de fechas separados por comas (ej. 2025-12-25, 2025-12-26 to 2025-12-31) excluidos del calendario.
Mostrar Marcador de Hoy	Dibuja una línea vertical naranja en la fecha actual para que puedas comparar el progreso planificado con el real al instante.
Idioma del Diagrama	Un código de dos letras (ej. en, cs, de, fr) que localiza las etiquetas de meses y días dentro del diagrama.

Pestaña Colores y Estilo

Cambia a la pestaña Colores y Estilo para controlar el aspecto visual de cada barra de tarea y marcador de hito en el diagrama:

• Fuente de tareas: nombre (SansSerif, Monospaced, Arial, etc.), tamaño, color y estilo (normal / negrita / cursiva)
• Color de barra de tareas: el color de fondo predeterminado para todas las barras de tareas (las tareas individuales pueden anularlo)
• Color de línea de tareas: el color del borde de las barras de tareas
• Fuente de hitos: tamaño, color y estilo de fuente independientes para las etiquetas de hitos
• Color de hitos: color de relleno y borde del marcador de diamante de los hitos

Un botón Restablecer valores predeterminados restaura el esquema de colores original sin afectar tus tareas.

La lista de tareas es el corazón del editor. Cada fila representa un elemento en el diagrama de Gantt. Tres formas de añadir una nueva fila:

• Haz clic en el botón "Añadir Tarea" debajo de la lista de tareas para agregar al final.
• Presiona Ctrl+Enter en cualquier lugar de la aplicación para el mismo resultado.
• Pasa el cursor entre dos tareas existentes y haz clic en la zona de inserción (una línea azul fina con un icono "+") para insertar en una posición específica.

Cada tarea se abre en un panel de acordeón. Arrastra el tirador en el borde izquierdo para reordenar tareas, o usa los botones de flecha arriba/abajo dentro del panel.

Tipo de tarea

Tipo	Apariencia en el diagrama	Cuándo usarlo
Tarea	Barra horizontal con duración	Cualquier elemento de trabajo con inicio y fin
Hito	Marcador de diamante (duración cero)	Puntos de control clave, aprobaciones, entregas
Separador	Banner de sección de ancho completo	Encabezados de fase (ej. "Diseño", "Desarrollo")

Tipo de inicio — ¿cuándo comienza este elemento?

Cada tarea tiene un selector de Tipo de Inicio que determina cómo se calcula su posición en la línea de tiempo:

Tipo de inicio	Significado
Inicio del Proyecto	La tarea comienza en la fecha de inicio global del proyecto establecida en Configuración.
Fecha Absoluta	Una fecha de calendario específica (AAAA-MM-DD) que introduces manualmente, independiente de otras tareas.
Después del Fin de Tarea	Comienza después de que termine(n) la(s) tarea(s) seleccionada(s), con un desplazamiento opcional en días (positivo = espacio, negativo = solapamiento).
Antes del Inicio de Tarea	Comienza un número especificado de días antes de que otra tarea empiece.
Al Inicio de Tarea	Comienza exactamente cuando la tarea seleccionada empieza (tareas paralelas).
Al Fin de Tarea	Comienza exactamente cuando la tarea seleccionada termina (dependencia clásica fin-a-inicio con retraso cero).

Duración y fecha de fin

Por defecto, una tarea usa Duración (número de días o semanas). Activa "Usar fecha de fin" para fijar la tarea a una fecha de finalización específica — útil cuando una fecha límite está fijada por un compromiso externo.

Campos adicionales de tarea

• Color — Una anulación de color por tarea (hex o nombre de color) que reemplaza el color global de barra de tareas de Configuración.
• Finalización (%) — Un deslizador de 0–100. La porción rellena de la barra muestra el progreso; combínalo con el Marcador de Hoy para detectar retrasos de un vistazo.
• Recursos — Nombres separados por comas, opcionalmente con un porcentaje de asignación: Alice, Bob:50%. Las etiquetas aparecen en la barra de tareas.
• Enlace — Una URL que hace que la barra de tareas sea cliqueable en el SVG final (ej. un ticket de Jira o documento de especificación).
• Nota — Anotación de texto libre representada como una nota PlantUML debajo de la barra de tareas en el diagrama.

Cuando tus tareas estén listas, haz clic en "Generar Diagrama de Gantt". GanttTool realiza los siguientes pasos automáticamente:

• Valida que cada tarea tenga un nombre no vacío.
• Comprueba el grafo de dependencias en busca de ciclos usando búsqueda en profundidad.
• Compila un bloque de código PlantUML @startgantt a partir de tus ajustes y tareas.
• Envía el código a la API de renderizado Kroki (/api/kroki) y recupera una imagen SVG de calidad vectorial.

El diagrama SVG aparece en el área de vista previa en pocos segundos. Se muestra un cargador giratorio durante el renderizado; cualquier error de sintaxis o mensaje de indisponibilidad del servicio se muestra claramente con una descripción del error.

Ver el código fuente PlantUML

Haz clic en "Mostrar código PlantUML" para alternar un panel que muestra la sintaxis PlantUML sin procesar que se envió al renderizador. Esto es útil para depurar o aprender el lenguaje subyacente — consulta nuestra guía dedicada sobre el Formato de Diagrama de Gantt PlantUML para un análisis profundo de la sintaxis.

Una vez generado el diagrama, la barra de herramientas de exportación aparece debajo de la vista previa. Tienes cuatro opciones:

Botón	Qué produce
Descargar SVG	Guarda el diagrama como un archivo vectorial escalable — ideal para incrustar en presentaciones, documentos o sitios web a cualquier resolución.
Descargar PNG	Convierte el SVG en una imagen rasterizada de alta resolución (densidad 2x) y la descarga como archivo .png.
Copiar Imagen	Convierte el SVG a PNG y lo copia directamente al portapapeles — listo para pegar en Slack, correo electrónico, Notion o cualquier otra herramienta.
Exportar JSON	Descarga el proyecto completo (ajustes + todas las tareas) como un archivo .json que se puede importar más tarde mediante el botón Importar JSON.

Además de la exportación manual, tu proyecto se guarda automáticamente de forma continua en el LocalStorage del navegador bajo la clave gantt_diagram_data. La próxima vez que abras la aplicación en el mismo navegador, tu último proyecto se cargará automáticamente. Usa la exportación JSON para copias de seguridad a largo plazo o para compartir el proyecto con compañeros de equipo.