70 lines
2.9 KiB
Plaintext
70 lines
2.9 KiB
Plaintext
@startuml c4-container
|
|
' C4 modèle — Niveau 2 : Conteneurs (syntaxe native PlantUML, compatible anciennes versions)
|
|
' Application web Flashcards (SPA/PWA)
|
|
|
|
hide stereotype
|
|
skinparam backgroundColor #FFFFFF
|
|
|
|
' ===== Styles par type =====
|
|
skinparam rectangle<<person>> {
|
|
BackgroundColor #08427B
|
|
BorderColor #073B6F
|
|
FontColor #FFFFFF
|
|
}
|
|
|
|
skinparam rectangle<<system>> {
|
|
'BackgroundColor #1168BD
|
|
BorderColor #3C7FC0
|
|
FontColor #FFFFFF
|
|
}
|
|
|
|
skinparam rectangle<<container>> {
|
|
BackgroundColor #438DD5
|
|
BorderColor #135F97
|
|
FontColor #FFFFFF
|
|
}
|
|
|
|
skinparam rectangle<<external_system>> {
|
|
BackgroundColor #999999
|
|
BorderColor #8A8A8A
|
|
FontColor #FFFFFF
|
|
}
|
|
|
|
skinparam arrow {
|
|
Color #707070
|
|
}
|
|
|
|
title Conteneurs — Flashcards (Niveau 2)
|
|
|
|
' ===== Personne =====
|
|
rectangle "Utilisateur\nNavigateur / mobile\n(accès au jeu et au CRUD)" <<person>> as User
|
|
|
|
' ===== Système Flashcards et ses conteneurs =====
|
|
rectangle "Application Flashcards [Système]\nSPA/PWA Next.js — double persistance simultanée" <<system>> as Flashcards {
|
|
|
|
rectangle "SPA React (Next.js)\n[Conteneur : Web Browser]\nRendu de l'UI, état local, navigation" <<container>> as Spa
|
|
|
|
rectangle "API Next.js / App Router\n[Conteneur : Node.js]\nCardController > CardService :\nliste, CRUD, tirage aléatoire, thèmes\n(seul conteneur qui accède aux données)" <<container>> as Api
|
|
|
|
rectangle "CardRepository (générique)\n[Abstraction de données]\nContracts : findAll, findById,\nfindRandom, findRandomByTheme,\nfindThemes, create, update, delete" <<container>> as Repo
|
|
|
|
rectangle "Implémentation MySQL\n[Conteneur : librairie]\nImplémentation SQL du repository" <<container>> as RepoMysql
|
|
rectangle "Implémentation MongoDB\n[Conteneur : librairie]\nImplémentation Mongo du repository" <<container>> as RepoMongo
|
|
}
|
|
|
|
' ===== Systèmes externes =====
|
|
rectangle "Base MySQL\n[Conteneur externe : SGBD]\nPersistance des cartes (table cards)\n+ stockage Docker avec volume" <<external_system>> as MySql
|
|
rectangle "Base MongoDB\n[Conteneur externe : SGBD]\nPersistance des cartes (collection cards)\n+ stockage Docker avec volume" <<external_system>> as Mongo
|
|
'rectangle "Docker / docker-compose\n[infrastructure]\nOrchestration des conteneurs\nweb + bases + volumes" <<external_system>> as Docker
|
|
|
|
' ===== Relations =====
|
|
User -[#707070]-> Spa : "Navigue et interagit (HTTP/HTTPS)"
|
|
Spa -[#707070]-> Api : "Appels API JSON (dialogues, CRUD,\ntirage, révélation de réponse)"
|
|
Api -[#707070]down-> Repo : "Utilise uniquement l'abstraction"
|
|
Repo -[#707070]-> RepoMysql : "implémente"
|
|
Repo -[#707070]-> RepoMongo : "implémente"
|
|
Api -[#707070]down-> MySql : "Tables SQL via repository\n(selectionné par config/driver)"
|
|
Api -[#707070]down-> Mongo : "Requêtes Mongo via repository\n(selectionné par config/driver)"
|
|
'Docker -[#707070]-> MySql : "Démarre / arrête (docker-compose)"
|
|
'Docker -[#707070]-> Mongo : "Démarre / arrête (docker-compose)"
|
|
@enduml |