Table des matières
Table des matières
Syntaxe des diagrammes de flux Mermaid : guide complet avec exemples
À retenir : Un diagramme de flux Mermaid est un diagramme que vous écrivez sous forme de texte plutôt que de dessiner à la main. Vous tapez quelque chose comme A --> B, et Mermaid génère deux blocs reliés. Ce guide couvre chaque élément de la syntaxe : des formes de nœud de base au style et aux événements de clic, et explique comment transformer ce code en un véritable diagramme modifiable dans Miro.
Votre diagramme de flux est déjà obsolète
Vous savez comment ça se passe. Vous passez 20 minutes dans un outil de diagrammes à aligner les boîtes, à empêcher les flèches de se chevaucher et à soigner les couleurs. Vous l’exportez, l’ajoutez au wiki et passez à autre chose. Trois semaines plus tard, le processus a changé et personne n’a mis à jour l’image. Désormais, la « source de vérité » est une capture d’écran de quelque chose qui n’est plus vrai depuis le dernier sprint.
C’est le problème de considérer les diagrammes comme des images plutôt que comme du code. Une image ne peut pas être soumise à un diff, mise sous contrôle de version ni générée par un agent IA qui vient de lire votre codebase. Un diagramme de flux Mermaid le peut.
Qu’est‑ce qu’un diagramme de flux Mermaid ?
Un diagramme de flux Mermaid est un diagramme que vous définissez à l’aide d’une syntaxe en texte brut plutôt que sur un canevas par glisser‑déposer. Vous rédigez quelques lignes décrivant vos nœuds et leurs connexions, et Mermaid génère automatiquement le diagramme, avec la mise en page, les flèches et les formes.
Cela fait partie de Mermaid, une syntaxe open source pour les diagrammes qui couvre également les diagrammes de séquence, les diagrammes de classes, plannings et bien d’autres types de diagrammes. Les diagrammes de flux sont les plus courants, et ce pour une bonne raison : presque tous les processus, arbres de décision ou workflows peuvent se représenter sous la forme de nœuds et de connexions.
Mermaid a connu un regain d’intérêt récemment pour une raison simple : les modèles d’IA l’écrivent avec aisance. Demandez à un agent de codage IA de générer un diagramme de votre système et il y a de fortes chances qu’il vous fournisse la syntaxe Mermaid, car c’est le format qu’il a le plus pratiqué. Le texte est aussi plus facile à analyser pour un modèle de langage qu’une image bidimensionnelle, ce qui permet à l’agent d’apporter une modification précise à votre diagramme au lieu de tout redessiner depuis zéro.
Syntaxe de base : direction et déclaration
Chaque diagramme de flux Mermaid commence par un mot-clé de direction. Cette seule ligne détermine si votre diagramme se lit de haut en bas ou de gauche à droite, et c’est la première chose que vous écrirez à chaque fois.
- TD ou TB : De haut en bas
- BT : De bas en haut
- LR : De gauche à droite
- RL : De droite à gauche
flowchart TD A --> B B --> C style A fill:#fff6b6 style B fill:#fff6b6 style C fill:#fff6b6
flowchart LR Start --> Medium Medium --> End style A fill:#fff6b6 style B fill:#fff6b6 style C fill:#fff6b6Les nœuds nommés et descriptifs (Start, Medium, End) se lisent bien mieux que des lettres isolées dès que votre diagramme dépasse quelques étapes. Utilisez des lettres pour des croquis rapides et passez à de vrais libellés pour tout ce que vous prévoyez de partager.
Formes des nœuds : la syntaxe des crochets détermine la forme
Les crochets entourant le texte d’un nœud déterminent la forme qu’il prendra. Vous ne choisissez pas une forme dans un menu. Il suffit de taper les bons symboles, et Mermaid s’occupe du reste.
flowchart TD A[Rectangle] B(Rounded) C([Stadium]) D[[Subroutine]] E[(Cylindrical)] F((Circle)) G>Asymmetric]Certaines de ces formes correspondent à des cas d’utilisation spécifiques qu’il est utile de connaître. Utilisez un rectangle [Text] pour une étape de processus standard, une forme capsule ([Text]) pour un point de départ ou d’arrivée, et une sous-routine [[Text]] lorsqu’un nœud correspond en réalité à l’appel d’un processus défini séparément. Privilégiez un cylindre [(Text)] pour représenter une base de données ou un stockage de données, et un cercle ((Text)) pour un point unique et autonome dans le flux.
Mermaid couvre quelques autres formes à connaître, notamment le losange pour les décisions et l’hexagone pour les étapes de préparation. Les caractères spéciaux comme les barres obliques ou les points d’interrogation doivent être entourés de guillemets pour l’étiquette :
flowchart TDH{Rhombus} I{<!-- -->{Hexagon}} J["s3/"] K["s4!"] L(("s5?"))Liens et flèches : reliez vos nœuds
Une flèche indique au lecteur comment une étape mène à la suivante, et Mermaid propose plusieurs variantes selon que la connexion est plus ou moins forte ou facultative.
flowchart tdA --> B %% solid arrowA --- B %% solid lineA -.-> B %% dottedA ==> B %% thickA -->|label| B %% with textA -- text --> B %% alt labelstyle A fill:#e7e7e7style B fill:#c6dcff linkStyle 5 stroke:#bd0a0a linkStyle 4 color:#bd0a0a,stroke:#6631d7Chacune signale quelque chose de différent : --> est une flèche pleine standard, --- est une ligne pleine sans tête de flèche pour une association plus lâche, -.-> est une flèche en pointillés pour des chemins optionnels ou asynchrones, et ==> est une flèche épaisse pour indiquer un chemin critique. Pour étiqueter une flèche, utilisez soit -->|label| soit -- label -->. Les deux font la même chose. Et linkStyle, en ciblant une flèche par sa position dans le diagramme (0 pour la première, 1 pour la deuxième, etc.), vous permet de recolorer une connexion précise plutôt que toutes les flèches du tableau.
Vous pouvez aussi relier plusieurs nœuds sur une seule ligne au lieu d’écrire chaque paire :
flowchart tdA & B --> C & D %% multistyle A fill:#fff6b6 style B fill:#c6dcff style C fill:#edfaf2 style D fill:#ffc6c6Cette seule ligne fait le même travail que quatre instructions de flèches distinctes. C’est un détail, mais il rend le code d’un diagramme dense plus lisible.
Sous-graphes : regrouper et imbriquer
Les systèmes réels ont des sections : un frontend, un backend, une étape de paiement qui est en réalité trois étapes déguisées en une. Les sous-graphes permettent de regrouper des nœuds liés dans un bloc et même d’y définir une direction de flux interne.
flowchart TB subgraph frontend direction LR UI --> API end subgraph backend API --> DB end frontend --> backendDeux points à retenir ici. Premièrement, la direction à l’intérieur d’un sous-graphe remplace celle du diagramme de flux parent, si bien que votre frontend peut s’écouler de gauche à droite alors que le diagramme global va de haut en bas. Deuxièmement, un sous-graphe peut être relié comme n’importe quel autre nœud, ce qui explique pourquoi frontend --> backend fonctionne ci‑dessus même si les deux côtés sont des boîtes contenant d’autres boîtes.
Thématisation et directives %%{init}%%
Si vous voulez que les couleurs d’un diagramme de flux reflètent votre marque, la gravité d’un incident ou simplement vos préférences, une directive %%{init}%% vous permet de les définir avant de dessiner le moindre nœud. Elle doit se trouver sur la toute première ligne du diagramme.
%%{init: { "theme": "base", "themeVariables": { "primaryColor": "#ADF0C7", "primaryTextColor": "#067429", "edgeLabelBackground": "#FFFEEE", "lineColor": "#36352F" }}}%%flowchart LR A[Start] --> B{Choice} B -->|yes| C[Done] B -->|no| D[Retry]Mermaid propose cinq thèmes intégrés : default, dark, forest, neutral et base. Seul le thème base donne accès à l’objet themeVariables dans son intégralité ; si vous souhaitez des couleurs personnalisées plutôt qu’une palette prédéfinie, commencez par ce thème.
Interaction : événements de clic et callbacks
Un diagramme de flux n’a pas à être statique. Vous pouvez configurer un nœud pour ouvrir un lien, exécuter une fonction JavaScript ou afficher une info-bulle au survol, ce qui est pratique lorsque votre diagramme sert aussi de documentation.
flowchart TD A[Visit Miro] B[Hover Tooltip] C[Open Docs] click A "https://miro.com" _blank click B callback "Tooltip" click C href "/docs" "Open docs"%% JS callback%% <script>%% const callback = (id) =>%% alert('Clicked ' + id);%% </script>Le nœud A ouvre un lien dans un nouvel onglet. Le nœud B déclenche une fonction JavaScript nommée callback et affiche le texte au survol « Tooltip ». Le nœud C ouvre un lien relatif dans l’onglet courant, avec son propre texte au survol. On retrouve ce schéma surtout dans la documentation interne, lorsqu’un nœud du diagramme renvoie directement au runbook ou au ticket qu’il représente.
Style : couleurs, classes et libellés Markdown
Des styles ponctuels conviennent pour un seul nœud, mais ils deviennent vite répétitifs. classDef vous permet de définir un style une fois et de le réutiliser dans l’ensemble de votre diagramme de flux, ce qui s’avère utile dès que votre diagramme comporte plus de cinq ou six nœuds.
flowchart LR A[Node A] B[Node B] C[Node C] D[Node D] --> E[Node E] %% Inline style style A fill:#f9f,stroke:#333,stroke-width:2px %% Reusable class definition classDef error fill:#fdd,stroke:#c00,color:#900 classDef success fill:#dfd,stroke:#0a0 %% Assign class class A,B error class C success %% Shorthand class assignment D:::success --> E:::errorVous pouvez attribuer une classe de deux manières : avec class A,B error sur sa propre ligne, ou en ligne avec le raccourci D:::success. Les deux font la même chose. Choisissez celle qui rend votre code le plus lisible.
Pour des libellés plus riches, Mermaid prend également en charge le formatage Markdown de base à l’intérieur des nœuds et des liaisons, à condition de désactiver d’abord les étiquettes HTML :
---config: htmlLabels: false---flowchart LRsubgraph "One" a("`The **cat** in the hat`") -- "edge label" --> b{<!-- -->{"`The **dog** in the hog`"}}endsubgraph "`**Two**`" c("`The **cat** in the hat`") -- "`Bold **edge label**`" --> d("The dog in the hog")endAssembler le tout : exemple complet
Ce flux de connexion réunit la plupart des éléments présentés ci‑dessus dans un seul diagramme : formes, sous‑graphes, classes de style, une boucle de réessai et un événement de clic.
flowchart TD Start((Start)) --> Login[/Enter creds/] Login --> Check{Valid?} Check -->|yes| Home[Dashboard]:::ok Check -->|no| Err[Show error]:::bad Err -.retry.-> Login Home ==> Logout([Logout]) subgraph auth direction LR Login --> Check end classDef ok fill:#dfd,stroke:#0a0 classDef bad fill:#fdd,stroke:#c00 click Home "/dashboard" _selfRemarquez le peu de nouveautés. Il s’agit des mêmes formes, flèches, sous-graphes et du même schéma classDef que dans les sections précédentes, réunis dans un diagramme utilisable en contexte professionnel. La seule forme nouvelle ici est Login[/Enter creds/], un parallélogramme que la convention Mermaid utilise souvent pour une étape de saisie. La véritable maîtrise de l’écriture en Mermaid ne consiste pas à mémoriser chaque symbole. Il s’agit de savoir quel petit nombre de motifs couvre la plupart de vos diagrammes.
Consultez tous les exemples de syntaxe dans notre fiche mémo Mermaid sur les diagrammes de flux.
Ce qui rend les diagrammes de flux Mermaid encore meilleurs : Miro
Écrire le code n’est que la moitié du travail. Il faut encore que quelqu’un l’examine, remette en question une décision et le mette à jour au fur et à mesure que le processus évolue. C’est généralement là que Mermaid butait : on générait un diagramme, on déposait une capture d’écran quelque part, et le lien entre le code et l’image se rompait dès que quelqu’un modifiait le diagramme.
Miro comble cette lacune avec Structured Diagrams with Mermaid, actuellement en bêta publique. Collez la syntaxe Mermaid sur un tableau Miro, ou demandez à un agent IA comme Claude Code d’en générer un directement depuis votre codebase, et il est rendu comme des formes Miro réelles et modifiables, et non comme une image statique. Le code Mermaid reste la source de vérité : modifiez le diagramme visuellement et le code sous-jacent se met à jour en conséquence, de sorte que les deux ne divergent jamais.
Cela importe pour plusieurs raisons. Votre équipe peut travailler sur le diagramme ensemble plutôt qu’à côté : commenter directement une forme au lieu d’ouvrir un fil parallèle sur Slack, et tout le monde reste dans le contexte de la décision. Parce que le diagramme reste du code Mermaid sous le capot, un agent IA peut le lire, apporter une modification ciblée ou rédiger un document de type architecture decision record à partir des commentaires de votre équipe, prêt à être soumis en tant que pull request. Et vous n’êtes pas coincé avec la mise en page de quelqu’un d’autre. Modifiez la direction du flux, ajustez l’espacement ou ouvrez le panneau de code pour modifier la syntaxe à la main, le tout sans quitter le tableau.
Les diagrammes de flux bénéficient dès aujourd’hui d’une expérience d’édition visuelle complète. Les diagrammes de séquence, de classes et entité-relation s’affichent aussi comme des formes natives, mais considérez-les comme axés sur le code pour l’instant, jusqu’à ce que l’édition visuelle les rattrape.
Créer un diagramme de flux Mermaid dans Miro
- Ouvrez la barre de création, sélectionnez Formats, puis Diagramme, et cliquez sur Créer avec du code.
- Collez la syntaxe Mermaid que vous avez déjà, partez d’un modèle, ou demandez à votre agent IA de générer un diagramme de flux directement depuis votre codebase ou à partir d’un ensemble d’exigences.
- Regardez-le se transformer en formes Miro natives avec un agencement automatique, afin de ne pas avoir à déplacer manuellement les boîtes pour éviter que les lignes se croisent.
- Passez en mode immersif pour modifier le diagramme directement : cliquez sur une forme pour changer son badge ou son style, ajustez la direction du flux, ou ouvrez le panneau de code et modifiez la syntaxe Mermaid à la main.
- Invitez votre équipe à commenter directement le diagramme, là où la décision se prend.
- Quand vous avez terminé, exportez-le en image, copiez le code Mermaid dans votre dépôt, ou laissez votre agent lire le diagramme et les commentaires de votre équipe via le serveur MCP de Miro.
Si vous connaissez déjà Mermaid, vous pouvez commencer à taper directement dans le panneau de code. Si ce n’est pas le cas, partez d’un modèle et apprenez la syntaxe en modifiant quelque chose qui fonctionne déjà.
Essayez ces exemples de diagrammes de flux Mermaid
Vous n’avez pas à créer votre premier diagramme de flux Mermaid à partir de zéro. Chacun de ces modèles est un vrai tableau Mermaid que vous pouvez ouvrir, consulter et modifier, vous apprenez la syntaxe en changeant quelque chose qui fonctionne déjà au lieu de rester face à un canevas vide.
Introduction aux diagrammes Mermaid dans Miro
Ouvrez celui-ci en premier si vous n’avez jamais écrit une ligne de code Mermaid. Il parcourt la syntaxe au même rythme que ce guide : les mots-clés de direction, les formes de nœuds, les types de flèches et quelques exemples stylisés, chacun accompagné de son diagramme rendu juste à côté du code. Comme il s’agit d’un tableau interactif et non d’une page de référence statique, vous pouvez modifier le libellé d’un nœud ou remplacer une forme et voir le rendu se mettre à jour immédiatement. Ce retour immédiat est le moyen le plus rapide d’apprendre ce que fait réellement chaque symbole, plutôt que d’apprendre par cœur un tableau de syntaxe.
Flux d’authentification utilisateur avec le code Mermaid
Cet exemple vous fournit un flux de connexion opérationnel déjà prêt : un utilisateur saisit ses identifiants, l’application les vérifie, et le diagramme se sépare en un chemin de réussite vers le tableau de bord ou en un chemin d’échec ramenant à une nouvelle tentative.
Architecture technique des microservices
C’est le modèle à privilégier lorsque votre diagramme dépasse un simple flux linéaire. Il est construit autour de sous-graphes, la même technique de regroupement abordée plus haut dans ce guide, ce qui vous permet d’encadrer les services, les API et les stockages de données dans des sections clairement identifiées au lieu de laisser tous les nœuds coexister sans structure dans un diagramme plat. C’est un point de départ solide pour les documents d’onboarding, les revues d’architecture ou tout diagramme où vous devez montrer comment plusieurs services communiquent réellement entre eux, et pas seulement ce que fait chacun isolément.
Ce modèle cartographie l’ensemble du processus e-commerce : navigation dans le catalogue, traitement des paiements, exécution côté serveur et e-mails transactionnels automatisés.
Choisissez l’un de ces modèles, remplacez les étapes par les vôtres et obtenez un diagramme de flux fonctionnel en quelques minutes, sans partir d’un canevas vide.
FAQ
Qu’est-ce qu’un diagramme de flux Mermaid ? Un diagramme de flux Mermaid est un diagramme défini en texte brut avec la syntaxe de Mermaid, plutôt que d’être dessiné à la main. Vous décrivez les nœuds et les flèches qui les relient, et Mermaid génère automatiquement le diagramme, en prenant en charge la mise en page et les formes.
Comment créer un diagramme de flux avec Mermaid ? Commencez par un mot-clé d’orientation comme flowchart TD, puis ajoutez des nœuds et des flèches, par exemple A[Start] --> B[End]. Définissez des formes avec des crochets, ajoutez des étiquettes sur les flèches avec -->|label|, et regroupez les étapes liées avec subgraph.
Peut-on styliser un diagramme de flux Mermaid ? Oui. Utilisez le style en ligne pour des modifications ponctuelles, classDef et class pour des styles réutilisables sur plusieurs nœuds, et la directive %%{init}%% en tête de votre diagramme pour définir un thème et des couleurs personnalisées.
Comment utiliser les diagrammes de flux Mermaid dans Miro ? Ouvrez la barre de création, choisissez formats, puis Diagramme, et sélectionnez Créer avec du code.
Que propose Miro pour les diagrammes de flux Mermaid ? Structured Diagrams with Mermaid de Miro rend le code Mermaid en formes réelles et modifiables, maintient le code et le diagramme synchronisés lorsque l’un ou l’autre change, et permet aux agents IA de générer des diagrammes ou d’en lire le contenu via le serveur MCP de Miro.
À vous de jouer
Le moyen le plus rapide d’apprendre la syntaxe des diagrammes de flux Mermaid est d’en écrire un et d’en regarder le rendu. Ouvrez léditeur de diagramme Mermaid dans Miro, collez l’un des exemples ci‑dessus, puis commencez à le modifier jusqu’à ce qu’il reflète votre processus réel.
Pour aller plus loin
Débutez votre nouveau projet en quelques secondes
