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

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