ObsiGate/test_vault/mermaid/test-all-mermaid.md

🧪 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: 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.

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 (Ingenierie Systeme)

Teste : Exigences, elements, risques et relations de tracabilite. Note : requirementDiagram n'est pas supporte par Mermaid 11. Utilise un flowchart equivalent.

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.

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
  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.

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 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}