Éditeur Mermaid
Créez des diagrammes de flux, de séquence, de Gantt et plus à partir de texte avec l'éditeur Mermaid. Rendez, zoomez et exportez en SVG ou PNG dans votre navigateur.
Qu'est-ce que Mermaid ?
Mermaid est un langage de diagrammes open source qui permet de créer des diagrammes à partir de texte brut, comme Markdown. Vous décrivez nœuds et connexions dans une syntaxe simple et le moteur dessine automatiquement le diagramme.
Quels types de diagrammes sont pris en charge ?
L'éditeur fournit des exemples pour les diagrammes de flux, de séquence, de classes, d'états, ER, de Gantt, circulaires, les cartes mentales et les chronologies. Mermaid 11 en supporte bien d'autres à saisir manuellement.
Comment créer un diagramme ?
Choisissez un exemple dans le menu ou tapez votre code dans l'éditeur de gauche. L'aperçu se re-rend environ 350 ms après la frappe ; si la syntaxe est invalide, un panneau rouge affiche l'erreur exacte.
Mon code est-il envoyé quelque part ?
Non. Tout est rendu localement dans votre navigateur en JavaScript. Votre code ne quitte jamais votre appareil.
Comment exporter mon diagramme ?
Utilisez Télécharger SVG pour un vecteur extensible ou Télécharger PNG pour une image en résolution double, avec fond transparent en option. Copier le code place la source Mermaid dans le presse-papiers.
Pourquoi l'export PNG échoue-t-il parfois ?
Certaines fonctionnalités de Mermaid passent par foreignObject, que les navigateurs peuvent refuser de rastériser. Le PNG affiche alors une erreur, mais le téléchargement SVG fonctionne toujours car il ne nécessite aucune rastérisation.
Comment fonctionne le zoom ?
L'aperçu prend en charge un zoom de 0,5x à 2x. Les boutons + et - avancent de 10 %, Ajuster dimensionne le diagramme à la zone d'aperçu et 100 % restaure la taille d'origine.
Puis-je utiliser Mermaid dans ma documentation ?
Oui. GitHub, GitLab et de nombreux outils de documentation rendent les blocs Mermaid nativement : placez votre code dans un bloc de code fermé mermaid et il s'affiche automatiquement.
L'éditeur prend-il en charge le mode sombre ?
Oui. Le diagramme suit le thème de la plateforme : en mode sombre, il est re-rendu automatiquement avec le thème dark de Mermaid.
Des conseils pour des diagrammes lisibles ?
Gardez des libellés courts, choisissez une direction adaptée (TD vertical ou LR horizontal), découpez les très grands graphes en sous-graphes et utilisez les exemples intégrés comme modèles.
Comment utiliser Éditeur Mermaid
Mermaid transforme du texte simple en diagrammes de flux, de séquence, de Gantt et bien plus. Cet éditeur live re-rend votre code pendant que vous tapez, entièrement dans le navigateur — rien ne quitte votre appareil.
- Choisissez un point de départ dans le menu déroulant « Exemple » : neuf diagrammes prêts à l'emploi couvrent flowchart, séquence, classes, états, ER, Gantt, circulaire, carte mentale et chronologie, et le code correspondant se charge dans l'éditeur.
- Modifiez le code Mermaid dans le panneau de gauche ; l'aperçu de droite se re-rend environ un tiers de seconde après votre dernière frappe. Quand une erreur de syntaxe s'affiche dans le panneau rouge, le dernier diagramme valide reste visible le temps de corriger.
- Zoomez de 50 % à 200 % avec les boutons plus et moins, cliquez sur « Ajuster » pour adapter le diagramme à la zone d'aperçu, ou sur « 100% » pour revenir à la taille réelle.
- Cochez « Fond transparent » si vous voulez le PNG sans fond blanc, puis cliquez sur « Télécharger SVG » ou « Télécharger PNG » — le PNG est exporté en double résolution pour rester net une fois intégré.
- Cliquez sur « Copier le code » pour mettre la source Mermaid dans le presse-papiers et la coller dans vos docs, wikis ou dépôts.
Quand un diagramme refuse de s'afficher, commentez les lignes modifiées récemment pour isoler la faute — le message d'erreur nomme la ligne en cause, et l'aperçu conserve votre dernière version valide jusqu'au retour d'une syntaxe correcte.
Outils associés
- Code en Image Convertissez des extraits de code en images partageables avec coloration syntaxique, thèmes personnalisés et décorations de fenêtre. 100% confidentialité, tout dans votre navigateur.
- Aperçu Markdown Éditeur Markdown en ligne gratuit avec aperçu en direct. Écrivez, rendez et exportez Markdown avec support GFM complet.
- Visionneuse et Éditeur SVG Prévisualisez, modifiez et optimisez les fichiers SVG en ligne. Aperçu en temps réel, édition de code et outils d'optimisation.
- Visualiseur d'arbre JSON Visualisez les données JSON sous forme d'arbre repliable interactif. Recherchez clés et valeurs, suivez le JSONPath au survol et gérez les gros fichiers avec chargement différé. Glisser-déposer de fichiers .json pris en charge.
- Vérificateur de Hash Calculez et vérifiez les hashes MD5, SHA-1, SHA-256, SHA-512 localement
- Calculatrice Chmod Calculatrice chmod gratuite en ligne pour visualiser et calculer les permissions de fichiers Linux avec des cases à cocher. Convertissez instantanément entre notation numérique (755, 644) et symbolique (rwxr-xr-x). Supporte les permissions spéciales comme setuid, setgid, sticky bit.
- Table ASCII Référence complète de codage de caractères ASCII avec codes décimaux, hexadécimaux, octaux, binaires, entités HTML et descriptions. Recherche et filtre instantanés.
- Visionneuse Hexadécimale Affichez le contenu des fichiers en format hexadécimal avec recherche, navigation par décalage et défilement virtuel