11 KiB
11 KiB
🧪 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.
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.
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.
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.
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.
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.
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.
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.
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.
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é.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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}