Flowchart (logigramme)
Cartographiez n’importe quel processus, décision ou algorithme
Qu’est-ce qu’un Flowchart (logigramme) ?
Un flowchart montre les étapes d’un processus et les décisions qui les relient. C’est le diagramme le plus universel : parcours d’onboarding, algorithmes, circuits de validation, guides de dépannage — s’il y a des étapes et des choix, un flowchart peut le montrer.
Le flowchart apparaît partout où un processus doit être validé avant d’être construit : RFC, runbooks, documents d’onboarding, scripts de support. Sa force, ce sont les embranchements — tous les chemins qu’une demande peut prendre, y compris ceux que personne n’avait prévus. Sa faiblesse, c’est le temps et la responsabilité : un flowchart dit ce qui vient ensuite, jamais qui le fait ni combien de temps cela prend. Ajoutez un subgraph par équipe, ou changez de type de diagramme.
Exemple en direct
flowchart TD
A([Start]) --> B{Payment valid?}
B -->|Yes| C[Reserve stock]
B -->|No| D[Show error]
C --> E{In stock?}
E -->|Yes| F[Confirm order]
E -->|No| G[Notify customer]
F --> H([Done])
D --> H
G --> HQuand l’utiliser
Erreurs fréquentes
Un nœud nommé end casse l’analyse
Le mot end ferme un subgraph : un nœud qui l’utilise comme identifiant produit une erreur d’analyse, pas un avertissement. Donnez un autre identifiant au nœud et mettez le mot dans le libellé : done([End]).
Parenthèses non protégées dans un libellé
A[Pay (card)] échoue, parce que Mermaid lit la parenthèse interne comme un autre délimiteur de forme. Entourez tout le libellé de guillemets droits — A["Pay (card)"] — ce qui règle aussi le cas des dièses et des points-virgules.
Une flèche annule la direction du subgraph
La ligne direction LR d’un subgraph est ignorée dès qu’un lien part d’un de ses nœuds ou y arrive : le cadre reprend la direction du graphe parent. Visez plutôt l’identifiant du subgraph, et la direction interne survit.
Syntaxe de base
flowchart TD
A[Rectangle] --> B{Decision}
B -->|Yes| C([Rounded])
B -->|No| D[(Database)]flowchart LRLa première ligne fixe le sens de lecture : TD ou TB de haut en bas, LR de gauche à droite, BT et RL en sens inverse. Une longue chaîne d’étapes se lit mieux en LR.
B -->|Yes| C B -.->|timeout| DUn libellé entre barres verticales explique pourquoi une branche est empruntée. Les flèches pointillées marquent les chemins exceptionnels, les flèches épaisses notées ==> le chemin nominal.
A["Pay (card)"] --> B{{Route}}Les délimiteurs choisissent la forme : [] rectangle, {} décision, () arrondi, {{}} hexagone, [()] base de données. Mettez entre guillemets tout libellé contenant des parenthèses ou une autre ponctuation Mermaid.
subgraph payments [Payment service] direction LR P1 --> P2 endUn subgraph dessine un cadre étiqueté autour de nœuds liés — un service, une équipe, une phase. Sa propre ligne direction laisse ce cadre s’étaler horizontalement pendant que la page se lit verticalement.
Questions sur ce diagramme
Quand utiliser un flowchart plutôt qu’un diagramme de séquence ?
Utilisez un flowchart pour la logique d’un processus (étapes et décisions). Utilisez un diagramme de séquence quand plusieurs acteurs ou systèmes échangent des messages dans le temps.
L’IA peut-elle générer un flowchart depuis une description texte ?
Oui — décrivez le processus en langage naturel (« l’utilisateur s’inscrit, vérifie son e-mail, puis… ») et Mermaid Studio génère le flowchart complet, prêt à éditer.
GitHub affiche-t-il les flowcharts Mermaid dans un README ?
Oui. Placez le code dans un bloc délimité annoté mermaid : GitHub le rend dans les README, les issues et les pull requests, comme GitLab et Notion. Pour les outils sans support natif, exportez en SVG ou en PNG.
Pourquoi Mermaid place-t-il mes nœuds dans un ordre que je n’ai pas choisi ?
La mise en page est calculée, pas écrite : la syntaxe ne contient aucune coordonnée. Vous l’influencez en changeant la direction, en regroupant des nœuds dans des subgraphs, en réordonnant vos déclarations de liens ou en ajoutant un lien invisible (A ~~~ B) pour pousser un nœud plus bas.
Quelle différence entre graph et flowchart dans Mermaid ?
Les deux mots-clés fonctionnent toujours en v11. graph est l’original ; flowchart vise le moteur de rendu plus récent, celui pour lequel la documentation et les formes récentes sont écrites. Utilisez flowchart pour tout nouveau diagramme.
Comment colorer certaines boîtes d’un flowchart ?
Deux moyens : style A fill:#eef,stroke:#66f pour un seul nœud, ou classDef warn fill:#fee suivi de class B,C warn pour réutiliser un style sur plusieurs. Les deux font partie de la source, donc les couleurs survivent à l’export PNG et SVG.
Flowchart (logigramme) ou un autre type de diagramme ?
Flowchart ou diagramme d’états ?
Demandez-vous ce que sont les boîtes. Si ce sont des actions — des verbes que quelqu’un exécute — le flowchart convient. Si ce sont des situations dans lesquelles un même objet attend un événement, prenez un diagramme d’états. Le cycle de vie d’une commande relève des états ; le circuit de validation autour relève du flowchart.
Flowchart ou carte mentale ?
Une carte mentale est un arbre strict : une racine, un parent par nœud, aucun libellé sur les branches, aucune boucle. Dès que deux branches doivent converger, ou qu’une flèche a besoin d’une condition écrite dessus, la carte mentale ne suffit plus : passez au flowchart.
Créez votre Flowchart (logigramme) maintenant
Décrivez-le en langage naturel — l’IA écrit le code Mermaid pour vous.
Ouvrir Mermaid Studio