Mermaid

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 disposition ELK

Mintlify prend en charge le moteur de disposition ELK (Eclipse Layout Kernel) 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 :

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.

Modifier les diagrammes dans l’éditeur

Dans l’éditeur web, chaque diagramme Mermaid dispose d’une barre d’outils permettant de zoomer, de réinitialiser la vue, d’afficher ou de masquer le code du diagramme et de définir les propriétés actions et placement. Pour modifier un diagramme volumineux, cliquez sur Open fullscreen dans la barre d’outils du diagramme. La vue plein écran affiche le code du diagramme à côté d’un aperçu en direct, ce qui vous permet de modifier le code et de voir le résultat au fil de la saisie. Zoomez avec les boutons de la barre d’outils, la molette de la souris ou les touches + et -. Appuyez sur 0 pour réinitialiser la vue et sur Esc pour fermer la vue plein écran.

Propriétés

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).

string

défaut:"bottom-right"

Position des contrôles interactifs. Options : top-left, top-right, bottom-left, bottom-right.

string

Classes CSS supplémentaires à appliquer au conteneur du diagramme.

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

Prise en main

Créer du contenu

Gérer votre site

Agent

Assistant

Contenu adapté aux agents

Recherche et SEO

Documenter des API

Intégrations

Référence

Prise en charge de la disposition ELK

Contrôles interactifs

Modifier les diagrammes dans l’éditeur

Propriétés

Exemples

Syntaxe

​Prise en charge de la disposition ELK

​Contrôles interactifs

​Modifier les diagrammes dans l’éditeur

​Propriétés

​Exemples

​Syntaxe

Prise en charge de la disposition ELK

Contrôles interactifs

Modifier les diagrammes dans l’éditeur

Propriétés

Exemples

Syntaxe