{"id":2084,"date":"2026-07-08T06:20:18","date_gmt":"2026-07-08T06:20:18","guid":{"rendered":"https:\/\/www.vpascode.com\/fr\/docs\/uncategorized\/mermaid-js-block-diagram-syntax-grid-layout-guide\/"},"modified":"2026-07-08T06:20:18","modified_gmt":"2026-07-08T06:20:18","slug":"mermaid-js-block-diagram-syntax-grid-layout-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-block-diagram-syntax-grid-layout-guide\/","title":{"rendered":"Syntax du diagramme de blocs Mermaid.js &#038; Guide de disposition en grille"},"content":{"rendered":"<p>Un diagramme de blocs est un moteur de disposition structur\u00e9 utilis\u00e9 pour repr\u00e9senter des architectures logicielles complexes, des plateformes mat\u00e9rielles ou des mod\u00e8les organisationnels. Introduit nativement dans Mermaid.js, le <code>block<\/code>moteur traite la zone de disposition comme une matrice math\u00e9matique absolue. Cela permet un contr\u00f4le pr\u00e9cis sur l&#8217;alignement des colonnes, les limites d&#8217;empilement de disposition isol\u00e9es, les blocs d&#8217;espacement structurels et les configurations explicites de liaison des ports aux bords.<\/p>\n<h2>Comprendre la strat\u00e9gie de la matrice de grille<\/h2>\n<p>Contrairement aux sch\u00e9mas de flux standards en libre-forme qui devinent dynamiquement les trajectoires de disposition, un diagramme de blocs repose sur un syst\u00e8me rigide de grille de coordonn\u00e9es lin\u00e9aires :<\/p>\n<ul>\n<li><strong>Le seuil de colonne :<\/strong>Vous d\u00e9finissez un plafond horizontal strict en utilisant le <code>colonnes<\/code>modificateur. Lorsque la grille est remplie de blocs, les \u00e9l\u00e9ments suppl\u00e9mentaires se replient proprement sur la ligne suivante automatiquement.<\/li>\n<li><strong>Taille par champs de grille :<\/strong>Par d\u00e9faut, chaque bloc occupe une seule case de coordonn\u00e9es ($1 times 1$). Vous pouvez modifier ce comportement en attribuant des largeurs de colonnes explicites pour \u00e9tendre les \u00e9l\u00e9ments sur plusieurs pistes parfaitement.<\/li>\n<\/ul>\n<h2>Structure de syntaxe de base<\/h2>\n<p>Chaque disposition commence par la d\u00e9claration <code>block<\/code>en-t\u00eate de d\u00e9claration. Elle est suivie de la d\u00e9finition de la capacit\u00e9 de largeur de ligne avec le mot-cl\u00e9 <code>colonnes<\/code>et de la d\u00e9claration des blocs sur des lignes cons\u00e9cutives.<\/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:eNpLyslPzublUlBIzs8pzc0rVjCGcHIL8vNS80oco5XcMouKSxScQOqUYlEknaKVfDNTUnJSsco6RysFZaZnwLUCABGuImU=\" 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:eNpLyslPzublUlBIzs\/Jz8tLLVYwhvByC\/LzUvNKHKOVAopSczNTixScgEqVYlFknaKVQKIKKaUKuZk5mamlaPLOMPlUhZSi\/MySVKVYABcbJPE=\" \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\">block\r\n  colonnes 3\r\n  componentA[\"Premier Bloc\"]\r\n  componentB[\"Bloc du milieu\"]\r\n  componentC[\"Bloc de droite\"]<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLyslPzublUlBIzs\/Jz8tLLVYwhvByC\/LzUvNKHKOVAopSczNTixScgEqVYlFknaKVQKIKKaUKuZk5mamlaPLOMPlUhZSi\/MySVKVYABcbJPE=\" \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:eNpLyslPzublUlBIzs8pzc0rVjCGcHIL8vNS80oco5XcMouKSxScQOqUYlEknaKVfDNTUnJSsco6RysFZaZnwLUCABGuImU=\" 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=\"MVMmAKu\"><img alt=\"\" class=\"alignnone size-full wp-image-966\" decoding=\"async\" height=\"42\" sizes=\"(max-width: 321px) 100vw, 321px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded6cdf466.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded6cdf466.png 321w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded6cdf466-300x39.png 300w\" width=\"321\"\/><\/p>\n<h2>R\u00e9f\u00e9rence de syntaxe<\/h2>\n<p>Le tableau ci-dessous d\u00e9taille les param\u00e8tres de donn\u00e9es fondamentaux, les mots-cl\u00e9s de style personnalis\u00e9s et les conteneurs structurels reconnus nativement par l&#8217;interpr\u00e9teur de blocs.<\/p>\n<table border=\"1\" cellpadding=\"5\" cellspacing=\"0\">\n<thead>\n<tr>\n<th>Composant de syntaxe<\/th>\n<th>Exigence de type<\/th>\n<th>Description et r\u00e8gles de disposition visuelle<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>D\u00e9claration<\/strong><\/td>\n<td>Identificateur de mot-cl\u00e9<\/td>\n<td>Initialise la zone de dessin de bloc de matrice de grille. Doit utiliser exactement <code>bloc<\/code> cha\u00eene d&#8217;en-t\u00eate.<\/td>\n<\/tr>\n<tr>\n<td><strong>Jeux de colonnes<\/strong><\/td>\n<td>Mot-cl\u00e9 + Entier<\/td>\n<td>D\u00e9finit le nombre total de fentes horizontales avant le retour \u00e0 la ligne (par exemple, <code>colonnes 4<\/code>).<\/td>\n<\/tr>\n<tr>\n<td><strong>Bloc standard<\/strong><\/td>\n<td>ID + \u00c9tiquette facultative<\/td>\n<td>Cr\u00e9e une bo\u00eete de donn\u00e9es standard : <code>id[\"Texte de l'\u00e9tiquette\"]<\/code>. Les d\u00e9corateurs de forme correspondent \u00e0 la syntaxe des diagrammes de flux (par exemple, <code>(())<\/code> pour les cercles, <code>[()]<\/code> pour les bases de donn\u00e9es).<\/td>\n<\/tr>\n<tr>\n<td><strong>Remplacement des dimensions du bloc<\/strong><\/td>\n<td>Bloc de param\u00e8tre deux-points<\/td>\n<td>Remplace la taille par d\u00e9faut de la grille d&#8217;agencement $1 times 1$ en attribuant explicitement des blocs de largeur de colonne personnalis\u00e9s : <code>id:largeur<\/code>.<\/td>\n<\/tr>\n<tr>\n<td><strong>\u00c9l\u00e9ment d&#8217;espace<\/strong><\/td>\n<td>Mot-cl\u00e9 r\u00e9serv\u00e9<\/td>\n<td>Ins\u00e8re une tuile invisible et structurale $1 times 1$ vide dans la ligne active en utilisant exactement le mot-cl\u00e9 <code>espace<\/code> mot-cl\u00e9. Vous pouvez multiplier les largeurs en ligne comme <code>espace:2<\/code>.<\/td>\n<\/tr>\n<tr>\n<td><strong>Fl\u00e8che du bloc<\/strong><\/td>\n<td>ID d&#8217;entit\u00e9 sp\u00e9cialis\u00e9e<\/td>\n<td>Affiche une bo\u00eete fl\u00e9ch\u00e9e structur\u00e9e et \u00e9paisse \u00e0 l&#8217;int\u00e9rieur d&#8217;une cellule de grille : <code>arrowId&lt;[\"\u00c9tiquette\"]&gt;(direction)<\/code>. Les directions incluent <code>haut<\/code>, <code>bas<\/code>, <code>gauche<\/code>, <code>droite<\/code>.<\/td>\n<\/tr>\n<tr>\n<td><strong>Enveloppe composite<\/strong><\/td>\n<td>Bloc \/ Conteneur de fin<\/td>\n<td>Int\u00e8gre une matrice de sous-grille autonome et isol\u00e9e directement dans une cellule de bloc parent : <code>bloc:SubID ... fin<\/code>. Les sous-blocs peuvent d\u00e9clarer leurs propres limites de colonnes ind\u00e9pendantes.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr\/>\n<h2>Fonctionnalit\u00e9 avanc\u00e9e : Dimensions explicites de bloc et modificateurs d&#8217;espace<\/h2>\n<p>Pour les mises en page asym\u00e9triques, vous pouvez passer des m\u00e9triques de taille horizontale explicites directement sur des blocs standards ou des s\u00e9parateurs d&#8217;espace en utilisant un s\u00e9parateur de notation deux-points (<code>:largeur<\/code>). Cela force les \u00e9l\u00e9ments \u00e0 s&#8217;\u00e9tendre sur plusieurs positions de grille de mani\u00e8re propre.<\/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:eNpLyslPzublUlBIzs8pzc0rVjABccozU1Kd83ML8vNS80qilcKBXAWXxOKMpPzEohQFj9TElNQipVgrsNqc1LQSp8SiaKVgoKqkRKC4QnFBYnKqlZFCUWZ6BkTONzEzTyEgMS81RykWAHJPJbg=\" 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:eNolTTsOwjAM3ZG4g5WdBTF1LGJnrzo4iVsiGTtyXXEmuEYvRgrL03t6v8iajgeApKwitMBlV6+S6arPqkLiQ7jJybePE2QCx8iE606jWgZGmymM3a\/HNHmPNoQGRs3z7W3IzQdaKibqzmBlfvxDd2yPbapakVQqchi\/mJkxjA==\" \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\">bloc\r\n  colonnes 4\r\n  wideComponent[\"En-t\u00eate de tableau de bord large\"]:4\r\n  leftBar[\"Barre lat\u00e9rale\"] espace:2 rightBar[\"Panneau principal\"]<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNolTTsOwjAM3ZG4g5WdBTF1LGJnrzo4iVsiGTtyXXEmuEYvRgrL03t6v8iajgeApKwitMBlV6+S6arPqkLiQ7jJybePE2QCx8iE606jWgZGmymM3a\/HNHmPNoQGRs3z7W3IzQdaKibqzmBlfvxDd2yPbapakVQqchi\/mJkxjA==\" \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:eNpLyslPzublUlBIzs8pzc0rVjABccozU1Kd83ML8vNS80qilcKBXAWXxOKMpPzEohQFj9TElNQipVgrsNqc1LQSp8SiaKVgoKqkRKC4QnFBYnKqlZFCUWZ6BkTONzEzTyEgMS81RykWAHJPJbg=\" 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=\"ZuoRoRz\"><img alt=\"\" class=\"alignnone size-full wp-image-967\" decoding=\"async\" height=\"82\" sizes=\"(max-width: 372px) 100vw, 372px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded784d18a.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded784d18a.png 372w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded784d18a-300x66.png 300w\" width=\"372\"\/><\/p>\n<hr\/>\n<h2>Fonctionnalit\u00e9 avanc\u00e9e : Types d&#8217;ar\u00eates, directions et options de lien<\/h2>\n<p>Les connexions dans le <code>bloc<\/code> moteur sont divis\u00e9es en lignes s\u00e9mantiques standard et en fl\u00e8ches de bloc de disposition structurelle. Les lignes de connexion standard permettent de sp\u00e9cifier des contraintes directionnelles explicites pour d\u00e9terminer comment les lignes s&#8217;enroulent autour des \u00e9l\u00e9ments.<\/p>\n<h3>1. Connecteurs de ligne standard<\/h3>\n<p>Les connexions de bloc utilisent les op\u00e9rateurs de lien standard (<code>--&gt;<\/code>, <code>--<\/code>, <code>&lt;--&gt;<\/code>). Toutefois, vous pouvez contr\u00f4ler le routage en ajoutant des directions ou des modificateurs entre parenth\u00e8ses :<\/p>\n<ul>\n<li><code>A --&gt; B<\/code> : Dessine une ligne directionnelle standard depuis l&#8217;\u00e9l\u00e9ment A vers l&#8217;\u00e9l\u00e9ment B.<\/li>\n<li><code>A -- x B<\/code> : Dessine un chemin de connexion termin\u00e9 par une marque \u00ab X \u00bb indiquant un chemin bloqu\u00e9.<\/li>\n<li><code>A -- o B<\/code> : Dessine un chemin de connexion termin\u00e9 par un point de connexion en cercle ouvert.<\/li>\n<\/ul>\n<h3>2. Fl\u00e8ches de bloc de mise en page dynamique<\/h3>\n<p>Les fl\u00e8ches de bloc sont trait\u00e9es comme des composants de mise en page r\u00e9els qui occupent un bloc d&#8217;indice de coordonn\u00e9es r\u00e9el dans votre matrice de budget de ligne. Elles utilisent des propri\u00e9t\u00e9s de syntaxe sup\u00e9rieure et inf\u00e9rieure pour cartographier les chemins de flux physiques :<\/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:eNpLyslPzublUlBIzs8pzc0rVjAGcQqK8lNKk1OLopVcEksSFQKgXKVYkGRuZopjUVF+uU20UkhRYl5xWn5RrgKQlZaWmawUa6dRlJmeUaIJMTOvuDQXbowzlKsUCwDgCicN\" 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:eNpLyslPzublUlBIzs8pzc0rVjAGcQqK8lNKk1OLopUCwKyS1NIihZRUhZT8vLzDK1OLlWJBqnIzUxyLivLLbaKVQooS84rT8otyU4sUclIVSooS0zKTlWLtNIoy0zNKNCEW5BWX5oLMdAay8nNzEzFNBQCD1jHt\" \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\">block\r\n  columns 3\r\n  producer[\"Producteur de donn\u00e9es\"]\r\n  midArrow&lt;[\"Transformer le trafic\"]&gt;(right)\r\n  consumer[\"Consommateur de donn\u00e9es\"]<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLyslPzublUlBIzs8pzc0rVjAGcQqK8lNKk1OLopUCwKyS1NIihZRUhZT8vLzDK1OLlWJBqnIzUxyLivLLbaKVQooS84rT8otyU4sUclIVSooS0zKTlWLtNIoy0zNKNCEW5BWX5oLMdAay8nNzEzFNBQCD1jHt\" \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:eNpLyslPzublUlBIzs8pzc0rVjAGcQqK8lNKk1OLopVcEksSFQKgXKVYkGRuZopjUVF+uU20UkhRYl5xWn5RrgKQlZaWmawUa6dRlJmeUaIJMTOvuDQXbowzlKsUCwDgCicN\" 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=\"uiUqlGG\"><img alt=\"\" class=\"alignnone size-full wp-image-968\" decoding=\"async\" height=\"50\" sizes=\"(max-width: 477px) 100vw, 477px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded82bcd30.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded82bcd30.png 477w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded82bcd30-300x31.png 300w\" width=\"477\"\/><\/p>\n<hr\/>\n<h2>Fonctionnalit\u00e9 avanc\u00e9e : Empilement de matrices de sous-bloc (regroupement compos\u00e9)<\/h2>\n<p>Le <code>block:id<\/code> enveloppe agit comme un environnement contextuel de bo\u00eete de mise en page isol\u00e9e. Un conteneur de groupe d&#8217;application peut \u00e9tablir son propre nombre unique de colonnes horizontales \u00e0 l&#8217;int\u00e9rieur d&#8217;un sous-bloc, permettant aux composants complexes de se regrouper \u00e9troitement sans influencer l&#8217;espacement de la grille du mod\u00e8le global de canevas parent.<\/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:eNpFjLEOwjAMRHck\/sHyJ8DGVlWoYkFsDBFDkloQNY2Rk1Dx99S0iMFnvbPvXGQ\/bDcAnmMdU4adgjCXzhaa7NtgF9nZCCvjTR90nEYPY\/DCmeQVPLWx5kKix3\/hfkFby8NgMyucuaelZrafwWDLQtBcTj9zYhlIDF6\/G47pHtKaoNR\/AG9nNiU=\" 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:eNpFjTEOwjAMAHck\/mBlYYeNDTEgBlD3qEOaGLCaxpXjUPEO3sS\/aFQJBg8nn89dZN+vVwCeYxlShm0FYdaTU5zcy5rG5YyCMSLcI3cuommrVKer5\/uBvPDsPMnjMZasKHX5j+4WdEUf1lw\/7xIgbCphUrqRd0qclupsjWTNoTnDKJQ8jb+HABNLj2LNhRWLQEBQcaQ4zJ3FwRS+LixD+Q==\" \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\">block\r\n  columns 2\r\n  rootGateway[\"Passerelle globale\"]\r\n  \r\n  block:microserviceCluster\r\n    columns 3\r\n    auth[\"N\u0153ud d'authentification\"]\r\n    api[\"API principale\"]\r\n    worker[\"Moteur de traitement\"]\r\n  end<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpFjTEOwjAMAHck\/mBlYYeNDTEgBlD3qEOaGLCaxpXjUPEO3sS\/aFQJBg8nn89dZN+vVwCeYxlShm0FYdaTU5zcy5rG5YyCMSLcI3cuommrVKer5\/uBvPDsPMnjMZasKHX5j+4WdEUf1lw\/7xIgbCphUrqRd0qclupsjWTNoTnDKJQ8jb+HABNLj2LNhRWLQEBQcaQ4zJ3FwRS+LixD+Q==\" \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:eNpFjLEOwjAMRHck\/sHyJ8DGVlWoYkFsDBFDkloQNY2Rk1Dx99S0iMFnvbPvXGQ\/bDcAnmMdU4adgjCXzhaa7NtgF9nZCCvjTR90nEYPY\/DCmeQVPLWx5kKix3\/hfkFby8NgMyucuaelZrafwWDLQtBcTj9zYhlIDF6\/G47pHtKaoNR\/AG9nNiU=\" 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=\"kcZGAdG\"><img loading=\"lazy\" alt=\"\" class=\"alignnone size-full wp-image-969\" decoding=\"async\" height=\"58\" loading=\"lazy\" sizes=\"auto, (max-width: 747px) 100vw, 747px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded8d55ac8.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded8d55ac8.png 747w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded8d55ac8-300x23.png 300w\" width=\"747\"\/><\/p>\n<hr\/>\n<h2>Maquette du monde r\u00e9el : Infrastructure multi-niveaux avec cache<\/h2>\n<p>Cette maquette compl\u00e8te, \u00e0 plusieurs lignes, d\u00e9montre une configuration d&#8217;infrastructure de production propre. Elle \u00e9tablit une disposition en grille de traitement \u00e0 3 colonnes, utilise des \u00e9l\u00e9ments structuraux <code>espace<\/code> \u00e9l\u00e9ments pour isoler un niveau de base de donn\u00e9es, cartographie une descente \u00e9paisse <code>fl\u00e8cheBloc<\/code>, et isole un conteneur de sous-syst\u00e8me interne s\u00e9par\u00e9 en utilisant un <code>bloc:id ... fin<\/code> enveloppe composite.<\/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:eNptUcFqAjEQvQv+wxAQdg97qN6kCGpXKFiwWvAgHsZsXIPZzDLJaj+\/iatVS295897MmzfZGZLHbgdAkmkq62DQ7UTY68GSzvAyhNx6RisVrBSftFQu0oV1U6OV9Uki1moHLRBpGklDWEzQxCbeiLwoFcxDCW41sY0qV6NUT2b9IUzJWiW9tiXMTCgVdLbgCT60ZHIPC1y74aJYUuPV60bMiM\/IBXwx7vdaiu0oiXT6v90g2lU1Oe0VjOvaaIlekw2JT5rJViFRCNY4rzi27eKphljXD7X73fotxMYfrofaiHEAYch1bhs7SGqd21LbIJgSB+vFO6yJj7fDKFs8J0SPO3Rqk4gFOV+yWn3O4W0i0u1vntwFjdHuANIoZKjQs\/7OPGXtC5znRvqG0YAJ1oBGl5eE7u+PQZaN4DnlHV3I20I\/aXq0Mg==\" 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:eNp1UktKA0EQ3Qu5Q9EQTBZZGHciQtQIQhYRBRchi56eyljQ6R6reoJXyFFyjlzM6sloouiuX33fe9WFj653BuCijyGgwGXvLON+H2ZUBYQLuIJn5A05TZbnGBLvd5hLyiB3njQwGJjDA16xMMNhO+\/NcoUNT98b8lSwrXBh9tsOaQJK7IpgWlZolrkLpbYOfzEYK4MH33y0HZnkB8WgQByG0urWDbKAV3prchylI3s6D4Bjk\/D+uwevF+aFbZDVfsfI2g2J7YqcWd4MjqOH\/5K6VFJ3vpGErRKvxmyIM7t1NqI8t3XtydmUubq4rqNQapkU6viVZrvuHDqxf3zAtklvnesLM1GgQ2nVzTt4pUU1TUNFAVstG0veZ2Mn80eomYKj2vrO2BWFn34UVvA+r0RZDMytoiyj1IheV2AeJVWMz08zM1x+S99vky08ZcUC1mcjsloBSdy41DB6Aect6T3yR8HDVWzir4P88S1gNLqBn34cUZs84foJ7s3jvg==\" \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\">bloc\r\n  colonnes 3\r\n\r\n  %% Ligne 1 : Services d'entr\u00e9e\r\n  dnsClient((\"Client Web\"))\r\n  chargeurEquilibrage[\"\u00c9quilibreur de charge Edge\"]\r\n  espace\r\n\r\n  %% Ligne 2 : Flux de connexion descendant vers les microservices\r\n  espace\r\n  routeDescendante&lt;[\"Transf\u00e9rer le trafic\"]&gt;(descendant)\r\n  espace\r\n\r\n  %% Ligne 3 : Cluster de l'environnement d'application composite\r\n  bloc:appCluster\r\n    colonnes 2\r\n    authService[\"Authentification\"]\r\n    apiEngine[\"Travailleur API principale\"]\r\n  fin\r\n  espace\r\n  baseDonnees[(\"Base de donn\u00e9es PostgreSQL\")]\r\n\r\n  %% \u00c9tablir des alignements structurels clairs entre les matrices\r\n  chargeurEquilibrage --&gt; appCluster\r\n  appCluster --&gt; baseDonnees<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp1UktKA0EQ3Qu5Q9EQTBZZGHciQtQIQhYRBRchi56eyljQ6R6reoJXyFFyjlzM6sloouiuX33fe9WFj653BuCijyGgwGXvLON+H2ZUBYQLuIJn5A05TZbnGBLvd5hLyiB3njQwGJjDA16xMMNhO+\/NcoUNT98b8lSwrXBh9tsOaQJK7IpgWlZolrkLpbYOfzEYK4MH33y0HZnkB8WgQByG0urWDbKAV3prchylI3s6D4Bjk\/D+uwevF+aFbZDVfsfI2g2J7YqcWd4MjqOH\/5K6VFJ3vpGErRKvxmyIM7t1NqI8t3XtydmUubq4rqNQapkU6viVZrvuHDqxf3zAtklvnesLM1GgQ2nVzTt4pUU1TUNFAVstG0veZ2Mn80eomYKj2vrO2BWFn34UVvA+r0RZDMytoiyj1IheV2AeJVWMz08zM1x+S99vky08ZcUC1mcjsloBSdy41DB6Aect6T3yR8HDVWzir4P88S1gNLqBn34cUZs84foJ7s3jvg==\" \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:eNptUcFqAjEQvQv+wxAQdg97qN6kCGpXKFiwWvAgHsZsXIPZzDLJaj+\/iatVS295897MmzfZGZLHbgdAkmkq62DQ7UTY68GSzvAyhNx6RisVrBSftFQu0oV1U6OV9Uki1moHLRBpGklDWEzQxCbeiLwoFcxDCW41sY0qV6NUT2b9IUzJWiW9tiXMTCgVdLbgCT60ZHIPC1y74aJYUuPV60bMiM\/IBXwx7vdaiu0oiXT6v90g2lU1Oe0VjOvaaIlekw2JT5rJViFRCNY4rzi27eKphljXD7X73fotxMYfrofaiHEAYch1bhs7SGqd21LbIJgSB+vFO6yJj7fDKFs8J0SPO3Rqk4gFOV+yWn3O4W0i0u1vntwFjdHuANIoZKjQs\/7OPGXtC5znRvqG0YAJ1oBGl5eE7u+PQZaN4DnlHV3I20I\/aXq0Mg==\" 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=\"nAmZcPX\"><img loading=\"lazy\" alt=\"\" class=\"alignnone size-full wp-image-970\" decoding=\"async\" height=\"284\" loading=\"lazy\" sizes=\"auto, (max-width: 838px) 100vw, 838px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4deda7017bf.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4deda7017bf.png 838w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4deda7017bf-300x102.png 300w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4deda7017bf-768x260.png 768w\" width=\"838\"\/><\/p>\n<hr\/>\n<h2>P\u00e9ch\u00e9s courants de syntaxe et contraintes du syst\u00e8me<\/h2>\n<p>Lors de la compilation de cartes matricielles pr\u00e9cises, gardez \u00e0 l&#8217;esprit ces v\u00e9rifications de validation pour \u00e9viter les erreurs d&#8217;analyse syntaxique :<\/p>\n<ul>\n<li><strong>Application du budget de colonnes :<\/strong> Suivez attentivement le nombre de colonnes. Si vous sp\u00e9cifiez <code>colonnes 3<\/code> et \u00e9crivez 4 blocs s\u00e9quentiels sur une ligne, le quatri\u00e8me bloc passera automatiquement \u00e0 la ligne 2, ce qui peut rompre les chemins de connexion gauche \u00e0 droite pr\u00e9vus.<\/li>\n<li><strong>Ordre d&#8217;empilement composite :<\/strong> Lors de la construction de conteneurs internes avec <code>bloc:id<\/code>, vous devez toujours sceller l&#8217;espace de travail sous-matrice en utilisant le mot-cl\u00e9 <code>fin<\/code> sur une ligne isol\u00e9e avant de d\u00e9clarer les \u00e9l\u00e9ments suivants. En oubliant de fermer le bloc, la construction du diagramme sera interrompue.<\/li>\n<li><strong>Limitations de la cible de fl\u00e8che de bloc :<\/strong> La propri\u00e9t\u00e9 de direction encadr\u00e9e entre parenth\u00e8ses apr\u00e8s une fl\u00e8che de bloc (par exemple, <code>(haut)<\/code>, <code>(bas)<\/code>) doit \u00eatre un litt\u00e9ral en minuscules correspondant parfaitement aux mots-cl\u00e9s du syst\u00e8me. Mettre en majuscule la direction entra\u00eenera des erreurs de traitement.<\/li>\n<li><strong>Chevauchements de limites d&#8217;\u00e9tiquette :<\/strong> D\u00e9corateurs de forme de diagramme de flux standard (comme les parenth\u00e8ses <code>()<\/code> pour les bo\u00eetes rondes ou les accolades <code>{}<\/code> pour les diamants) sont enti\u00e8rement pris en charge. Assurez-vous que toutes les \u00e9tiquettes de texte affich\u00e9es \u00e0 l&#8217;int\u00e9rieur des formes utilisent des guillemets doubles propres pour \u00e9viter la suppression de caract\u00e8res.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Un diagramme de blocs est un moteur de disposition structur\u00e9 utilis\u00e9 pour repr\u00e9senter des architectures logicielles complexes, des plateformes mat\u00e9rielles ou des mod\u00e8les organisationnels. Introduit nativement dans Mermaid.js, le blockmoteur traite la zone de disposition comme une matrice math\u00e9matique absolue&#8230;.<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":22,"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-2084","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 Block Diagram Syntax | VPasCode Text to Diagram Guide<\/title>\n<meta name=\"description\" content=\"Model hardware components and high-level software blocks with Mermaid in VPasCode, a free 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-block-diagram-syntax-grid-layout-guide\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mermaid Block Diagram Syntax | VPasCode Text to Diagram Guide\" \/>\n<meta property=\"og:description\" content=\"Model hardware components and high-level software blocks with Mermaid in VPasCode, a free diagram-as-code tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-block-diagram-syntax-grid-layout-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"VPasCode\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded6cdf466.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=\"5 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-block-diagram-syntax-grid-layout-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/mermaid-js-block-diagram-syntax-grid-layout-guide\\\/\",\"name\":\"Mermaid Block Diagram 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-block-diagram-syntax-grid-layout-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/mermaid-js-block-diagram-syntax-grid-layout-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4ded6cdf466.png\",\"datePublished\":\"2026-07-08T06:20:18+00:00\",\"description\":\"Model hardware components and high-level software blocks with Mermaid in VPasCode, a free diagram-as-code tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/mermaid-js-block-diagram-syntax-grid-layout-guide\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/mermaid-js-block-diagram-syntax-grid-layout-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/mermaid-js-block-diagram-syntax-grid-layout-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4ded6cdf466.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4ded6cdf466.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/mermaid-js-block-diagram-syntax-grid-layout-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\":\"Syntax du diagramme de blocs Mermaid.js &#038; Guide de disposition en grille\"}]},{\"@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 Block Diagram Syntax | VPasCode Text to Diagram Guide","description":"Model hardware components and high-level software blocks with Mermaid in VPasCode, a free 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-block-diagram-syntax-grid-layout-guide\/","og_locale":"fr_FR","og_type":"article","og_title":"Mermaid Block Diagram Syntax | VPasCode Text to Diagram Guide","og_description":"Model hardware components and high-level software blocks with Mermaid in VPasCode, a free diagram-as-code tool.","og_url":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-block-diagram-syntax-grid-layout-guide\/","og_site_name":"VPasCode","og_image":[{"url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded6cdf466.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Dur\u00e9e de lecture estim\u00e9e":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-block-diagram-syntax-grid-layout-guide\/","url":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-block-diagram-syntax-grid-layout-guide\/","name":"Mermaid Block Diagram 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-block-diagram-syntax-grid-layout-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-block-diagram-syntax-grid-layout-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded6cdf466.png","datePublished":"2026-07-08T06:20:18+00:00","description":"Model hardware components and high-level software blocks with Mermaid in VPasCode, a free diagram-as-code tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-block-diagram-syntax-grid-layout-guide\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-block-diagram-syntax-grid-layout-guide\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-block-diagram-syntax-grid-layout-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded6cdf466.png","contentUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded6cdf466.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-block-diagram-syntax-grid-layout-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":"Syntax du diagramme de blocs Mermaid.js &#038; Guide de disposition en grille"}]},{"@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\/2084","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\/3"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/fr\/wp-json\/wp\/v2\/media?parent=2084"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/fr\/wp-json\/wp\/v2\/ld_collection?post=2084"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}