chore(vault): reduit la fixture mermaid de test
La fixture contenait 22 diagrammes volumineux inutiles pour les tests ; un sous-ensemble representatif suffit.
This commit is contained in:
@@ -1,442 +1,3 @@
|
|||||||
# 🧪 Suite de Tests Complète : Diagrammes Mermaid
|
|
||||||
|
|
||||||
Ce document sert de référence pour valider le rendu de tous les types de diagrammes Mermaid.js, ainsi que leurs fonctionnalités avancées (styling, interactions, sous-éléments).
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 1. Flowchart (Organigramme)
|
|
||||||
*Teste : Formes de nœuds variées, sous-graphes, liens avec texte, classes de style, et markdown dans les nœuds.*
|
|
||||||
|
|
||||||
```mermaid
|
|
||||||
flowchart LR
|
|
||||||
%% Définition des styles
|
|
||||||
classDef default fill:#f9f9f9,stroke:#333,stroke-width:2px;
|
|
||||||
classDef success fill:#d4edda,stroke:#28a745,stroke-width:2px;
|
|
||||||
classDef error fill:#f8d7da,stroke:#dc3545,stroke-width:2px;
|
|
||||||
|
|
||||||
subgraph Groupe A [Processus Principal]
|
|
||||||
direction TB
|
|
||||||
A([Début]) --> B{Condition ?}
|
|
||||||
B -->|Oui| C[Action Standard]
|
|
||||||
B -->|Non| D[/Action Alternative/]
|
|
||||||
end
|
|
||||||
|
|
||||||
subgraph Groupe B [Résultats]
|
|
||||||
C --> E((Fin Succès)):::success
|
|
||||||
D --> F{{Fin Erreur}}:::error
|
|
||||||
end
|
|
||||||
|
|
||||||
%% Lien avec markdown et événement clic
|
|
||||||
E -.->|"**Résultat**<br/>[Voir détails](#)"| G
|
|
||||||
click G "https://example.com" "Ouvrir exemple" _blank
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 2. Sequence Diagram (Diagramme de Séquence)
|
|
||||||
*Teste : Participants, alias, boucles, alternatives, parallélisme, notes, activation et types de messages.*
|
|
||||||
|
|
||||||
```mermaid
|
|
||||||
sequenceDiagram
|
|
||||||
autonumber
|
|
||||||
participant C as Client
|
|
||||||
participant API as API Gateway
|
|
||||||
participant DB as Base de Données
|
|
||||||
|
|
||||||
C->>API: Requete POST /login
|
|
||||||
activate API
|
|
||||||
API->>DB: Verifier identifiants
|
|
||||||
activate DB
|
|
||||||
|
|
||||||
alt Identifiants valides
|
|
||||||
DB-->>API: Succes (200 OK)
|
|
||||||
API-->>C: Token JWT
|
|
||||||
else Identifiants invalides
|
|
||||||
DB-->>API: Echec (401 Unauthorized)
|
|
||||||
API--xC: Rejete
|
|
||||||
end
|
|
||||||
deactivate DB
|
|
||||||
deactivate API
|
|
||||||
|
|
||||||
rect rgb(200, 220, 250)
|
|
||||||
Note over C,DB: Cette section est surlignee pour l'audit
|
|
||||||
C->>DB: Requete de logs
|
|
||||||
end
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 3. Class Diagram (Diagramme de Classes)
|
|
||||||
*Teste : Espaces de noms, relations (héritage, composition, agrégation), visibilité, génériques et méthodes.*
|
|
||||||
|
|
||||||
```mermaid
|
|
||||||
classDiagram
|
|
||||||
namespace Base {
|
|
||||||
class Utilisateur {
|
|
||||||
-int id
|
|
||||||
+String nom
|
|
||||||
+String email
|
|
||||||
+seConnecter() bool
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
namespace Admin {
|
|
||||||
class Administrateur {
|
|
||||||
+String niveauAcces
|
|
||||||
+gererUtilisateurs() void
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
class Session {
|
|
||||||
-String token
|
|
||||||
+Date expiration
|
|
||||||
}
|
|
||||||
|
|
||||||
Utilisateur <|-- Administrateur : hérite
|
|
||||||
Utilisateur "1" *-- "0..*" Session : possède
|
|
||||||
Utilisateur ..> InterfaceAuth : implémente
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 4. State Diagram (Diagramme d'États)
|
|
||||||
*Teste : États composites, choix, fourches/joins, états finaux et transitions.*
|
|
||||||
|
|
||||||
```mermaid
|
|
||||||
stateDiagram-v2
|
|
||||||
[*] --> EnAttente
|
|
||||||
|
|
||||||
state CommandeEnCours {
|
|
||||||
EnAttente --> Validée : Paiement reçu
|
|
||||||
Validée --> Expédiée : Colis préparé
|
|
||||||
}
|
|
||||||
|
|
||||||
Expédiée --> ChoixLivraison
|
|
||||||
state ChoixLivraison <<choice>>
|
|
||||||
ChoixLivraison --> Livrée : Domicile
|
|
||||||
ChoixLivraison --> RetraitPoint : Point relais
|
|
||||||
|
|
||||||
Livrée --> [*]
|
|
||||||
RetraitPoint --> [*]
|
|
||||||
|
|
||||||
note right of Validée
|
|
||||||
L'état est irréversible
|
|
||||||
une fois le colis parti.
|
|
||||||
end note
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 5. Entity Relationship Diagram (MCD)
|
|
||||||
*Teste : Entités, attributs avec types, clés primaires (PK), clés étrangères (FK) et cardinalités.*
|
|
||||||
|
|
||||||
```mermaid
|
|
||||||
erDiagram
|
|
||||||
CLIENT {
|
|
||||||
int id PK
|
|
||||||
string nom
|
|
||||||
string email UK
|
|
||||||
}
|
|
||||||
|
|
||||||
COMMANDE {
|
|
||||||
int id PK
|
|
||||||
int client_id FK
|
|
||||||
date date_creation
|
|
||||||
float total
|
|
||||||
}
|
|
||||||
|
|
||||||
PRODUIT {
|
|
||||||
int id PK
|
|
||||||
string reference UK
|
|
||||||
float prix
|
|
||||||
}
|
|
||||||
|
|
||||||
CLIENT ||--o{ COMMANDE : "passe"
|
|
||||||
COMMANDE }o--o{ PRODUIT : "contient"
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 6. User Journey (Parcours Utilisateur)
|
|
||||||
*Teste : Sections, tâches avec score de satisfaction et acteurs multiples.*
|
|
||||||
|
|
||||||
```mermaid
|
|
||||||
journey
|
|
||||||
title Parcours d'achat sur l'application
|
|
||||||
section Recherche
|
|
||||||
Ouvrir l'application : 5: Utilisateur
|
|
||||||
Utiliser la barre de recherche : 4: Utilisateur, Moteur de recherche
|
|
||||||
section Achat
|
|
||||||
Ajouter au panier : 5: Utilisateur
|
|
||||||
Procéder au paiement : 3: Utilisateur, Système bancaire
|
|
||||||
section Post-achat
|
|
||||||
Recevoir l'email de confirmation : 5: Utilisateur, Service Email
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 7. Gantt Chart (Diagramme de Gantt)
|
|
||||||
*Teste : Format de date, sections, dépendances (`after`), marqueur "aujourd'hui" et exclusion de week-ends.*
|
|
||||||
|
|
||||||
```mermaid
|
|
||||||
gantt
|
|
||||||
title Planning de Développement v2.0
|
|
||||||
dateFormat YYYY-MM-DD
|
|
||||||
axisFormat %d/%m
|
|
||||||
excludes weekends
|
|
||||||
|
|
||||||
section Conception
|
|
||||||
Maquettes UI/UX :a1, 2024-01-01, 10d
|
|
||||||
Validation client :milestone, m1, 2024-01-11, 0d
|
|
||||||
|
|
||||||
section Développement
|
|
||||||
Frontend :a2, after a1, 15d
|
|
||||||
Backend API :a3, 2024-01-05, 20d
|
|
||||||
Intégration :a4, after a2, 5d
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 8. Pie Chart (Diagramme Circulaire)
|
|
||||||
*Teste : Titre, affichage des valeurs et des pourcentages.*
|
|
||||||
|
|
||||||
```mermaid
|
|
||||||
pie showData
|
|
||||||
title Répartition du trafic web (2024)
|
|
||||||
"Moteurs de recherche" : 45.5
|
|
||||||
"Liens directs" : 30.2
|
|
||||||
"Réseaux sociaux" : 15.8
|
|
||||||
"Campagnes email" : 8.5
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 9. Git Graph
|
|
||||||
*Teste : Commits, branches, checkout, merges, cherry-picks et tags.*
|
|
||||||
|
|
||||||
```mermaid
|
|
||||||
gitGraph
|
|
||||||
commit id: "Initial commit"
|
|
||||||
branch develop
|
|
||||||
checkout develop
|
|
||||||
commit id: "Ajout feature A"
|
|
||||||
commit id: "Ajout feature B"
|
|
||||||
checkout main
|
|
||||||
merge develop id: "Merge develop" tag: "v1.0.0"
|
|
||||||
commit id: "Hotfix critique"
|
|
||||||
checkout develop
|
|
||||||
cherry-pick id: "Hotfix critique"
|
|
||||||
commit id: "Préparation v1.1"
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 10. Requirement Diagram (Ingenierie Systeme)
|
|
||||||
*Teste : Exigences, elements, risques et relations de tracabilite.*
|
|
||||||
*Note : `requirementDiagram` n'est pas supporte par Mermaid 11. Utilise un flowchart equivalent.*
|
|
||||||
|
|
||||||
```mermaid
|
|
||||||
flowchart LR
|
|
||||||
subgraph Requirements["Exigences"]
|
|
||||||
SEC001["SEC-001<br/>Le systeme doit chiffrer<br/>les mots de passe<br/>Risk: High<br/>Verif: Test"]
|
|
||||||
end
|
|
||||||
|
|
||||||
subgraph Elements["Elements"]
|
|
||||||
Auth["Serveur Auth<br/>Node.js<br/>doc: Architecture.md"]
|
|
||||||
DB["Base de Donnees<br/>PostgreSQL"]
|
|
||||||
end
|
|
||||||
|
|
||||||
Auth -->|"satisfies"| SEC001
|
|
||||||
DB -->|"copies"| SEC001
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 11. Mindmap (Carte Mentale)
|
|
||||||
*Teste : Nœud racine, formes variées, icônes FontAwesome et sauts de ligne.*
|
|
||||||
|
|
||||||
```mermaid
|
|
||||||
mindmap
|
|
||||||
root((Projet Web))
|
|
||||||
Frontend
|
|
||||||
React
|
|
||||||
::icon(fa fa-react)
|
|
||||||
Tailwind CSS
|
|
||||||
Backend
|
|
||||||
Node.js
|
|
||||||
::icon(fa fa-node)
|
|
||||||
Base de données
|
|
||||||
PostgreSQL
|
|
||||||
Redis
|
|
||||||
Déploiement
|
|
||||||
Docker<br/>et CI/CD
|
|
||||||
::icon(fa fa-docker)
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 12. Timeline (Frise Chronologique)
|
|
||||||
*Teste : Titre, sections et événements avec texte multi-lignes.*
|
|
||||||
|
|
||||||
```mermaid
|
|
||||||
timeline
|
|
||||||
title Historique des versions du produit
|
|
||||||
section 2022
|
|
||||||
v1.0 : Lancement initial : Fonctionnalités de base
|
|
||||||
section 2023
|
|
||||||
v1.5 : Ajout du mode sombre : Refonte de l'UI
|
|
||||||
v2.0 : Architecture microservices : Passage à l'échelle
|
|
||||||
section 2024
|
|
||||||
v2.5 : Intégration IA : Assistant virtuel
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 13. Quadrant Chart (Matrice)
|
|
||||||
*Teste : Titres, axes personnalisés, quadrants et points avec styles.*
|
|
||||||
|
|
||||||
```mermaid
|
|
||||||
quadrantChart
|
|
||||||
title Matrice des priorités (Impact vs Effort)
|
|
||||||
x-axis "Faible Impact" --> "Fort Impact"
|
|
||||||
y-axis "Faible Effort" --> "Fort Effort"
|
|
||||||
quadrant-1 "À planifier"
|
|
||||||
quadrant-2 "À prioriser (Quick Wins)"
|
|
||||||
quadrant-3 "À éviter"
|
|
||||||
quadrant-4 "À déléguer"
|
|
||||||
"Correction de bugs mineurs": [0.2, 0.2]
|
|
||||||
"Nouvelle fonctionnalité IA": [0.8, 0.8]
|
|
||||||
"Refonte du logo": [0.3, 0.8]
|
|
||||||
"Optimisation SEO": [0.8, 0.3]
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 14. XY Chart (Beta)
|
|
||||||
*Teste : Graphique combiné (barres + ligne) avec axes personnalisés.*
|
|
||||||
|
|
||||||
```mermaid
|
|
||||||
xychart-beta
|
|
||||||
title "Ventes mensuelles vs Objectifs (2024)"
|
|
||||||
x-axis ["Jan", "Fév", "Mar", "Avr", "Mai"]
|
|
||||||
y-axis "Montant (€)" 0 --> 10000
|
|
||||||
bar [5000, 6000, 7500, 8200, 9500]
|
|
||||||
line [6000, 6500, 7000, 8000, 10000]
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 15. Block Diagram (Beta)
|
|
||||||
*Teste : Mise en page libre, blocs imbriqués, spans et icônes.*
|
|
||||||
|
|
||||||
```mermaid
|
|
||||||
block-beta
|
|
||||||
columns 3
|
|
||||||
%% Ligne 1
|
|
||||||
db[("Base de Données")]
|
|
||||||
space
|
|
||||||
api["API Gateway"]
|
|
||||||
|
|
||||||
%% Ligne 2 (span sur 3 colonnes)
|
|
||||||
block:Frontend:3
|
|
||||||
columns 2
|
|
||||||
web["Application Web"]
|
|
||||||
mobile["Application Mobile"]
|
|
||||||
end
|
|
||||||
|
|
||||||
%% Liaisons (visuelles via l'ordre ou explicites si supporté)
|
|
||||||
db --> api
|
|
||||||
api --> web
|
|
||||||
api --> mobile
|
|
||||||
|
|
||||||
style db fill:#f9f,stroke:#333
|
|
||||||
style api fill:#bbf,stroke:#333
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 16. Sankey Diagram (Beta)
|
|
||||||
*Teste : Flux de données avec valeurs et couleurs de liens.*
|
|
||||||
|
|
||||||
```mermaid
|
|
||||||
sankey-beta
|
|
||||||
%% source,target,value
|
|
||||||
Energie fossile,Electricite,40
|
|
||||||
Energie solaire,Electricite,30
|
|
||||||
Energie eolienne,Electricite,30
|
|
||||||
Electricite,Industrie,50
|
|
||||||
Electricite,Residentiel,35
|
|
||||||
Electricite,Pertes reseau,15
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 17. Packet Diagram (Beta)
|
|
||||||
*Teste : Représentation de trames réseau avec taille de mot et champs de bits.*
|
|
||||||
|
|
||||||
```mermaid
|
|
||||||
packet-beta
|
|
||||||
title Trame Ethernet Simplifiée
|
|
||||||
0-15: "Adresse MAC Destination"
|
|
||||||
16-31: "Adresse MAC Source"
|
|
||||||
32-47: "Type / Longueur"
|
|
||||||
48-127: "Payload (Données)"
|
|
||||||
128-143: "FCS (Contrôle)"
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 18. Kanban (Nouveauté v11)
|
|
||||||
*Teste : Sections, tickets avec ID, assignations, priorités et dates d'échéance.*
|
|
||||||
|
|
||||||
```mermaid
|
|
||||||
kanban
|
|
||||||
column1[À faire]
|
|
||||||
task1[Créer maquettes]@{ assigned: 'Alice', priority: 'High', ticket: 'DES-101' }
|
|
||||||
task2[Rédiger spécifications]@{ assigned: 'Bob', priority: 'Medium' }
|
|
||||||
column2[En cours]
|
|
||||||
task3[Développer l'API]@{ assigned: 'Charlie', priority: 'High', ticket: 'DEV-204', due: '2024-02-15' }
|
|
||||||
column3[Terminé]
|
|
||||||
task4[Configurer le CI/CD]@{ assigned: 'Alice', priority: 'Low', ticket: 'OPS-005' }
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 19. C4 Model (Context)
|
|
||||||
*Teste : Personnes, systèmes internes, systèmes externes et relations.*
|
|
||||||
|
|
||||||
```mermaid
|
|
||||||
C4Context
|
|
||||||
title Diagramme de Contexte Système - Application E-commerce
|
|
||||||
|
|
||||||
Person(client, "Client", "Un utilisateur qui achète des produits.")
|
|
||||||
System(eCommerce, "Système E-commerce", "Permet aux clients de parcourir et acheter des produits.")
|
|
||||||
System_Ext(payment, "Système de Paiement", "Stripe", "Gère les transactions bancaires.")
|
|
||||||
System_Ext(shipping, "Service de Livraison", "FedEx", "Gère l'expédition des colis.")
|
|
||||||
|
|
||||||
Rel(client, eCommerce, "Utilise pour acheter", "HTTPS")
|
|
||||||
Rel(eCommerce, payment, "Soumet le paiement", "API")
|
|
||||||
Rel(eCommerce, shipping, "Envoie les détails de livraison", "API")
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 20. Cas Limites & Compatibilité (Edge Cases)
|
|
||||||
*Teste la robustesse du parser face à des syntaxes hybrides ou des caractères spéciaux.*
|
|
||||||
|
|
||||||
```mermaid
|
|
||||||
flowchart TD
|
|
||||||
%% Test de caracteres speciaux et echappement
|
|
||||||
A["Noeud avec des guillemets #quot;internes#quot; et des sauts<br/>de ligne"] --> B
|
|
||||||
|
|
||||||
%% Test de formules mathematiques (si le moteur le supporte)
|
|
||||||
B("Formule : $E = mc^2$") --> C
|
|
||||||
|
|
||||||
%% Test de syntaxe style Obsidian (doit soit s'afficher en brut, soit etre pre-processe)
|
|
||||||
C["Lien wiki : Page Interne"] --> D
|
|
||||||
D["Highlight : Texte important"] --> E
|
|
||||||
|
|
||||||
%% Test de lien avec ID contenant des tirets et underscores
|
|
||||||
E --> F{Decision_Complexe-2024}
|
|
||||||
```
|
|
||||||
|
|
||||||
|
Test E2E modification.
|
||||||
Reference in New Issue
Block a user