Passer au contenu principal
Mermaid 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.
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
```

​
Prise en charge de la mise en page ELK

Mintlify prend en charge le moteur de mise en page ELK (Eclipse Layout Kernel) pour les diagrammes Mermaid. ELK optimise la disposition pour réduire les chevauchements et améliorer la lisibilité, ce qui est utile pour les diagrammes volumineux ou complexes. Pour utiliser la mise en page ELK dans vos diagrammes Mermaid, ajoutez la directive %%{init: {'flowchart': {'defaultRenderer': 'elk'}}}%% au début de votre diagramme :
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
```

​
Contrôles interactifs

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.

​
Propriétés

​
actions
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).
​
placement
string
défaut:"bottom-right"
Position des contrôles interactifs. Options : top-left, top-right, bottom-left, bottom-right.

​
Exemples

Masquer les contrôles sur un diagramme : 
```mermaid actions={false}
flowchart LR
    A --> B
```
Afficher les contrôles en haut à gauche : 
```mermaid placement="top-left"
flowchart LR
    A --> B
```
Combinez ces deux propriétés : 
```mermaid placement="top-left" actions={true}
flowchart LR
    A --> B
```

​
Syntaxe

Pour créer un diagramme Mermaid, écrivez la définition de votre diagramme dans un code block Mermaid. 
```mermaid
// Votre code de diagramme mermaid ici
```