Visualiseur de graphes Git Mermaid
Rendez les diagrammes Mermaid gitGraph dans votre navigateur. Visualisez les stratégies de branche Git et l'historique des commits. Exportez en SVG ou PNG.
Entrez du code Mermaid pour prévisualiser votre diagramme
Les diagrammes de graphes Git visualisent les stratégies de branchement, les modèles de fusion et les historiques de commits dans le développement logiciel. Ils sont inestimables dans la documentation des équipes d'ingénierie — expliquant une stratégie Gitflow, illustrant un flux de travail de branche de fonctionnalité, ou montrant comment un correctif se propage de la production vers le développement. La syntaxe `gitGraph` de Mermaid génère ces visuels directement à partir de texte, ce qui les rend faciles à intégrer dans les README, les guides d'intégration et les runbooks. Les assistants IA produisent fréquemment des graphes Git Mermaid lorsque les développeurs demandent "Montre-moi comment fonctionne Gitflow", "Diagramme la stratégie de branche pour un flux de travail de développement basé sur le tronc", ou "Illustre comment un correctif serait fusionné dans notre processus de publication". Coller la sortie dans Zolkit rend la visualisation de la branche immédiatement, permettant aux responsables de l'ingénierie de vérifier que le flux de travail est correctement représenté avant de le distribuer à l'équipe. Le visualiseur de graphes Git de Zolkit prend en charge toutes les constructions `gitGraph` : identifiants de commit et tags, création et checkout de branches, commits de fusion, cherry-pick, et la propriété `type` pour mettre en évidence les commits comme HIGHLIGHT, REVERSE ou NORMAL. Plusieurs branches sont rendues avec des couleurs distinctes pour une différenciation visuelle immédiate.
Visualiseur et Exportateur Gratuit de Diagrammes Mermaid en Ligne
Le Visualiseur de Diagrammes Mermaid de Zolkit vous permet de coller n'importe quel code Mermaid et de voir un diagramme rendu instantanément — aucune installation, aucune inscription, aucun téléversement sur serveur. Tout s'exécute dans votre navigateur, ce qui en fait le moyen le plus rapide de vérifier les diagrammes générés par IA depuis Claude, ChatGPT ou Gemini. Prend en charge tous les principaux types de diagrammes Mermaid : organigrammes, diagrammes de séquence, diagrammes de classes, diagrammes ER, diagrammes de Gantt, diagrammes d'états, cartes mentales, graphes Git, diagrammes circulaires et chronologies.
Aperçu Instantané en Direct
Les diagrammes sont rendus automatiquement pendant que vous tapez, avec un délai de 300 ms pour qu'il ne soit jamais lent.
100% Privé
Tout le rendu se fait dans votre navigateur à l'aide de mermaid.js. Votre code n'est jamais envoyé à aucun serveur.
Exporter SVG & PNG
Téléchargez votre diagramme en tant que SVG vectoriel net ou PNG 2× haute résolution prêt pour vos documents et présentations.
Tous les Types de Diagrammes Mermaid
Prend en charge les organigrammes, diagrammes de séquence, diagrammes de classes, diagrammes ER, diagrammes de Gantt, cartes mentales, graphes Git, et plus encore.
Prêt pour les Diagrammes IA
Conçu pour l'ère de l'IA — prévisualisez directement les diagrammes générés par Claude, ChatGPT, Gemini, ou tout LLM.
Toujours Gratuit
Aucun compte requis, aucune limite d'utilisation, aucun filigrane. Le visualiseur Mermaid de Zolkit est entièrement gratuit pour toujours.
Comment Prévisualiser un Diagramme Mermaid
- 1
Collez votre code Mermaid dans l'éditeur à gauche — vous pouvez le copier depuis un assistant IA ou l'écrire manuellement.
- 2
Le diagramme est rendu instantanément dans le panneau d'aperçu à droite. S'il y a une erreur de syntaxe, un message explique le problème.
- 3
Cliquez sur 'Exporter SVG' ou 'Exporter PNG' pour télécharger votre diagramme sous forme de fichier prêt pour la documentation, les présentations ou le partage.
Questions Fréquemment Posées
Comment ajouter des identifiants de commit et des tags à un graphe Git Mermaid ?
Utilisez `commit id: "message de commit"` pour ajouter une étiquette à un commit, et `commit id: "v1.0" tag: "v1.0.0"` pour attacher un tag de version. Les tags sont rendus sous forme de petits badges sur le nœud de commit, rendant les points de publication immédiatement visibles. Les identifiants de commit peuvent également être utilisés comme références pour les opérations de cherry-pick : `cherry-pick id: "id-du-commit"`.
Comment fusionner des branches dans un graphe Git Mermaid ?
Après avoir créé et peuplé une branche, faites un checkout de la branche cible et utilisez `merge nomDeLaBranche`. Exemple : `checkout main` puis `merge develop`. Vous pouvez ajouter `id` et `tag` au commit de fusion : `merge feature/auth id: "Fusion auth" tag: "v2.0"`. Mermaid rend la fusion comme une ligne de connexion entre les deux pistes de branche.
Puis-je changer l'orientation du graphe Git ?
Oui. Ajoutez `LR` après `gitGraph` pour une disposition de gauche à droite : `gitGraph LR:`. La valeur par défaut est de gauche à droite. Pour la documentation qui sera lue verticalement (comme un README rendu sur mobile), vous pouvez expérimenter avec `TB` (de haut en bas), bien que LR soit la direction conventionnelle pour la visualisation de l'historique Git.
Quelle est la différence entre gitGraph et un diagramme de séquence pour documenter les flux de travail Git ?
gitGraph est spécialement conçu pour montrer le branchement, la fusion et l'historique des commits — il rend les voies de branche parallèles familières que les développeurs reconnaissent des outils comme GitKraken ou le graphe réseau de GitHub. Un diagramme de séquence, en revanche, montre les interactions entre les acteurs au fil du temps mais ne transmet pas la structure de branchement. Pour documenter un flux de travail Git ou un processus de publication, gitGraph est toujours le bon choix.