# Mermaid (/fr/components/mermaid-diagrams)

<!-- agent-signals: reading_time_min: 3 · est_tokens: 1036 · updated: 2026-07-30 -->
Related: [Accordion](/fr/components/accordions.md), [Badge](/fr/components/badge.md), [Bannière](/fr/components/banner.md), [Encarts](/fr/components/callouts.md), [Cartes](/fr/components/cards.md), [Groupes de code](/fr/components/code-groups.md)

[Mermaid](https://mermaid.js.org/) 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 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 placement="top-right"
  flowchart LR
    subgraph subgraph1
        direction TB
        top1[top] --> bottom1[bottom]
    end
    subgraph subgraph2
        direction TB
        top2[top] --> bottom2[bottom]
    end
    %% ^ These subgraphs are identical, except for the links to them:

    %% Link *to* subgraph1: subgraph1 direction is maintained
    outside --> subgraph1
    %% Lien *au sein* de subgraph2 :
    %% subgraph2 hérite de la direction du graphe de niveau supérieur (LR)
    outside ---> top2
```

````mdx title="Mermaid flowchart example"
```mermaid placement="top-right"
  flowchart LR
    subgraph subgraph1
        direction TB
        top1[top] --> bottom1[bottom]
    end
    subgraph subgraph2
        direction TB
        top2[top] --> bottom2[bottom]
    end
    %% ^ These subgraphs are identical, except for the links to them:

    %% Link *to* subgraph1: subgraph1 direction is maintained
    outside --> subgraph1
    %% Lien *au sein* de subgraph2 :
    %% subgraph2 hérite de la direction du graphe de niveau supérieur (LR)
    outside ---> top2
```
````

<div id="elk-layout-support">
  ## Prise en charge de la disposition ELK [#prise-en-charge-de-la-disposition-elk]
</div>

Mintlify prend en charge le moteur de disposition [ELK (Eclipse Layout Kernel)](https://www.eclipse.org/elk/) pour les diagrammes Mermaid. ELK optimise l’agencement afin de réduire les chevauchements et d’améliorer la lisibilité, ce qui est particulièrement utile pour les diagrammes de grande taille ou complexes.

Pour utiliser la disposition ELK dans vos diagrammes Mermaid, ajoutez la directive `%%{init: {'flowchart': {'defaultRenderer': 'elk'}}}%%` au début de votre diagramme :

````mdx title="ELK layout example"
```mermaid
%%{init: {'flowchart': {'defaultRenderer': 'elk'}}}%%
flowchart LR
    A[Start] --> B[Process 1]
    B --> C[Process 2]
    B --> D[Process 3]
    C --> E[End]
    D --> E
```
````

<div id="interactive-controls">
  ## Contrôles interactifs [#contrôles-interactifs]
</div>

Tous les diagrammes Mermaid incluent des contrôles interactifs de zoom et de déplacement. Par défaut, les contrôles apparaissent lorsque l'attribut height du diagramme dépasse 120 px.

* **Zoom avant/arrière** : Utilisez les boutons de zoom pour augmenter ou diminuer l'échelle du diagramme.
* **Déplacement** : Utilisez les flèches directionnelles pour vous déplacer dans le diagramme.
* **Réinitialiser la vue** : Cliquez sur le bouton de réinitialisation pour revenir à la vue initiale.

Les contrôles sont particulièrement utiles pour les grands diagrammes ou les diagrammes complexes qui ne tiennent pas entièrement dans la fenêtre d'affichage.

<div id="properties">
  ## Propriétés [#propriétés]
</div>

<ResponseField name="actions" type="boolean">
  Affiche ou masque les contrôles interactifs. Lorsqu’il est défini, ce paramètre remplace le comportement par défaut (contrôles affichés lorsque l’attribut height du diagramme dépasse 120 px).
</ResponseField>

<ResponseField name="placement" type="string" default="bottom-right">
  Position des contrôles interactifs. Options : `top-left`, `top-right`, `bottom-left`, `bottom-right`.
</ResponseField>

<div id="examples">
  ### Exemples [#exemples]
</div>

Masquer les contrôles sur un diagramme :

````mdx
```mermaid actions={false}
flowchart LR
    A --> B
```
````

Afficher les contrôles en haut à gauche :

````mdx
```mermaid placement="top-left"
flowchart LR
    A --> B
```
````

Combinez ces deux propriétés :

````mdx
```mermaid placement="top-left" actions={true}
flowchart LR
    A --> B
```
````

<div id="syntax">
  ## Syntaxe [#syntaxe]
</div>

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

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