Diagramme de flux
Représentez décisions et processus avec des nœuds, des flèches et des formes Mermaid : boîtes arrondies, losanges…
Mermaid Viewer en ligne
Collez votre code Mermaid à gauche et voyez le diagramme s'afficher instantanément à droite. Analysez et corrigez la syntaxe Mermaid en un clic, optimisez votre code, puis exportez le résultat en PNG, SVG ou PDF — gratuit, privé, sans inscription.
- 100 % gratuit
- Sans inscription
- Tout tourne dans votre navigateur
- Plus de 12 types de diagrammes
Éditeur Mermaid en direct & visionneuse de graphiques
Cette visionneuse Mermaid actualise l'aperçu dès que vous arrêtez de taper : dessiner un diagramme Mermaid simple devient aussi facile que rédiger du texte. En cas d'erreur, le correcteur Mermaid intégré localise le problème et répare les fautes de syntaxe les plus courantes — ponctuation pleine chasse, caractères invisibles, guillemets typographiques — avec une explication claire à chaque modification.
–
Diagnostics
Your diagram renders here as you type.
Could not render this diagram
100%
Everything runs locally in your browser — your diagram code never leaves this page.
Types de diagrammes Mermaid prêts à l'emploi
Du diagramme de flux à la frise chronologique, chaque type de diagramme Mermaid fonctionne immédiatement — la façon la plus simple de dessiner en Mermaid sans rien installer. Chaque aperçu ci-dessous est généré en direct par le même moteur que la visionneuse ; chargez n'importe quel modèle pour continuer à l'éditer.
Diagramme de séquence
Montrez les messages échangés entre participants dans le temps, avec boucles, alternatives et activations.
Diagramme ER
Modélisez entités, attributs et relations d'une base de données en notation pattes-de-corneille.
Diagramme de classes
Décrivez classes, interfaces, membres et héritage pour la conception logicielle.
Diagramme d'états
Suivez les états d'un système et les transitions entre eux.
Diagramme de Gantt
Planifiez vos projets avec tâches, jalons, dépendances et dates.
Camembert
Transformez quelques chiffres en camembert de répartition.
Parcours utilisateur
Cartographiez un parcours utilisateur avec tâches et scores de satisfaction.
Frise chronologique
Racontez des événements sur une frise verticale — idéal pour l'histoire et les roadmaps.
Carte mentale
Brainstormez en carte ramifiée : du texte brut en entrée, une hiérarchie en sortie.
Graphe Git
Visualisez branches, commits et fusions d'un dépôt Git.
Matrice de quadrants
Placez des éléments sur deux axes et quatre quadrants, ex. priorité vs. effort.
L'essentiel de la syntaxe Mermaid
La syntaxe Mermaid est du texte brut : une instruction par ligne, des nœuds reliés par des flèches. Ces formes Mermaid couvrent la plupart des besoins — cliquez sur un exemple pour l'ouvrir dans la visionneuse et le modifier.
| Syntaxe | Dessine |
|---|---|
A[Libellé] | Rectangle (processus) |
A(Libellé) | Boîte arrondie |
A{Libellé} | Losange (décision) |
A([Libellé]) | Stade (pilule) |
A[(Libellé)] | Cylindre (base de données) |
A((Libellé)) | Cercle |
A-->B | Flèche (lien) |
A-->|texte|B | Flèche avec libellé |
A---B | Ligne simple |
subgraph Titre … end | Groupe de nœuds |
Mini-modèles
Convertir un diagramme Mermaid en image en ligne
Vous vous demandez comment convertir un diagramme Mermaid en image en ligne ? Trois étapes : collez votre code, laissez l'aperçu s'afficher, puis cliquez sur PNG, SVG ou PDF dans la barre d'outils. Tout se passe dans votre navigateur — aucun fichier n'est envoyé.
Mermaid vers PNG
Export jusqu'à 4× la résolution — des diagrammes nets pour vos diapositives, documents et messageries.
Mermaid vers SVG
Un vrai fichier vectoriel : zoom infini, modifiable dans Figma ou Illustrator, parfait pour l'impression et les écrans haute densité.
Mermaid vers PDF
Un clic produit une page PDF aux dimensions exactes du diagramme — idéal pour les rapports et les archives.
Questions fréquentes
Qu'est-ce qu'une visionneuse Mermaid ?
Une visionneuse Mermaid prend du code de diagramme écrit en syntaxe Mermaid et l'affiche sous forme de vrai diagramme. Celle-ci réunit visionneuse, créateur et correcteur sur une seule page : rendu en direct pendant la frappe, détection des problèmes de syntaxe, réparation automatique, puis export en PNG, SVG ou PDF.
Comment corriger une syntaxe Mermaid invalide ?
Collez le code et cliquez sur Corriger. Le correcteur Mermaid répare les guillemets typographiques et caractères Unicode invisibles, la ponctuation pleine chasse (CJK), les crochets non appariés, les mots réservés comme « end », les « end » manquants des subgraphs et boucles, les clôtures Markdown parasites, et bien plus. Chaque modification est expliquée dans la liste de diagnostic.
Comment convertir Mermaid en PNG, SVG ou PDF ?
Affichez votre diagramme dans la visionneuse ci-dessus, puis cliquez sur PNG, SVG ou PDF dans la barre d'outils de l'aperçu. PNG télécharge une image bitmap haute résolution, SVG un fichier vectoriel, PDF un document prêt à imprimer. C'est gratuit, illimité et entièrement côté navigateur.
PlantUML ou Mermaid — que choisir ?
Mermaid s'affiche directement dans le navigateur, ce qui explique son support natif par GitHub, GitLab et la plupart des wikis Markdown ; c'est le choix léger pour la documentation. PlantUML couvre davantage la spécification UML 2 mais requiert Java ou un serveur pour le rendu. Pour des diagrammes au format texte destinés aux docs et au web, Mermaid est généralement plus simple.
Que représente « Mermaid » — d'où vient ce nom ?
L'outil doit son nom à la sirène des légendes : l'idée qu'un simple texte puisse, comme le chant d'une sirène, faire naître un beau diagramme. Dans l'univers des diagrammes, Mermaid représente le « diagramme-as-code » : vous décrivez nœuds et flèches en texte, et la bibliothèque dessine le graphe pour vous.
Quels sont les différents types de diagrammes Mermaid ?
Les plus utilisés : diagrammes de flux, de séquence, ER, de classes, d'états, de Gantt, camemberts, parcours utilisateur, frises chronologiques et cartes mentales — voir la galerie complète plus haut. Chaque type commence par une ligne-clé comme « flowchart TD » ou « sequenceDiagram », suivie d'une instruction par ligne.
Mon code de diagramme est-il envoyé quelque part ?
Non. Le rendu, la correction, l'optimisation et l'export s'exécutent localement dans votre navigateur. Rien n'est transmis ni stocké sur un serveur — vous pouvez même utiliser la visionneuse hors ligne une fois la page chargée.