Modèle C4

4 niveaux de zoom :

Context
Container
Component
Code.

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

Editeur: https://playground.structurizr.com

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 "Adext2" "C4 model workspace" {
 
    model {

        user = person "User"

        adext = softwareSystem "Adext2" {

            webapp = container "Web App" "Angular" {

                loginView = component "Login View"

                authService = component "auth.service"

                externalsListView = component "Externals List View"

                externalsService = component "externals.service"

                newExternalView = component " New external view"

                formService = component "form.service"

            }

            api = container "API" {

                externalsController = component "Externals Controller"

                loginController = component "Login Controller"

                pagesController = component "Page Controller"

                externalModel = component "External Model"

                ldapModel = component "Ldap Model"

                config = component "Config"

            }

            db = container "DataBase"

        }
 
        // Niveau 2  Containers

            user -> webapp "Utilise"

            webapp -> api "Appelle" 

            api -> db "Lit/Ecrit"
 
        // Niveau 3 

            // API

            externalsController -> externalModel "Utilise"

            pagesController -> externalModel "Utilise"

            loginController -> ldapModel "Utilise"

            externalModel -> config "Utilise"

            ldapModel -> config "Utilise"

            externalModel -> db "Se connecte / MYSQL"

            ldapModel -> db "Se connecte / MYSQL"
 
            // Front - LoginView

            loginView -> authService "Utilise"

            authService -> loginController "HTTP"
 
            // Front - Externals list

            externalsListView -> externalsService "Utilise"

            externalsService -> externalsController "HTTP"
 
            // Front - New external

            newExternalView -> formService "Utilise"

            formService -> externalsController "HTTP"
 
 
    }
 
    views {

        systemContext adext {

            include user

            include adext

            autolayout lr

        }
 
        container adext {

            include *

            autolayout lr

        }
 
        component api {

            include *

            autolayout lr

        }
 
        component webapp {

            include *

            autolayout lr

        }

    }

}