de_DEen_USes_ESfa_IRfr_FRhi_INid_IDjapl_PLpt_PTru_RUvizh_CNzh_TW

Le modèle C4, développé par Simon Brown, est une approche puissante et hiérarchique pour visualiser l’architecture logicielle. Il utilise quatre niveaux d’abstraction pour fournir le bon niveau de détail selon les publics concernés, des parties prenantes métier aux développeurs. Cela en fait un outil idéal pour créer des documents clairs, maintenables et adaptés au public cible.

Introduction to C4 Model: a Quick Guide - Visual Paradigm Blog

Ce guide complet s’appuie sur l’étude de cas bien connue de le système bancaire en ligne de Big Bank plc — un exemple fictif mais réaliste de création d’une plateforme bancaire en ligne destinée aux clients particuliers pour consulter leurs comptes et effectuer des paiements. L’étude de cas montre comment appliquer progressivement le modèle C4, en utilisant PlantUML pour « l’architecture en tant que code ». Il intègre également des outils modernes tels que l’outil Visual Paradigm AI-powered C4 PlantUML Studio (lancé à la fin 2025) afin d’accélérer la création et la maintenance.

Aperçu du modèle C4

Le modèle comprend quatre niveaux :

  1. Niveau 1 : Contexte du système — Vue d’ensemble : le système, les utilisateurs et les dépendances externes.

  2. Niveau 2 : Conteneurs — Units déployables majeures (applications, services, bases de données) et choix technologiques de haut niveau.

  3. Niveau 3 : Composants — Blocs logiques internes au sein d’un conteneur.

  4. Niveau 4 : Code — Détails de bas niveau facultatifs (par exemple, classes) ; souvent omis au profit de références au code source.

Des vues supplémentaires de soutien incluent les diagrammes dynamiques (flux en temps réel) et les diagrammes de déploiement.

Application du modèle C4 : étude de cas du système bancaire en ligne de Big Bank plc

Niveau 1 : Diagramme de contexte du système

Objectif : Fournir une vue d’ensemble à haut niveau pour les parties prenantes métier et les publics non techniques, en montrant comment le système bancaire en ligne s’intègre dans l’environnement global sans jargon technique.

Éléments clés:

  • Personne : Client particulier de banque — Un client possédant un ou plusieurs comptes bancaires personnels.

  • Système logiciel: Système de banque en ligne — Permet aux clients d’afficher les informations de compte et de effectuer des paiements.

  • Systèmes externes:

    • Système bancaire central (mainframe existant) — Gère les données clients, les comptes et les transactions.

    • Système de messagerie (par exemple, AWS SES) — Envoie des confirmations et des notifications.

Relations:

  • Clientutilise le système de banque en ligne.

  • Système de banque en ligneutilise le système bancaire central pour les données et les transactions.

  • Système de banque en ligneenvoie des e-mails via le système de messagerie.

Ce niveau maintient les choses simples et explicites quant au périmètre et aux intégrations.

Exemple PlantUML (adapté de l’étude de cas) :

@startuml
!include https://static.visual-paradigm.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
LAYOUT_TOP_DOWN()
LAYOUT_WITH_LEGEND()

titre Diagramme de contexte du système (niveau 1) pour le système de banque en ligne
Personne(client, "Client de banque personnelle", "Un client possédant un ou plusieurs comptes bancaires personnels.")
Système(systeme_banque_en_ligne, "Système de banque en ligne", "Permet aux clients d'afficher leurs comptes et de effectuer des paiements.")
Système(systeme_banque_centrale, "Système bancaire central", "Mainframe existant gérant les données clients, les comptes et les transactions.")
Système_Ext(systeme_email, "Système de messagerie", "Service simple de messagerie d'Amazon Web Services (AWS SES) pour envoyer des confirmations.")
Rel(client, systeme_banque_en_ligne, "Utilise")
Rel(systeme_banque_en_ligne, systeme_banque_centrale, "Utilise")
Rel(systeme_banque_en_ligne, systeme_email, "Envoie des e-mails via")
@enduml

Niveau 2 : Diagramme de conteneurs

Objectif: Zoomer pour montrer les principaux blocs de construction (conteneurs) et les choix technologiques, ciblés par les architectes, les développeurs et les équipes DevOps.

