docs: update class styling in diagrams for enhanced visual clarity

Adjusted color schemes and stroke styles in architecture and data flow class diagrams to improve readability and modernize styling.
This commit is contained in:
Mathis H (Avnyr) 2025-05-14 12:18:58 +02:00
parent 8dc2069963
commit 60d510c1e0

50
cdc.md
View File

@ -142,10 +142,10 @@ flowchart TB
BE <-->|"4. Récupération des avatars"| GH
BE <-->|"5. Événements temps réel"| WS
classDef client fill:#d8a0d8,stroke:#333,stroke-width:2px
classDef server fill:#a0a0d8,stroke:#333,stroke-width:2px
classDef storage fill:#a0d8a0,stroke:#333,stroke-width:2px
classDef external fill:#d8d8a0,stroke:#333,stroke-width:2px
classDef client fill:#9c27b0,stroke:#ffffff,stroke-width:2px
classDef server fill:#3f51b5,stroke:#ffffff,stroke-width:2px
classDef storage fill:#4caf50,stroke:#ffffff,stroke-width:2px
classDef external fill:#ff9800,stroke:#ffffff,stroke-width:2px
class Client client
class Server server
@ -156,29 +156,29 @@ flowchart TB
Ce diagramme montre les principaux flux d'interactions:
1. **Frontend ↔ Backend**: Communication via API REST pour les opérations CRUD standard
- Requêtes HTTP pour la création, lecture, mise à jour et suppression de données
- Authentification via JWT pour sécuriser les échanges
- Validation des données côté client et serveur
- Requêtes HTTP pour la création, lecture, mise à jour et suppression de données
- Authentification via JWT pour sécuriser les échanges
- Validation des données côté client et serveur
2. **Frontend ↔ WebSocket**: Communication en temps réel
- Notifications instantanées
- Mises à jour en direct des groupes
- Collaboration entre utilisateurs
- Notifications instantanées
- Mises à jour en direct des groupes
- Collaboration entre utilisateurs
3. **Backend ↔ Base de données**: Persistance des données
- Requêtes SQL optimisées via DrizzleORM
- Transactions pour garantir l'intégrité des données
- Utilisation d'index pour des performances optimales
- Requêtes SQL optimisées via DrizzleORM
- Transactions pour garantir l'intégrité des données
- Utilisation d'index pour des performances optimales
4. **Backend ↔ API GitHub**: Récupération des données utilisateur
- Récupération des avatars utilisateurs
- Authentification des utilisateurs
- Récupération des informations de profil
- Récupération des avatars utilisateurs
- Authentification des utilisateurs
- Récupération des informations de profil
5. **Backend ↔ WebSocket**: Gestion des événements
- Diffusion des mises à jour aux clients connectés
- Gestion des salles pour les projets collaboratifs
- Notification des changements en temps réel
- Diffusion des mises à jour aux clients connectés
- Gestion des salles pour les projets collaboratifs
- Notification des changements en temps réel
Cette architecture permet une séparation claire des responsabilités tout en offrant une expérience utilisateur fluide et réactive.
@ -470,12 +470,12 @@ flowchart TD
Person -->|Associée à| Tag
Admin[Administrateur] -->|Gère| Tag
classDef user fill:#d8a0d8,stroke:#333,stroke-width:2px
classDef project fill:#a0a0d8,stroke:#333,stroke-width:2px
classDef person fill:#a0d8a0,stroke:#333,stroke-width:2px
classDef group fill:#d8a0a0,stroke:#333,stroke-width:2px
classDef tag fill:#d8d8a0,stroke:#333,stroke-width:2px
classDef admin fill:#a0d8d8,stroke:#333,stroke-width:2px
classDef user fill:#9c27b0,stroke:#ffffff,stroke-width:2px
classDef project fill:#3f51b5,stroke:#ffffff,stroke-width:2px
classDef person fill:#4caf50,stroke:#ffffff,stroke-width:2px
classDef group fill:#f44336,stroke:#ffffff,stroke-width:2px
classDef tag fill:#ff9800,stroke:#ffffff,stroke-width:2px
classDef admin fill:#00bcd4,stroke:#ffffff,stroke-width:2px
class User user
class Project project