Collez du Mermaid. Voyez le diagramme. Instantanément.

Collez Mermaid, prévisualisez instantanément, exportez SVG/PNG, importez des fichiers, faites glisser pour vous déplacer et partagez via URL.

Modèles rapides
Ouvrir un fichier MermaidDéposez-le n'importe où — .mmd · .mermaid · .md · .txt · Comment ouvrir un fichier .mmd
Chargement de Mermaid...Ln 1, Col 1
Astuce : dans l’aperçu, cliquez et faites glisser (ou touchez) pour vous déplacer. Déposez des fichiers sur l’aperçu pour les charger.

Qu’est-ce que Mermaid ?

Mermaid est un outil de diagrammation et de charting basé sur JavaScript qui utilise des définitions de texte inspirées de Markdown pour créer et modifier des diagrammes dynamiquement. C’est un projet open source qui permet de générer des diagrammes à partir de descriptions textuelles simples.

Au lieu d’utiliser des outils de dessin complexes, vous écrivez une syntaxe proche du code qui décrit votre diagramme, et Mermaid le rend sous forme de diagramme visuel. Cette approche rend les diagrammes versionnables, faciles à mettre à jour et parfaits pour la documentation.

Mermaid s’intègre parfaitement aux plateformes de documentation, aux wikis et aux fichiers Markdown, ce qui en fait un outil apprécié des développeurs et des rédacteurs techniques.

Pourquoi utiliser Mermaid ?

  • Contrôle de version : les diagrammes sont des fichiers texte, ils peuvent donc être suivis dans Git avec votre code
  • Mises à jour rapides : modifiez quelques lignes de texte plutôt que de redessiner des diagrammes entiers
  • Cohérence : Mermaid gère automatiquement la mise en page et le style, garantissant des diagrammes cohérents
  • Pas d’outils de design nécessaires : inutile d’utiliser Visio, Lucidchart ou d’autres outils coûteux
  • Documentation comme du code : gardez les diagrammes dans le même dépôt que votre documentation
  • Multiplateforme : fonctionne dans les navigateurs et Node.js, et s’intègre à de nombreuses plateformes
  • Gratuit et open source : pas de coûts de licence, communauté active
  • Plusieurs types de diagrammes : prend en charge les organigrammes, diagrammes de séquence, de classes, etc.

Organigramme

Créez des organigrammes professionnels avec une syntaxe textuelle simple. Aperçu instantané, export SVG/PNG et partage par URL, tout gratuitement.

Diagramme de Séquence

Concevez des diagrammes de séquence UML pour visualiser les interactions entre composants système. Parfait pour la documentation API et la conception système.

Diagramme de Gantt

Planifiez et visualisez les chronologies de projet avec des diagrammes de Gantt. Suivez les tâches, dépendances et jalons avec une syntaxe textuelle simple.

Diagramme de Classes

Concevez des systèmes orientés objet avec des diagrammes de classes UML. Définissez classes, attributs, méthodes et relations avec du texte simple.

Diagramme d'États

Visualisez les machines à états et comportements système avec des diagrammes d'états. Modélisez états, transitions et événements avec du texte simple.

Diagramme ER

Concevez des schémas de base de données avec des diagrammes entité-relation. Définissez entités, attributs et relations avec une syntaxe textuelle simple.

Publicité

Guide complet des diagrammes Mermaid

Apprenez à créer des diagrammes professionnels avec une syntaxe simple basée sur le texte

Questions fréquentes

Questions fréquentes sur l'utilisation de Mermaid Viewer et la création de diagrammes

