Un schéma qui se modifie dans le même commit que le code
Mermaid est une bibliothèque JavaScript qui lit un diagramme décrit en texte, dans une syntaxe proche du Markdown, et le dessine en SVG. Le README nomme le problème visé, la « doc-rot » : un schéma coûte du temps à produire et se périme vite, alors qu'une équipe privée de schémas travaille moins bien. Le projet écarte l'outil de dessin et le glisser-déposer. Écrit en texte, le diagramme change dans le même commit que le code qu'il décrit et se relit en diff dans une pull request.
Blocs mermaid affichés en diagramme par GitHub ou GitLab
- GitHub, GitLab, Gitea, Forgejo et Azure DevOps affichent un bloc de code
mermaidsous forme de diagramme, tout comme Notion, Obsidian et Joplin, d'après la liste d'intégrations du projet. VS Code et les IDE JetBrains passent par une extension. - Plus de vingt types de diagrammes : logigrammes, séquences, classes, états, entités-relations, Gantt, graphes Git, cartes mentales, frises, Sankey, C4. La version 12.0.0 a ajouté les diagrammes de cas d'utilisation UML.
- L'éditeur en ligne mermaid.live affiche le rendu en direct, ce qui sert à mettre la syntaxe au point avant de coller le texte dans la doc.
- Le paquet npm et le CDN jsDelivr couvrent le rendu dans la page. Pour le build, la CLI
mmdcproduit des fichiers SVG, PNG ou PDF et existe en image Docker. - La syntaxe Mermaid sert aussi d'entrée à d'autres outils : Excalidraw convertit une définition Mermaid en dessin que l'on retouche à la main.
Navigateur obligatoire, failles d'injection et rupture de la v12
Mermaid ne dessine que dans un navigateur. Les notes de la version 12 le précisent. Pour obtenir une image hors d'une page web, la CLI mmdc lance un Chromium sans interface par Puppeteer et demande Node 22.13 ou plus.
Le texte d'un diagramme est une surface d'attaque. Le README prévient qu'afficher des diagrammes saisis par des inconnus reste risqué : la syntaxe emploie trop de caractères HTML pour un nettoyage standard, et l'équipe ne garantit pas l'absence de faille. Le niveau strict, par défaut, encode le HTML et désactive les clics. Le niveau sandbox, encore en bêta, rend le diagramme dans une iframe isolée et bloque une partie de son interactivité. Le dépôt a publié neuf avis de sécurité en 2026 (injections CSS et HTML, dénis de service, pollution de prototype), après deux failles XSS critiques en août 2025.
La version 12 change l'aspect des diagrammes existants. Publiée le 10 septembre 2026, la 12.0.0 rompt la compatibilité : ES2024, Safari 17.4 et Node 22.12 au minimum. ELK remplace dagre comme moteur de disposition, et le thème redux-color avec l'aspect neo remplace default et classic sur la plupart des types. Un diagramme sans configuration se redispose donc et change de couleurs ; mermaid.initialize({ layout: 'dagre', theme: 'default', look: 'classic' }) rétablit l'ancien rendu. Le build en un seul fichier, mermaid.min.js, embarque ELK et grossit d'environ 500 Ko compressés, alors que le build tiny s'en passe.
La documentation officielle vit sur un site commercial. Elle est servie depuis mermaid.ai, où l'équipe derrière Mermaid vend aussi un service en ligne avec génération de diagrammes par IA, coédition en temps réel et SSO. La bibliothèque reste sous licence MIT.
La dernière version est la 12.2.0, du 13 octobre 2026. Elle suit la 12.1.0 du 2 octobre, et le dernier commit date du 27 octobre 2026.
