{"id":2302,"date":"2026-08-22T07:19:42","date_gmt":"2026-08-22T07:19:42","guid":{"rendered":"https:\/\/www.vpascode.com\/fr\/mastering-architecture-visuals-how-to-build-a-c4-system-context-diagram-in-plantuml\/"},"modified":"2026-09-04T00:14:21","modified_gmt":"2026-09-04T00:14:21","slug":"mastering-architecture-visuals-how-to-build-a-c4-system-context-diagram-in-plantuml","status":"publish","type":"post","link":"https:\/\/www.vpascode.com\/fr\/mastering-architecture-visuals-how-to-build-a-c4-system-context-diagram-in-plantuml\/","title":{"rendered":"Ma\u00eetriser les visuels d’architecture : Comment cr\u00e9er un diagramme de contexte syst\u00e8me C4 dans PlantUML"},"content":{"rendered":"

Lors de la conception de syst\u00e8mes logiciels, il est essentiel de communiquer clairement les limites de haut niveau \u00e0 la fois aux parties prenantes techniques et non techniques. Dans ce tutoriel de masterclass, nous allons voir comment cr\u00e9er un diagramme de contexte syst\u00e8me C4 professionnel \u00e0 partir de z\u00e9ro en utilisant PlantUML dans l’\u00e9diteur gratuit “VPasCode”<\/a> \u00e9diteur.<\/p>\n

\"Diagramme<\/p>\n

\n

Pourquoi adopter une approche diagramme-as-code pour les mod\u00e8les C4 ?<\/h2>\n

Les outils de dessin traditionnels par glisser-d\u00e9poser entra\u00eenent souvent des bo\u00eetes mal align\u00e9es, un style incoh\u00e9rent et des mises \u00e0 jour manuelles fastidieuses \u00e0 chaque \u00e9volution de l’architecture. En exploitant un “outil diagramme-as-code”<\/a>comme un \u00e9diteur PlantUML gratuit, votre documentation reste synchronis\u00e9e avec le code, versionn\u00e9e et propre. En utilisant “VPasCode”<\/a>, vous b\u00e9n\u00e9ficiez d’un rendu en temps r\u00e9el et d’une d\u00e9tection automatique du format, ce qui rend la visualisation de l’architecture logicielle sans effort.<\/p>\n<\/section>\n

\n

\u00c9tude de cas de la masterclass : Architecture d’une \u00e9picerie en ligne<\/h2>\n

Pour d\u00e9montrer comment structurer un diagramme de contexte syst\u00e8me robuste, examinons une plateforme d’\u00e9picerie en ligne. Cette architecture doit capturer les utilisateurs finaux, les livreurs externes, le syst\u00e8me central d’\u00e9picerie et les services tiers tels que les passerelles de paiement et les prestataires logistiques.<\/p>\n

Voici le code source PlantUML complet que nous allons d\u00e9tailler \u00e9tape par \u00e9tape :<\/p>\n

@startuml\r\n!include https:\/\/raw.githubusercontent.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Context.puml\r\nskinparam vpDiagramType C4modelSystemContextDiagram\r\n\r\nLAYOUT_TOP_DOWN()\r\nLAYOUT_WITH_LEGEND()\r\n\r\ntitle Diagramme de contexte syst\u00e8me pour une \u00e9picerie en ligne\r\n\r\nPerson(customer, \"Client\", \"Parcourt le magasin, commande des produits et planifie la livraison\")\r\nPerson_Ext(driver, \"Livreur\", \"Livra les commandes aux clients\")\r\n\r\nEnterprise_Boundary(grocery_co, \"\u00c9picerie en ligne\") {\r\n  System(grocery_system, \"Syst\u00e8me d'\u00e9picerie en ligne\", \"Permet aux clients de commander des produits en ligne et g\u00e8re l'ex\u00e9cution\")\r\n}\r\n\r\nSystem_Ext(payment, \"Passerelle de paiement\", \"Traite les paiements par carte et portefeuille num\u00e9rique\")\r\nSystem_Ext(shipping, \"Prestataire logistique\", \"Planifie les itin\u00e9raires de livraison et programme les livreurs\")\r\n\r\nRel(customer, grocery_system, \"Parcourt les produits et passe des commandes\", \"HTTPS\")\r\nRel(grocery_system, payment, \"Traite les paiements via\", \"HTTPS\/API\")\r\nRel(grocery_system, shipping, \"Cr\u00e9e des t\u00e2ches de livraison via\", \"HTTPS\/API\")\r\nRel(driver, grocery_system, \"Consulte les attributions de livraison\", \"HTTPS\")\r\n\r\n@enduml<\/code><\/pre>\n<\/section>\n
\n
Parcours \u00e9tape par \u00e9tape du code<\/h2>\n
1. Configuration de l’environnement de base<\/h3>\n
Je commence par initialiser le script avec les balises standard PlantUML et importer les macros de la biblioth\u00e8que standard officielle C4-PlantUML. En faisant r\u00e9f\u00e9rence \u00e0 “C4_Context.puml\"<\/code>, nous d\u00e9bloquons des \u00e9l\u00e9ments s\u00e9mantiques sp\u00e9cifiquement con\u00e7us pour les diagrammes de contexte syst\u00e8me.<\/p>\n