{"id":2086,"date":"2026-07-08T05:51:38","date_gmt":"2026-07-08T05:51:38","guid":{"rendered":"https:\/\/www.vpascode.com\/fr\/docs\/uncategorized\/mermaid-js-architecture-diagram-syntax-layout-guide\/"},"modified":"2026-07-08T05:51:38","modified_gmt":"2026-07-08T05:51:38","slug":"mermaid-js-architecture-diagram-syntax-layout-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-architecture-diagram-syntax-layout-guide","title":{"rendered":"Guide de syntaxe et de mise en page des diagrammes d’architecture Mermaid.js"},"content":{"rendered":"

Un diagramme d’architecture fournit un plan structur\u00e9 utilis\u00e9 par les architectes syst\u00e8me et les \u00e9quipes DevOps pour visualiser les configurations d’infrastructure, les microservices cloud et les configurations de disposition structurelle. Con\u00e7u sur le moteur architecture-beta<\/code> moteur, cet outil bas\u00e9 sur le texte remplace les outils de glissement manuel en disposant automatiquement les groupes de services structurels, les clusters de bases de donn\u00e9es, les passerelles et les chemins aux bords dans des dispositions syst\u00e8me propres et pr\u00e9visibles.<\/p>\n

Structure de syntaxe de base<\/h2>\n

Chaque diagramme commence par la d\u00e9claration architecture-beta<\/code> d’en-t\u00eate. Vous remplissez la toile en d\u00e9finissant des \u00e9l\u00e9ments de n\u0153ud individuels \u00e0 l’aide du mot-cl\u00e9 service<\/code> mot-cl\u00e9, et \u00e9tablissez les trajets de connexion en pr\u00e9cisant les ports de coordonn\u00e9es directionnelles exactes (T<\/strong>op, B<\/strong>ottom, L<\/strong>eft, R<\/strong>ight) s\u00e9par\u00e9s par des deux-points et des traits doubles.<\/p>\n

\n
\nMermaid<\/span>\n\n<\/path><\/path><\/svg>\nModifier Mermaid dans VPasCode<\/span>\n<\/a>\n<\/div>\n
\n
\r\n
\r\n Mermaid<\/span>\r\n \r\n <\/path><\/path><\/svg>\r\n Edit Mermaid in VPasCode<\/span>\r\n <\/a>\r\n <\/div>\r\n
\r\n 
architecture-beta\r\n  service gateway(internet)[\u00c9tiquette passerelle]\r\n  service server(server)[Serveur d'application]\r\n  \r\n  gateway:B -- T:server<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n             <\/div>\n
\n\n<\/path><\/path><\/svg>\nModifier Mermaid dans VPasCode<\/span>\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
R\u00e9f\u00e9rence de syntaxe<\/h2>\n
Le tableau ci-dessous d\u00e9taille les composants principaux de donn\u00e9es, les mots-cl\u00e9s de formatage et les attributs de connecteur utilis\u00e9s pour construire une carte d’espace de travail d’architecture dans Mermaid.js.<\/p>\n\n\n\n\n\n\n\n\n\n\n
Composant de syntaxe<\/th>\nExigence de type<\/th>\nDescription et r\u00e8gles d’utilisation<\/th>\n<\/tr>\n<\/thead>\n
D\u00e9claration<\/strong><\/td>\nIdentificateur de mot-cl\u00e9<\/td>\nInitialise le canevas de l’espace de travail de cartographie de l’infrastructure. Doit utiliser exactement architecture-beta<\/code> bloc.<\/td>\n<\/tr>\n
N\u0153ud de service<\/strong><\/td>\nMot-cl\u00e9 + Bloc d’identit\u00e9<\/td>\nD\u00e9clare une entit\u00e9 architecturale. Utilise la syntaxe : service id(ic\u00f4ne)[Libell\u00e9 affich\u00e9]<\/code>.<\/td>\n<\/tr>\n
Enveloppe de groupe<\/strong><\/td>\nMot-cl\u00e9 conteneur<\/td>\nRegroupe des services li\u00e9s \u00e0 l’int\u00e9rieur d’un conteneur visuel. Utilise la syntaxe : groupe id(ic\u00f4ne)[Libell\u00e9 du groupe]<\/code>.<\/td>\n<\/tr>\n
Mot-cl\u00e9 dans<\/strong><\/td>\nModificateur d’affectation<\/td>\nAffecte explicitement un n\u0153ud de service pour qu’il r\u00e9side \u00e0 l’int\u00e9rieur d’une enveloppe de groupe d\u00e9clar\u00e9e sp\u00e9cifique : service id(ic\u00f4ne)[Libell\u00e9] dans groupId<\/code>.<\/td>\n<\/tr>\n
N\u0153ud de jonction<\/strong><\/td>\nIdentificateur de mot-cl\u00e9<\/td>\n\u00c9tablit un point central d’alignement structurel utilis\u00e9 pour acheminer proprement des chemins de lien complexes et multidirectionnels : junction id<\/code>.<\/td>\n<\/tr>\n
Ar\u00eates de connexion<\/strong><\/td>\nOp\u00e9rateurs de direction de port<\/td>\nConfigure des chemins de suivi directionnels en fixant le lien \u00e0 des c\u00f4t\u00e9s sp\u00e9cifiques du n\u0153ud (H, B, G, D) : source:c\u00f4t\u00e9 -- c\u00f4t\u00e9:cible<\/code>. Prend en charge les pointes de fl\u00e8che directionnelles (--><\/code>).<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\n
Regroupement avanc\u00e9 et routage des ar\u00eates de port<\/h2>\n
Pour contr\u00f4ler exactement la mani\u00e8re dont les liens se d\u00e9placent entre les \u00e9l\u00e9ments sans que cela ait l’air d\u00e9sordonn\u00e9, le moteur d’architecture n\u00e9cessite des liaisons de ports explicites. Les n\u0153uds associ\u00e9s peuvent \u00eatre organis\u00e9s \u00e0 l’int\u00e9rieur de groupes structurels afin de clarifier les limites du syst\u00e8me.<\/p>\n
1. R\u00e8gles exactes de liaison de ports<\/h3>\n
Vous d\u00e9finissez o\u00f9 une ligne de connexion sort et entre dans un composant en ajoutant deux points et un indicateur de direction d’ar\u00eate (“H<\/code>, B<\/code>, G<\/code>, D<\/code>) aux identifiants respectifs des n\u0153uds :<\/p>\n