{"id":2082,"date":"2026-07-08T06:48:07","date_gmt":"2026-07-08T06:48:07","guid":{"rendered":"https:\/\/www.vpascode.com\/fr\/docs\/uncategorized\/mermaid-js-c4-diagram-syntax-architecture-guide\/"},"modified":"2026-07-08T06:48:07","modified_gmt":"2026-07-08T06:48:07","slug":"mermaid-js-c4-diagram-syntax-architecture-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-c4-diagram-syntax-architecture-guide","title":{"rendered":"Syntax des diagrammes C4 de Mermaid.js et guide d&#8217;architecture"},"content":{"rendered":"<p>Un diagramme C4 est une m\u00e9thode standardis\u00e9e de visualisation architecturale con\u00e7ue pour mod\u00e9liser les syst\u00e8mes logiciels \u00e0 plusieurs niveaux d&#8217;abstraction structurelle. Int\u00e9gr\u00e9 nativement dans Mermaid.js, le <code>c4<\/code> moteur suit les quatre niveaux fondamentaux du mod\u00e8le C4 : <strong>Contexte<\/strong> (l&#8217;\u00e9cosyst\u00e8me macro), <strong>Conteneurs<\/strong> (applications, services et bases de donn\u00e9es), <strong>Composants<\/strong> (modules structurels internes), et <strong>Interactions dynamiques<\/strong>. Cet outil \u00e9limine les complications li\u00e9es au style CSS personnalis\u00e9 en appliquant des blocs architecturaux coh\u00e9rents et pr\u00eats \u00e0 \u00eatre pr\u00e9sent\u00e9s, bas\u00e9s sur vos d\u00e9clarations textuelles.<\/p>\n<h2>Comprendre les abstractions et les mots-cl\u00e9s des diagrammes C4<\/h2>\n<p>Mermaid prend en charge quatre en-t\u00eates d&#8217;initialisation de diagrammes sp\u00e9cialis\u00e9s, selon le niveau de d\u00e9tail requis par votre disposition syst\u00e8me :<\/p>\n<ul>\n<li><code>C4Contexte<\/code>: Se concentre sur la vue d&#8217;ensemble, affichant les utilisateurs, les \u00e9cosyst\u00e8mes logiciels principaux et les d\u00e9pendances externes de haut niveau.<\/li>\n<li><code>C4Conteneur<\/code>: Zoom sur un niveau pour d\u00e9composer les applications autonomes, les interfaces frontend, les microservices, les syst\u00e8mes de stockage de bases de donn\u00e9es et les files d&#8217;attente.<\/li>\n<li><code>C4Composant<\/code>: P\u00e9n\u00e8tre en profondeur dans un conteneur pour mettre en \u00e9vidence les modules au niveau du code interne, tels que les Contr\u00f4leurs, Services et R\u00e9f\u00e9rentiels.<\/li>\n<li><code>C4Dynamique<\/code>: Se concentre sur le suivi des interactions de donn\u00e9es en temps r\u00e9el ou la s\u00e9quence \u00e9tape par \u00e9tape des transactions entre les blocs d&#8217;infrastructure.<\/li>\n<\/ul>\n<h2>Structure de syntaxe de base<\/h2>\n<p>Chaque diagramme C4 commence par son en-t\u00eate de niveau sp\u00e9cifique, suivi d&#8217;une d\u00e9claration de titre facultative et de composants macro s\u00e9par\u00e9s par des virgules. Les parenth\u00e8ses contiennent les param\u00e8tres, les cha\u00eenes \u00e9tant d\u00e9limit\u00e9es par des guillemets doubles.<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpljr0KwkAQhHvBdxiuiiBWvoCm0U5MrCWGjR6et+F2Y\/TtvfyJYLkzs99Muk7ZK710PgPUqiOY7C1KD4wGtq6hOlivqDhgH8XgSaMdyHRfBwrCPikbUX5QWMJsC3+3\/op0lEzUNpgC4Ap6I1xiCq3VG+qeUDgUZcmNV1mZRUcehiSXAXeW\/oys74apaAj2Nc5xK98ugTKeltoJDesrHvFHcj+r\/1pOQtIhd3l+yMziAwImZes=\" rel=\"noopener noreferrer\" target=\"_blank\">\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>\n<span>Modifier Mermaid dans VPasCode<\/span>\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:eNptj01KBDEQhfeCdyiycQbElTfojS6EYX7WErtfayBdaVPVMJ7DS+g5Bu9lJZNx5SpFvfC9r7r7LrHiqLi+ItKgGeSe\/PsCVdAA6ltMw0LyIXr6mkBzWjJFC38+bRhuHu1PZqgrkA2yJGas+hjAekuuqwO9eO59yHC2OjCd49IRfcms08Aip+\/B171Y+TSrvXNDRrlz69KxayarooQJzxe2oS9ZITcsmGJ45dpsehOU\/HJsBmIH+HEM\/RvKUUKBx5QnryGxVD3YkWeVVr9F\/LvuH4ODhhiktj3s95udW\/8CZTx+6g==\" \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\">C4Contexte\r\n  titre \"Maquette de contexte du syst\u00e8me pour le c\u0153ur d'Internet\"\r\n  Personne(client, \"Client bancaire\", \"Un client de la banque poss\u00e9dant des comptes personnels.\")\r\n  Syst\u00e8me(systeme_bancaire, \"Syst\u00e8me de banque en ligne\", \"Permet aux clients d'afficher les informations de leur compte.\")\r\n  Rel(client, systeme_bancaire, \"Utilise\", \"HTTPS\")<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptj01KBDEQhfeCdyiycQbElTfojS6EYX7WErtfayBdaVPVMJ7DS+g5Bu9lJZNx5SpFvfC9r7r7LrHiqLi+ItKgGeSe\/PsCVdAA6ltMw0LyIXr6mkBzWjJFC38+bRhuHu1PZqgrkA2yJGas+hjAekuuqwO9eO59yHC2OjCd49IRfcms08Aip+\/B171Y+TSrvXNDRrlz69KxayarooQJzxe2oS9ZITcsmGJ45dpsehOU\/HJsBmIH+HEM\/RvKUUKBx5QnryGxVD3YkWeVVr9F\/LvuH4ODhhiktj3s95udW\/8CZTx+6g==\" \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             <\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpljr0KwkAQhHvBdxiuiiBWvoCm0U5MrCWGjR6et+F2Y\/TtvfyJYLkzs99Muk7ZK710PgPUqiOY7C1KD4wGtq6hOlivqDhgH8XgSaMdyHRfBwrCPikbUX5QWMJsC3+3\/op0lEzUNpgC4Ap6I1xiCq3VG+qeUDgUZcmNV1mZRUcehiSXAXeW\/oys74apaAj2Nc5xK98ugTKeltoJDesrHvFHcj+r\/1pOQtIhd3l+yMziAwImZes=\" rel=\"noopener noreferrer\" target=\"_blank\">\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>\n<span>Modifier Mermaid dans VPasCode<\/span>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"eQIcfSE\"><img fetchpriority=\"high\" alt=\"\" class=\"alignnone size-full wp-image-981\" decoding=\"async\" fetchpriority=\"high\" height=\"486\" sizes=\"(max-width: 1002px) 100vw, 1002px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df36e38f3c.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df36e38f3c.png 1002w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df36e38f3c-300x146.png 300w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df36e38f3c-768x373.png 768w\" width=\"1002\"\/><\/p>\n<h2>La taxonomie compl\u00e8te des macros d&#8217;\u00e9l\u00e9ments C4<\/h2>\n<p>La biblioth\u00e8que C4 de Mermaid fournit un ensemble \u00e9tendu de macros sp\u00e9cialis\u00e9es pour distinguer clairement les composants internes, les syst\u00e8mes externes et les couches de base de donn\u00e9es \u00e0 travers tous les niveaux d&#8217;abstraction.<\/p>\n<h3>1. Macros Personne et Utilisateur<\/h3>\n<ul>\n<li><code>Personne(alias, libell\u00e9, [descr], [sprite], [tags])<\/code>: Mod\u00e9lise un utilisateur humain interne ou un acteur cl\u00e9.<\/li>\n<li><code>Personne_Ext(alias, libell\u00e9, [descr], [sprite], [tags])<\/code>: Mod\u00e9lise un utilisateur externe (par exemple, un fournisseur tiers ou un v\u00e9rificateur) situ\u00e9 en dehors de votre p\u00e9rim\u00e8tre organisationnel principal.<\/li>\n<\/ul>\n<h3>2. Macros Syst\u00e8me et \u00c9cosyst\u00e8me Logiciel<\/h3>\n<ul>\n<li><code>Syst\u00e8me(alias, libell\u00e9, [descr], [sprite], [tags])<\/code>: Repr\u00e9sente un cluster de syst\u00e8mes logiciels internes, inclus dans la port\u00e9e de votre gestion directe.<\/li>\n<li><code>Syst\u00e8me_Ext(alias, libell\u00e9, [descr], [sprite], [tags])<\/code>: Mod\u00e9lise un syst\u00e8me logiciel externe essentiel g\u00e9r\u00e9 par un tiers (par exemple, des fournisseurs d&#8217;identit\u00e9, des registres bancaires centraux).<\/li>\n<li><code>Syst\u00e8meBd(alias, libell\u00e9, [descr], [sprite], [tags])<\/code>: Affiche une bo\u00eete de r\u00e9pository de donn\u00e9es au niveau du syst\u00e8me, de forme cylindrique.<\/li>\n<li><code>Syst\u00e8meBd_Ext(alias, libell\u00e9, [descr], [sprite], [tags])<\/code>: Affiche un niveau de base de donn\u00e9es externe g\u00e9r\u00e9 par un tiers.<\/li>\n<\/ul>\n<h3>3. Macros Couche Conteneur (niveau C4Container)<\/h3>\n<ul>\n<li><code>Conteneur(alias, libell\u00e9, technologie, [descr], [sprite], [tags])<\/code>: Mod\u00e9lise une application ex\u00e9cutable s\u00e9par\u00e9e, un serveur API ou une interface front-end.<\/li>\n<li><code>ConteneurBd(alias, libell\u00e9, technologie, [descr], [sprite], [tags])<\/code>: Affiche une enveloppe de moteur de base de donn\u00e9es relationnelle ou non relationnelle au niveau du conteneur.<\/li>\n<li><code>Conteneur_Ext(alias, libell\u00e9, technologie, [descr], [sprite], [tags])<\/code>: Repr\u00e9sente un conteneur cloud externe ou un service d&#8217;application.<\/li>\n<li><code>ConteneurBd_Ext(alias, libell\u00e9, technologie, [descr], [sprite], [tags])<\/code>: Repr\u00e9sente un niveau de stockage de base de donn\u00e9es cloud externe et g\u00e9r\u00e9.<\/li>\n<\/ul>\n<h3>4. Macros Couche Composant (niveau C4Component)<\/h3>\n<ul>\n<li><code>Composant(alias, libell\u00e9, technologie, [descr], [sprite], [tags])<\/code>: Cartographie un module, une couche ou un contr\u00f4leur de classe au niveau du code interne.<\/li>\n<li><code>ComposantBd(alias, libell\u00e9, technologie, [descr], [sprite], [tags])<\/code>: Mod\u00e9lise un syst\u00e8me de stockage de micro-composants internes ou un syst\u00e8me de mise en cache de fichiers de bas niveau.<\/li>\n<\/ul>\n<hr \/>\n<h2>Conteneurs de limite et enveloppement structurel<\/h2>\n<p>Pour indiquer des p\u00e9rim\u00e8tres de s\u00e9curit\u00e9, des pare-feu d&#8217;entreprise ou des limites logiques d&#8217;application, Mermaid fournit trois enveloppes de conteneurs sp\u00e9cifiques encadr\u00e9es par des crochets. Les \u00e9l\u00e9ments imbriqu\u00e9s sont visuellement regroup\u00e9s.<\/p>\n<ul>\n<li><code>Enterprise_Boundary(alias, libell\u00e9) { ... }<\/code>: Enveloppe les syst\u00e8mes de haut niveau dans une large fronti\u00e8re visuelle repr\u00e9sentant le p\u00e9rim\u00e8tre global de l&#8217;infrastructure d&#8217;entreprise ou de l&#8217;organisation.<\/li>\n<li><code>System_Boundary(alias, libell\u00e9) { ... }<\/code>: Regroupe des conteneurs d&#8217;applications ou des microservices \u00e9troitement li\u00e9s \u00e0 l&#8217;int\u00e9rieur d&#8217;une bo\u00eete d&#8217;\u00e9cosyst\u00e8me logiciel unifi\u00e9.<\/li>\n<li><code>Container_Boundary(alias, libell\u00e9) { ... }<\/code>: Isole les composants au niveau du code \u00e0 l&#8217;int\u00e9rieur d&#8217;une couche contextuelle unique d&#8217;un module d&#8217;application.<\/li>\n<\/ul>\n<hr \/>\n<h2>Op\u00e9rateurs directionnels avanc\u00e9s de relations<\/h2>\n<p>La connexion des blocs dans les diagrammes C4 repose sur la macro <code>Rel<\/code> macro ou ses variantes explicitement directionnelles. Plut\u00f4t que de transmettre des lignes de diagramme de flux brutes, vous suivez les connexions de mani\u00e8re s\u00e9mantique en d\u00e9clarant directement des vecteurs technologiques \u00e0 l&#8217;int\u00e9rieur des blocs logiques.<\/p>\n<table border=\"1\" cellpadding=\"5\" cellspacing=\"0\">\n<thead>\n<tr>\n<th>Jetons de syntaxe de relation<\/th>\n<th>Direction visuelle de la fl\u00e8che<\/th>\n<th>Contexte d&#8217;alignement d&#8217;utilisation<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>Rel(de, \u00e0, libell\u00e9, [tech])<\/code><\/td>\n<td>Dynamique \/ Automatis\u00e9<\/td>\n<td>Relation par d\u00e9faut. Laissez l&#8217;algorithme de disposition d\u00e9terminer le meilleur trac\u00e9 de ligne.<\/td>\n<\/tr>\n<tr>\n<td><code>BiRel(de, \u00e0, libell\u00e9, [tech])<\/code><\/td>\n<td>Bidirectionnel (&lt;\u2013&gt;)<\/td>\n<td>Indique des \u00e9changes interactifs bidirectionnels, des protocoles duplex ou des processus de synchronisation.<\/td>\n<\/tr>\n<tr>\n<td><code>Rel_Arriere(de, \u00e0, libell\u00e9, [tech])<\/code><\/td>\n<td>Fl\u00e8che invers\u00e9e en haut (&lt;\u2013)<\/td>\n<td>Trace la relation dans le sens logique du code, mais inverse la fl\u00e8che visuelle vers l&#8217;arri\u00e8re.<\/td>\n<\/tr>\n<tr>\n<td><code>Rel_Voisin(de, \u00e0, libell\u00e9, [tech])<\/code><\/td>\n<td>Pr\u00e9f\u00e9rence de disposition horizontale<\/td>\n<td>Force le n\u0153ud cible \u00e0 rester directement \u00e0 c\u00f4t\u00e9 du n\u0153ud source sur la m\u00eame ligne horizontale.<\/td>\n<\/tr>\n<tr>\n<td><code>Rel_VersLeBas(de, \u00e0, libell\u00e9, [tech])<\/code> \/ <code>Rel_VB(...)<\/code><\/td>\n<td>Droite vers le bas (v)<\/td>\n<td>Force les flux de donn\u00e9es verticaux vers le bas vers les couches de base de donn\u00e9es ou les processus ult\u00e9rieurs en arri\u00e8re-plan.<\/td>\n<\/tr>\n<tr>\n<td><code>Rel_Up(from, to, label, [tech])<\/code> \/ <code>Rel_U(...)<\/code><\/td>\n<td>Vers le haut en ligne droite (^)<\/td>\n<td>Force les trajectoires de relation \u00e0 aller en ligne droite vers les composants de l\u2019interface utilisateur client.<\/td>\n<\/tr>\n<tr>\n<td><code>Rel_Gauche(from, to, label, [tech])<\/code> \/ <code>Rel_G(...)<\/code><\/td>\n<td>Vers la gauche en ligne droite (&lt;-)<\/td>\n<td>Redirige les chemins horizontalement vers le c\u00f4t\u00e9 gauche de l&#8217;\u00e9l\u00e9ment canevas.<\/td>\n<\/tr>\n<tr>\n<td><code>Rel_Droite(from, to, label, [tech])<\/code> \/ <code>Rel_D(...)<\/code><\/td>\n<td>Vers la droite en ligne droite (-&gt;)<\/td>\n<td>Redirige les chemins horizontalement vers le c\u00f4t\u00e9 droit de l&#8217;\u00e9l\u00e9ment canevas.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr \/>\n<h2>Mise en forme dynamique personnalis\u00e9e et balisage (remplacements de formes C4)<\/h2>\n<p>Pour signaler les applications h\u00e9rit\u00e9es, mettre en \u00e9vidence les syst\u00e8mes premium ou mettre en \u00e9vidence les flux de donn\u00e9es s\u00e9curis\u00e9s, vous pouvez cr\u00e9er des styles personnalis\u00e9s en utilisant le moteur de balisage des \u00e9l\u00e9ments. Vous d\u00e9finissez une matrice de propri\u00e9t\u00e9s de balise en haut de votre document, puis vous ajoutez cette \u00e9tiquette de balise \u00e0 vos d\u00e9finitions d&#8217;\u00e9l\u00e9ments.<\/p>\n<h3>Mots-cl\u00e9s de modification de mise en forme :<\/h3>\n<ul>\n<li><code>MettreAJourStyleElement(nomElement, couleurFond, couleurPolice, [couleurBordure], [ombrage])<\/code>: Remplacement direct de la palette de fond par d\u00e9faut d&#8217;une bo\u00eete d&#8217;\u00e9l\u00e9ment explicite.<\/li>\n<li><code>MettreAJourStyleRel(from, to, couleurLigne, couleurTexte)<\/code>: Cible explicitement une route de connexion pour recolorer les chemins de ligne ou les descriptions de connexion.<\/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>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptj1FLw0AMx98Fv0NoGShMEdeCe9ROfHEwGD6Pa5p1B9e7kkut9dN7d5ugY4FA7pL8\/vlXReWs0JdcXwGIFkOQVYMX10HljOO7yjXUwJtxtTLwzHjQQigDE6xVn8WtmNvJC3U3hlqF0071eg7Ze3rAizZG2zbgmLLwvWGH5D158EPtkXUv2llgsjQq4++z2z\/ALqiz3fWORZn572nEsFL+UDvFDWxSL5LXaRgGH\/oj1fCpaQSyrbZ0osaczWClOXgAjAYBE1J\/q3iGjxMffaOEXg11ZGUrk6H\/xvJmWS6KfZTM9ylSicvFwyMehS4gzq3kJdZPJZ5TClRUBMoPnuOEdw==\" rel=\"noopener noreferrer\" target=\"_blank\">\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>\n<span>Modifier Mermaid dans VPasCode<\/span>\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:eNp1UNtKA0EMfRf8h7ClqCAidgv2UYovQqVQ30t2JrUD05klk6nuJ\/U7+mNmdivecCCQZE7OOcm8nscg9C7nZwDihAmqObIQ2Atks3VCRrJ2dzFYh57ARHs8ELTImmZPmaElTjEE9C7pV1WoSqy6JLSjS2zd2tMrmu4aqufYYQZLsMFCjOJigO3xwE6Oh0oBL4wqCp4SMIWY9+S9sgRJxVKjOn11U11912gjCzq\/3kVLHEh5lkMHBBtPg2QT2YLxTseL0iJKcX8aKYC9S7lsMbh6owayuL5W4EmxxHgMy6+dB7R1rKcqNOnzMKlgFyR61YenmHklnafHYZufVxnZ2XRSb4qr0aZ\/fWpmk9s7M+j+x\/N389HUNPdT85usNki1kn0AU3qqkw==\" \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\">C4Context\r\n  titre \"Carte d'architecture mondiale cod\u00e9e par couleur personnalis\u00e9e\"\r\n  \r\n  Systeme(api_legacy, \"Noyau de facturation h\u00e9rit\u00e9\", \"Traite les renouvellements d'abonnement.\")\r\n  Systeme(portail_moderne, \"Portail tableau de bord client\", \"Moteur moderne de visualisation web utilisateur.\")\r\n  \r\n  %% Personnalisation directe des couleurs\r\n  MettreAJourStyleElement(api_legacy, \"#d9534f\", \"#ffffff\", \"#c9302c\")\r\n  MettreAJourStyleElement(portail_moderne, \"#5cb85c\", \"#ffffff\", \"#4cae4c\")<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp1UNtKA0EMfRf8h7ClqCAidgv2UYovQqVQ30t2JrUD05klk6nuJ\/U7+mNmdivecCCQZE7OOcm8nscg9C7nZwDihAmqObIQ2Atks3VCRrJ2dzFYh57ARHs8ELTImmZPmaElTjEE9C7pV1WoSqy6JLSjS2zd2tMrmu4aqufYYQZLsMFCjOJigO3xwE6Oh0oBL4wqCp4SMIWY9+S9sgRJxVKjOn11U11912gjCzq\/3kVLHEh5lkMHBBtPg2QT2YLxTseL0iJKcX8aKYC9S7lsMbh6owayuL5W4EmxxHgMy6+dB7R1rKcqNOnzMKlgFyR61YenmHklnafHYZufVxnZ2XRSb4qr0aZ\/fWpmk9s7M+j+x\/N389HUNPdT85usNki1kn0AU3qqkw==\" \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             <\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptj1FLw0AMx98Fv0NoGShMEdeCe9ROfHEwGD6Pa5p1B9e7kkut9dN7d5ugY4FA7pL8\/vlXReWs0JdcXwGIFkOQVYMX10HljOO7yjXUwJtxtTLwzHjQQigDE6xVn8WtmNvJC3U3hlqF0071eg7Ze3rAizZG2zbgmLLwvWGH5D158EPtkXUv2llgsjQq4++z2z\/ALqiz3fWORZn572nEsFL+UDvFDWxSL5LXaRgGH\/oj1fCpaQSyrbZ0osaczWClOXgAjAYBE1J\/q3iGjxMffaOEXg11ZGUrk6H\/xvJmWS6KfZTM9ylSicvFwyMehS4gzq3kJdZPJZ5TClRUBMoPnuOEdw==\" rel=\"noopener noreferrer\" target=\"_blank\">\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>\n<span>Modifier Mermaid dans VPasCode<\/span>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"dwmLoBg\"><img alt=\"\" class=\"alignnone size-full wp-image-982\" decoding=\"async\" height=\"438\" sizes=\"(max-width: 877px) 100vw, 877px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df388473d4.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df388473d4.png 877w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df388473d4-300x150.png 300w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df388473d4-768x384.png 768w\" width=\"877\"\/><\/p>\n<hr \/>\n<h2>Maquette du monde r\u00e9el : Carte du conteneur de limite du syst\u00e8me d&#8217;e-commerce d&#8217;entreprise<\/h2>\n<p>Cette maquette compl\u00e8te et \u00e0 plusieurs niveaux suit un \u00e9cosyst\u00e8me e-commerce en ligne. Elle isole les serveurs centraux internes \u00e0 l&#8217;aide d&#8217;un<code>Conteneur_Systeme<\/code> conteneur de bloc, impl\u00e9mente des relais de notification externes dans le cloud via<code>System_Ext<\/code>, cartographie les stockages de bases de donn\u00e9es relationnelles internes ainsi que les microservices de suivi externes, et fixe les pipelines de communication \u00e0 l&#8217;aide de param\u00e8tres explicites de la pile technologique.<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptU11v2zAMfB\/Q\/0AEKJACbfOyP5AmAdYia7M42B4DRWJsrYpkkHQ+Nuy\/j7LT1mj7ksg0dUfenSdfJymK8RHp4guAeAkIg9ca3IUGa\/JRYJsIZlGQ9JERZjeTtNshWYRFMKJvd4OLLxljgcQpDm3DkrThGgZPMSgYFFWqa6SBVu4oHRgZrBETUglecMdgogPjHENNyTVWGCSBVOgJnC+9tuoFktvBVeYpTqy31rOjDGtz2mGUdWkED+akBIWQrxHGi3sokPbeYqZdVZ7cTa0YJ7CEzksGdLA3TZCWXpktMvtYAsZSp27JenR3qYnO0GmI9rz\/mm2qUdF7kkwSYRbC71AVG1zB3wwB8CrscEt6xOjWpq7befVGW4NfuIFxXed5H\/Eot7\/5GpZorOTKFIPfq8DAYsRbMMwonXKV\/gTVtGH1LesEnDdJkc+C9elthfY5NbLmTh2FnpxL8N1bSvym2mNy2E4xO9akkLm26HRSOs6uZr1aykOi521Qc9uRrAm20XRom5jjxzGmm2Eih7R2mxyTfIQ5ulL\/ppqMjeF2gEViKQmLH\/PBi1QMldd8kVcKEDKRVSDdFXLSOnJG26gLocMj9YvcixT\/Ok8vL2FMttL0WWlIke5zwM9ICyMV564lhl6a3xn30+OhF9g2Q8GoNtBulu1QcfLc31arRTHqkk\/dGIq8nqZDfJeGT8wp9GVPaw18SMb1N2fYe5N5Hoqnx9FyVqxy+jueF66lLyv5xPueCfnrVWW5D63C5LjpTj6yd60nasboYXo3yWZGbNvedprj9jOaj5\/puJFKTfyTA5KeMepJU1MZKjGHJzAcvFQtX+fmal6MWiG75f4D4gqf5g==\" rel=\"noopener noreferrer\" target=\"_blank\">\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>\n<span>Modifier Mermaid dans VPasCode<\/span>\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:eNptlN1O4zAQhe+ReIdRJESRgN7sC0Db\/UEsW0ilvayMM00Njp31T7dote+yl\/Q58mI7Y4e2iN4ljjPnzDfHHn0aWROEMuiOjwCCCg6hKOWy2zQCKgRJn9FgdB5aGx1oAa0WARfWNQjVKV5I2zToZHox9HvrlMfi+IjrTdF5awwOpFb08RyKK7nEQOUADWhVGyxocSqcpOIBNHoQLijJD1UEKYLQto4IGEA82RhIhj61zlZRBQ\/dPyABaIVR6MDEpts49SviZXHG+uWLD9jMJ+swaIX36FBrnLdCYZPtlOhWirxfTb9BGZxqk5+RXSwcXlCPgYUbmxwTjeCECunfxIassk96ct2mUoH4UcNJe0\/92kZTCfcyQGnnXtoWuWU22nSvzFsyN6G5kN4DWpzBHy4DMHobwkC0rVZERVkzXzibke7W4Cc+MrfWqmxxRaVTS3e4DpdP\/hweUMjAK5+JuFGZuUPv6VXSow9UiQh67rzuXskf7\/C0gwRStz3tGJRWXjCbHve+U5\/JzrkbYSru+buSzvbrOVv5U\/JnK0z+JuuW3fDaLNFO8gsd1\/0AVkLp1GN2QS6l0DLqvDGINfqPdsaPg0fhd25IqLimBa5ZUUK7TQ6cw1p5ngmnbLs5ZdT6UDss72\/5rQxWPmfFlGLfmzOe6CZOS6pj3ZYk70TzVp4TlH7Z6vluIyOdnG7z5v5vDtHJCYyW2ChGf0pTRZcV6JzIJeGRIVJ2kLc+oN4etENBIRo+6p7o9giRuXQ23rfM57MfsElx+TqbTcvhnVipOo08myTJ+dj+NoeCeSABE7Oyqh\/UPqxdqFZKsNpN+eNuyIfyYVLOstRWzllq+0C+PgyYbx+im\/W6DQX7naxBnS4QzVj5OOZDnsZ7fzsc8Y41k74ZX4927X4Rke6wA\/qHb5iryDHw2QRRYlHO\/lK4miJjn9GkqYNYoWRt7np2Ww4T8L1c0H3wH+\/4AmI=\" \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\">C4Container\r\n  titre \"Sch\u00e9ma de conteneurs pour la plateforme d'e-commerce d'entreprise\"\r\n\r\n  Personne(client, \"Acheteur en ligne\", \"Parcourt les articles du catalogue et ajoute des produits \u00e0 son panier num\u00e9rique.\")\r\n  System_Ext(passerelle_paiement, \"Service API Stripe\", \"Coffre-fort et moteur de traitement de cartes de cr\u00e9dit tiers.\")\r\n\r\n  System_Boundary(eco_scope, \"P\u00e9rim\u00e8tre central de l'e-commerce\") {\r\n    Conteneur(application_front, \"Application Web du point de vente\", \"Next.js, React\", \"Fournit les ressources statiques et g\u00e8re les sessions de panier utilisateur.\")\r\n    Conteneur(service_commande, \"Microservice de commande\", \"Node.js, Express\", \"Traite les flux de travail du panier et calcule les taxes.\")\r\n    ConteneurDb(base_commandes, \"Base de donn\u00e9es du registre des commandes\", \"PostgreSQL\", \"Stocke les lignes de transactions historiques et les enregistrements de registre s\u00e9curis\u00e9s.\")\r\n  }\r\n\r\n  %% Chemins d'interaction architecturale\r\n  Rel(client, application_front, \"Consulte les produits et passe des commandes en utilisant\", \"HTTPS\/Navigateur\")\r\n  Rel_Down(application_front, service_commande, \"Envoie les transactions de panier via\", \"JSON\/API REST\")\r\n  \r\n  Rel_Droite(service_commande, base_commandes, \"Persiste les \u00e9tats transactionnels \u00e0 l'int\u00e9rieur de\", \"SQL\/Connexion JDBC\")\r\n  Rel_Gauche(service_commande, passerelle_paiement, \"Autorise les appels de charge tokenis\u00e9s avec\", \"API TLS\/HTTPS s\u00e9curis\u00e9e\")<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptlN1O4zAQhe+ReIdRJESRgN7sC0Db\/UEsW0ilvayMM00Njp31T7dote+yl\/Q58mI7Y4e2iN4ljjPnzDfHHn0aWROEMuiOjwCCCg6hKOWy2zQCKgRJn9FgdB5aGx1oAa0WARfWNQjVKV5I2zToZHox9HvrlMfi+IjrTdF5awwOpFb08RyKK7nEQOUADWhVGyxocSqcpOIBNHoQLijJD1UEKYLQto4IGEA82RhIhj61zlZRBQ\/dPyABaIVR6MDEpts49SviZXHG+uWLD9jMJ+swaIX36FBrnLdCYZPtlOhWirxfTb9BGZxqk5+RXSwcXlCPgYUbmxwTjeCECunfxIassk96ct2mUoH4UcNJe0\/92kZTCfcyQGnnXtoWuWU22nSvzFsyN6G5kN4DWpzBHy4DMHobwkC0rVZERVkzXzibke7W4Cc+MrfWqmxxRaVTS3e4DpdP\/hweUMjAK5+JuFGZuUPv6VXSow9UiQh67rzuXskf7\/C0gwRStz3tGJRWXjCbHve+U5\/JzrkbYSru+buSzvbrOVv5U\/JnK0z+JuuW3fDaLNFO8gsd1\/0AVkLp1GN2QS6l0DLqvDGINfqPdsaPg0fhd25IqLimBa5ZUUK7TQ6cw1p5ngmnbLs5ZdT6UDss72\/5rQxWPmfFlGLfmzOe6CZOS6pj3ZYk70TzVp4TlH7Z6vluIyOdnG7z5v5vDtHJCYyW2ChGf0pTRZcV6JzIJeGRIVJ2kLc+oN4etENBIRo+6p7o9giRuXQ23rfM57MfsElx+TqbTcvhnVipOo08myTJ+dj+NoeCeSABE7Oyqh\/UPqxdqFZKsNpN+eNuyIfyYVLOstRWzllq+0C+PgyYbx+im\/W6DQX7naxBnS4QzVj5OOZDnsZ7fzsc8Y41k74ZX4927X4Rke6wA\/qHb5iryDHw2QRRYlHO\/lK4miJjn9GkqYNYoWRt7np2Ww4T8L1c0H3wH+\/4AmI=\" \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             <\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptU11v2zAMfB\/Q\/0AEKJACbfOyP5AmAdYia7M42B4DRWJsrYpkkHQ+Nuy\/j7LT1mj7ksg0dUfenSdfJymK8RHp4guAeAkIg9ca3IUGa\/JRYJsIZlGQ9JERZjeTtNshWYRFMKJvd4OLLxljgcQpDm3DkrThGgZPMSgYFFWqa6SBVu4oHRgZrBETUglecMdgogPjHENNyTVWGCSBVOgJnC+9tuoFktvBVeYpTqy31rOjDGtz2mGUdWkED+akBIWQrxHGi3sokPbeYqZdVZ7cTa0YJ7CEzksGdLA3TZCWXpktMvtYAsZSp27JenR3qYnO0GmI9rz\/mm2qUdF7kkwSYRbC71AVG1zB3wwB8CrscEt6xOjWpq7befVGW4NfuIFxXed5H\/Eot7\/5GpZorOTKFIPfq8DAYsRbMMwonXKV\/gTVtGH1LesEnDdJkc+C9elthfY5NbLmTh2FnpxL8N1bSvym2mNy2E4xO9akkLm26HRSOs6uZr1aykOi521Qc9uRrAm20XRom5jjxzGmm2Eih7R2mxyTfIQ5ulL\/ppqMjeF2gEViKQmLH\/PBi1QMldd8kVcKEDKRVSDdFXLSOnJG26gLocMj9YvcixT\/Ok8vL2FMttL0WWlIke5zwM9ICyMV564lhl6a3xn30+OhF9g2Q8GoNtBulu1QcfLc31arRTHqkk\/dGIq8nqZDfJeGT8wp9GVPaw18SMb1N2fYe5N5Hoqnx9FyVqxy+jueF66lLyv5xPueCfnrVWW5D63C5LjpTj6yd60nasboYXo3yWZGbNvedprj9jOaj5\/puJFKTfyTA5KeMepJU1MZKjGHJzAcvFQtX+fmal6MWiG75f4D4gqf5g==\" rel=\"noopener noreferrer\" target=\"_blank\">\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>\n<span>Modifier Mermaid dans VPasCode<\/span>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"iepSRLk\"><img alt=\"\" class=\"alignnone size-full wp-image-983\" decoding=\"async\" height=\"863\" sizes=\"(max-width: 1746px) 100vw, 1746px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df3944f3b6.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df3944f3b6.png 1746w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df3944f3b6-300x148.png 300w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df3944f3b6-1024x506.png 1024w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df3944f3b6-768x380.png 768w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df3944f3b6-1536x759.png 1536w\" width=\"1746\"\/><\/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 C4 propres pour les cadres logiciels, faites attention \u00e0 ces param\u00e8tres d&#8217;ex\u00e9cution afin d&#8217;\u00e9viter la rupture du diagramme :<\/p>\n<ul>\n<li><strong>Formatage des s\u00e9parateurs par virgule :<\/strong> Contrairement \u00e0 presque tous les autres sch\u00e9mas Mermaid, les macros C4 exigent des virgules strictes entre les param\u00e8tres : <code>Personne(id, \"\u00c9tiquette\", \"Desc\")<\/code>. Oublier une virgule s\u00e9paratrice fera compl\u00e8tement planter le g\u00e9n\u00e9rateur de mise en page.<\/li>\n<li><strong>Guillemets r\u00e9serv\u00e9s aux \u00e9tiquettes :<\/strong> Les champs d&#8217;affichage, les balises techniques et les blocs de description \u00e0 l&#8217;int\u00e9rieur des macros *doivent* \u00eatre entour\u00e9s de guillemets doubles clairs. Ins\u00e9rer du texte brut dans les champs sans enveloppe de guillemets provoque des erreurs de parsing qui cassent le diagramme.<\/li>\n<li><strong>Ordre d&#8217;empilement des limites :<\/strong> Lors de l&#8217;enveloppement des \u00e9l\u00e9ments \u00e0 l&#8217;int\u00e9rieur d&#8217;un <code>System_Boundary<\/code> ou <code>Enterprise_Boundary<\/code> bloc, vous devez explicitement vider le contenu de son espace de travail en utilisant des accolades standards <code>{ }<\/code>. Laisser une accolade de limite ouverte ou les appariements incorrects cassent les mises en page de rendu.<\/li>\n<li><strong>Instantiation d&#8217;alias dynamique :<\/strong> Vous ne pouvez pas tracer de relations (<code>Rel<\/code>) vers un identifiant d&#8217;alias qui n&#8217;a pas \u00e9t\u00e9 explicitement initialis\u00e9 par un bloc de macro d&#8217;\u00e9l\u00e9ment au-dessus. Gardez votre flux de d\u00e9claration en progression du haut vers le bas.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"Un diagramme C4 est une m\u00e9thode standardis\u00e9e de visualisation architecturale con\u00e7ue pour mod\u00e9liser les syst\u00e8mes logiciels \u00e0 plusieurs niveaux d&#8217;abstraction structurelle. Int\u00e9gr\u00e9 nativement dans Mermaid.js, le c4 moteur suit les quatre niveaux fondamentaux du mod\u00e8le C4 : Contexte (l&#8217;\u00e9cosyst\u00e8me macro),&#8230;","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":24,"template":"","meta":{"_yoast_wpseo_title":"Mermaid C4 Model Syntax | VPasCode Text to Diagram Guide","_yoast_wpseo_metadesc":"Build C4 context and container diagrams quickly using Mermaid syntax in VPasCode, a versatile diagram-as-code tool.","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":""}},"source_url":"","fifu_image_url":"","fifu_image_alt":"","_fifu_image_alt":"","fifu_alt":"","_fifu_alt":"","fifu_image_title":"","_fifu_image_title":"","fifu_input_alt":"","vp_image_hash":""},"ld_collection":[14],"class_list":["post-2082","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 C4 Model Syntax | VPasCode Text to Diagram Guide<\/title>\n<meta name=\"description\" content=\"Build C4 context and container diagrams quickly using Mermaid syntax in VPasCode, a versatile 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-playbook\/mermaid-js-c4-diagram-syntax-architecture-guide\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mermaid C4 Model Syntax | VPasCode Text to Diagram Guide\" \/>\n<meta property=\"og:description\" content=\"Build C4 context and container diagrams quickly using Mermaid syntax in VPasCode, a versatile diagram-as-code tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-c4-diagram-syntax-architecture-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_6a4df36e38f3c.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-playbook\\\/mermaid-js-c4-diagram-syntax-architecture-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-c4-diagram-syntax-architecture-guide\\\/\",\"name\":\"Mermaid C4 Model 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-playbook\\\/mermaid-js-c4-diagram-syntax-architecture-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-c4-diagram-syntax-architecture-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4df36e38f3c.png\",\"datePublished\":\"2026-07-08T06:48:07+00:00\",\"description\":\"Build C4 context and container diagrams quickly using Mermaid syntax in VPasCode, a versatile diagram-as-code tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-c4-diagram-syntax-architecture-guide\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-c4-diagram-syntax-architecture-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-c4-diagram-syntax-architecture-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4df36e38f3c.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4df36e38f3c.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/fr\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-c4-diagram-syntax-architecture-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 des diagrammes C4 de Mermaid.js et guide d&#8217;architecture\"}]},{\"@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 C4 Model Syntax | VPasCode Text to Diagram Guide","description":"Build C4 context and container diagrams quickly using Mermaid syntax in VPasCode, a versatile 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-playbook\/mermaid-js-c4-diagram-syntax-architecture-guide\/","og_locale":"fr_FR","og_type":"article","og_title":"Mermaid C4 Model Syntax | VPasCode Text to Diagram Guide","og_description":"Build C4 context and container diagrams quickly using Mermaid syntax in VPasCode, a versatile diagram-as-code tool.","og_url":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-c4-diagram-syntax-architecture-guide\/","og_site_name":"VPasCode","og_image":[{"url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df36e38f3c.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-playbook\/mermaid-js-c4-diagram-syntax-architecture-guide\/","url":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-c4-diagram-syntax-architecture-guide\/","name":"Mermaid C4 Model 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-playbook\/mermaid-js-c4-diagram-syntax-architecture-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-c4-diagram-syntax-architecture-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df36e38f3c.png","datePublished":"2026-07-08T06:48:07+00:00","description":"Build C4 context and container diagrams quickly using Mermaid syntax in VPasCode, a versatile diagram-as-code tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-c4-diagram-syntax-architecture-guide\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-c4-diagram-syntax-architecture-guide\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-c4-diagram-syntax-architecture-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df36e38f3c.png","contentUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df36e38f3c.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-c4-diagram-syntax-architecture-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 des diagrammes C4 de Mermaid.js et guide d&#8217;architecture"}]},{"@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\/2082","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=2082"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/fr\/wp-json\/wp\/v2\/ld_collection?post=2082"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}