diff --git a/diagrams/c4-containers.puml b/diagrams/c4-containers.puml index 0f07b81..d92323f 100644 --- a/diagrams/c4-containers.puml +++ b/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<> { - BackgroundColor #08427B - BorderColor #073B6F - FontColor #FFFFFF -} - -skinparam rectangle<> { - 'BackgroundColor #1168BD - BorderColor #3C7FC0 - FontColor #FFFFFF -} - -skinparam rectangle<> { - BackgroundColor #438DD5 - BorderColor #135F97 - FontColor #FFFFFF -} - -skinparam rectangle<> { - 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)" <> 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" <> as Flashcards { +System_Boundary(flashcards, "Application Flashcards") { - rectangle "SPA React (Next.js)\n[Conteneur : Web Browser]\nRendu de l'UI, état local, navigation" <> 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)" <> 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" <> 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" <> as RepoMysql - rectangle "Implémentation MongoDB\n[Conteneur : librairie]\nImplémentation Mongo du repository" <> 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" <> as MySql -rectangle "Base MongoDB\n[Conteneur externe : SGBD]\nPersistance des cartes (collection cards)\n+ stockage Docker avec volume" <> as Mongo -'rectangle "Docker / docker-compose\n[infrastructure]\nOrchestration des conteneurs\nweb + bases + volumes" <> 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 \ No newline at end of file diff --git a/diagrams/c4-context.puml b/diagrams/c4-context.puml index 7c13554..10699c6 100644 --- a/diagrams/c4-context.puml +++ b/diagrams/c4-context.puml @@ -1,55 +1,19 @@ @startuml c4-context -' C4 modèle — Niveau 1 : Contexte système (syntaxe native PlantUML, compatible anciennes versions) -' Application web Flashcards (SPA/PWA) - -hide stereotype -skinparam backgroundColor #FFFFFF - -' ===== Styles par type ===== -skinparam rectangle<> { - BackgroundColor #08427B - BorderColor #073B6F - FontColor #FFFFFF -} - -skinparam rectangle<> { - BackgroundColor #686868 - BorderColor #8A8A8A - FontColor #FFFFFF -} - -skinparam rectangle<> { - BackgroundColor #1168BD - BorderColor #3C7FC0 - FontColor #FFFFFF -} - -skinparam rectangle<> { - BackgroundColor #999999 - BorderColor #8A8A8A - FontColor #FFFFFF -} - -skinparam arrow { - Color #707070 -} +' C4 modèle — Niveau 1 : Contexte système +' Bibliothèque standard : !include C4_Context.puml +!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml title Contexte système — Flashcards (Niveau 1) -' ===== Personnes ===== -rectangle "Utilisateur\nJoueur et contributeur de cartes\n(CRUD) : code, dev, culture tech" <> as User +Person(user, "Utilisateur", "Joueur et contributeur de cartes (CRUD) : code, dev, culture tech") -' ===== Système à modéliser ===== -rectangle "App Flashcards\nSPA/PWA Next.js — tirage de cartes au\nhasard, tirage par thème, CRUD des cartes.\nDouble persistance simultanée\nMySQL + MongoDB via couche générique." <> as Flashcards +System(flashcards, "App Flashcards", "SPA/PWA Next.js — tirage de cartes au hasard, tirage par thème, CRUD des cartes. Double persistance simultanée MySQL + MongoDB via une couche générique.") -' ===== Systèmes externes ===== -rectangle "MySQL\nBase relationnelle\n(conteneur Docker)" <> as MySql -rectangle "MongoDB\nBase documentaire\n(conteneur Docker)" <> as Mongo -'rectangle "Docker / docker-compose\nOrchestration des conteneurs\n(web, bases) + volumes persistants" <> as Docker +System_Ext(mysql, "MySQL", "Base relationnelle (conteneur Docker) — table cards") +System_Ext(mongo, "MongoDB", "Base documentaire (conteneur Docker) — collection cards") + +Rel(user, flashcards, "Joue, crée, modifie, supprime,\nconsulte et révèle des cartes", "HTTPS") +Rel(flashcards, mysql, "Lit / écrit via CardRepository", "SQL") +Rel(flashcards, mongo, "Lit / écrit via CardRepository", "MongoDB") -User -[#707070]-> Flashcards : Joue, crée, modifie, supprime,\nconsulte et révèle des cartes -Flashcards -[#707070]-> MySql : Lit / écrit (CardRepository) -Flashcards -[#707070]-> Mongo : Lit / écrit (CardRepository) -'Docker -[#707070]-> MySql : Démarre et gère -'Docker -[#707070]-> Mongo : Démarre et gère @enduml \ No newline at end of file