> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify-mintlify-add-hello-world-quickstart-48843.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Mermaid

> Afficher des diagrammes avec Mermaid

[Mermaid](https://mermaid.js.org/) vous permet de créer des organigrammes, des diagrammes de séquence, des diagrammes de Gantt et d’autres diagrammes à partir de texte et de code.

Pour obtenir la liste complète des types de diagrammes pris en charge et de leur syntaxe, consultez la [documentation Mermaid](https://mermaid.js.org/intro/).

```mermaid
  flowchart LR
    subgraph subgraph1
        direction TB
        top1[top] --> bottom1[bottom]
    end
    subgraph subgraph2
        direction TB
        top2[top] --> bottom2[bottom]
    end
    %% ^ Ces sous-graphes sont identiques, à l’exception des liens qui y conduisent :

    %% Lien vers subgraph1 : l’orientation de subgraph1 est préservée
    outside --> subgraph1
    %% Lien à l’intérieur de subgraph2 :
    %% subgraph2 hérite de l’orientation du graphe de niveau supérieur (LR)
    outside ---> top2
```

````mdx Exemple de diagramme de flux Mermaid
```mermaid
  flowchart LR
    subgraph subgraph1
        direction TB
        top1[top] --> bottom1[bottom]
    end
    subgraph subgraph2
        direction TB
        top2[top] --> bottom2[bottom]
    end
    %% ^ Ces sous-graphes sont identiques, à l’exception des liens qui y mènent :

    %% Lien vers subgraph1 : l’orientation de subgraph1 est conservée
    outside --> subgraph1
    %% Lien au sein de subgraph2 :
    %% subgraph2 hérite de l’orientation du graphe de niveau supérieur (LR)
    outside ---> top2
```
````

<div id="syntax">
  ## Syntaxe
</div>

Pour créer un diagramme Mermaid, écrivez la définition de votre diagramme dans un bloc de code Mermaid.

````mdx
```mermaid
// Votre code de diagramme Mermaid ici
```
````