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