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

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

Un diagramme de s\u00e9quence<\/strong> est un diagramme comportemental essentiel diagramme UML<\/strong> con\u00e7u pour visualiser le flux chronologique des messages, des appels de fonctions et des charges utiles de donn\u00e9es entre diff\u00e9rentes entit\u00e9s syst\u00e8me au fil d’un timeline lin\u00e9aire. Reconnu comme un type fondamental type de diagramme UML<\/strong>, il mod\u00e9lise les interactions en temps r\u00e9el en empilant les composants syst\u00e8me selon l’axe X sous forme de lignes de vie verticales et en suivant les \u00e9changes de messages selon l’axe Y. Ce sch\u00e9ma est inestimable pour les d\u00e9veloppeurs d\u00e9boguant des \u00e9changes d’API distribu\u00e9es, des chemins d’orchestration de microservices ou des flux d’authentification utilisateur en temps r\u00e9el.<\/p>\n

Avec Mermaid.js<\/strong>, vous pouvez scripter des processus temporels complexes \u00e0 l’aide d’une structure de texte intuitive. Le moteur g\u00e8re automatiquement l’espacement vertical, ajuste les alignements des fl\u00e8ches de message et dessine proprement les blocs d’activation en temps r\u00e9el sur votre canevas.<\/p>\n

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

Pour concevoir un diagramme de s\u00e9quence UML pr\u00e9cis et facilement lisible dans Mermaid, vous devez ma\u00eetriser les d\u00e9clarations de participants, les variantes des fl\u00e8ches de message, les lignes de vie explicites et les structures de blocs conditionnels.<\/p>\n

1. D\u00e9clarer les participants et les acteurs<\/h3>\n

Vous d\u00e9clarez une entit\u00e9 syst\u00e8me standard en utilisant le mot-cl\u00e9 participant<\/code> mot-cl\u00e9. Si l’entit\u00e9 repr\u00e9sente un utilisateur final humain ou un op\u00e9rateur externe, utilisez le mot-cl\u00e9 acteur<\/code> mot-cl\u00e9 pour afficher une ic\u00f4ne standard de figure en b\u00e2ton sur le canevas :<\/p>\n

\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\n\u00c9diter 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 
sequenceDiagram\r\n    acteur Client\r\n    participant API comme Routeur de passerelle<\/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>
\n\u00c9diter Mermaid dans VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
Astuce pro :<\/em> Utilisez le mot-cl\u00e9 comme<\/code> pour mapper des noms de composants longs \u00e0 des alias internes compacts, en gardant vos scripts de messages concis et lisibles.<\/p>\n
2. Formater les fl\u00e8ches de message<\/h3>\n
Le type de ligne et de t\u00eate de fl\u00e8che que vous utilisez d\u00e9termine le style de communication entre vos participants syst\u00e8me :<\/p>\n