Maîtriser les visuels d’architecture : Comment créer un diagramme de contexte système C4 dans PlantUML

Pourquoi adopter une approche diagramme-as-code pour les modèles C4 ?

Les outils de dessin traditionnels par glisser-déposer entraînent souvent des boîtes mal alignées, un style incohérent et des mises à jour manuelles fastidieuses à chaque évolution de l’architecture. En exploitant un “outil diagramme-as-code”comme un éditeur PlantUML gratuit, votre documentation reste synchronisée avec le code, versionnée et propre. En utilisant “VPasCode”, vous bénéficiez d’un rendu en temps réel et d’une détection automatique du format, ce qui rend la visualisation de l’architecture logicielle sans effort.

Étude de cas de la masterclass : Architecture d’une épicerie en ligne

Pour démontrer comment structurer un diagramme de contexte système robuste, examinons une plateforme d’épicerie en ligne. Cette architecture doit capturer les utilisateurs finaux, les livreurs externes, le système central d’épicerie et les services tiers tels que les passerelles de paiement et les prestataires logistiques.

Voici le code source PlantUML complet que nous allons détailler étape par étape :

@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
skinparam vpDiagramType C4modelSystemContextDiagram

LAYOUT_TOP_DOWN()
LAYOUT_WITH_LEGEND()

title Diagramme de contexte système pour une épicerie en ligne

Person(customer, "Client", "Parcourt le magasin, commande des produits et planifie la livraison")
Person_Ext(driver, "Livreur", "Livra les commandes aux clients")

Enterprise_Boundary(grocery_co, "Épicerie en ligne") {
  System(grocery_system, "Système d'épicerie en ligne", "Permet aux clients de commander des produits en ligne et gère l'exécution")
}

System_Ext(payment, "Passerelle de paiement", "Traite les paiements par carte et portefeuille numérique")
System_Ext(shipping, "Prestataire logistique", "Planifie les itinéraires de livraison et programme les livreurs")

Rel(customer, grocery_system, "Parcourt les produits et passe des commandes", "HTTPS")
Rel(grocery_system, payment, "Traite les paiements via", "HTTPS/API")
Rel(grocery_system, shipping, "Crée des tâches de livraison via", "HTTPS/API")
Rel(driver, grocery_system, "Consulte les attributions de livraison", "HTTPS")

@enduml

Parcours étape par étape du code

1. Configuration de l’environnement de base

Je commence par initialiser le script avec les balises standard PlantUML et importer les macros de la bibliothèque standard officielle C4-PlantUML. En faisant référence à “C4_Context.puml", nous débloquons des éléments sémantiques spécifiquement conçus pour les diagrammes de contexte système.

• Inclusion de la bibliothèque : !include .../C4_Context.pumlcharge les formes, couleurs et règles de style standard pour les personnes, les systèmes et les limites.
• Typage et mise en page du diagramme : Définir “skinparam vpDiagramType C4modelSystemContextDiagram" assure une intégration correcte dans “VPasCode”, tandis que “LAYOUT_TOP_DOWN()" organise proprement la hiérarchie visuelle de haut en bas. J’active également LAYOUT_WITH_LEGEND()pour générer automatiquement un guide de référence utile en bas à droite du canevas.

2. Définir les acteurs et les utilisateurs

Ensuite, je dois définir les acteurs humains interagissant avec notre écosystème. Je distingue les utilisateurs standards du système et les entités externes en utilisant des macros C4 spécifiques :

• L’utilisateur principal : Je crée un utilisateur principal en utilisant Person(customer, "Client", ...) qui initie les commandes et navigue dans l’inventaire.
• L’acteur externe : Je définis un livreur en utilisant Person_Ext(driver, "Livreur", ...) pour souligner que, bien qu’ils interagissent avec notre flux d’exécution, ils existent en dehors de notre périmètre de sécurité interne principal.

3. Établir les limites organisationnelles et les systèmes principaux

La clarté architecturale nécessite des limites claires. Pour encapsuler ce que notre entreprise possède par rapport à ce qui dépend de fournisseurs externes, j’établis une limite d’entreprise :

• Limite d’entreprise : En utilisant Enterprise_Boundary(grocery_co, "Épicerie en ligne") crée une boîte de conteneur en pointillés regroupant visuellement l’infrastructure interne.
• Système interne : À l’intérieur de cette limite, je place notre principal actif logiciel en utilisant System(grocery_system, "Système d'épicerie en ligne", ...).

4. Intégration des systèmes externes

Aucune plateforme de commerce électronique moderne ne fonctionne en isolation. Je définis les dépendances externes en dehors de la limite d’entreprise en utilisant des macros de système externe spécialisées :

• Traitement des paiements : System_Ext(payment, "Passerelle de paiement", ...) représente les transactions financières tierces.
• Logistique et expédition : System_Ext(shipping, "Fournisseur logistique", ...) gère la planification des itinéraires et l’affectation des conducteurs.

5. Cartographie des relations et des protocoles

Pour relier l’architecture, je cartographie les interactions directionnelles et les protocoles de communication en utilisant le Rel() macro :

• Flux client : Rel(customer, grocery_system, "Parcourt les produits et passe des commandes", "HTTPS")illustre comment les utilisateurs se connectent de manière sécurisée à la plateforme principale.
• Intégrations backend :Je cartographie les dépendances backend comme le traitement des paiements et les fournisseurs d’expédition avec des étiquettes de protocole explicites ("HTTPS/API") pour fournir aux ingénieurs un contexte technique immédiat.

Conclusion & Essayez-le vous-même

Créer des diagrammes d’architecture logicielle propres ne nécessite pas d’outils de bureau encombrants ni de configurations de fichiers complexes. En combinant la puissante syntaxe C4 de PlantUML avec VPasCode, vous pouvez écrire, générer et partager des diagrammes d’architecture en quelques secondes.

Prêt à essayer de construire votre propre architecture système ? Rendez-vous sur le éditeur en ligne gratuit VPasCode, collez cet extrait de code et regardez votre diagramme se générer en temps réel !