Rendu de diagrammes Mermaid
Rend des diagrammes Mermaid (flux, séquence, gantt) en SVG dans votre navigateur.
Votre code Mermaid est rendu localement dans votre navigateur et rien n'est envoyé à un serveur.
Besoin de réduire un diagramme exporté ? Essayez l'Optimiseur SVG.
À propos de Rendu de diagrammes Mermaid
Cet éditeur mermaid en direct transforme du code Mermaid en diagrammes rendus à mesure que vous tapez, le rendu démarrant dès que vous collez. Déposez un organigramme, un diagramme de séquence, un diagramme de Gantt, un diagramme de classes ou un diagramme d'état et regardez le SVG apparaître instantanément à côté de votre source. Conçu pour les développeurs, rédacteurs techniques et architectes qui gardent des diagrammes dans des documents, des fichiers README ou des notes de conception et veulent un moyen rapide de les prévisualiser et de les exporter. Le moteur de rendu de diagramme mermaid détecte automatiquement les thèmes clair et sombre pour s'accorder à votre vue, signale les erreurs de syntaxe en ligne pour les corriger vite, et vous permet de télécharger le résultat en SVG propre. Comme tout est traité localement dans votre navigateur, la source de votre diagramme ne quitte jamais votre appareil et rien n'est envoyé à un serveur.
Fonctionnalités
- Rendu en direct du code Mermaid en SVG à mesure que vous tapez
- Prend en charge organigrammes, séquence, Gantt, classes, état et plus de types de diagrammes
- Des messages d'erreur de syntaxe en ligne repèrent les problèmes dans votre code
- Détecte automatiquement le thème clair et sombre pour s'accorder à votre vue actuelle
- Téléchargez le diagramme rendu en fichier SVG propre
- Le mode de sécurité strict assainit le contenu du diagramme pendant le rendu
- Tout s'exécute dans votre navigateur, rien n'est envoyé à un serveur
Comment utiliser Rendu de diagrammes Mermaid
- Collez ou tapez votre code Mermaid dans la zone de saisie.
- Regardez le diagramme se rendre automatiquement dans le panneau de sortie.
- Corrigez les éventuels messages d'erreur de syntaxe en ligne s'ils apparaissent.
- Basculez le thème de votre navigateur ou application pour prévisualiser le style clair ou sombre.
- Cliquez sur télécharger pour enregistrer le résultat en diagram.svg.
Exemple
Entrée
graph TD
A[Début] --> B{Ça marche ?}
B -->|Oui| C[Livrer]
B -->|Non| D[Corriger]
D --> B
Sortie
Un organigramme SVG rendu : une boîte Début mène à un losange de décision Ça marche ?, la branche Oui pointe vers Livrer, la branche Non pointe vers Corriger, et Corriger reboucle vers la décision.
Un organigramme simple rendu en SVG téléchargeable.
Erreurs courantes et dépannage
- Erreur d'analyse ou « Syntax error in text » affichée au lieu d'un diagramme. — Vérifiez que la première ligne déclare un type de diagramme valide (par ex. graph TD, sequenceDiagram, gantt) et que les flèches et crochets sont équilibrés.
- Les étiquettes de nœud avec des caractères spéciaux comme des parenthèses ou des guillemets cassent le rendu. — Entourez le texte de l'étiquette de guillemets doubles, par exemple A["Mon (étiquette)"], pour que Mermaid traite les caractères littéralement.
- Le diagramme se rend mais les couleurs semblent fausses sur votre arrière-plan. — Le moteur de rendu suit automatiquement votre thème clair ou sombre ; basculez le thème de votre application pour obtenir le style correspondant.
- L'indentation ou les tabulations provoquent une mise en page inattendue dans les organigrammes. — Utilisez des espaces cohérents pour l'indentation et gardez chaque nœud ou lien sur sa propre ligne.
Foire aux questions
- Qu'est-ce que l'éditeur Mermaid en direct ?
- C'est un outil dans le navigateur qui convertit le code Mermaid en diagramme rendu en temps réel, pour prévisualiser organigrammes, diagrammes de séquence et plus à côté de votre source et les exporter en SVG.
- Quels types de diagrammes l'éditeur Mermaid en direct prend-il en charge ?
- Il rend la syntaxe Mermaid standard, y compris organigrammes, diagrammes de séquence, diagrammes de Gantt, diagrammes de classes et diagrammes d'état, la même syntaxe utilisée dans GitHub et de nombreux outils de documentation.
- Comment exporter un diagramme Mermaid en image ?
- Une fois votre diagramme rendu, cliquez sur télécharger pour l'enregistrer en fichier SVG que vous pouvez déposer dans des documents ou ouvrir dans n'importe quel éditeur vectoriel.
- Pourquoi mon diagramme Mermaid affiche-t-il une erreur de syntaxe ?
- Le moteur de rendu valide le code Mermaid et affiche le message de l'analyseur en ligne ; la plupart des erreurs viennent d'une déclaration de type de diagramme manquante ou de crochets et flèches non équilibrés.
- Le diagramme rendu correspond-il à mon mode sombre ?
- Oui. L'éditeur Mermaid en direct détecte si vous êtes en mode clair ou sombre et applique automatiquement le thème Mermaid correspondant.
- Le code de mon diagramme Mermaid reste-t-il privé ?
- Oui. Votre source Mermaid est rendue localement dans votre navigateur et ne quitte jamais votre appareil, rien n'est envoyé à un serveur.
Outils associés
- Formateur JSON — Embellit, minifie et valide le JSON avec la localisation des erreurs.
- YAML ↔ JSON — Convertit du YAML en JSON et inversement.
- Aperçu Markdown — Rend le Markdown en HTML avec un aperçu en direct.
- Convertisseur MDX — Rend le MDX en texte, convertit HTML → MDX et échappe le texte en MDX littéral.
- Optimiseur SVG — Minifie le SVG : supprime commentaires, métadonnées et résidus d’éditeur, et réduit les espaces.
- Formateur XML — Embellit, minifie et valide le XML, et convertit XML ↔ JSON.
- Formateur GraphQL — Met en forme ou minifie les requêtes et schémas GraphQL, valide la syntaxe et extrait les opérations.
- JSON vers code — Génère des types Go, Rust, Python, Java, Kotlin, C# et TypeScript à partir de JSON.
Tous les outils ArrayKit