Introduction aux diagrammes

• Visualiser les processus, flux, interactions
• Améliorer la communication dans les projets
• Utilisés pour la documentation technique, les spécifications, etc.

Qu'est-ce que Mermaid.js ?

• Un langage de balisage pour générer des diagrammes dynamiques
• Utilise une syntaxe textuelle simple
• S'intègre dans Markdown, GitHub, Gitlab, VS Code, etc.
• Supporte de nombreux types de diagrammes

Où utiliser Mermaid

• Éditeurs Markdown (VS Code, Obsidian)
• Marp (présentations)
• Sites Web (via JavaScript)
• GitHub/GitLab (prévisualisation automatique)
• mermaid.live (éditeur en ligne)

Code du diagramme de flux

graph TD
  A[Début] --> B{As-tu faim?}
  B -->|Oui| C[Mange!]
  B -->|Non| D[Dors!]

• Représente des processus logiques ou des flux

Code du diagramme de séquence

sequenceDiagram
  Alice->>Bob: Bonjour Bob
  Bob-->>Alice: Salut Alice

• Représente des échanges entre acteurs au fil du temps

Code du diagramme de classes

classDiagram
  Animal <|-- Chat
  Animal <|-- Chien
  Animal : +String nom
  Animal : +manger()

• Représente des structures orientées objet

Code du diagramme entité-relation

erDiagram
    CLIENT ||--o{ COMMANDE : place
    CLIENT {
        string nom
        string noClient
        string secteur
    }
    COMMANDE ||--|{ LIGNE-ITEM : contient
    COMMANDE {
        int noCommande
        string adresseLivraison
    }
    LIGNE-ITEM {
        string codeProduit
        int quantite
        float prixParUnite
    }

Conclusion

• Mermaid simplifie la création de diagrammes avec du texte
• Adapté à la documentation, la pédagogie, et le développement
• À privilégier quand l'intégration Markdown est un atout