Table des matières
Table des matières
En vous inscrivant, vous acceptez les Conditions d’utilisation et la Politique de confidentialité de Miro.
Syntaxe des diagrammes de flux Mermaid : le guide complet avec exemples
Points clés : Un diagramme de flux Mermaid est un diagramme que vous écrivez sous forme de texte au lieu de le dessiner à la main. Vous tapez quelque chose comme A --> B, et Mermaid affiche deux boîtes reliées. Ce guide couvre chaque élément de la syntaxe, des formes de nœuds de base au style et aux événements de clic, ainsi que la façon de transformer ce code en un diagramme réel et 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, à éviter que les flèches ne se chevauchent et à soigner les couleurs. Vous l’exportez, la déposez dans le wiki, puis passez à autre chose. Trois semaines plus tard, le processus a changé et personne n’a mis à jour l’illustration. Désormais, la « source de vérité » est une capture d’écran d’un élément qui n’est plus valable depuis le dernier sprint.
Traiter les diagrammes comme des images plutôt que comme du code pose problème. Une image ne peut pas être comparée (diff), gérée dans un système de contrôle de version, ni être générée par un agent IA qui vient de lire votre codebase. Un diagramme de flux Mermaid, lui, le permet.
Qu’est‑ce qu’un diagramme de flux Mermaid ?
Un diagramme de flux Mermaid se définit à l’aide d’une syntaxe en texte brut plutôt que sur un canevas en glisser‑déposer. Vous écrivez 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 de création de diagrammes qui couvre aussi les diagrammes de séquence, les diagrammes de classes, les frises chronologiques et bien d’autres types de diagrammes.
Mermaid a connu un regain d’intérêt récemment pour une raison simple : les modèles d’IA rédigent sa syntaxe avec aisance. Demandez à un agent de codage IA de schématiser votre système, et il y a de fortes chances qu’il vous fournisse de la syntaxe Mermaid, car c’est le format qu’il a le plus pratiqué. Le texte est aussi plus facile à traiter pour un modèle de langage qu’une image en deux dimensions, de sorte qu’un agent peut effectuer une modification précise de votre diagramme au lieu de tout redessiner à partir de zéro.
Syntaxe de base : direction et déclaration
Chaque diagramme de flux Mermaid commence par un mot-clé d’orientation. 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) sont beaucoup plus lisibles 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 comptez partager.
Formes des nœuds : utiliser la syntaxe des crochets
Les crochets entourant le texte d’un nœud déterminent la forme qui sera affichée. 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 particuliers qu’il est utile de connaître. Utilisez un rectangle [Text] pour une étape de processus standard, une forme en stade ([Text]) pour un point de début ou de fin, et une sous-routine [[Text]] lorsqu’un nœud correspond en réalité à l’appel d’un processus distinct et défini. 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 du flux.
Mermaid propose quelques formes supplémentaires à 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 dans le libellé :
flowchart TDH{Rhombus} I{<!-- -->{Hexagon}} J["s3/"] K["s4!"] L(("s5?"))Liens et flèches : reliez vos nœuds
Une flèche montre comment une étape mène à la suivante. Mermaid vous propose plusieurs variantes selon que la connexion est plus ou moins solide, ou qu’elle est 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:#6631d7Chacun indique quelque chose de différent : --> est une flèche solide standard, --- est une ligne solide sans pointe 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 signaler un chemin critique. Pour étiqueter une flèche, utilisez soit -->|label| soit -- label -->. Les deux ont le même effet. Et linkStyle, en ciblant une flèche selon sa position dans le diagramme (0 pour la première, 1 pour la seconde, etc.), vous permet de recolorier une connexion spécifique plutôt que toutes les flèches du tableau.
Vous pouvez également 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 remplace quatre instructions distinctes de flèches. C’est un détail, mais elle rend le code d’un diagramme chargé plus lisible.
Sous-graphes : regroupement et imbrication
Les systèmes réels comportent des sections : un frontend, un backend, une étape de paiement qui regroupe en réalité trois étapes. Les sous-graphes permettent de regrouper des nœuds liés et même d’attribuer à ce conteneur sa propre direction de flux interne.
flowchart TB subgraph frontend direction LR UI --> API end subgraph backend API --> DB end frontend --> backendDeux points à retenir ici. D’abord, le sens à l’intérieur d’unsubgraph prime sur celui du diagramme de flux parent, si bien que votre frontend peut s’organiser de gauche à droite alors que le diagramme global suit un sens de haut en bas. Ensuite, un subgraph peut être lié comme n’importe quel autre nœud, ce qui explique comment frontend --> backend fonctionne ci‑dessus, même si les deux côtés sont des boîtes contenant d’autres boîtes.
Thèmes et directives init
Si vous voulez que les couleurs d’un diagramme de flux correspondent à 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 figurer sur la toute première ligne de votre 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 est fourni avec cinq thèmes intégrés : default, dark, forest, neutral et base. Seul le thème base donne accès à l’objet themeVariables complet, donc si vous préférez 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 connecter un nœud pour ouvrir un lien, exécuter une fonction JavaScript ou afficher une infobulle 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 d’infobulle « Tooltip ». Le nœud C ouvre un lien relatif dans le même onglet avec son propre texte d’infobulle. Vous verrez ce schéma le plus souvent dans la documentation interne, lorsque un nœud du diagramme renvoie directement au runbook ou au ticket qu’il représente.
Style : couleurs, classes et étiquettes Markdown
Les 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 puis de le réutiliser dans l’ensemble de votre diagramme, ce qui devient important dès que votre diagramme de flux 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 affecter une classe de deux manières : en écrivant class A,B error sur une ligne à part, ou en ligne avec l’abréviation D:::success. Les deux fonctionnent de la même façon. Choisissez celle qui rend votre code le plus lisible.
Pour des libellés plus riches, Mermaid prend également en charge le formatage markdown basique à l’intérieur des nœuds et des liens, à condition de désactiver d’abord les libellés 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 : un exemple complet
Ce flux de connexion utilise la plupart des éléments abordé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 combien peu de choses ici sont nouvelles. Ce sont les mêmes formes, flèches, le subgraph et le schéma classDef présentés dans les sections précédentes, combinés pour créer quelque chose que vous utiliseriez dans le cadre d’un travail concret. La seule forme nouvelle ici est Login[/Enter creds/], un parallélogramme que la convention Mermaid utilise souvent pour une étape de saisie.
Consultez tous les exemples de syntaxe dans notre Fiche mémo Mermaid : diagramme de flux.
Ce qui rend les diagrammes de flux Mermaid encore meilleurs : Miro
Écrire le code ne représente que la moitié du travail. Il faut encore que quelqu’un le consulte, remette en cause 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 la connexion entre le code et l’image se perdait dès que quelqu’un y intervenait.
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 d’IA comme Claude Code d’en générer un directement à partir de votre codebase : il s’affiche ensuite sous forme de formes Miro réelles et modifiables, et non d’une image statique. Le code Mermaid reste la source de référence : modifiez le diagramme visuellement et le code sous-jacent se met à jour en conséquence, de sorte que les deux ne divergent jamais.
Cela a son importance pour plusieurs raisons. Votre équipe peut travailler sur le diagramme ensemble plutôt que d’en contourner l’usage : commenter directement un nœud au lieu d’ouvrir une discussion parallèle dans Slack, et tout le monde reste dans le contexte de la décision. Parce que le diagramme est toujours du code Mermaid sous le capot, un agent d’IA peut le lire, apporter une modification ciblée ou rédiger un document, par exemple un Architecture Decision Record (ADR), à partir des commentaires de votre équipe, prêt à être ouvert en tant que pull request. Et vous n’êtes pas prisonnier de la mise en page de quelqu’un d’autre. Modifiez la direction du flux, ajustez les espacements ou ouvrez le panneau de code pour modifier la syntaxe à la main, le tout sans quitter le tableau.
Aujourd’hui, les diagrammes de flux bénéficient d’une expérience d’édition visuelle complète. Les diagrammes de séquence, de classes et entité-relation s’affichent aussi en formes natives, mais considérez-les pour l’instant comme orientés ’code-first’, jusqu’à ce que l’édition visuelle les prenne entièrement en charge.
Créer un diagramme de flux Mermaid dans Miro
- Ouvrez la barre de création, sélectionnez Formats, puis Diagram et cliquez sur Créer avec du code.
- Collez la syntaxe Mermaid que vous avez déjà, démarrez à partir 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 s’afficher comme des formes natives Miro, avec une mise en page automatique, pour ne pas avoir à déplacer manuellement les cases afin d’éviter que les lignes ne se croisent.
- Ouvrez le diagramme en mode immersif pour le modifier 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.
- Une fois terminé, exportez-le en tant qu’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, démarrez à partir d’un modèle et apprenez la syntaxe en modifiant quelque chose qui fonctionne déjà.
Autres exemples de diagrammes de flux Mermaid à essayer
Vous n’êtes pas obligé d’écrire votre premier diagramme de flux Mermaid depuis zéro. Chacun de ces modèles est un véritable tableau Mermaid que vous pouvez ouvrir, consulter et modifier, pour apprendre la syntaxe en changeant quelque chose qui fonctionne déjà plutôt que 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 Mermaid. Il passe en revue la syntaxe au rythme de ce guide : mots‑clés de direction, formes de nœuds, types de flèches, et quelques exemples stylisés, chaque exemple étant accompagné de son diagramme rendu juste à côté du code. Comme il s’agit d’un tableau vivant et non d’une page de référence statique, vous pouvez modifier le libellé d’un nœud ou changer 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 de mémoriser un tableau de syntaxe.
Flux d’authentification utilisateur avec code Mermaid
Cette version 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 divise en un parcours réussi menant au tableau de bord ou en un parcours d’échec renvoyant vers une nouvelle tentative. Il est proche dans l’esprit de l’exemple complet présenté plus haut dans ce guide, et c’est un bon modèle à utiliser si vous documentez n’importe quel flux d’authentification, d’inscription ou de processus d’approbation comportant une étape de validation au milieu. Remplacez les libellés des nœuds et la logique de branchement, et vous obtiendrez votre propre diagramme d’authentification sans modifier la mise en page.
Architecture technique des microservices
C’est le modèle à privilégier dès que votre diagramme dépasse un simple flux linéaire. Il est construit autour des sous‑graphiques, la même technique de regroupement présentée précédemment dans ce guide, afin que vous puissiez regrouper les services, API et systèmes de stockage de données dans des sections clairement identifiées, plutôt que de laisser chaque nœud flotter 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ù il faut montrer comment plusieurs services interagissent réellement entre eux, et pas seulement ce que fait chacun isolément.
Ce modèle cartographie l’ensemble du processus e‑commerce : la navigation dans le catalogue, le traitement des paiements, l’exécution back‑end et les e‑mails transactionnels automatisés.
Choisissez l’un de ces modèles, remplacez les étapes par les vôtres, et vous aurez un diagramme de flux opérationnel en quelques minutes, plutôt que de partir d’un canevas vide.
FAQ
Qu’est-ce qu’un diagramme de flux Mermaid ? Un diagramme de flux Mermaid est un diagramme de flux défini en texte brut en utilisant la syntaxe de Mermaid plutôt que dessiné à la main. Vous décrivez les nœuds et les flèches qui les relient, et Mermaid génère automatiquement le diagramme avec la mise en page et les formes incluses.
Comment créer un diagramme de flux avec Mermaid ? Commencez par un mot‑clé de direction, par exemple flowchart TD, puis ajoutez des nœuds et des flèches, par exemple A[Start] --> B[End]. Ajoutez des formes avec des crochets, des étiquettes sur les flèches avec -->|label|, et regroupez les étapes liées avec subgraph.
Puis-je mettre en forme 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 Construire avec du code. Collez votre syntaxe Mermaid ou demandez à un agent IA de la générer, et Miro la rend sous forme de diagramme natif modifiable que vous pouvez mettre en forme, commenter et partager.
Que propose Miro pour les diagrammes de flux Mermaid ? Structured Diagrams with Mermaid de Miro rend le code Mermaid sous forme de 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 restituer le contenu via le serveur MCP de Miro.
À vous de jouer
La façon la plus rapide d’apprendre la syntaxe des diagrammes de flux Mermaid est d’en écrire un et d’observer son rendu. Ouvrez l’éditeur de diagramme Mermaid dans Miro, collez l’un des exemples ci‑dessus, et commencez à le modifier jusqu’à ce qu’il ressemble à votre processus réel.
Pour aller plus loin
Débutez votre nouveau projet en quelques secondes
