diff --git a/test_vault/mermaid/test-all-mermaid.md b/test_vault/mermaid/test-all-mermaid.md index 97ae27a..10f0c74 100644 --- a/test_vault/mermaid/test-all-mermaid.md +++ b/test_vault/mermaid/test-all-mermaid.md @@ -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**
[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 <> - 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
Le systeme doit chiffrer
les mots de passe
Risk: High
Verif: Test"] - end - - subgraph Elements["Elements"] - Auth["Serveur Auth
Node.js
doc: Architecture.md"] - DB["Base de Donnees
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
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
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. \ No newline at end of file