Générateur de diagramme de flux
Décrivez un processus avec une chaîne d’étapes par ligne et obtenez un diagramme de flux avec le code Mermaid correspondant.
Traité localement dans votre navigateur· Vos données restent dans votre navigateur.
Qu'est-ce que Générateur de diagramme de flux ?
Un diagramme de flux montre les étapes d’un processus et les décisions qui le font bifurquer. Cet outil propose deux façons d’en créer un : écrire un plan simple avec des flèches (« Début -> Vérifier -> Valide ? -oui-> Enregistrer »), ou coller du code Mermaid complet pour un contrôle total.
En mode plan, chaque ligne est une chaîne d’étapes. Deux libellés identiques réutilisent le même nœud, un libellé finissant par « ? » devient un losange de décision, Début et Fin deviennent des terminaux arrondis, et « -oui-> » place un libellé sur la flèche. Le code Mermaid généré s’affiche à côté du diagramme pour que vous puissiez le copier et l’affiner.
Comment ça marche ?
- Écrivez une chaîne par ligne, en reliant les étapes par « -> » et en étiquetant une flèche avec « -texte-> ».
- Choisissez la direction (haut-bas, gauche-droite, bas-haut, droite-gauche) et un thème.
- Vérifiez le diagramme et le panneau « Code Mermaid » ; collez à tout moment votre propre code Mermaid.
- Exportez le diagramme en SVG ou PNG, ou copiez le code Mermaid.
Cas d'usage courants
- Documenter un processus d’inscription, de validation ou d’escalade du support.
- Expliquer un algorithme ou une règle métier avec des branches de décision.
- Transformer des notes de réunion sur un workflow en image partageable.
- Obtenir rapidement un premier brouillon Mermaid, puis l’affiner dans l’éditeur.
Exemples
Essayez cette saisie dans l'outil ci-dessus :
Start -> Check input -> Valid? -yes-> Save record -> Send confirmation -> End Valid? -no-> Show error message -> Check input
Confidentialité
Générateur de diagramme de flux s'exécute entièrement dans votre navigateur. Le texte ou les fichiers que vous fournissez sont traités sur votre appareil et ne sont ni envoyés, ni journalisés, ni stockés sur nos serveurs.
Limites
Le mode plan ne couvre que les nœuds, décisions et flèches étiquetées. Sous-graphes, styles personnalisés et fonctions avancées demandent du code Mermaid. Séparez les branches d’une décision en répétant son libellé sur une autre ligne.
Questions fréquentes
Comment dessiner une décision avec des branches oui et non ?
Terminez le libellé par un point d’interrogation, puis écrivez une ligne par branche : « Valide ? -oui-> Enregistrer » et « Valide ? -non-> Afficher l’erreur ». Les deux lignes partagent le même losange.
Que fait l’option de direction sur mon code ?
Elle ne réécrit que la première ligne (« flowchart TD » devient par exemple « flowchart LR »). Choisissez « Conserver celle du code » pour respecter une direction que vous avez saisie.
Puis-je coller du code Mermaid au lieu d’un plan ?
Oui. Si le texte commence par un mot-clé Mermaid comme flowchart ou graph, il est rendu tel quel, avec seulement la direction et le thème facultatifs.
Outils associés
Éditeur Mermaid en direct
Un éditeur Mermaid libre : saisissez un diagramme sous forme de code et obtenez un rendu en direct, exportable.
Markdown & diagrammes
Générateur de diagramme de séquence
Écrivez un message par ligne et voyez qui parle à qui, dans l’ordre, sous forme de diagramme de séquence.
Markdown & diagrammes
Générateur de diagramme d’états
Listez les transitions entre états et obtenez un diagramme de machine à états avec les événements sur les flèches.
Markdown & diagrammes
Générateur de carte mentale
Saisissez vos idées sous forme de liste indentée et voyez-les sous forme de carte mentale rayonnante.
Markdown & diagrammes
Générateur de diagramme de classes
Écrivez du code classDiagram avec classes, membres et relations et voyez immédiatement le diagramme UML.
Markdown & diagrammes
Générateur de diagramme de Gantt
Listez des tâches avec un début et une durée pour obtenir un planning de projet avec sections et dépendances.
Markdown & diagrammes