Mermaid Editor

Éditeur mermaid en ligne, visuel et code au même endroit

La plupart des éditeurs mermaid se limitent à une zone de texte et un aperçu. Celui-ci ajoute aussi un canevas : cliquez pour ajouter un bloc, glissez une flèche, regroupez les éléments en zones — et le code mermaid s'écrit tout seul. Passez à l'onglet code pour l'éditer à la main ; le canevas suit.

  • Rendu en temps réel

    Le vrai moteur mermaid, redessiné quelques centaines de millisecondes après votre dernière frappe.

  • Code et canevas synchronisés

    Modifiez un côté, l'autre suit — aucun copier-coller entre deux outils.

  • 14 formes de nœuds

    Rectangle, arrondi, pilule, cercle, losange, base de données, hexagone et le reste, en un clic.

  • Gratuit, sans inscription

    Pas d'essai, pas de filigrane — l'éditeur s'ouvre immédiatement. Connectez-vous seulement si vous voulez plus d'un schéma.

Un canevas, pas juste une zone de texte

L'onglet visuel est un vrai éditeur par-dessus le diagramme rendu : cliquez sur un nœud pour le sélectionner, double-cliquez pour le renommer sur place, glissez n'importe où pour vous déplacer.

  • Cliquer pour construireAjoutez un bloc, pointez une flèche vers un autre, nommez la flèche. Aucune syntaxe à apprendre avant de commencer.

  • Choisir une formeQuatorze formes de flowchart mermaid — losanges de décision, cylindres de base de données, sous-routines — dans un seul sélecteur.

  • Colorer ce que vous voulezHuit préréglages plus un sélecteur de couleur, appliqués à un seul nœud ou à toute une zone.

Un code mermaid qui reste le vôtre

L'onglet texte, c'est du mermaid pur — la même syntaxe que GitHub, GitLab, Notion et Obsidian savent déjà afficher. Rien ici n'est un format propriétaire.

  • L'écrire à la mainTapez du mermaid directement et regardez-le se dessiner. Six exemples prêts à l'emploi pour démarrer.

  • Aller-retour garantiLes flowcharts que vous collez sont réanalysés sur le canevas — nœuds, formes, couleurs, sous-graphes, tout y passe.

  • Tous les types de diagrammesFlowchart, séquence, classe, état, ER, gantt, git graph, camembert — l'aperçu affiche tout ce que mermaid prend en charge.

Les grands diagrammes restent lisibles

Les diagrammes d'architecture dépassent vite un seul écran. Déplacement, zoom et regroupement sont pensés pour ça plutôt que pour le combattre.

  • Zones et imbricationRegroupez des blocs en sous-graphes, imbriquez une zone dans une autre, déplacez toute une branche en un seul geste.

  • Zoom de 2 % à 1600 %Molette pour déplacer, ctrl+molette pour zoomer, ou recentrez d'un bouton.

  • Enregistré au fil de l'eauVotre schéma s'enregistre automatiquement dans le navigateur pendant l'édition. Connectez-vous et il s'enregistre dans votre compte, pour vous suivre sur n'importe quel appareil.

Exportez et passez à la suite

Rien n'est verrouillé. Prenez l'image, prenez la source, ou prenez un bloc Markdown prêt à coller dans un document.

  • Aucun paywallToutes les fonctionnalités, y compris l'export, sont gratuites. Il n'existe aucune offre payante vers laquelle évoluer.

  • Rendu dans votre navigateurLe rendu se fait dans votre navigateur ; sans compte, le schéma n'en sort jamais, et avec un compte, le document enregistré vous suit sur n'importe quel appareil.

  • SVG, PNG, .mmd, .mdCopiez le balisage SVG, téléchargez un PNG en 2x, enregistrez la source mermaid, ou récupérez un bloc Markdown.

Comment ça se compare aux solutions habituelles

Les outils diagram-as-code vous font tout écrire à la main. Les outils glisser-déposer vous donnent une image que vous ne pouvez pas comparer ligne à ligne. Celui-ci refuse de choisir un camp.

