Les pubs vous déplaisent ? Aller Sans pub Auj. 

Rendu de diagramme Mermaid

PromoteurImageTexte

ANNONCE · Supprimer ?

SAISIR

Processus automatique

SORTIR

Côté client

ANNONCE · Supprimer ?

Guide

Rendu de diagramme Mermaid

Collez le code mermaid.js et voyez immédiatement un diagramme interactif que vous pouvez copier ou télécharger. Supporte les flowcharts, les diagrammes de séquence, les tableaux de Gantt, les camemberts, les diagrammes de classes, et plus encore — tous rendus côté client dans votre navigateur, sans serveur, compte ou installation requise.

Mermaid est idéal pour « diagrammes en code » : votre diagramme se trouve à côté du reste de votre projet sous forme de texte simple, mais les humains ont besoin d'un rendu pour voir l'image. Ce outillage comble ce vide — insérez n'importe quel snippet mermaid, changez les thèmes et exportez le résultat au format SVG ou PNG.

Comment utiliser

Collez votre code mermaid dans l'éditeur — ou cliquez Flowchart, Séquence, Gantt, Camembert, ou Classe pour charger un exemple de départ.
Choisissez un thème (Par défaut, Sombre, Forêt, Neutre, Base) et un arrière-plan (Transparent, Blanc, Gris clair, Sombre) pour correspondre à votre diapositive ou document.
Observez le diagramme se mettre à jour en temps réel pendant que vous écrivez. Si votre syntaxe est incorrecte, vous verrez exactement le message d'erreur mermaid sous le prévisualisateur.
Quand il est correct, cliquez sur Télécharger SVG pour un vecteur parfaitement scalable, Télécharger PNG pour une capture d'écran raster, ou Copie pour obtenir la source SVG pour l'incorporation.

Caractéristiques

Prévisualisation en temps réel – le diagramme se rerend en temps réel lors des modifications, avec un décalage pour que les grands diagrammes restent fluides.
Tous les types de diagrammes majeurs – flowcharts, séquence, Gantt, camemberts, diagrammes de classes, schémas ER, états, parcours, et toute autre syntaxe prise en charge par mermaid v11.
5 thèmes intégrés – Par défaut, Sombre, Forêt, Neutre, et Base, plus des arrière-plans prévisibles configurables pour transparent, blanc, clair ou sombre.
Export SVG et PNG – téléchargez un vecteur net SVG ou un PNG à échelle 2x sans quitter la page.
Source SVG copiable – récupérez le code brut pour le coller dans un README, un document ou une page web.
Reporting d'erreurs en ligne – les erreurs de syntaxe mermaid sont clairement affichées afin de les corriger en quelques secondes.
Première confidentialité – tout se déroule dans votre navigateur. Vos diagrammes ne touchent jamais nos serveurs.

ANNONCE · Supprimer ?

 FAQ

Qu'est-ce que mermaid.js ?

Mermaid est une bibliothèque JavaScript open-source qui transforme des définitions de diagrammes au format texte en diagrammes SVG. Elle a été conçue afin que les ingénieurs, les rédacteurs techniques et les équipes de produit puissent garder les diagrammes sous contrôle de version, au même niveau que leur code, plutôt que de maintenir des fichiers binaires dans un outil de conception séparé. Mermaid supporte de nombreuses types de diagrammes, allant des simples flowcharts aux schémas d'entités et de Gantt.
Pourquoi utiliser des diagrammes en code au lieu d'un outil de dessin ?

Les diagrammes écrits au texte se trouvent dans votre dépôt, ils se diffèrent proprement dans les demandes de pull, et se mettent à jour instantanément quand les idées sous-jacentes changent. Ils sont indexables, scriptables, et ne se décalent jamais avec le codebase comme une image dans un wiki. Les outils de dessin visuel sont excellents pour des présentations ponctuelles, mais pour une documentation vivante, un format texte s'adapte mieux à votre équipe.
Quelle est la différence entre SVG et PNG lors de l'export d'un diagramme ?

L'SVG est un format vectoriel — il stocke les formes et le texte sous forme de mathématiques, donc il reste net à toute taille et est petit en taille de fichier pour les diagrammes typiques. Le PNG est un format raster qui stocke un réseau fixe de pixels, ce qui en fait un choix sûr pour les outils qui ne supportent pas l'SVG (diapositives anciennes, certains outils de chat, plateformes sans image). Pour les documents, les pages web et les outils modernes de présentation, l'SVG est presque toujours le meilleur choix.
Comment les thèmes mermaid influencent-ils le rendu ?

Un thème mermaid est un ensemble de règles de couleurs par défaut et de typographie appliquées au diagramme rendu. Le thème par défaut est lumineux et fonctionne bien sur des arrière-plans clairs, le thème Sombre inverse les couleurs pour des interfaces sombres, le thème Forêt utilise des tons verts, le thème Neutre est en gris, et le thème Base est une base simplifiée que vous pouvez personnaliser avec des variables de thème. Changer de thème ne change que l'apparence du SVG — la structure du diagramme sous-jacente reste la même.
Le rendu est-il fait localement ou sur un serveur ?

Le rendu se produit entièrement dans votre navigateur grâce à l'engine JavaScript de mermaid. Rien n'est envoyé, envoyé à un serveur ou stocké à distance. Cela garde les diagrammes d'architecture confidentiels et signifie que l'outil fonctionne même sur un réseau lent ou hors ligne.

Envie d'une expérience sans pub ? Passez à la version sans pub



 Installez nos extensions

Ajoutez des outils IO à votre navigateur préféré pour un accès instantané et une recherche plus rapide

Sur

恵 Le Tableau de Bord Est Arrivé !

Tableau de Bord est une façon amusante de suivre vos jeux, toutes les données sont stockées dans votre navigateur. D'autres fonctionnalités arrivent bientôt !

ANNONCE · Supprimer ?