Éditeur de diagrammes Mermaid
Tapez du Mermaid d’un côté, le diagramme se dessine de l’autre au fil de la frappe. Une erreur est signalée sur sa propre ligne, et la dernière version correcte reste affichée. Tout se passe dans cet onglet du navigateur.
Comment ça marche
Mermaid est une façon d’écrire un diagramme sous forme de texte. Quelques lignes comme « A --> B » deviennent un organigramme, un diagramme de séquence, un diagramme de classes ou de base de données, un diagramme de Gantt ou une carte mentale. GitHub, GitLab, Notion et la plupart des outils de documentation l’affichent directement, et c’est pourquoi les diagrammes des README et des documentations sont si souvent en Mermaid. Ce qu’ils n’offrent pas, c’est un bon endroit pour en écrire un.
Cet éditeur dessine le diagramme pendant que vous tapez. Quand une ligne est fausse, elle est soulignée et le message indique ce que Mermaid attendait, tandis que la dernière version correcte reste à l’écran, atténuée, pour que l’image ne disparaisse pas chaque fois que vous êtes au milieu d’une flèche. Les grands diagrammes peuvent être déplacés et zoomés.
Quand le résultat vous convient, enregistrez-le en SVG, ou en PNG dimensionné pour sa destination : un document, une diapositive ou une page imprimée. Vous pouvez aussi le copier directement dans le presse-papiers. Votre brouillon est conservé dans ce navigateur d’une visite à l’autre, et un lien de partage transporte le diagramme dans le lien lui-même, si bien que rien n’en est jamais stocké sur un serveur.
Comment l’utiliser
- 1 Tapez ou collez du Mermaid, ouvrez un fichier .mmd ou Markdown, ou partez d’un exemple.
- 2 Regardez l’aperçu. Si une ligne est soulignée, corrigez-la ; le message indique ce que Mermaid attendait.
- 3 Choisissez une apparence, puis déplacez ou zoomez l’aperçu pour vérifier les détails.
- 4 Téléchargez le SVG ou le PNG, copiez l’image, ou copiez un lien pour partager le diagramme.
Bon à savoir
- Ouvrir un fichier Markdown ouvre son premier bloc ```mermaid, ce qui permet de modifier à part le diagramme d’un README.
- Choisir un exemple remplace le contenu de l’éditeur, et Ctrl+Z fait revenir votre diagramme.
- Le SVG reste net à toutes les tailles, c’est le format à utiliser sur le web. Le PNG est celui qu’acceptent le plus sûrement les diapositives, les messageries et les traitements de texte.
- Un thème défini dans le diagramme par une ligne %%{init}%% l’emporte sur le réglage Apparence.
- Rien n’est envoyé. Le diagramme est dessiné dans cet onglet, et les liens de partage le placent dans la partie de l’adresse qu’un navigateur n’envoie jamais à un serveur.
Navigateurs compatibles
- Chrome 94 et suivantes
- Firefox 93 et suivantes · pleine vitesse à partir de 113
- Safari 16.4 et suivantes
- Edge 94 et suivantes
Ce sont les plus anciennes versions qui ont tout ce que l’outil utilise. Elles sont calculées à partir de l’outil lui-même, donc elles changent avec lui.
Numéros de version vérifiés le 2026-09-04.
Questions fréquentes
Mon diagramme est-il envoyé quelque part ?
Non. Mermaid tourne dans cet onglet du navigateur, et votre brouillon n’est enregistré que dans ce navigateur. Vous pouvez le vérifier dans les outils de développement de votre navigateur, onglet Réseau : taper n’envoie rien.
Comment les liens de partage fonctionnent-ils sans serveur ?
Le diagramme est compressé et écrit dans la partie du lien qui suit le #. Les navigateurs n’envoient jamais cette partie au site, donc le lien ouvre le diagramme sur l’appareil de n’importe qui sans que le site lui-même le reçoive. Un long diagramme donne un long lien.
Quels types de diagrammes sont pris en charge ?
Tout ce que dessine Mermaid 12 : organigrammes, diagrammes de séquence, de classes, d’états et entité-association, diagrammes de Gantt, camemberts, cartes mentales, frises chronologiques, parcours utilisateur, graphes Git, diagrammes en quadrants, diagrammes de Sankey et XY, ainsi que les plus récents diagrammes block, packet, architecture, kanban, radar et treemap.
Pourquoi une ligne est-elle soulignée ?
C’est là que Mermaid a cessé de comprendre le diagramme. Le message à côté vient de Mermaid lui-même et indique ce qu’il s’attendait à trouver. Souvent, la vraie erreur se trouve juste avant, par exemple un crochet ou un guillemet jamais refermé.
Quelle taille aura le PNG ?
Cela dépend de son usage. Pour un document, deux fois la taille à laquelle le diagramme est dessiné, ce qui reste net sur les écrans haute densité. Pour des diapositives, aussi grand que ce qui tient sur un écran 4K. Pour l’impression, aussi grand que ce qui tient sur un A4 à 300 dpi. Le bouton affiche la taille exacte en pixels avant le téléchargement.
Puis-je modifier un diagramme de mon README ?
Oui. Ouvrez le fichier Markdown, et son premier bloc Mermaid s’ouvre dans l’éditeur. Quand vous avez terminé, recopiez le texte dans le fichier.
Est-il sûr d’ouvrir un diagramme que quelqu’un m’a envoyé ?
Les diagrammes sont dessinés dans le mode strict de Mermaid. Tout ce qui pourrait exécuter du code est retiré, et une ligne à l’intérieur du diagramme ne peut pas désactiver ce mode.
Outils associés
Vos fichiers sont traités sur votre appareil et ne sont pas envoyés. Vous pouvez le vérifier dans les outils de développement de votre navigateur, sous l’onglet Réseau.