{"id":2109,"date":"2026-05-26T08:05:44","date_gmt":"2026-05-26T08:05:44","guid":{"rendered":"https:\/\/www.vpascode.com\/es\/docs\/uncategorized\/mermaid-js-gantt-chart-syntax-guide\/"},"modified":"2026-05-26T08:05:44","modified_gmt":"2026-05-26T08:05:44","slug":"mermaid-js-gantt-chart-syntax-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-gantt-chart-syntax-guide\/","title":{"rendered":"Gu\u00eda de sintaxis de gr\u00e1fico de Gantt de Mermaid.js"},"content":{"rendered":"<h2>\u00bfQu\u00e9 es un gr\u00e1fico de Gantt?<\/h2>\n<p>Un <strong>gr\u00e1fico de Gantt<\/strong>es una herramienta de visualizaci\u00f3n de gesti\u00f3n de proyectos utilizada para representar cronogramas de proyectos, duraciones de tareas y hitos de ruta cr\u00edtica a lo largo de una l\u00ednea de tiempo horizontal. Al representar paquetes de trabajo como barras y dependencias estructurales como flujos secuenciales, permite a los equipos rastrear el progreso, identificar cuellos de botella potenciales y comunicar fechas l\u00edmite de forma efectiva.<\/p>\n<p>Con <strong>Mermaid.js<\/strong>, defines tu cronograma de proyecto utilizando una sintaxis declarativa basada en texto. El motor calcula autom\u00e1ticamente los desplazamientos relativos de las barras, maneja la escala del eje de cuadr\u00edcula basada en fechas y representa porcentajes de completitud, lo que te permite generar mapas de ruta de proyectos profesionales directamente dentro de tu documentaci\u00f3n.<\/p>\n<h2>Gu\u00eda de sintaxis principal: Elementos y construcciones<\/h2>\n<p>Para dise\u00f1ar un cronograma de proyecto v\u00e1lido y completamente ejecutable en Mermaid, debes dominar la configuraci\u00f3n de la l\u00ednea de tiempo, las declaraciones de tareas, el agrupamiento de secciones y los marcadores de hitos.<\/p>\n<h3>1. Inicializaci\u00f3n de la l\u00ednea de tiempo de Gantt<\/h3>\n<p>Inicializas un lienzo de Gantt en la primera l\u00ednea utilizando la palabra clave <code>gantt<\/code>palabra clave. Cada gr\u00e1fico de Gantt requiere un t\u00edtulo, una definici\u00f3n de formato de fecha y una fecha de inicio espec\u00edfica para anclar la cuadr\u00edcula de la l\u00ednea de tiempo.<\/p>\n<pre class=\"lang-mermaid\"><code>gantt\r\n    t\u00edtulo Cronograma del Proyecto Alpha\r\n    dateFormat YYYY-MM-DD\r\n    axisFormat %Y-%m-%d\r\n    excluye fines de semana<\/code><\/pre>\n<h3>2. Definici\u00f3n de tareas y duraciones<\/h3>\n<p>Las tareas se definen por su estado (activo, terminado o crit), una etiqueta de visualizaci\u00f3n, un ID interno y una duraci\u00f3n temporal. Puedes especificar una duraci\u00f3n utilizando d\u00edas (<code>d<\/code>), horas (<code>h<\/code>), o fechas espec\u00edficas de inicio\/fin.<\/p>\n<ul>\n<li><code>terminado<\/code>: Paquete de trabajo completado.<\/li>\n<li><code>activo<\/code>: Trabajo actual, en progreso.<\/li>\n<li><code>crit<\/code>: Tarea de ruta cr\u00edtica (se representa con un color de resaltado distinto).<\/li>\n<\/ul>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNotjMEKwjAQRO+C\/zAfEKEGtNCzIN7EP1iabbvQbjBZC\/69C3GYwzDw3kxqdjzAU3k0yYrnSqqic3sfKia04iZ1zDuXL4aUlQMS13NA7OL11Hl9X1JDXvz+SOGN1XAnW7i4DQO5fm9gDKDJuPwlffoB5+QpUw==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Editar Mermaid en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNoljNENwjAMRP+R2MEDFKlEAqR+MwBiA+MYdFKalDrpTnwzQhcjNJZl3cn37sUx5\/2O6piKYP1GugWOeEJ4s+15VZPymDFCY06ECAEHGrLOIyL71JFXO3bkenc+9HWrPvkG31XShND6ao5mfRcYcjIaWDKWhrvtTmX92D\/VCi\/+B9pqN1E=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">gantt\r\n    secci\u00f3n Planificaci\u00f3n\r\n    Descubrimiento inicial :terminado, des1, 2026-06-01, 5d\r\n    Recopilaci\u00f3n de requisitos :activo, des2, despu\u00e9s de des1, 7d<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNoljNENwjAMRP+R2MEDFKlEAqR+MwBiA+MYdFKalDrpTnwzQhcjNJZl3cn37sUx5\/2O6piKYP1GugWOeEJ4s+15VZPymDFCY06ECAEHGrLOIyL71JFXO3bkenc+9HWrPvkG31XShND6ao5mfRcYcjIaWDKWhrvtTmX92D\/VCi\/+B9pqN1E=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNotjMEKwjAQRO+C\/zAfEKEGtNCzIN7EP1iabbvQbjBZC\/69C3GYwzDw3kxqdjzAU3k0yYrnSqqic3sfKia04iZ1zDuXL4aUlQMS13NA7OL11Hl9X1JDXvz+SOGN1XAnW7i4DQO5fm9gDKDJuPwlffoB5+QpUw==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Editar Mermaid en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"GiAAgrQ\"><img fetchpriority=\"high\" alt=\"\" class=\"alignnone size-full wp-image-644\" decoding=\"async\" fetchpriority=\"high\" height=\"148\" sizes=\"(max-width: 584px) 100vw, 584px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1904945fb53.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1904945fb53.png 584w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1904945fb53-300x76.png 300w\" width=\"584\"\/><\/p>\n<h3>3. Implementaci\u00f3n de hitos y dependencias<\/h3>\n<p>Los hitos son puntos de duraci\u00f3n cero que marcan logros importantes del proyecto. Las dependencias se establecen utilizando el ID de la tarea, asegurando que las barras visuales se alineen correctamente cuando finalice una tarea anterior.<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLT8wrKeHlUgCC4tTkksz8PIWg1JzUxOJUiKBTakmigk9iaV5yhoJVbmZOanFJfl6qjkKuoY6CkYGRma6Bua6hqY6CQQpEvVtmXmKOQqCjglVyUWaJjkJhIlBhYlpJahFYi6FBCgBpyiAG\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Editar Mermaid en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLT8wrKeHlUgCC4tTk5MzDm\/MUfBLzqhJzM1PzSvIhMkgCCk6pJYkKVhmZJfnFOgq5hjoKRgZGZroG5rqGpjoKBikQDQFFpalJiQpumXmJOQpWyUWH15ZkJufrKBQmAjWkpBYXlB5eWQxkgA0wNEgBACSIKiE=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">gantt\r\n    secci\u00f3n Lanzamiento\r\n    Lanzamiento Beta :hitos, m1, 2026-07-15, 0d\r\n    Prueba Final :cr\u00edtico, qa1, despu\u00e9s de m1, 10d<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLT8wrKeHlUgCC4tTk5MzDm\/MUfBLzqhJzM1PzSvIhMkgCCk6pJYkKVhmZJfnFOgq5hjoKRgZGZroG5rqGpjoKBikQDQFFpalJiQpumXmJOQpWyUWH15ZkJufrKBQmAjWkpBYXlB5eWQxkgA0wNEgBACSIKiE=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLT8wrKeHlUgCC4tTkksz8PIWg1JzUxOJUiKBTakmigk9iaV5yhoJVbmZOanFJfl6qjkKuoY6CkYGRma6Bua6hqY6CQQpEvVtmXmKOQqCjglVyUWaJjkJhIlBhYlpJahFYi6FBCgBpyiAG\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Editar Mermaid en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"ZRwkzSW\"><img alt=\"\" class=\"alignnone size-full wp-image-645\" decoding=\"async\" height=\"148\" sizes=\"(max-width: 584px) 100vw, 584px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a19049872949.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a19049872949.png 584w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a19049872949-300x76.png 300w\" width=\"584\"\/><\/p>\n<h2>Mejores pr\u00e1cticas para los cronogramas de proyectos<\/h2>\n<ul>\n<li><strong>Use nombres descriptivos para las secciones:<\/strong> Use la <code>secci\u00f3n<\/code>palabra clave para agrupar sus tareas en fases l\u00f3gicas del proyecto (por ejemplo, Desarrollo, Pruebas, Implementaci\u00f3n). Esto crea una cuadr\u00edcula verticalmente segmentada que es mucho m\u00e1s f\u00e1cil de leer que una lista larga \u00fanica.<\/li>\n<li><strong>Aproveche la palabra clave &#8216;despu\u00e9s&#8217;:<\/strong> En lugar de calcular manualmente las fechas, use la <code>despu\u00e9s [id_tarea]<\/code>sintaxis. Esto garantiza que si la fecha de inicio del proyecto cambia, todo su cronograma se actualice autom\u00e1ticamente sin edici\u00f3n manual.<\/li>\n<li><strong>Excluya los d\u00edas no laborables:<\/strong> Si su proyecto sigue una semana laboral est\u00e1ndar, incluya la <code>excluye fines de semana<\/code>directiva. Esto mantiene su cronograma realista y evita predicciones irreales de trabajo durante los fines de semana.<\/li>\n<\/ul>\n<h2>Ejemplos reales de gr\u00e1ficos Gantt de Mermaid<\/h2>\n<h3>Ejemplo 1: Ruta de migraci\u00f3n de infraestructura de software<\/h3>\n<p>Este plano funcional modela un proyecto de migraci\u00f3n en m\u00faltiples etapas hacia la nube, utilizando secciones para dividir la planificaci\u00f3n de arquitectura de la implementaci\u00f3n y las pruebas.<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptj0FLxDAQhe8L+x\/msrcG2sqK9FYsimBBVi8eh2Zag21Skonu\/ntnm9qDOCSQzMv7XmZAy7zfgRQbHgnuRxc1PNneY2AfO46eoDWDRzbOwsmhnnBODo1MD85PyPAupdpWNU2S8GzCKh0mddCpS+dujJoCfBN9ktVhv0tCoG7B1777MExLalLSfxoKZrByrbSzlAEWGZR5eatyWXIu8jXhlbroDV+gjtowVCjcr6uhlN0z+cV61H+DtwlTu0FGePNoQy8WqDphZjAVG0RwxXHNrOcZTqQ0zaO7yONpy7oa7v7JGimwzBFS\/8U7HZP06NSz\/FcYv28k9WbDCTjXP30jgVc=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Editar Mermaid en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNplkU1qwzAQhfeB3GE22cVgp6QU7wJp6SZQQjddTqWxo2BJrn5Ke6Qusig9gi\/WkWX6kwgtpHma9z5JLZoQ5jPgEYZTiJ2FfQwIkkCr1qFQw5dJO2Uah+SDiyJEh0AGOgQTnyl3N9ZpDPaOxAHhiUex2xXb7T\/x9kiw0MVC5iq9iS6+EzTKkE8ZnjQanM+y7Enk9I17iSrQmJulrfI0fNo\/EFyshdV9RwGlXQJWS1iVq+ui5MnrqpxCN1GqYN1wwpzYRqckSqhRBPWaOldLVnwfh48RKjmt5QXU7ud1svDo0PiGHBmhRmvJF\/aJirOCEuysqzNnTqrWE9eeVKLXZMLvo2PfKTFtodZnZMnv5pLsnu\/nc+0h8o+Nf9U7K+N0oD6kE8xzdebH\/qX8Btd1rsw=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">gantt\r\n    t\u00edtulo Ruta de migraci\u00f3n de infraestructura en la nube\r\n    formatoFecha YYYY-MM-DD\r\n    formatoEje %m-%d\r\n    excluye fines de semana\r\n\r\n    secci\u00f3n Arquitectura\r\n    Dise\u00f1o en la nube   :completado, a1, 2026-06-01, 10d\r\n    Auditor\u00eda de seguridad :activo, a2, despu\u00e9s de a1, 5d\r\n\r\n    secci\u00f3n Migraci\u00f3n\r\n    Transferencia de datos  :cr\u00edtico, m1, despu\u00e9s de a2, 15d\r\n    Reimplementaci\u00f3n de aplicaci\u00f3n  :m2, despu\u00e9s de m1, 8d\r\n\r\n    secci\u00f3n Hitos\r\n    Puesta en producci\u00f3n :hitos, m3, despu\u00e9s de m2, 0d<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNplkU1qwzAQhfeB3GE22cVgp6QU7wJp6SZQQjddTqWxo2BJrn5Ke6Qusig9gi\/WkWX6kwgtpHma9z5JLZoQ5jPgEYZTiJ2FfQwIkkCr1qFQw5dJO2Uah+SDiyJEh0AGOgQTnyl3N9ZpDPaOxAHhiUex2xXb7T\/x9kiw0MVC5iq9iS6+EzTKkE8ZnjQanM+y7Enk9I17iSrQmJulrfI0fNo\/EFyshdV9RwGlXQJWS1iVq+ui5MnrqpxCN1GqYN1wwpzYRqckSqhRBPWaOldLVnwfh48RKjmt5QXU7ud1svDo0PiGHBmhRmvJF\/aJirOCEuysqzNnTqrWE9eeVKLXZMLvo2PfKTFtodZnZMnv5pLsnu\/nc+0h8o+Nf9U7K+N0oD6kE8xzdebH\/qX8Btd1rsw=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptj0FLxDAQhe8L+x\/msrcG2sqK9FYsimBBVi8eh2Zag21Skonu\/ntnm9qDOCSQzMv7XmZAy7zfgRQbHgnuRxc1PNneY2AfO46eoDWDRzbOwsmhnnBODo1MD85PyPAupdpWNU2S8GzCKh0mddCpS+dujJoCfBN9ktVhv0tCoG7B1777MExLalLSfxoKZrByrbSzlAEWGZR5eatyWXIu8jXhlbroDV+gjtowVCjcr6uhlN0z+cV61H+DtwlTu0FGePNoQy8WqDphZjAVG0RwxXHNrOcZTqQ0zaO7yONpy7oa7v7JGimwzBFS\/8U7HZP06NSz\/FcYv28k9WbDCTjXP30jgVc=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Editar Mermaid en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"ZfqGmuG\"><img alt=\"\" class=\"alignnone size-full wp-image-646\" decoding=\"async\" height=\"220\" sizes=\"(max-width: 584px) 100vw, 584px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a19049caf4ef.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a19049caf4ef.png 584w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a19049caf4ef-300x113.png 300w\" width=\"584\"\/><\/p>\n<p><strong>Desglose de sintaxis:<\/strong> Este gr\u00e1fico separa claramente la planificaci\u00f3n, la ejecuci\u00f3n y los hitos del proyecto. Al etiquetar la tarea `Transferencia de datos` como <code>cr\u00edtico<\/code>, recibe un resaltado distintivo, atrayendo la atenci\u00f3n del espectador hacia la fase de mayor riesgo de la migraci\u00f3n.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u00bfQu\u00e9 es un gr\u00e1fico de Gantt? Un gr\u00e1fico de Ganttes una herramienta de visualizaci\u00f3n de gesti\u00f3n de proyectos utilizada para representar cronogramas de proyectos, duraciones de tareas y hitos de ruta cr\u00edtica a lo largo de una l\u00ednea de tiempo&#8230;<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":7,"template":"","meta":{"inline_featured_image":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}}},"ld_collection":[14],"class_list":["post-2109","ld_docs","type-ld_docs","status-publish","hentry","ld_collection-vpascode-docs"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Mermaid Gantt Chart Syntax | VPasCode Text to Diagram Guide<\/title>\n<meta name=\"description\" content=\"Track project schedules and task milestones with Mermaid Gantt charts in VPasCode, an intuitive diagram-as-code tool.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-gantt-chart-syntax-guide\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mermaid Gantt Chart Syntax | VPasCode Text to Diagram Guide\" \/>\n<meta property=\"og:description\" content=\"Track project schedules and task milestones with Mermaid Gantt charts in VPasCode, an intuitive diagram-as-code tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-gantt-chart-syntax-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"VPasCode\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1904945fb53.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-gantt-chart-syntax-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-gantt-chart-syntax-guide\\\/\",\"name\":\"Mermaid Gantt Chart Syntax | VPasCode Text to Diagram Guide\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-gantt-chart-syntax-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-gantt-chart-syntax-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/img_6a1904945fb53.png\",\"datePublished\":\"2026-05-26T08:05:44+00:00\",\"description\":\"Track project schedules and task milestones with Mermaid Gantt charts in VPasCode, an intuitive diagram-as-code tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-gantt-chart-syntax-guide\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-gantt-chart-syntax-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-gantt-chart-syntax-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/img_6a1904945fb53.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/img_6a1904945fb53.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-gantt-chart-syntax-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lean Docs\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/%ld_collection%\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Gu\u00eda de sintaxis de gr\u00e1fico de Gantt de Mermaid.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/#website\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/\",\"name\":\"VPasCode\",\"description\":\"by Visual Paradigm\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/#organization\",\"name\":\"VPasCode\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/wp-content\\\/uploads\\\/sites\\\/5\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/wp-content\\\/uploads\\\/sites\\\/5\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"width\":128,\"height\":138,\"caption\":\"VPasCode\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Mermaid Gantt Chart Syntax | VPasCode Text to Diagram Guide","description":"Track project schedules and task milestones with Mermaid Gantt charts in VPasCode, an intuitive diagram-as-code tool.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-gantt-chart-syntax-guide\/","og_locale":"es_ES","og_type":"article","og_title":"Mermaid Gantt Chart Syntax | VPasCode Text to Diagram Guide","og_description":"Track project schedules and task milestones with Mermaid Gantt charts in VPasCode, an intuitive diagram-as-code tool.","og_url":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-gantt-chart-syntax-guide\/","og_site_name":"VPasCode","og_image":[{"url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1904945fb53.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Tiempo de lectura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-gantt-chart-syntax-guide\/","url":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-gantt-chart-syntax-guide\/","name":"Mermaid Gantt Chart Syntax | VPasCode Text to Diagram Guide","isPartOf":{"@id":"https:\/\/www.vpascode.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-gantt-chart-syntax-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-gantt-chart-syntax-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1904945fb53.png","datePublished":"2026-05-26T08:05:44+00:00","description":"Track project schedules and task milestones with Mermaid Gantt charts in VPasCode, an intuitive diagram-as-code tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-gantt-chart-syntax-guide\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-gantt-chart-syntax-guide\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-gantt-chart-syntax-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1904945fb53.png","contentUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1904945fb53.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-gantt-chart-syntax-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vpascode.com\/es\/"},{"@type":"ListItem","position":2,"name":"Lean Docs","item":"https:\/\/www.vpascode.com\/es\/docs\/%ld_collection%\/"},{"@type":"ListItem","position":3,"name":"Gu\u00eda de sintaxis de gr\u00e1fico de Gantt de Mermaid.js"}]},{"@type":"WebSite","@id":"https:\/\/www.vpascode.com\/es\/#website","url":"https:\/\/www.vpascode.com\/es\/","name":"VPasCode","description":"by Visual Paradigm","publisher":{"@id":"https:\/\/www.vpascode.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vpascode.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/www.vpascode.com\/es\/#organization","name":"VPasCode","url":"https:\/\/www.vpascode.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.vpascode.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/www.vpascode.com\/es\/wp-content\/uploads\/sites\/5\/2026\/06\/cropped-vp-online-logo-v1.png","contentUrl":"https:\/\/www.vpascode.com\/es\/wp-content\/uploads\/sites\/5\/2026\/06\/cropped-vp-online-logo-v1.png","width":128,"height":138,"caption":"VPasCode"},"image":{"@id":"https:\/\/www.vpascode.com\/es\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.vpascode.com\/es\/wp-json\/wp\/v2\/ld_docs\/2109","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vpascode.com\/es\/wp-json\/wp\/v2\/ld_docs"}],"about":[{"href":"https:\/\/www.vpascode.com\/es\/wp-json\/wp\/v2\/types\/ld_docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/es\/wp-json\/wp\/v2\/users\/4"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/es\/wp-json\/wp\/v2\/media?parent=2109"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/es\/wp-json\/wp\/v2\/ld_collection?post=2109"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}