Prise en main

IQ Mermaid: Double-cliquez sur le canevas et un nœud apparaît. Vous apprendrez la syntaxe plus tard, ou jamais.

Outil classique: Lisez d'abord la référence de syntaxe, ou contentez-vous d'un outil de dessin sans aucune représentation textuelle.

Le format de sortie

IQ Mermaid: Du mermaid pur — le même texte que GitHub, GitLab et Notion affichent nativement.

Outil classique: Un fichier propriétaire qui ne s'ouvre que dans l'outil qui l'a créé.

Modifier plus tard

IQ Mermaid: Modifiez le code ou déplacez les blocs. Les deux sens fonctionnent sur le même diagramme.

Outil classique: Un seul sens possible : les outils code-first n'ont pas de canevas, les outils canevas-first n'ont pas de source.

Prix

IQ Mermaid: Gratuit — même pas un e-mail.

Outil classique: Offre gratuite plafonnée à quelques diagrammes, export ou collaboration réservés à un abonnement.

Où vivent les données

IQ Mermaid: Dans votre navigateur, ou dans votre compte si vous voulez qu'il vous suive sur n'importe quel appareil.

Outil classique: Un compte sur le serveur de quelqu'un d'autre, avec vos diagrammes qui y sont rattachés.

Éditeur mermaid questions

Pour commencer, il suffit d'ouvrir la page.

Qu'est-ce que mermaid ?

Mermaid est une syntaxe textuelle pour les diagrammes : vous décrivez des nœuds et des flèches en quelques lignes, et un moteur de rendu dessine l'image. GitHub, GitLab, Notion et Obsidian l'affichent directement dans le Markdown, si bien qu'un bloc mermaid reste lisible dans une pull request ou une page de wiki.

Cet éditeur mermaid est-il vraiment gratuit ?

Oui. Toutes les fonctions, y compris l'export en SVG et PNG, sont gratuites, et vous pouvez utiliser l'éditeur sans rien créer. Un compte gratuit facultatif ajoute davantage de schémas enregistrés et la synchronisation entre appareils — il n'y a pas d'offre payante et rien n'est réservé.

Faut-il connaître la syntaxe mermaid ?

Non. Commencez par l'onglet visuel : double-cliquez sur le canevas pour ajouter un bloc, sélectionnez-le et tracez une flèche vers un autre. Le code mermaid est généré pour vous, et vous pouvez le lire dès que vous voulez apprendre la syntaxe.

Quels types de diagrammes sont pris en charge ?

L'onglet code affiche tout ce que mermaid prend en charge — flowchart, séquence, classe, état, relation entre entités, gantt, git graph, camembert et plus encore. Le canevas visuel modifie spécifiquement les flowcharts, qui représentent la plupart des diagrammes.

Puis-je exporter en PNG ou en SVG ?

Oui. Copiez le balisage SVG dans le presse-papiers, téléchargez le fichier SVG, ou téléchargez un PNG rendu en 2x pour vos présentations et documents. Vous pouvez aussi enregistrer la source mermaid en .mmd ou sous forme de bloc Markdown.

Où mon diagramme est-il stocké ?

Sans compte, votre unique schéma est enregistré dans le navigateur : il est là quand vous revenez sur le même appareil. Connectez-vous et il est enregistré dans votre compte, d'où il peut vous suivre sur un autre appareil. Exportez la source si vous voulez votre propre copie.

Puis-je coller un diagramme mermaid existant ?

Oui. Collez-le dans l'onglet code ; un flowchart est réanalysé sur le canevas visuel avec ses nœuds, formes, couleurs et sous-graphes intacts. Les autres types de diagrammes s'affichent dans l'aperçu mais restent en code uniquement.

Fonctionne-t-il hors ligne ?

Le rendu se fait entièrement dans votre navigateur : une fois la page chargée, l'éditeur continue de fonctionner sans connexion.

Ouvrez l'éditeur. Gratuit — sans inscription.

Un canevas vierge, un onglet code et toutes les options d'export — gratuit, dans votre navigateur, dès maintenant.