Éditeur de diagrammes Mermaid

Écrire du code Mermaid et voir organigrammes, diagrammes de séquence et plus encore ; exporter en SVG ou PNG
  • Les fichiers ne quittent pas votre appareil
  • S’exécute dans le navigateur
  • Gratuit, sans compte, sans filigrane
PreviewLoading Mermaid…

Comment utiliser Éditeur de diagrammes Mermaid

Écrivez du code Mermaid et voyez le diagramme au fil de la saisie : organigrammes, séquence, classe, état, ER, Gantt, secteurs, carte mentale, frise et graphes Git. Zoomez et déplacez l'aperçu, puis exportez en SVG ou PNG jusqu'à 4×. Le rendu se fait dans votre navigateur.

  1. 1

    Saisissez du code Mermaid dans l'éditeur, ou choisissez un diagramme dans Exemple pour démarrer.

  2. 2

    Choisissez un Thème : Défaut, Neutre, Sombre ou Forêt.

  3. 3

    Vérifiez l'aperçu. Faites défiler ou pincez pour zoomer, faites glisser pour vous déplacer, et utilisez Ajuster à la vue ou Plein écran.

  4. 4

    Réglez l'Arrière-plan et la taille du PNG, puis cliquez sur SVG ou PNG pour télécharger, ou sur Copier le SVG / Copier le PNG pour le presse-papiers.

Questions fréquentes

Le code de mon diagramme est-il envoyé à un serveur ?

Non. Mermaid s'exécute dans la page, votre code et vos diagrammes restent donc dans votre navigateur. Le code est enregistré localement, il est donc encore là la prochaine fois.

Que se passe-t-il lorsque mon code a une erreur de syntaxe ?

L'erreur apparaît sous l'éditeur avec son numéro de ligne, et l'aperçu continue d'afficher le dernier diagramme qui s'est rendu.

Puis-je exporter avec un arrière-plan transparent ?

Oui. Réglez Arrière-plan sur Transparent avant d'exporter en SVG ou PNG.

Comment obtenir un PNG plus net ?

Choisissez une taille de PNG de 2×, 3× ou 4×. Les dimensions exactes en pixels sont indiquées à côté du réglage.

Existe-t-il un raccourci clavier pour enregistrer ?

Ctrl/⌘ + S dans l'éditeur télécharge le SVG. Dans l'aperçu, + et − zooment, les flèches déplacent la vue, 0 revient à 100 %, et F ajuste le diagramme.