{"id":2109,"date":"2026-05-26T08:05:44","date_gmt":"2026-05-26T08:05:44","guid":{"rendered":"https:\/\/www.vpascode.com\/fr\/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\/fr\/docs\/vpascode-docs\/mermaid-js-gantt-chart-syntax-guide\/","title":{"rendered":"Guide de syntaxe des diagrammes Gantt de Mermaid.js"},"content":{"rendered":"<h2>Qu&#8217;est-ce qu&#8217;un diagramme de Gantt ?<\/h2>\n<p>Un <strong>diagramme de Gantt<\/strong>est un outil de visualisation de gestion de projet utilis\u00e9 pour repr\u00e9senter les calendriers de projet, les dur\u00e9es des t\u00e2ches et les jalons de chemin critique le long d&#8217;une timeline horizontale. En repr\u00e9sentant les paquets de travail sous forme de barres et les d\u00e9pendances structurelles sous forme de flux s\u00e9quentiels, il permet aux \u00e9quipes de suivre les progr\u00e8s, d&#8217;identifier les goulets d&#8217;\u00e9tranglement potentiels et de communiquer efficacement les d\u00e9lais.<\/p>\n<p>Avec <strong>Mermaid.js<\/strong>, vous d\u00e9finissez votre calendrier de projet \u00e0 l&#8217;aide d&#8217;une syntaxe d\u00e9clarative bas\u00e9e sur le texte. Le moteur calcule automatiquement les d\u00e9calages relatifs des barres, g\u00e8re l&#8217;\u00e9chelle de l&#8217;axe de grille bas\u00e9e sur les dates et affiche les pourcentages de progression, vous permettant ainsi de g\u00e9n\u00e9rer des cartes de projet professionnelles directement dans votre documentation.<\/p>\n<h2>Guide de syntaxe principale : \u00e9l\u00e9ments et constructions<\/h2>\n<p>Pour concevoir un calendrier de projet valide et enti\u00e8rement ex\u00e9cutable dans Mermaid, vous devez ma\u00eetriser la configuration de la timeline, les d\u00e9clarations de t\u00e2ches, le regroupement des sections et les marqueurs de jalons.<\/p>\n<h3>1. Initialisation de la timeline du diagramme de Gantt<\/h3>\n<p>Vous initialisez une toile de diagramme de Gantt \u00e0 la premi\u00e8re ligne en utilisant le mot-cl\u00e9 <code>gantt<\/code>mot-cl\u00e9. Chaque diagramme de Gantt n\u00e9cessite un titre, une d\u00e9finition du format de date et une date de d\u00e9part sp\u00e9cifique pour ancrer la grille de la timeline.<\/p>\n<pre class=\"lang-mermaid\"><code>gantt\r\n    titre Calendrier du Projet Alpha\r\n    dateFormat AAAA-MM-JJ\r\n    axisFormat %AAAA-%MM-%JJ\r\n    exclure les week-ends<\/code><\/pre>\n<h3>2. D\u00e9finition des t\u00e2ches et des dur\u00e9es<\/h3>\n<p>Les t\u00e2ches sont d\u00e9finies par leur statut (actif, termin\u00e9 ou crit), une \u00e9tiquette d&#8217;affichage, un identifiant interne et une dur\u00e9e temporelle. Vous pouvez sp\u00e9cifier une dur\u00e9e en utilisant des jours (<code>j<\/code>), des heures (<code>h<\/code>), ou des dates de d\u00e9but\/fin sp\u00e9cifiques.<\/p>\n<ul>\n<li><code>termin\u00e9<\/code>: Paquet de travail termin\u00e9.<\/li>\n<li><code>actif<\/code>: Travail en cours actuel.<\/li>\n<li><code>crit<\/code>: T\u00e2che du chemin critique (affich\u00e9e avec une couleur de surbrillance distincte).<\/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>Modifier Mermaid dans 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:eNpLT8wrKeHlUgCC4tTkksz8PIWAnMS8zLTM5EQQDyLlcnhlcn5pWWpRSapCZl5mSWZiTqqCVUlqUW5m3uGVOgopqcWGOgpGBkZmugZABGSbZkF0Oufn5ADNTQUpUUityExPzUsGsqwSgXalgTUa6SgkFhQdXlEMNcU8CwAidjBa\" \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    section Planification\r\n    D\u00e9couverte initiale :termin\u00e9, des1, 2026-06-01, 5j\r\n    Collecte des exigences :actif, des2, apr\u00e8s des1, 7j<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLT8wrKeHlUgCC4tTkksz8PIWAnMS8zLTM5EQQDyLlcnhlcn5pWWpRSapCZl5mSWZiTqqCVUlqUW5m3uGVOgopqcWGOgpGBkZmugZABGSbZkF0Oufn5ADNTQUpUUityExPzUsGsqwSgXalgTUa6SgkFhQdXlEMNcU8CwAidjBa\" \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>Modifier Mermaid dans 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. Mise en \u0153uvre des jalons et des d\u00e9pendances<\/h3>\n<p>Les jalons sont des points de dur\u00e9e nulle qui marquent des r\u00e9alisations importantes du projet. Les d\u00e9pendances sont \u00e9tablies \u00e0 l&#8217;aide de l&#8217;identifiant de t\u00e2che, ce qui garantit que les barres visuelles s&#8217;alignent correctement lorsque la t\u00e2che pr\u00e9d\u00e9cesseur est termin\u00e9e.<\/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>Modifier Mermaid dans 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:eNpLT8wrKeHlUgCC4tTkksz8PAWfxLzk1NzUPKgwnKuQdHhVSaKCVVZiTn6ejkKuoY6CkYGRma6Bua6hqY6CQRZEfaCjQlpmXmJOqoJVclFmiY5CYSJQZWJB0eEVxWBNhgZZAEr3IyQ=\" \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    section Lancement\r\n    Lancement b\u00eata :jalon, m1, 2026-07-15, 0j\r\n    QA finale :crit, qa1, apr\u00e8s m1, 10j<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLT8wrKeHlUgCC4tTkksz8PAWfxLzk1NzUPKgwnKuQdHhVSaKCVVZiTn6ejkKuoY6CkYGRma6Bua6hqY6CQRZEfaCjQlpmXmJOqoJVclFmiY5CYSJQZWJB0eEVxWBNhgZZAEr3IyQ=\" \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>Modifier Mermaid dans 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>Meilleures pratiques pour les plannings de projet<\/h2>\n<ul>\n<li><strong>Utilisez des noms de sections descriptifs :<\/strong> Utilisez le mot-cl\u00e9 <code>section<\/code> pour regrouper vos t\u00e2ches en phases logiques du projet (par exemple, D\u00e9veloppement, Tests, D\u00e9ploiement). Cela cr\u00e9e une grille segment\u00e9e verticalement, bien plus facile \u00e0 lire qu&#8217;une longue liste unique.<\/li>\n<li><strong>Utilisez le mot-cl\u00e9 \u00ab apr\u00e8s \u00bb :<\/strong> Au lieu de calculer manuellement les dates, utilisez la syntaxe <code>apr\u00e8s [id_t\u00e2che]<\/code> Cette syntaxe garantit que si la date de d\u00e9but du projet change, toute votre chronologie se met \u00e0 jour automatiquement sans \u00e9dition manuelle.<\/li>\n<li><strong>Excluez les jours non ouvr\u00e9s :<\/strong> Si votre projet suit une semaine de travail standard, incluez la directive <code>exclut les week-ends<\/code> Cette directive maintient votre chronologie r\u00e9aliste et \u00e9vite des pr\u00e9visions irr\u00e9alistes de travail pendant les week-ends.<\/li>\n<\/ul>\n<h2>Exemples r\u00e9els de diagrammes Gantt Mermaid<\/h2>\n<h3>Exemple 1 : Feuille de route de migration de l&#8217;infrastructure logicielle<\/h3>\n<p>Ce plan fonctionnel mod\u00e9lise un projet de migration cloud en plusieurs \u00e9tapes, en utilisant des sections pour s\u00e9parer la planification de l&#8217;architecture de l&#8217;impl\u00e9mentation et des tests.<\/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>Modifier Mermaid dans 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:eNplUMtqwzAQvAfyD3sJvcRgp6QU30yhh4AvpT8gpE0qRw+zWtF8Uv0d\/rFurNCUdpFAzGhnZvekAvN6BVJsmRB6eyLFNgYwCO7BhiOpxJQ1Z2G1i9mU70YxvkbyiqGTqvq+OhwKpS423aiNrzZDQfGiXWZwmOAT8VxhMGm9KlxCvXh2pD8s42JWmJcYNI4LuZgL1DKSt2GetqCaLezq3VNVy5F3U9\/MumwsQ5onncnyPEGLIhAzJWnayR1p\/kpL\/374m+JnBwV+JxXSEYmvKzExiLPMAK0W5S345q4mws3+luBtnqwf3Tx5DPxro2ocndUFaP09ylXn+V+Ug3IxpIL1NiHIGCNFkwvdDldeQjzedUSyHr4BchuWiQ==\" \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    titre Migration de l'infrastructure cloud\r\n    dateFormat AAAA-MM-JJ\r\n    axisFormat %m-%j\r\n    exclut les week-ends\r\n\r\n    section Architecture\r\n    Conception cloud   :termin\u00e9, a1, 2026-06-01, 10j\r\n    Audit s\u00e9curit\u00e9 :en cours, a2, apr\u00e8s a1, 5j\r\n\r\n    section Migration\r\n    Transfert de donn\u00e9es  :crit, m1, apr\u00e8s a2, 15j\r\n    R\u00e9impl\u00e9mentation de l'application :m2, apr\u00e8s m1, 8j\r\n\r\n    section Jalons\r\n    Mise en production :jalon, m3, apr\u00e8s m2, 0j<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNplUMtqwzAQvAfyD3sJvcRgp6QU30yhh4AvpT8gpE0qRw+zWtF8Uv0d\/rFurNCUdpFAzGhnZvekAvN6BVJsmRB6eyLFNgYwCO7BhiOpxJQ1Z2G1i9mU70YxvkbyiqGTqvq+OhwKpS423aiNrzZDQfGiXWZwmOAT8VxhMGm9KlxCvXh2pD8s42JWmJcYNI4LuZgL1DKSt2GetqCaLezq3VNVy5F3U9\/MumwsQ5onncnyPEGLIhAzJWnayR1p\/kpL\/374m+JnBwV+JxXSEYmvKzExiLPMAK0W5S345q4mws3+luBtnqwf3Tx5DPxro2ocndUFaP09ylXn+V+Ug3IxpIL1NiHIGCNFkwvdDldeQjzedUSyHr4BchuWiQ==\" \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>Modifier Mermaid dans 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>Analyse de la syntaxe :<\/strong> Ce diagramme s\u00e9pare clairement la planification, l&#8217;ex\u00e9cution et les jalons du projet. En marquant la t\u00e2che \u00ab Transfert de donn\u00e9es \u00bb comme <code>crit<\/code>, elle re\u00e7oit une mise en \u00e9vidence distincte, attirant l&#8217;attention du spectateur sur la phase la plus \u00e0 risque de la migration.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Qu&#8217;est-ce qu&#8217;un diagramme de Gantt ? Un diagramme de Ganttest un outil de visualisation de gestion de projet utilis\u00e9 pour repr\u00e9senter les calendriers de projet, les dur\u00e9es des t\u00e2ches et les jalons de chemin critique le long d&#8217;une timeline horizontale&#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\/fr\/docs\/vpascode-docs\/mermaid-js-gantt-chart-syntax-guide\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\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\/fr\/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=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/mermaid-js-gantt-chart-syntax-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/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\\\/fr\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/mermaid-js-gantt-chart-syntax-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/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\\\/fr\\\/docs\\\/vpascode-docs\\\/mermaid-js-gantt-chart-syntax-guide\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/mermaid-js-gantt-chart-syntax-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/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\\\/fr\\\/docs\\\/vpascode-docs\\\/mermaid-js-gantt-chart-syntax-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lean Docs\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/%ld_collection%\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Guide de syntaxe des diagrammes Gantt de Mermaid.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/#website\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/\",\"name\":\"VPasCode\",\"description\":\"by Visual Paradigm\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/#organization\",\"name\":\"VPasCode\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/wp-content\\\/uploads\\\/sites\\\/6\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/wp-content\\\/uploads\\\/sites\\\/6\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"width\":128,\"height\":138,\"caption\":\"VPasCode\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/#\\\/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\/fr\/docs\/vpascode-docs\/mermaid-js-gantt-chart-syntax-guide\/","og_locale":"fr_FR","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\/fr\/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":{"Dur\u00e9e de lecture estim\u00e9e":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-gantt-chart-syntax-guide\/","url":"https:\/\/www.vpascode.com\/fr\/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\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-gantt-chart-syntax-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/fr\/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\/fr\/docs\/vpascode-docs\/mermaid-js-gantt-chart-syntax-guide\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-gantt-chart-syntax-guide\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.vpascode.com\/fr\/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\/fr\/docs\/vpascode-docs\/mermaid-js-gantt-chart-syntax-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vpascode.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Lean Docs","item":"https:\/\/www.vpascode.com\/fr\/docs\/%ld_collection%\/"},{"@type":"ListItem","position":3,"name":"Guide de syntaxe des diagrammes Gantt de Mermaid.js"}]},{"@type":"WebSite","@id":"https:\/\/www.vpascode.com\/fr\/#website","url":"https:\/\/www.vpascode.com\/fr\/","name":"VPasCode","description":"by Visual Paradigm","publisher":{"@id":"https:\/\/www.vpascode.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vpascode.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/www.vpascode.com\/fr\/#organization","name":"VPasCode","url":"https:\/\/www.vpascode.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.vpascode.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/www.vpascode.com\/fr\/wp-content\/uploads\/sites\/6\/2026\/06\/cropped-vp-online-logo-v1.png","contentUrl":"https:\/\/www.vpascode.com\/fr\/wp-content\/uploads\/sites\/6\/2026\/06\/cropped-vp-online-logo-v1.png","width":128,"height":138,"caption":"VPasCode"},"image":{"@id":"https:\/\/www.vpascode.com\/fr\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.vpascode.com\/fr\/wp-json\/wp\/v2\/ld_docs\/2109","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vpascode.com\/fr\/wp-json\/wp\/v2\/ld_docs"}],"about":[{"href":"https:\/\/www.vpascode.com\/fr\/wp-json\/wp\/v2\/types\/ld_docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/fr\/wp-json\/wp\/v2\/users\/4"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/fr\/wp-json\/wp\/v2\/media?parent=2109"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/fr\/wp-json\/wp\/v2\/ld_collection?post=2109"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}