Éléments clés (à l’intérieur de la limite du système de banque en ligne) :

  • Application à page unique (SPA) — JavaScript + Angular, interface utilisateur complète dans le navigateur web.

  • Application mobile — iOS/Android avec React Native (ou similaire), fonctionnalités limitées.

  • Application API — Java + Spring Boot, API JSON/HTTPS servant les deux interfaces frontales.

  • Base de données — PostgreSQL, stocke les données de session, les préférences et les résumés mis en cache (les données principales restent sur le système principal).

Externe — Système bancaire central et système de messagerie.

Relations:

  • Le client utilise l’application SPA et l’application mobile via HTTPS.

  • L’application SPA et l’application mobile appellent l’application API (JSON/HTTPS).

  • L’application API lit/écrit dans la base de données (JDBC/SQL).

  • L’application API interagit avec le système bancaire central (JSON/HTTPS) et le système de messagerie (HTTPS).

Ce diagramme agit comme la « source unique de vérité » pour les décisions technologiques.

Exemple PlantUML (utilise des sprites pour les icônes) :

@startuml
!include https://static.visual-paradigm.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
!include https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons/angular.puml
!include https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons/java.puml
!include https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons/postgresql.puml
LAYOUT_TOP_DOWN()
LAYOUT_WITH_LEGEND()
title Diagramme de conteneurs C4 pour le système bancaire en ligne
Personne(client, "Client de banque personnelle", "Un client possédant un ou plusieurs comptes bancaires personnels.")
Bordure_système(systeme_banque_en_ligne, "Système bancaire en ligne") {
    Conteneur(spa, "Application à page unique", "JavaScript + Angular", "Interface utilisateur complète pour la banque en ligne", $sprite="angular")
    Conteneur(application_mobile, "Application mobile", "iOS/Android (React Native)", "Fonctionnalités limitées", $sprite="react")
    Conteneur(application_api, "Application API", "Java + Spring Boot", "API JSON/HTTPS", $sprite="java")
    ConteneurBase(base_donnees, "Base de données", "PostgreSQL", "Données de session, préférences, résumés mis en cache", $sprite="postgresql")
}
Système(systeme_bancaire_central, "Système bancaire central", "Mainframe existant...")
Système_ext(systeme_email, "Système de messagerie", "AWS SES...")
Rel(client, spa, "Utilise", "HTTPS")
Rel(client, application_mobile, "Utilise", "HTTPS")
Rel(spa, application_api, "Appelle", "JSON/HTTPS")
Rel(application_mobile, application_api, "Appelle", "JSON/HTTPS")
Rel(application_api, base_donnees, "Lit et écrit dans", "JDBC/SQL")
Rel(application_api, systeme_bancaire_central, "Interroge / Met à jour", "JSON/HTTPS")
Rel(application_api, systeme_email, "Envoie un courriel via", "HTTPS")
@enduml

Niveau 3 : Diagramme de composants

Objectif: Détail de la structure interne d’un conteneur clé (ici, l’application API) destiné aux équipes de développement.

Composants clés (dans l’application API) :

  • Contrôleur des comptes (Spring MVC) — Fournit des résumés et des soldes.

  • Contrôleur d’authentification (Spring MVC) — Connexion, sessions, jetons.

  • Contrôleur de réinitialisation du mot de passe (Spring MVC) — Réinitialisation du mot de passe par courriel.

  • Composant de sécurité (Spring Bean) — Authentification, JWT, hachage.

  • Composant de gestion des comptes (Spring Bean) — Orchestre les appels au système bancaire central.

  • Composant de notification par courriel (Spring Bean) — Envoie des courriels.

Interactions — Les contrôleurs utilisent la sécurité ; la gestion des comptes utilise le système bancaire central ; le courriel utilise la base de données ; les interfaces frontales appellent les contrôleurs.

Exemple PlantUML:

PlantUML Diagram

