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