# 🧪 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}
```