Aperçu de diagrammes Mermaid
Saisissez du code Mermaid et consultez des diagrammes comme flowchart et sequenceDiagram dans un aperçu SVG en direct.
Documentation par diagrammes
Prévisualisez du code Mermaid en diagramme SVG instantanément
L'aperçu de diagrammes Mermaid rend la syntaxe Mermaid dans le navigateur pour préparer des diagrammes destinés aux README, wikis et documents de conception.
Saisissez une syntaxe Mermaid courante en documentation, comme flowchart, sequenceDiagram, classDiagram et stateDiagram, puis consultez le résultat SVG à droite.
Si la syntaxe est invalide, la zone d'aperçu affiche l'état d'erreur avec le code d'origine pour faciliter la correction.
Copiez le SVG rendu ou le code Mermaid d'origine pour poursuivre la rédaction de README, issues et documents techniques.
Quand l'utiliser ?
Utilisez-le pour vérifier rapidement des flux de service, séquences API, transitions d'état ou structures d'architecture simples avant de les ajouter à la documentation.
Puis-je insérer des exemples ?
Choisissez un exemple flowchart, sequenceDiagram, classDiagram ou stateDiagram au-dessus de l'éditeur pour remplir l'entrée immédiatement.
Comment les erreurs s'affichent-elles ?
Lorsque le rendu Mermaid échoue, l'outil affiche le message d'erreur avec le bloc de code source pour faciliter la correction.
Que puis-je copier ?
Copier SVG copie le rendu, tandis que Copier la source copie le code Mermaid saisi.
Le Mermaid renderer est chargé depuis un CDN externe, et votre saisie est traitée uniquement dans le navigateur.
Aperçu de diagrammes Mermaid Espace d'aperçu de diagramme Mermaid
Mode d'emploi
- 1 Écrivez ou collez la syntaxe Mermaid dans la zone de saisie gauche.
- 2 Si vous avez besoin d'un exemple, choisissez flowchart, sequenceDiagram, classDiagram ou stateDiagram au-dessus de la saisie.
- 3 Consultez le diagramme SVG ou le message d'erreur dans l'aperçu à droite.
- 4 Lorsque le résultat convient, copiez le contenu avec Copier SVG ou Copier la source.
Cas d'usage courants
- Prévisualiser un flowchart pour README
- Vérifier un sequenceDiagram de flux d'appels API
- Relire un brouillon de transition d'état ou de relation class
Questions fréquentes
Quels diagrammes Mermaid puis-je prévisualiser ?
L'outil rend en SVG la syntaxe Mermaid courante prise en charge par Mermaid renderer, notamment flowchart, sequenceDiagram, classDiagram et stateDiagram.
Que se passe-t-il en cas d'erreur de syntaxe ?
Si le rendu échoue, la zone d'aperçu affiche un état d'erreur et le code source original sous forme de bloc de code.
Le code du diagramme est-il envoyé au serveur ?
Non. Cet outil est client-only, et le code Mermaid est traité dans le navigateur.