Développeur / Schémas
Éditeur Mermaid en ligne
Écrivez du code Mermaid et voyez le diagramme apparaître au fil de la saisie : organigrammes, diagrammes de séquence, diagrammes de classes, diagrammes de Gantt et graphiques circulaires, avec téléchargement en SVG et PNG.
Éditeur Mermaid en ligne: L'éditeur dessine des diagrammes avec Mermaid, la bibliothèque open source utilisée par GitHub, GitLab et de nombreux outils de documentation pour créer des diagrammes à partir de texte. Il fonctionne en mode strict : le code d'une autre personne ne peut donc pas exécuter de scripts ni ajouter de gestionnaires de clic. Les téléchargements SVG restent nets quelle que soit leur taille ; les téléchargements PNG sont générés avec une taille deux fois supérieure à celle affichée à l'écran, sur fond blanc. Fonctionne 100 % localement dans votre navigateur, sans aucun téléversement de fichier vers le serveur.
- Catégorie
- Outils développeur
- Exécutions
- Dans votre navigateur
- Coût
- Gratuit · sans inscription
- Disponibilité
- Prêt à l'emploi
Fonctionne entièrement dans votre navigateur
Les diagrammes sont dessinés dans votre navigateur avec Mermaid, en mode strict : le code du diagramme ne peut donc pas exécuter de scripts. Collez le même code dans GitHub, GitLab ou le Markdown de Notion, dans un bloc de code mermaid, pour l’y afficher.
Des diagrammes sous forme de texte
Un diagramme dessiné dans un logiciel graphique devient obsolète, car toute modification oblige à rouvrir le fichier. Un diagramme Mermaid tient en quelques lignes de texte placées à côté du code ou du document qu’elles décrivent ; elles sont modifiées dans le même commit et apparaissent dans une revue sous la forme d’un diff lisible.
Chaque diagramme commence par son type : flowchart avec une direction telle que TD (de haut en bas) ou LR (de gauche à droite), sequenceDiagram, classDiagram, gantt ou pie. Les nœuds sont écrits une fois avec leur libellé, A[Start], puis référencés par leur nom, A --> B.
Exporter
SVG conserve la netteté des lignes et du texte quelle que soit la taille et constitue le meilleur choix pour les documents et les présentations ; PNG convient aux applications de chat et aux environnements qui n’acceptent pas SVG. Pour modifier manuellement le SVG exporté, ouvrez-le dans l’éditeur SVG.
Comment l'utiliser
- Commencez avec un exemple ou collez votre propre code Mermaid.
- Modifiez le code : le diagramme se redessine au fil de la saisie ou affiche l'erreur.
- Téléchargez le diagramme au format SVG ou PNG, ou copiez le code.
Confidentialité et limitations
Les diagrammes sont dessinés dans votre navigateur et votre code est conservé uniquement dans ce navigateur, afin de rester disponible lors de votre prochaine visite.
Outils associés
Questions fréquentes
Qu'est-ce que Mermaid ?
Une manière d'écrire des diagrammes sous forme de texte. Une ligne telle que A --> B dessine deux boîtes reliées par une flèche : les diagrammes peuvent ainsi être intégrés dans des fichiers Markdown et des revues de code, puis modifiés en éditant le texte plutôt qu'avec un outil de dessin.
Comment afficher le diagramme sur GitHub ?
Placez le code dans un bloc de code délimité marqué mermaid, dans un fichier Markdown, une issue ou une pull request : trois accents graves suivis du mot mermaid, puis le code et enfin trois accents graves. GitHub, GitLab et Notion l'affichent directement.
Pourquoi mon diagramme affiche-t-il une erreur ?
Le message indique la ligne que Mermaid n'a pas pu lire. Les causes courantes sont l'absence du type de diagramme sur la première ligne, comme flowchart TD, des crochets ou des guillemets non fermés, ainsi qu'un texte contenant des caractères spéciaux qui doit être placé entre guillemets.
Quels types de diagrammes sont pris en charge ?
Tous les types disponibles dans la version de Mermaid chargée par l'éditeur, notamment les organigrammes, les diagrammes de séquence, de classes, d'états et de relations entre entités, les diagrammes de Gantt et les graphiques circulaires, ainsi que les cartes mentales, les frises chronologiques et les graphes Git. Les exemples couvrent les cinq types les plus courants.
Outil gratuit · dans votre navigateur exécutions · aucun compte requis