mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
locadex-agent[bot]
90ce143f67
Co-authored-by: locadex-agent[bot] <217277504+locadex-agent[bot]@users.noreply.github.com>
119 lines
3.4 KiB
Plaintext
119 lines
3.4 KiB
Plaintext
---
|
||
title: "Mermaid"
|
||
description: "Créez des organigrammes, des diagrammes et des visualisations avec la syntaxe Mermaid."
|
||
keywords: ["Mermaid", "organigrammes", "diagrammes"]
|
||
---
|
||
|
||
[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 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="interactive-controls">
|
||
## 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
|
||
</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
|
||
</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
|
||
</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
|
||
```
|
||
````
|