Générateur de Diagrammes Mermaid

Pour qui / Utilité

Le générateur de diagrammes Mermaid est conçu pour les développeurs, architectes et managers qui ont besoin de créer rapidement des diagrammes sans outils complexes. Idéal pour:

• Architectes logiciels — Documenter l'architecture en diagrammes
• Développeurs — Visualiser les flux de travail et les interactions
• Product Managers — Créer des workflows et des User Stories
• Équipes Agile — Documenter les processus et sprints
• Étudiants — Apprendre l'UML et les diagrammes

Cet outil génère des diagrammes Mermaid qui sont légers, versionables (texte), et peuvent être intégrés dans des documentations (Markdown, GitHub, etc.).

Types de diagrammes disponibles

Flowchart : Guide complet

Un flowchart (organigramme) représente un flux de travail avec des décisions, des actions et des chemins.

Syntaxe de base

flowchart TD
    A[Début]
    B{Est valide?}
    C[Continuer]
    D[Erreur]

    A --> B
    B -->|Oui| C
    B -->|Non| D

Formes disponibles

• [Texte] — Rectangle (action)
• {Texte} — Losange (décision)
• ([Texte]) — Ellipse (début/fin)
• [[Texte]] — Subroutine
• [(Texte)] — Cylindre (base de données)
• {{Texte}} — Hexagone

Connexions

• A --> B — Flèche simple
• A -->|Texte| B — Flèche avec label
• A -.-> B — Pointillé
• A ==> B — Épaisse

Diagramme de séquence

Un diagramme de séquence montre l'ordre des interactions entre acteurs/systèmes au fil du temps.

Syntaxe de base

sequenceDiagram
    actor Client
    participant Serveur as Serveur API
    participant BD as Base de données

    Client->>Serveur: Envoie requête
    Serveur->>BD: Récupère données
    BD-->>Serveur: Retour données
    Serveur-->>Client: Retour JSON

Types de messages

• -> ou ->>> — Message synchrone (ligne pleine)
• --> ou -->>> — Message asynchrone (pointillé)
• -x — Perte de message
• note left/right of — Note/annotation

Participants

• participant Nom — Participant standard
• actor Nom — Acteur (humain)

Diagramme de classe (UML)

Un diagramme de classe représente la structure des classes et leurs relations (héritage, composition, association).

Syntaxe de base

classDiagram
    class Animal {
        +string name
        +int age
        +sound()
    }

    class Chien {
        +aboyer()
    }

    class Chat {
        +miauler()
    }

    Animal <|-- Chien
    Animal <|-- Chat

Modificateurs d'accès

• + — Public
• - — Private
• # — Protected
• ~ — Package

Types de relations

• <|-- — Héritage
• *-- — Composition
• o-- — Agrégation
• -->> — Association

Tips & Tricks

🎯 Tips de diagrammes

• Clarté d'abord — Les meilleurs diagrammes sont simples et faciles à lire.
• Nommage explicite — Utilisez des noms clairs pour les nœuds (évitez A, B, C).
• Couleurs optionnelles — Mermaid supporte les styles CSS pour colorier les nœuds.
• Versionnage — Stockez les diagrammes en tant que fichiers `.mmd` ou `.md` dans Git.

🔧 Intégration avec Markdown

Vous pouvez intégrer les diagrammes Mermaid directement dans Markdown (GitHub, GitLab, Notion):

```mermaid
flowchart TD
    A[Début]
    B[Fin]
    A --> B
```

📥 Export et sauvegarde

• Utilisez ce tool pour exporter en PNG/SVG
• Sauvegardez le code dans votre repo Git
• Les SVGs peuvent être édités dans n'importe quel éditeur SVG