Créer de beaux diagrammes avec Mermaid

Mermaid vous permet de créer des diagrammes et des visualisations à l'aide d'une syntaxe textuelle simple directement dans vos fichiers Markdown. Fini les allers-retours entre les outils ou l'intégration d'images statiques — vos diagrammes vivent aux côtés de votre documentation et peuvent être versionnés.

Pourquoi Mermaid ?

Les outils de diagrammes traditionnels nécessitent des fichiers séparés, des licences coûteuses ou des services cloud. Les diagrammes Mermaid sont :

• Basés sur du texte — compatibles avec le contrôle de version
• Portables — s'affichent partout où Mermaid est pris en charge
• Maintenables — mettez à jour les diagrammes en éditant du texte
• Rapides — aucune interface graphique nécessaire

Organigrammes

Le type de diagramme le plus courant. Utilisez graph ou flowchart pour définir la direction :

flowchart LR
    A[Start] --> B{Decision}
    B -->|Yes| C[Do something]
    B -->|No| D[Do something else]
    C --> E[End]
    D --> E

Options de direction : LR (gauche-droite), RL, TB (haut-bas), BT.

Diagrammes de séquence

Parfaits pour documenter les appels API et les interactions entre systèmes :

sequenceDiagram
    User->>Server: GET /api/posts
    Server->>Database: SELECT * FROM posts
    Database-->>Server: rows[]
    Server-->>User: JSON response

Diagrammes de Gantt

Visualisez les calendriers de projet :

gantt
    title Project Timeline
    dateFormat  YYYY-MM-DD
    section Design
    Wireframes    :2024-01-01, 7d
    Mockups       :7d
    section Development
    Frontend      :2024-01-15, 14d
    Backend       :2024-01-20, 10d

Diagrammes de classes

Documentez les conceptions orientées objet :

classDiagram
    Animal <|-- Dog
    Animal <|-- Cat
    Animal : +String name
    Animal : +makeSound()
    Dog : +fetch()
    Cat : +purr()

Conseils

• Utilisez %% pour les commentaires dans vos diagrammes
• Gardez les diagrammes ciblés — un concept par diagramme
• Testez votre syntaxe sur le Mermaid Live Editor avant de l'intégrer