Cet éditeur Mermaid est-il vraiment gratuit ?
Oui, entièrement gratuit. Vous pouvez créer un nombre illimité de diagrammes, exporter en SVG/PNG, partager par URL et utiliser toutes les fonctionnalités sans inscription ni paiement. L’outil est financé par une publicité discrète.
Dois-je installer quelque chose ?
Aucune installation n’est nécessaire. L’outil fonctionne entièrement dans votre navigateur. Ouvrez simplement le site et commencez immédiatement, sur ordinateur, tablette ou mobile.
Comment enregistrer mes diagrammes ?
Vous pouvez sauvegarder de plusieurs façons : 1) exporter en SVG ou PNG, 2) partager via URL (le code est encodé dans l’URL), 3) copier le code Mermaid dans vos fichiers, 4) importer/exporter des fichiers .mmd ou .mermaid.
Puis-je utiliser les diagrammes dans ma documentation ?
Oui, absolument. Exportez en SVG (vectoriel) ou PNG et utilisez vos diagrammes dans de la documentation, des présentations ou des sites web. Vous pouvez aussi intégrer le code Mermaid sur GitHub, GitLab ou Notion.
Quelle différence entre SVG et PNG ?
Le SVG est vectoriel, reste net à toute taille et convient parfaitement au web et à la documentation. Le PNG est matriciel, pratique pour un partage rapide, mais perd en qualité lors du redimensionnement.
Pourquoi mon diagramme ne se rend pas ?
Vérifiez les erreurs de syntaxe dans votre code Mermaid. Les problèmes fréquents : guillemets non fermés, deux-points/points-virgules manquants, identifiants de nœuds incorrects ou syntaxe non prise en charge. Simplifiez le diagramme pour isoler l’erreur.
Puis-je collaborer avec d’autres personnes ?
La collaboration en temps réel n’est pas intégrée, mais vous pouvez partager vos diagrammes par URL. Les autres peuvent ouvrir, modifier puis repartager leur version. Le format texte de Mermaid fonctionne aussi très bien avec Git.
Le viewer fonctionne-t-il hors ligne ?
Le premier chargement nécessite Internet. Ensuite, les fonctions d’édition de base fonctionnent souvent hors ligne. Certaines fonctions, comme l’export, peuvent toutefois nécessiter une connexion.
Comment apprendre la syntaxe Mermaid ?
Commencez par notre guide Mermaid complet avec des exemples pour chaque type de diagramme. Utilisez les modèles pour démarrer vite, puis la documentation officielle sur mermaid.js.org.
Puis-je personnaliser l’apparence ?
Oui. Les diagrammes suivent le thème du site : passez du clair au sombre avec le bouton Thème de la barre supérieure et le diagramme est rendu à nouveau avec le thème Mermaid correspondant. Pour une personnalisation avancée, utilisez la directive %%{init:...}%% pour définir les couleurs, les polices et d'autres propriétés visuelles.
Quels types de diagrammes sont pris en charge ?
L’éditeur prend en charge les principaux types Mermaid : flowcharts, diagrammes de séquence, de classes, d’états, ER, Gantt, camemberts, graphes Git, user journeys, etc.
Mes données de diagramme sont-elles privées ?
Le code de votre diagramme n’est pas envoyé à nos serveurs. Le rendu se fait côté navigateur. En partage URL, le code est encodé dans l’URL ; nous ne stockons ni ne suivons votre contenu.
Pourquoi préférer des diagrammes textuels ?
Les diagrammes textuels offrent plusieurs avantages : versionnage (idéal avec Git), mises à jour rapides, style cohérent, recherche facile, format léger et génération automatisable. Ils sont aussi plus simples à relire en pull request.
Puis-je intégrer Mermaid sur mon site web ?
Oui. Ajoutez la bibliothèque JavaScript Mermaid à votre site puis des blocs de code Mermaid. De nombreuses plateformes le prennent déjà en charge nativement, dont GitHub, GitLab, Notion et Obsidian.
Quelle taille maximale de diagramme est recommandée ?
Il n’y a pas de limite stricte, mais les très grands diagrammes (plus de ~100 nœuds) peuvent être lents selon l’appareil. Pour des systèmes complexes, mieux vaut découper en plusieurs diagrammes plus petits.