Diagrammes Mermaid

Rédigez des diagrammes sous forme de texte dans des blocs de code délimités. Jamdesk les génère 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 connexes à l'aide de sous-graphes. Cela permet d'organiser des organigrammes complexes en sections logiques telles que « 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. 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'état

Les diagrammes d'état 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'état pour documenter les statuts de commande, les flux de documents ou tout système avec 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 montrent les entités (tables), leurs attributs (colonnes) et les relations entre eux. 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 délais de projet. Les tâches sont affichées sous forme de barres horizontales sur une ligne temporelle, indiquant la durée, les dépendances et le travail en parallèle. Utilisez-les pour la planification de projet, 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 gestion de versions. 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 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 circulaires

Les diagrammes circulaires affichent des données proportionnelles sous forme de portions d'un cercle. Utilisez-les pour montrer des parts de marché, des résultats de sondages, l'allocation des ressources ou toute donnée où les parties forment un tout. Limitez à 6 portions maximum pour la lisibilité.

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

Formes des organigrammes

Différentes formes véhiculent différentes significations 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 comme les diagrammes de Gantt ou les graphes Git complexes, vous pouvez utiliser le composant Mermaid directement avec une propriété minWidth pour vous assurer que le diagramme ne soit pas 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 direction : TD (de haut en bas) pour les diagrammes hauts, LR (de gauche à droite) pour les diagrammes larges.
• 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, notamment les fonctionnalités avancées comme le style, les thèmes et les types de diagrammes supplémentaires, consultez la documentation officielle Mermaid.

Prochaines étapes