@startuml
!include https://static.visual-paradigm.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml
LAYOUT_WITH_LEGEND()
title Diagramme de composants pour le système bancaire en ligne - Application API
Container(spa, "Application à page unique", "javascript et angular", "...")
Container(ma, "Application mobile", "...", "...")
ContainerDb(db, "Base de données", "...", "...")
System_Ext(mbs, "Système bancaire principal", "...")
Container_Boundary(api, "Application API") {
    Component(accounts, "Contrôleur des comptes", "Spring MVC", "...")
    Component(auth, "Contrôleur d'authentification", "Spring MVC", "...")
    Component(reset, "Contrôleur de réinitialisation du mot de passe", "Spring MVC", "...")
    Component(security, "Composant de sécurité", "Spring Bean", "...")
    Component(accountmgmt, "Composant de gestion des comptes", "Spring Bean", "...")
    Component(email, "Composant de notification par e-mail", "Spring Bean", "...")
    Rel(accounts, security, "Utilise")
    Rel(auth, security, "Utilise")
    Rel(reset, security, "Utilise")
    Rel(accountmgmt, mbs, "Utilise", "XML/HTTPS")
    Rel(email, db, "Lit", "JDBC")
}
Rel(spa, accounts, "Utilise", "JSON/HTTPS")
Rel(spa, auth, "Utilise", "JSON/HTTPS")
Rel(spa, reset, "Utilise", "JSON/HTTPS")
Rel(ma, accounts, "Utilise", "JSON/HTTPS")
Rel(ma, auth, "Utilise", "JSON/HTTPS")
Rel(ma, reset, "Utilise", "JSON/HTTPS")
@enduml

Niveau 4 : Diagramme de code (facultatif)

Objectif: Afficher les détails au niveau des classes pour des zones spécifiques (par exemple, l’authentification).

Souvent omis — indiquer plutôt le code source.

Exemple — Diagramme de classes UML pour l’authentification :

  • AuthenticationController utilise JwtTokenProvider et UserRepository.

Exemple PlantUML:

@startuml
classDiagram
class "AuthenticationController" {
    +login(credentials)
    +refreshToken()
}
class "JwtTokenProvider" {
    +generateToken(user)
    +validateToken(token)
}
class "UserRepository" {
    +findByUsername()
}
AuthenticationController ..> JwtTokenProvider : "utilise"
AuthenticationController ..> UserRepository : "utilise"
@enduml

Vues d’appui

  • Diagramme dynamique (par exemple, séquence « Afficher le résumé du compte ») : Client → SPA → API → Base de données/Système bancaire principal → Réponse.

  • Diagramme de déploiement: Associe les conteneurs à l’infrastructure (par exemple, AWS EC2 pour l’API, RDS pour la base de données, système principal sur site).

Utilisation des outils pilotés par l’IA de Visual Paradigm

Les outils de Visual ParadigmStudio C4 PlantUML piloté par l’IA (livrée à la fin 2025) révolutionne ce processus :

  • Saisir un langage naturel (par exemple, « Créez un modèle C4 pour un système bancaire en ligne avec une application à page unique, une application mobile, une API Spring Boot, PostgreSQL et une intégration avec un système principal »).

  • L’IA génère du code PlantUML et des diagrammes pour tous les niveaux.

  • Utilisez le chatbot IA pour itérer (par exemple, « Ajoutez une authentification à deux facteurs au composant d’authentification » ou « Générez la vue de déploiement sur AWS »).

  • Maintenez la cohérence entre les niveaux et soutenez la « documentation vivante ».

  • Exportez, gérez les versions et intégrez avec les dépôts.

Cet outil fournit des sorties structurées et conformes à C4, bien plus fiablement que les IA générales.

Meilleures pratiques

  1. Commencez par des ateliers — Utilisez des tableaux blancs au niveau 1 pour aligner les parties prenantes.

  2. Traitez l’architecture comme du code — Stockez les fichiers PlantUML dans votre référentiel pour des mises à jour automatiques avec les modifications de code.

  3. Automatisez avec l’IA — Utilisez Visual Paradigm pour générer et affiner rapidement des diagrammes.

  4. Focus sur le public cible — Omettez les détails techniques au niveau 1 ; ajoutez-les progressivement.

  5. Gardez-le léger — Ne détaillez que les conteneurs complexes au niveau 3 ; sautez le niveau 4 sauf si nécessaire.

  6. Faites évoluer la documentation — Rendez les diagrammes « vivants » pour éviter les artefacts obsolètes.

L’étude de cas de The Big Bank plc reste un exemple canonique de l’efficacité du modèle C4 dans des scénarios du monde réel, favorisant la clarté, la collaboration et la communication d’architectures évolutives. Pour en savoir plus, explorez le site officiel C4 ou les outils d’IA de Visual Paradigm.

Cette publication est également disponible en Deutsch, English, Español, فارسی, English, Bahasa Indonesia, 日本語, Polski, Portuguese, Ру́сский, Việt Nam, 简体中文 : liste des langues séparées par une virgule, 繁體中文 : dernière langue.