Entrée
Résultat
Le résultat apparaîtra ici.Mermaid transforme quelques lignes de texte en diagramme, et GitHub, GitLab, Notion et la plupart des outils de documentation l’affichent — mais quand un diagramme refuse de s’afficher, ou qu’il vous le faut en image pour des diapositives ou un document de conception, vous voulez le voir seul. Collez le code et cet éditeur en fait le rendu avec Mermaid lui-même, dans la page, avec l’un de quatre thèmes. Une erreur de syntaxe revient avec le message et le numéro de ligne de Mermaid ; un diagramme valide revient sous forme d’aperçu et de code SVG que vous pouvez télécharger ou coller dans un outil de design.
Comment ça marche
- Il exécute la bibliothèque Mermaid (version 12) : tout type de diagramme qu’elle prend en charge fonctionne donc — organigramme, séquence, classes, états, ER, Gantt, camembert, carte mentale, frise chronologique et d’autres encore.
- Les libellés sont dessinés en texte SVG plutôt qu’en HTML intégré, si bien que le fichier a le même aspect dans Figma, Inkscape ou un onglet de navigateur.
- Mermaid s’exécute en mode de sécurité strict : les gestionnaires de clic et le HTML dans les libellés sont désactivés, et l’aperçu est affiché comme une image, de sorte que le code collé ne peut exécuter aucun script.
- Mermaid est une bibliothèque volumineuse : elle n’est téléchargée que la première fois que vous lancez cet outil.
Où vont vos données
Nulle part. Cet outil s’exécute entièrement dans votre navigateur : le texte collé est traité par la page, jamais transmis à un serveur ni consigné dans un journal.
Cet outil est gratuit et ne demande aucun compte. Ses résultats n’existent que dans la page ouverte et ne sont enregistrés nulle part.
Ce que ça coûte
Cet outil est gratuit, sans connexion ni points.
Questions fréquentes
- Pourquoi mon diagramme affiche-t-il une erreur d’analyse ?
- Mermaid indique la ligne et ce qu’il attendait. Les causes habituelles sont un libellé contenant des parenthèses, des guillemets ou un deux-points — entourez-le de guillemets doubles, A["Label (v2)"] —, une flèche sans cible, ou un mot-clé de type de diagramme mal orthographié ou absent de la première ligne.
- Puis-je obtenir un PNG au lieu d’un SVG ?
- Cet outil produit du SVG, qui reste net à toutes les tailles et que les sites de documentation intègrent. Pour un PNG, ouvrez le SVG téléchargé avec l’outil SVG vers PNG de ce site, qui en fait le rendu à la résolution de votre choix.
- Mon diagramme aura-t-il le même aspect sur GitHub ?
- La mise en page est celle de Mermaid, donc la structure est identique, mais GitHub effectue le rendu avec sa propre version de Mermaid et son propre thème, qui suit le mode clair ou sombre du lecteur. Une syntaxe très récente peut ne pas fonctionner sur GitHub tant qu’il n’a pas été mis à jour.
- Une IA peut-elle écrire le code Mermaid pour moi ?
- Oui — l’outil de diagrammes Mermaid par IA de ce site transforme une description en langage courant en code Mermaid, avec votre propre clé d’API. Collez sa sortie ici pour la vérifier et en faire le rendu.
L’open source derrière
Cet outil fonctionne grâce à mermaid-js/mermaid, publié sous licence MIT. Si vous avez besoin du même comportement dans votre propre programme, c’est cette bibliothèque qu’il faut utiliser.
mermaid-js/mermaidAussi appelé
- éditeur mermaid
- mermaid live editor
- mermaid en svg
- diagramme mermaid en ligne
- rendu diagramme mermaid
- organigramme mermaid