Définition

Les C4 Charts (ou plus exactement diagrammes C4) sont une méthode de documentation d'architecture logicielle créée par Simon Brown. Le but est de décrire un système en utilisant plusieurs niveaux de zoom, un peu comme Google Maps : on commence par la vue globale puis on entre progressivement dans les détails.

Niveau 1 : Context (System Context)

Question :

Quel est le système et avec quoi interagit-il ?

Public :

• Business
• Product Owner
• Architectes
• Managers

Exemple :

                 +----------------+
                 |    Shopify     |
                 +----------------+
                        |
                        v
+---------+     +----------------+     +-----------+
| Client  | --> | Order Platform | --> | OneStock  |
+---------+     +----------------+     +-----------+
                        |
                        v
                  +-----------+
                  | Databricks|
                  +-----------+

On montre :

• les utilisateurs,
• les systèmes externes,
• les interactions principales.

Pas de détail technique.

Niveau 2 : Container Diagram

Question :

Quels sont les grands blocs techniques qui composent le système ?

⚠️ Dans C4, un container n'est pas forcément un Docker !

Un container est une application ou une base de données déployable :

• API
• Application Web
• Base de données
• Batch
• Function Azure
• Mule Runtime

Exemple :

+-------------------------+
| Order Platform          |
+-------------------------+

+-------------+
| React Front |
+-------------+

+-------------+
| API .NET    |
+-------------+

+-------------+
| Databricks  |
+-------------+

+-------------+
| SQL DB      |
+-------------+

Niveau 3 : Component Diagram

Question :

Comment est construite une application ?

On entre à l'intérieur d'un container.

Exemple :

API Orders

+----------------------+
| Order Controller     |
+----------------------+

+----------------------+
| Order Service        |
+----------------------+

+----------------------+
| Inventory Service    |
+----------------------+

+----------------------+
| Repository Layer     |
+----------------------+

Niveau 4 : Code Diagram

Question :

Comment est implémenté le composant ?

C'est le niveau le plus détaillé :

OrderService
 ├─ CreateOrder()
 ├─ ValidateStock()
 └─ PublishEvent()

InventoryRepository
 ├─ GetAvailability()
 └─ UpdateInventory()

Ce niveau est rarement utilisé aujourd'hui car :

• la documentation vieillit vite,
• les développeurs préfèrent souvent lire le code.

Le site officiel indique d'ailleurs que les équipes utilisent généralement surtout les diagrammes Context et Container, parfois Component, mais rarement Code

Diagrammes complémentaires

Le modèle C4 ajoute également :

System Landscape

Vue de l'écosystème global :

Shopify
OneStock
Salesforce
Databricks
Cegid Y2
PIM
WMS

Très utile pour une cartographie SI.

Dynamic Diagram

Montre un scénario :

Client
  |
  v
Shopify
  |
  v
Logic Apps
  |
  v
OneStock
  |
  v
Databricks

En précisant l'ordre des appels.

Deployment Diagram

Montre où sont déployés les composants :

Azure Subscription

 ├─ App Service
 ├─ Logic Apps
 ├─ Databricks
 ├─ Azure SQL
 └─ Key Vault

Conclusion

Exemple de structure documentaire idéale

Pour chaque projet :

01-Context.md
02-Container.md
03-Components.md
04-Dynamic-Flows.md
05-Deployment.md

Avec des diagrammes générés via :

• Structurizr DSL
• Mermaid
• PlantUML + C4-PlantUML
• IcePanel
• Draw.io

Pour l'approche Docs-as-Code / Markdown, on préfère Structurizr DSL ou C4-PlantUML, qui s'intègrent très bien dans Azure DevOps, Git et Confluence.