{"id":2116,"date":"2026-05-26T08:05:43","date_gmt":"2026-05-26T08:05:43","guid":{"rendered":"https:\/\/www.vpascode.com\/fr\/docs\/uncategorized\/mermaid-js-class-diagram-syntax-guide\/"},"modified":"2026-05-26T08:05:43","modified_gmt":"2026-05-26T08:05:43","slug":"mermaid-js-class-diagram-syntax-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-class-diagram-syntax-guide\/","title":{"rendered":"Guide de syntaxe des diagrammes de classes Mermaid.js"},"content":{"rendered":"

Qu’est-ce qu’un diagramme de classes ?<\/h2>\n

Un Diagramme de classes<\/strong> diagramme structurel diagramme UML<\/strong> qui visualise l’architecture statique d’un syst\u00e8me logiciel orient\u00e9 objet. En tant que type de diagramme UML indispensable, il repr\u00e9sente les classes individuelles, les interfaces et les mod\u00e8les de donn\u00e9es au sein de votre application, en documentant explicitement leurs champs internes (attributs), leurs fonctions op\u00e9rationnelles (m\u00e9thodes) et les relations structurelles qui les lient ensemble. Ce plan est essentiel pour les ing\u00e9nieurs logiciels qui doivent traduire des conceptions de domaine de haut niveau en structures d’objets propres et maintenables.type de diagramme UML<\/strong>il repr\u00e9sente les classes individuelles, les interfaces et les mod\u00e8les de donn\u00e9es au sein de votre application, en documentant explicitement leurs champs internes (attributs), leurs fonctions op\u00e9rationnelles (m\u00e9thodes) et les relations structurelles qui les lient ensemble. Ce plan est essentiel pour les ing\u00e9nieurs logiciels qui doivent traduire des conceptions de domaine de haut niveau en structures d’objets propres et maintenables.<\/p>\n

Avec Mermaid.js<\/strong>vous pouvez esquisser vos mod\u00e8les de donn\u00e9es et vos services syst\u00e8me \u00e0 l’aide de d\u00e9finitions intuitives bas\u00e9es sur le texte. Le moteur de mise en page calcule automatiquement les tailles des bo\u00eetes, structure les compartiments de donn\u00e9es UML standards et aligne les fl\u00e8ches relationnelles sur votre canevas sans aucun surcro\u00eet de formatage manuel.<\/p>\n

Guide de syntaxe fondamentale : \u00e9l\u00e9ments et constructions<\/h2>\n

Pour concevoir un diagramme de classes UML pr\u00e9cis et conforme aux normes dans Mermaid, vous devez ma\u00eetriser les d\u00e9clarations de membres, les modificateurs d’acc\u00e8s et les fl\u00e8ches de relations structurelles.<\/p>\n

1. D\u00e9clarer des classes et des compartiments de classes<\/h3>\n

Vous pouvez d\u00e9finir une classe en utilisant deux formats valides. Pour une classe simple, utilisez le mot-cl\u00e9 class<\/code>suivi du nom de la classe. Si vous souhaitez inclure imm\u00e9diatement des champs et des m\u00e9thodes, utilisez des accolades en fin de ligne pour cr\u00e9er un bloc de corps clair :<\/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 
classDiagram\r\n    class UserProfile {\r\n        +String username\r\n        +String email\r\n        +updateEmail(newEmail) void\r\n    }<\/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            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nModifier Mermaid dans VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
2. Ajouter des modificateurs de visibilit\u00e9 \/ d’acc\u00e8s<\/h3>\n
Pour documenter les r\u00e8gles standard d’encapsulation UML, placez un symbole sp\u00e9cifique directement avant le nom de votre attribut ou de votre m\u00e9thode afin de d\u00e9finir son niveau de visibilit\u00e9 :<\/p>\n