Diagrammes Mermaid

Écrivez les diagrammes sous forme de texte dans des blocs de code délimités. Jamdesk les affiche en SVG au moment du build.

Utilisation de base

Utilisez un bloc de code délimité avec l'identifiant de langage mermaid :

```mermaid
flowchart LR
    A[Start] --> B[Process] --> C[End]
```

Types de diagrammes

Flowcharts

La direction peut être de haut en bas (TD), de gauche à droite (LR), de bas en haut (BT), ou de droite à gauche (RL).

```mermaid
flowchart TD
    A[User Request] --> B{Valid?}
    B -->|Yes| C[Process]
    B -->|No| D[Error]
    C --> E[Response]
    D --> E
```

Sous-graphes

Regroupez les nœuds liés à l'aide de sous-graphes. Cela aide à organiser des flowcharts complexes en sections logiques comme « Frontend » et « Backend » ou différentes étapes d'un pipeline.

```mermaid
flowchart TB
    subgraph Frontend
        A[React App] --> B[Components]
    end
    subgraph Backend
        C[API Server] --> D[(Database)]
    end
    B -->|HTTP| C
```

Diagrammes de séquence

Les diagrammes de séquence montrent comment les composants interagissent dans le temps. Utilisez un diagramme de séquence pour les flux d'appels API et les échanges d'authentification. Les participants apparaissent comme des lignes de vie verticales, avec des messages circulant entre eux.

```mermaid
sequenceDiagram
    participant Client
    participant Server
    participant Database

    Client->>Server: Request
    Server->>Database: Query
    Database-->>Server: Results
    Server-->>Client: Response
```

Diagrammes de classes

Les diagrammes de classes représentent la structure de systèmes orientés objet, comme un modèle de données ou les types principaux d'un service. Ils affichent les classes avec leurs attributs, méthodes, et leurs relations entre elles.

```mermaid
classDiagram
    class User {
        +String name
        +String email
        +login()
        +logout()
    }
    class Order {
        +int id
        +Date created
        +addItem()
        +checkout()
    }
    class Item {
        +String name
        +float price
    }
    User "1" --> "*" Order : places
    Order "1" --> "*" Item : contains
```

Diagrammes d'états

Les diagrammes d'états modélisent le cycle de vie d'un objet ou d'un processus. Ils montrent tous les états possibles et les transitions entre eux. Les statuts de commande et les workflows d'approbation de documents en sont des exemples typiques.

```mermaid
stateDiagram-v2
    [*] --> Draft
    Draft --> Review
    Review --> Published
    Review --> Draft
    Published --> [*]
```

Diagrammes entité-relation

Les diagrammes ER documentent les schémas de base de données et modèles de données, en montrant les entités (tables), leurs attributs (colonnes), et les relations entre elles. Les symboles indiquent la cardinalité : un-à-un, un-à-plusieurs, ou plusieurs-à-plusieurs.

```mermaid
erDiagram
    USER ||--o{ ORDER : places
    ORDER ||--|{ ITEM : contains
    USER {
        string name
        string email
    }
    ORDER {
        int id
        date created
    }
```

Diagrammes de Gantt

Les diagrammes de Gantt visualisent les plannings et calendriers de projet. Les tâches sont affichées sous forme de barres horizontales sur une timeline, montrant la durée, les dépendances, et le travail en parallèle. Un plan de projet ou une roadmap s'y prête naturellement.

```mermaid
gantt
    title Project Timeline
    dateFormat YYYY-MM-DD
    section Planning
        Research       :a1, 2024-01-01, 7d
        Design         :a2, after a1, 5d
    section Development
        Backend        :b1, after a2, 14d
        Frontend       :b2, after a2, 14d
    section Launch
        Testing        :c1, after b1, 7d
        Deployment     :c2, after c1, 2d
```

Git Graphs

Les Git graphs visualisent les stratégies de branchement et les workflows de contrôle de version. Ils montrent les commits, branches, fusions, et l'historique global d'un dépôt. Chaque branche est colorée pour une identification facile.

```mermaid
gitGraph
    commit id: "Initial"
    branch feature
    checkout feature
    commit id: "Add login"
    commit id: "Add auth"
    checkout main
    merge feature id: "v1.0"
    branch release
    checkout release
    commit id: "Prep 1.1"
    checkout main
    branch hotfix
    checkout hotfix
    commit id: "Fix bug"
    checkout main
    merge hotfix id: "v1.0.1"
    checkout release
    commit id: "Final QA"
    checkout main
    merge release id: "v1.1"
```

Diagrammes de timeline

Les timelines montrent des événements sur des périodes. Commencez par le mot-clé timeline, un title optionnel, puis une ligne par période avec les événements séparés par des deux-points :

```mermaid
timeline
    title Product Launch Timeline
    2024 : Research
         : First prototype
    2025 : Private beta
         : Public beta
    2026 : GA launch
```

Camemberts

Les camemberts affichent des données proportionnelles sous forme de parts d'un cercle. Utilisez-en un quand des parties composent un tout, comme une part de marché ou des résultats de sondage. Limitez-vous à 6 parts maximum pour la lisibilité.

```mermaid
pie title Browser Market Share
    "Chrome" : 65
    "Safari" : 19
    "Firefox" : 10
    "Edge" : 4
    "Other" : 2
```

Formes de flowchart

Différentes formes véhiculent différentes significations dans les flowcharts :

Types de flèches

Les flèches indiquent la direction du flux et les types de relations :

Dimensionner les diagrammes larges

Pour les diagrammes larges comme les diagrammes de Gantt ou les Git graphs complexes, vous pouvez utiliser le composant Mermaid directement avec une prop minWidth pour éviter que le diagramme soit compressé :

<Mermaid minWidth="700px">
gantt
    title Wide Project Timeline
    ...
</Mermaid>

Conseils de style

Pour des diagrammes efficaces :

• Restez simple : découpez les flux complexes en plusieurs diagrammes plus petits.
• Libellez vos flèches pour expliquer les transitions.
• Choisissez une direction : TD (haut-bas) pour les diagrammes hauts, LR (gauche-droite) pour les larges.
• Limitez chaque diagramme à 10-15 nœuds pour la clarté.

En savoir plus

Pour la référence complète de la syntaxe Mermaid, incluant les fonctionnalités avancées comme le style, les thèmes, et des types de diagrammes supplémentaires, consultez la documentation officielle Mermaid.

Et ensuite ?