Modèle C4

4 niveaux de zoom :

• Context
• Container
• Component
• Code.

Représente le même système à plusieurs niveaux de détail.

vue très large : où se place ton système ?

Les 4 C

Context

Vue très large : Ton système vu de l’extérieur, “Ce système sert à quoi, pour qui, et avec quoi il parle ?”. On y voit :

• les utilisateurs,
• les systèmes externes,
• ton application au milieu,
• les grandes interactions.

Exemple :

• Client
• Admin
• Shop Platform
• Stripe
• Service de mails

Container

Vue intermédiaire : quels gros blocs le composent (blocs exécutable ou stockant des données), “Techniquement, mon système est découpé en quels gros morceaux?".

Exemple:

• Frontend Web App (Nuxt/Vue)
• Backend API (Node.js ou PHP)
• MariaDB
• Worker d’envoi d’e-mails

Component

Vue fine : comment un bloc est organisé, “À l’intérieur de ce bloc, quels sont les modules importants et leurs responsabilités ?”?

Exemple poru une API :

• Auth Controller
• Order Service
• Payment Service
• Product Repository
• Email Gateway

Code

Vue très fine : à quoi ressemble le code / design interne ?

Niveau “Code” prévu, mais en pratique il est souvent optionnel, “Comment ce composant est structuré en classes, interfaces, modules, etc. ?”.

Exemple

workspace "Webshop" "C4 model example for an online store" {

    model {
        customer = person "Customer" "Browses products and places orders"
        admin = person "Admin" "Manages products, stock, and orders"

        stripe = softwareSystem "Stripe" "Processes online payments"
        mailService = softwareSystem "Mail Service" "Sends transactional emails"

        webshop = softwareSystem "Webshop" "Online store platform" {

            webapp = container "Web Application" "Customer-facing website and admin dashboard" "Nuxt.js"
            api = container "Backend API" "Handles business logic, authentication, orders, and payments" "PHP"
            db = container "Database" "Stores users, products, orders, and stock" "MariaDB"
            worker = container "Email Worker" "Sends order confirmation and notification emails" "PHP CLI"

            checkoutController = component "Checkout Controller" "Receives checkout requests" "PHP Controller"
            orderService = component "Order Service" "Creates orders and coordinates checkout workflow" "PHP Service"
            paymentService = component "Payment Service" "Creates Stripe payment sessions" "PHP Service"
            productRepository = component "Product Repository" "Reads and writes product data" "PHP Repository"
            orderRepository = component "Order Repository" "Reads and writes order data" "PHP Repository"
            mailGateway = component "Mail Gateway" "Sends email jobs to the worker" "PHP Service"

            customer -> webapp "Uses"
            admin -> webapp "Uses"

            webapp -> api "Calls REST API over HTTPS"
            api -> db "Reads and writes data"
            api -> stripe "Creates payment sessions via API"
            api -> worker "Queues email jobs"
            worker -> mailService "Sends emails via SMTP/API"

            api -> checkoutController "Handles checkout requests"
            checkoutController -> orderService "Calls"
            orderService -> paymentService "Calls"
            orderService -> orderRepository "Stores order"
            orderService -> productRepository "Checks stock"
            orderService -> mailGateway "Queues confirmation email"
        }
    }

    views {
        systemContext webshop "SystemContext" {
            include *
            autolayout lr
        }

        container webshop "Containers" {
            include *
            autolayout lr
        }

        component api "APIComponents" {
            include checkoutController
            include orderService
            include paymentService
            include productRepository
            include orderRepository
            include mailGateway
            autolayout lr
        }

        theme default
    }
}