Diagrammes Mermaid

Rédigez vos diagrammes en 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

Organigrammes

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 associés à l'aide de sous-graphes. Cela permet d'organiser des organigrammes complexes en sections logiques telles que « Frontend » et « Backend » ou les 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. Ils sont idéaux pour documenter les appels API, les flux d'authentification ou toute communication entre services. Les participants apparaissent sous forme de lignes de vie verticales, avec des messages qui circulent 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 des systèmes orientés objet. Utilisez-les pour documenter des modèles de données, montrer les relations entre entités ou concevoir l'architecture d'un système. Ils affichent les classes avec leurs attributs, leurs méthodes et leurs relations.

```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. Utilisez des diagrammes d'états pour documenter les statuts de commandes, les flux de documents ou tout système comportant des phases distinctes.

```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 les modèles de données. Ils représentent 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 les calendriers de projets. Les tâches sont représentées par des barres horizontales sur une ligne de temps, montrant la durée, les dépendances et le travail en parallèle. Utilisez-les pour la planification de projets, la documentation de sprints ou les feuilles de route.

```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
```

Graphes Git

Les graphes Git visualisent les stratégies de branchement et les flux de contrôle de version. Ils montrent les commits, les branches, les fusions et l'historique global d'un dépôt. Chaque branche est codée par couleur pour faciliter l'identification.

```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 en secteurs

Les diagrammes en secteurs affichent des données proportionnelles sous forme de parts d'un cercle. Utilisez-les pour illustrer des parts de marché, des résultats de sondages, l'allocation de ressources ou toute donnée dont les parties constituent un tout. Limitez-vous à 6 secteurs ou moins pour une bonne lisibilité.

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

Formes d'organigrammes

Les différentes formes transmettent des significations différentes dans les organigrammes :

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 tels que les diagrammes de Gantt ou les graphes Git complexes, vous pouvez utiliser le composant Mermaid directement avec une prop minWidth pour éviter que le diagramme ne soit compressé :

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

Conseils de mise en forme

Pour des diagrammes efficaces :

• Restez simple : décomposez les flux complexes en plusieurs diagrammes plus petits.
• Étiquetez vos flèches pour expliquer les transitions.
• Choisissez une seule direction : TD (de haut en bas) pour les diagrammes en hauteur, LR (de gauche à droite) pour les diagrammes en largeur.
• Limitez chaque diagramme à 10-15 nœuds pour plus de clarté.

En savoir plus

Pour la référence complète de la syntaxe Mermaid, y compris les fonctionnalités avancées telles que la mise en forme, les thèmes et les types de diagrammes supplémentaires, consultez la documentation officielle de Mermaid.

Et ensuite ?