docs(diagrams): diagrammes C4 avec C4-PlantUML (stdlib, sans légende)

diagrams/c4-containers.puml

@@ -1,70 +1,34 @@
 @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
-}
+' C4 modèle — Niveau 2 : Conteneurs
+' Bibliothèque standard : C4_Container.puml inclut lui-même C4_Context.puml,
+' et définit les macros Container / ContainerDb utilisées ici.
+!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
 
 title Conteneurs — Flashcards (Niveau 2)
 
-' ===== Personne =====
-rectangle "Utilisateur\nNavigateur / mobile\n(accès au jeu et au CRUD)" <<person>> as User
+Person(user, "Utilisateur", "Navigateur / mobile (accès au jeu et au CRUD)")
 
-' ===== Système Flashcards et ses conteneurs =====
-rectangle "Application Flashcards [Système]\nSPA/PWA Next.js — double persistance simultanée" <<system>> as Flashcards {
+System_Boundary(flashcards, "Application Flashcards") {
 
-    rectangle "SPA React (Next.js)\n[Conteneur : Web Browser]\nRendu de l'UI, état local, navigation" <<container>> as Spa
+    Container(spa, "SPA React (Next.js)", "Web Browser", "Rendu de l'UI, état local, navigation, mode hors-ligne (service worker)")
 
-    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
+    Container(api, "API Next.js / App Router", "Node.js", "CardController > CardService : liste, CRUD, tirage aléatoire, thèmes, suggestions de tags. Seul conteneur qui accède aux données.")
 
-    rectangle "CardRepository (générique)\n[Abstraction de données]\nContracts : findAll, findById,\nfindRandom, findRandomByTheme,\nfindThemes, create, update, delete" <<container>> as Repo
+    Container(repo, "CardRepository (générique)", "Abstraction de données", "Contracts : findAll, findById, findRandom, findRandomByTheme, findThemes, tags, create, update, delete")
 
-    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
+    Container(repoMysql, "Implémentation MySQL", "Library (mysql2)", "Implémentation SQL du repository")
+    Container(repoMongo, "Implémentation MongoDB", "Library (mongodb)", "Implémentation Mongo du repository")
 }
 
-' ===== 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
+ContainerDb(mysql, "Base MySQL", "SGBD relationnel", "Persistance des cartes (table cards) + volume Docker")
+ContainerDb(mongo, "Base MongoDB", "SGBD documentaire", "Persistance des cartes (collection cards) + volume Docker")
+
+Rel(user, spa, "Navigue et interagit (HTTP/HTTPS)")
+Rel(spa, api, "Appels API JSON (jeu, CRUD, révélation)")
+Rel(api, repo, "Utilise uniquement l'abstraction")
+Rel(repo, repoMysql, "implémente")
+Rel(repo, repoMongo, "implémente")
+Rel(repoMysql, mysql, "Requêtes SQL (table cards)")
+Rel(repoMongo, mongo, "Requêtes Mongo (collection cards)")
 
-' ===== 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