Créer un logigramme en ligne
Écrivez une étape par ligne et le logigramme se dessine tout seul. Une ligne terminée par un point d'interrogation devient une décision oui/non. Téléchargez en PNG ou SVG sans inscription.
Terminez une ligne par ? pour créer une décision. Sur les lignes juste en dessous, écrivez Oui : étape ou Non : étape pour les branches, et indiquez le nom d'une étape après -> pour la relier à cette étape.
Étapes suivantes
Comment faire un logigramme
- Écrivez les étapes de votre processus dans la zone ci-dessus, une par ligne. La première ligne est dessinée comme le début et la dernière comme la fin.
- Terminez une étape par un point d'interrogation quand elle appelle une décision. Elle devient un losange avec des flèches Oui et Non.
- Si une branche a sa propre tâche, écrivez « Oui : tâche » ou « Non : tâche » sur la ligne juste sous la question.
- Choisissez une direction, puis téléchargez le diagramme fini en PNG ou en SVG.
Pour esquisser un processus en équipe
En tant que Partenaire Amazon, je réalise un bénéfice sur les achats remplissant les conditions requises.
Les règles des décisions
Vous n'avez besoin d'aucune syntaxe de diagramme. Il y a quatre règles, et les boutons d'exemple montrent chacune en action.
- Une branche laissée vide part sur la ligne suivante. Sous « L'article est en stock ? », écrire seulement « Non : Prévenir le client » envoie la flèche Oui vers la ligne suivante.
- Une branche Oui rejoint le chemin principal. Une nouvelle étape comme « Oui : Prendre un parapluie » est dessinée puis continue vers la ligne suivante. Une nouvelle étape sur une branche Non s'arrête là.
- Reprendre le nom d'une étape existante la relie à celle-ci. « Non : Afficher une erreur -> Saisir le mot de passe » affiche l'erreur puis revient à l'étape « Saisir le mot de passe ». Le nom doit correspondre exactement.
- Sans aucune ligne de branche, Oui va à la ligne suivante et Non revient à l'étape précédente, ce qui convient aux logiques « réessayer jusqu'à ce que ça passe » comme « Les tests passent ? ».
Pour enchaîner plusieurs étapes sur une branche, reliez-les par des flèches : « Non : Prévenir le client -> Rembourser -> Annuler la commande ».
À quoi ça sert
- Documenter un processus : le traitement des commandes, les remboursements ou les validations de notes de frais se suivent mieux en une seule image qu'en un long paragraphe. Collez-le dans une note de passation ou un wiki d'équipe.
- Rapports et devoirs : dessinez un algorithme, un protocole de TP ou un parcours utilisateur et placez-le dans Word, Google Docs ou une présentation. Le PNG a un fond blanc, il tient bien sur une page.
- Planification et développement : esquissez des parcours de connexion, de paiement ou d'inscription qui se divisent selon des conditions, et partagez-les avant la réunion.
- Listes du quotidien : les préparatifs de vacances, un déménagement ou l'ordre de dépannage d'une machine fonctionnent de la même façon.
Comment les symboles sont dessinés
Les boîtes arrondies sont le début et la fin, les rectangles sont des tâches, les losanges sont des décisions avec des sorties Oui et Non, et les flèches marquent le sens du flux. Seuls les symboles les plus courants sont utilisés, pour que tout le monde puisse lire le résultat. C'est la convention des cours d'algorithmique, du lycée à l'université, où le logigramme sert souvent à préparer un programme avant de l'écrire. Avec beaucoup d'étapes, « De gauche à droite » convient aux diapositives larges, tandis que « De haut en bas » convient aux documents et aux écrans de téléphone.
La norme internationale des symboles et conventions des diagrammes de flux est ISO 5807:1985. Sa première édition date de février 1985 et elle a été revue et confirmée pour la dernière fois en 2019, donc elle reste en vigueur. Pour la direction, Mermaid accepte cinq orientations : TB et TD (de haut en bas), BT (de bas en haut), LR (de gauche à droite) et RL (de droite à gauche). Les boutons ci-dessus couvrent les deux plus courantes, TD et LR ; pour les autres, changez la première ligne dans l'onglet code Mermaid.
Écrire du code Mermaid directement
Ouvrez l'onglet « Code Mermaid » et vos étapes sont converties en syntaxe Mermaid. Mermaid est un format texte ouvert pour les diagrammes, et modifier le code permet de régler finement les formes des boîtes et les étiquettes des flèches. La même zone dessine aussi des diagrammes de séquence (sequenceDiagram), qui montrent les échanges entre des personnes et des systèmes, et des diagrammes de Gantt (gantt) pour des plannings. Partez d'un bouton d'exemple et changez les noms et les dates.
Si le code contient une erreur, un message au-dessus de l'aperçu indique la ligne à vérifier, et le dernier diagramme valide reste visible en grisé pour comparer pendant la correction. Votre texte et votre code sont enregistrés automatiquement dans ce navigateur, donc ils sont toujours là quand vous revenez, et ils ne sont jamais envoyés à un serveur.
Mermaid est un projet sous licence MIT dont le dépôt public a été créé en novembre 2014. En octobre 2026 il compte plus de 90 000 étoiles sur GitHub, et il a remporté en 2019 les JS Open Source Awards dans la catégorie « The most exciting use of technology ». GitHub affiche Mermaid dans les fichiers Markdown depuis le 14 février 2022, donc un code peaufiné ici peut être collé dans un bloc mermaid et rendra le même diagramme dans un README ou un ticket. Ce site embarque Mermaid 11.17.2 (publiée le 25 août 2026) ; la syntaxe ajoutée dans des versions ultérieures peut ne pas être dessinée ici.
Sources
- ISO. ISO 5807:1985 Information processing: Documentation symbols and conventions for data, program and system flowcharts. Publiée en 1985, confirmée en 2019.
- Mermaid. Flowcharts Syntax ; About Mermaid ; mermaid-js/mermaid (MIT) ; version 11.17.2, 2026.
- GitHub Blog. Include diagrams in your Markdown files with Mermaid, 14 février 2022. Tout vérifié le 9 octobre 2026.
Questions fréquentes
Faut-il créer un compte ou installer quelque chose ?
Non. Ça fonctionne immédiatement sans compte, et les exports PNG et SVG ne portent pas de filigrane.
Comment créer une décision oui/non ?
Terminez une ligne par un point d'interrogation et elle devient un losange. Sur les lignes du dessous, écrivez « Oui : étape » et « Non : étape » pour ajouter les branches.
Ça marche pour un logigramme de cours d'algorithmique ou de NSI ?
Oui. Les symboles (début et fin arrondis, tâches en rectangle, décisions en losange) suivent la convention de la norme ISO 5807, celle qu'on rencontre dans les cours d'algorithmique au lycée et à l'université. Téléchargez le PNG et collez-le dans votre compte rendu.
Peut-on dessiner un diagramme de flux pour un dossier professionnel ?
Oui : circuit de validation, traitement d'une demande ou parcours client. Le PNG, à fond blanc, s'insère dans Word, PowerPoint ou un wiki ; prenez le SVG pour retoucher le diagramme dans un outil de dessin.
Est-ce que ça fonctionne sur téléphone ?
Oui, directement dans le navigateur du téléphone. Pour un diagramme long, la direction « De haut en bas » se lit mieux sur un écran étroit.