|
|
|
@@ -0,0 +1,449 @@
|
|
|
|
|
# 🧪 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: Requête POST /login
|
|
|
|
|
activate API
|
|
|
|
|
API->>DB: Vérifier identifiants
|
|
|
|
|
activate DB
|
|
|
|
|
|
|
|
|
|
alt Identifiants valides
|
|
|
|
|
DB-->>API: Succès (200 OK)
|
|
|
|
|
deactivate DB
|
|
|
|
|
API-->>C: Token JWT
|
|
|
|
|
else Identifiants invalides
|
|
|
|
|
DB-->>API: Échec (401 Unauthorized)
|
|
|
|
|
deactivate DB
|
|
|
|
|
API--xC: Rejeté
|
|
|
|
|
end
|
|
|
|
|
deactivate API
|
|
|
|
|
|
|
|
|
|
rect rgb(200, 220, 250)
|
|
|
|
|
Note over C,DB: Cette section est surlignée pour l'audit
|
|
|
|
|
C->>DB: Requête 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 (Ingénierie Système)
|
|
|
|
|
*Teste : Exigences, éléments, risques et relations de traçabilité.*
|
|
|
|
|
|
|
|
|
|
```mermaid
|
|
|
|
|
requirementDiagram
|
|
|
|
|
requirement SecuriteConnexion {
|
|
|
|
|
id: SEC-001
|
|
|
|
|
text: "Le système doit chiffrer les mots de passe."
|
|
|
|
|
risk: High
|
|
|
|
|
verifymethod: Test
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
element ServeurAuth {
|
|
|
|
|
type: "Serveur Node.js"
|
|
|
|
|
docref: "Architecture.md"
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
element BaseDeDonnees {
|
|
|
|
|
type: "PostgreSQL"
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
ServeurAuth - satisfies -> SecuriteConnexion
|
|
|
|
|
BaseDeDonnees - copies -> SecuriteConnexion
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
## 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
|
|
|
|
|
Énergie fossile,Électricité,40
|
|
|
|
|
Énergie solaire,Électricité,30
|
|
|
|
|
Énergie éolienne,Électricité,30
|
|
|
|
|
Électricité,Industrie,50
|
|
|
|
|
Électricité,Résidentiel,35
|
|
|
|
|
Électricité,Pertes réseau,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 caractères spéciaux et échappement
|
|
|
|
|
A["Nœud avec des guillemets \"internes\" et des sauts<br/>de ligne"] --> B
|
|
|
|
|
|
|
|
|
|
%% Test de formules mathématiques (si le moteur le supporte)
|
|
|
|
|
B("Formule : $E = mc^2$") --> C
|
|
|
|
|
|
|
|
|
|
%% Test de syntaxe style Obsidian (doit soit s'afficher en brut, soit être pré-processé)
|
|
|
|
|
C["Lien wiki : [[Page Interne]]"] --> D
|
|
|
|
|
D["Highlight : ==Texte important=="] --> E
|
|
|
|
|
|
|
|
|
|
%% Test de lien avec ID contenant des tirets et underscores
|
|
|
|
|
E --> F{Décision_Complexe-2024}
|
|
|
|
|
```
|
|
|
|
|
|