DotMDComment écrire un diagramme de flux Mermaid :une direction, des nœuds et des flèches.
Un diagramme de flux Mermaid est du texte dans un bloc de code : vous nommez les nœuds, les reliez par des flèches, et le diagramme est dessiné pour vous. Voici la syntaxe avec des exemples à copier.
macOS 14 ou ultérieur. La lecture est gratuite ; l’édition et les relectures se paient en une fois.
Réponse rapide
Ouvrez un bloc de code marqué mermaid, écrivez flowchart et une direction, puis listez les liens entre les nœuds. TD dessine de haut en bas et LR de gauche à droite. Une boîte s’écrit [text], une décision {text} et --> est une flèche.
```mermaid
flowchart LR
A[Write spec] --> B{Approved?}
B -->|Yes| C[Build]
B -->|No| A
```·
Direction
La première ligne nomme le type de diagramme et la direction. flowchart et l’ancien graph marchent tous deux.
TDouTB: de haut en basBT: de bas en hautLR: de gauche à droiteRL: de droite à gauche
Choisissez LR pour un court processus qui tient dans la largeur d’une page et TD pour un plus long.
Formes de nœuds
Un nœud est un identifiant, éventuellement suivi de son texte entre crochets. Les crochets déterminent la forme :
flowchart LR
a[Rectangle]
b(Rounded)
c([Stadium])
d[[Subroutine]]
e[(Database)]
f((Circle))
g{Decision}
h{{Hexagon}}
i[/Parallelogram/]Un nœud sans crochets n’affiche que son identifiant. Vous pouvez mentionner un nœud plus loin par son seul identifiant : la forme et le texte ne s’écrivent donc qu’une fois.
Liens et libellés
Les liens relient deux nœuds. La forme de la flèche indique le type de connexion :
flowchart LR
A --> B
B --- C
C -.-> D
D ==> E
E -->|label| F
F -- text --> G-->une flèche,---un trait sans pointe-.->une flèche en pointillés,==>une flèche épaisse-->|label|ou-- label -->met du texte sur le lienA --> B & Crelie un nœud à plusieurs, etA --> B --> Cenchaîne les liens
Ajoutez des tirets pour allonger un lien, par exemple ---->, quand un nœud a besoin de plus de place.
Sous-graphes
Un sous-graphe regroupe des nœuds dans une boîte titrée. Il commence par subgraph et se termine par end :
flowchart TD
subgraph client [Client]
A[Browser] --> B[App]
end
subgraph server [Server]
C[API] --> D[(Database)]
end
B --> CLe mot entre crochets est le titre, et le mot qui le précède est l’identifiant vers lequel vous pouvez faire un lien. Un sous-graphe peut contenir sa propre ligne direction LR, mais la direction est ignorée si un nœud à l’intérieur est relié à quelque chose à l’extérieur.
Un exemple complet
Pour tout assembler, voici un petit processus de publication avec une décision, un retour en arrière et une étape regroupée :
flowchart TD
A([Start]) --> B[Write the change]
B --> C{Tests pass?}
C -->|No| B
C -->|Yes| D[Open a pull request]
subgraph review [Review]
D --> E{Approved?}
E -->|No| B
end
E -->|Yes| F[(Merge)]Lisez-le de haut en bas : la forme de stade marque le début, les losanges sont des questions, les flèches libellées sont les réponses, et la boîte autour de deux nœuds est la revue. Nommer chaque décision comme une question et chaque flèche comme sa réponse rend un diagramme de flux lisible sans explication.
Commentaires et styles
Une ligne qui commence par %% est un commentaire et n’est pas dessinée. Pour colorer des nœuds, définissez une classe et appliquez-la :
flowchart TD
%% the happy path
A[Start]:::good --> B[Done]:::good
classDef good fill:#d4f4dd,stroke:#2d7a46Restez sobre côté style. La plupart des diagrammes de flux se lisent mieux avec moins de couleurs, et les styles peuvent différer entre les thèmes clair et sombre.
Erreurs courantes
- Le mot end en minuscules comme texte d’un nœud casse le diagramme. Écrivez
Endou mettez le texte entre guillemets. - Un identifiant de nœud qui commence par o ou x juste après un lien, comme
A---oB, est lu comme un lien à cercle ou à croix. Ajoutez une espace ou mettez-le en majuscule. - Des caractères spéciaux dans un libellé. Les crochets, les parenthèses et les deux-points demandent des guillemets doubles :
A["Save (draft)"]. - Pas de première ligne. Sans
flowchart TD, rien n’est dessiné. - Trop de nœuds. Un diagramme de flux de trente boîtes est difficile à lire. Découpez-le ou utilisez des sous-graphes.
Quand un diagramme échoue, Mermaid affiche un message d’erreur, et le texte reste dans votre fichier pour être corrigé.
Le dessiner
GitHub dessine les blocs Mermaid dans les fichiers Markdown, et DotMD aussi : hors ligne, en thème clair ou sombre pour s’accorder à la page. Dans l’éditeur, Insert → Diagram place dans le document un diagramme de flux qui fonctionne, et l’aperçu se redessine pendant que vous tapez. Le même guide couvre les diagrammes de séquence, de classes, d’états, ER et de Gantt. Pour la syntaxe des délimiteurs elle-même, voir les blocs de code en Markdown.
Questions sur les diagrammes de flux Mermaid
Comment écrire un diagramme de flux dans Mermaid ?
Ouvrez un bloc de code mermaid avec flowchart TD (ou LR), puis ajoutez des liens comme A[Start] --> B[End], un par ligne.
Quelle est la différence entre TD et LR dans un diagramme de flux Mermaid ?
TD (top down, comme TB) dessine le diagramme de haut en bas, et LR de gauche à droite.
Comment ajouter du texte sur une flèche dans Mermaid ?
Mettez-le entre barres verticales après la flèche, A -->|Yes| B, ou entre les tirets, A -- Yes --> B.
Pourquoi mon diagramme de flux Mermaid affiche-t-il une erreur ?
Les causes courantes sont un end en minuscules dans un libellé, une première ligne manquante ou des caractères spéciaux dans un libellé sans guillemets doubles.