Saisissez la syntaxe Mermaid à gauche, regardez le diagramme se dessiner à droite. La Visionneuse Mermaid exécute le moteur complet Mermaid 12 localement dans votre navigateur : collez une définition de diagramme issue de votre documentation, choisissez un exemple pour découvrir une famille de syntaxe, restylez-le avec onze thèmes et trois apparences, puis exportez un SVG ou un PNG prêt pour la production — ou partagez un lien qui reproduit exactement le même diagramme pour un collègue. Rien n’est envoyé : le moteur de rendu, l’assainisseur et l’exportateur vivent tous dans la page statique.
Trente familles de diagrammes, un seul éditeur
Mermaid 12 comprend bien plus que les organigrammes. Les classiques sont tous là — flowcharts avec le catalogue de formes de la v11.3, diagrammes de séquence avec activations et blocs loop/alt, diagrammes de classes, d’états et entités-associations, diagrammes de Gantt, parcours utilisateur, cartes mentales, frises chronologiques, graphes Git et tableaux Kanban. Les familles graphiques incluent camemberts, quadrants, diagrammes XY, Sankey et Venn. La version 12.0 ajoute les nouveaux venus : diagrammes de cas d’utilisation UML, agentflow (qui fait quoi, avec quel outil), treemaps, diagrammes de paquets, radars, architecture, arêtes de poisson Ishikawa, cartes Wardley, Cynefin et d’autres — vingt exemples choisis attendent dans le sélecteur, groupés par famille pour que la syntaxe suivante soit à un clic.
Chaque exemple est un diagramme complet et valide, modifiable sur place — changez un nom de nœud, ajoutez un lien, cassez volontairement quelque chose pour voir comment les erreurs apparaissent. La pastille d’état au-dessus du canevas signale inactif, chargement, prêt, obsolète ou erreur, et la rangée de statistiques affiche le type de diagramme détecté, le temps de rendu et la taille du SVG après chaque passage.
Apparence : thèmes, apparences, layouts
Trois réglages correspondent directement au schéma de configuration de Mermaid 12. Le thème choisit la palette : les cinq classiques (default, base, neutral, dark, forest), la paire plate neo, ou la famille redux avec ses variantes colorées redux-color et redux-dark-color que Mermaid 12 utilise par défaut pour les flowcharts et les cas d’utilisation. L’apparence choisit le style de tracé : classic pour les traits Mermaid traditionnels, neo pour le style moderne adouci et arrondi, ou handDrawn pour le look esquissé de rough.js — avec une graine optionnelle pour que le gribouillage se reproduise à l’identique d’une machine à l’autre. Le layout sélectionne le moteur : ELK, l’Eclipse Layout Kernel que Mermaid 12 intègre comme nouveau défaut et qui produit des mises en page plus nettes pour les grands graphes, ou Dagre, l’algorithme classique qui a disposé les diagrammes Mermaid pendant une décennie.
Vous préférez des réglages par diagramme ? Le frontmatter YAML de Mermaid et la syntaxe %%{directive}%% fonctionnent tels quels dans l’éditeur : un bloc --- avec des clés config: prime sur le panneau pour ce diagramme précis, exactement comme le décrit la documentation officielle.
Un canevas qui se comporte comme une fenêtre
L’aperçu est une véritable fenêtre, pas une image figée. Glissez pour vous déplacer, Ctrl/⌘ + molette pour zoomer, pincez sur écran tactile, et double-cliquez pour réinitialiser. Le curseur de zoom, les boutons +/− et la commande Ajuster restent synchronisés — Ajuster mesure le viewBox intrinsèque du diagramme et le met exactement à l’échelle du canevas, ce qu’il faut avant d’exporter. Le rendu automatique amortit la frappe d’un tiers de seconde ; désactivez-le et le bouton Rendre (ou Mod/⌘ + Entrée depuis n’importe où dans l’outil) prend le relais pour les grands documents où vous voulez un rendu volontaire et à la demande.
Les erreurs sont des citoyens de première classe. Quand le parseur rejette la source, le canevas laisse place à un panneau d’erreur portant le diagnostic de Mermaid — généralement la ligne et le jeton fautifs — si bien que corriger un end manquant ou une quote non fermée prend des secondes, pas des minutes.
Export et partage
Copier SVG place le balisage autonome complet dans le presse-papiers — taille intrinsèque fixée, prêt à intégrer dans une page HTML ou à coller dans un outil de design. Télécharger SVG enregistre le même document en fichier .svg nommé d’après le type de diagramme et la date. Télécharger PNG rastérise le rendu courant en résolution double sur fond transparent, entièrement dans le navigateur — aucun serveur ne voit votre diagramme, jamais. Copier la source et Partager complètent l’ensemble : le bouton de partage copie une URL dont le fragment transporte la source, le thème, l’apparence, le layout et le zoom, si bien que l’ouvrir sur une autre machine reproduit exactement la même image, sans aller-retour serveur.
Sécurité et confidentialité
L’outil initialise Mermaid avec securityLevel: "strict" — le défaut de la bibliothèque — qui échappe le HTML des labels et désactive les callbacks de clic, et le passage DOMPurify intégré à Mermaid assainit le SVG rendu avant que la visionneuse ne le monte via DOMParser, jamais par une API d’injection de balisage. Votre source n’est conservée que dans le localStorage de votre propre navigateur afin qu’un rechargement restaure votre travail, et les liens de partage gardent tout dans le fragment d’URL, que les navigateurs n’envoient jamais aux serveurs. Même posture que tous les outils Foxipa : une page statique, aucune télémétrie au-delà d’analytics agrégé et anonyme, rien de transmis.
Questions fréquentes
Qu’est-ce que Mermaid ? Un moteur de diagrammes open-source en JavaScript qui dessine des diagrammes à partir de définitions textuelles inspirées de Markdown. Il alimente les blocs de diagrammes de GitHub, GitLab, Notion, Obsidian et de nombreux systèmes de documentation — d’où le flux le plus courant de l’outil : « coller le bloc ```mermaid de ma doc ».
Quelle version la visionneuse utilise-t-elle ? Mermaid 12.0.0, la version courante, épinglée dans le build du projet. Cela signifie qu’ELK est le layout par défaut intégré, que la génération d’apparence redux-color/neo est disponible, tout comme les nouveaux types diagrammes de cas d’utilisation UML et agentflow.
Mon diagramme doit-il être complet ? Non — les sources partielles rendent ce qu’elles peuvent, et les sources invalides affichent le message d’erreur du parseur plutôt qu’un canevas vide. Travailler un diagramme par morceaux est une méthode normale.
Pourquoi mon PNG diffère-t-il légèrement du canevas ? L’export PNG rastérise le même SVG en résolution double ; le positionnement du texte est identique, mais les polices retombent sur celles que votre système propose, et les navigateurs rastérisent les labels SVG <foreignObject> avec de petites différences. Les navigateurs Chromium offrent le rendu le plus fidèle.
Y a-t-il une limite de taille ? L’éditeur accepte jusqu’à 500 000 caractères — le maxTextSize de Mermaid — et les liens de partage transportent jusqu’à 24 Ko de source. Les graphes très volumineux se rendent bien mais naturellement plus lentement ; désactivez le rendu automatique et utilisez Mod+Entrée pendant leur édition.