Visor de Grafos Git de Mermaid
Renderiza diagramas Mermaid gitGraph en tu navegador. Visualiza estrategias de ramas y historiales de commits de Git. Exporta a SVG o PNG.
Introduce código Mermaid para previsualizar tu diagrama
Los diagramas de grafos Git visualizan estrategias de ramificación, patrones de fusión e historiales de commits en el desarrollo de software. Son invaluables en la documentación de equipos de ingeniería — explicando una estrategia Gitflow, ilustrando un flujo de trabajo de rama de características o mostrando cómo una corrección urgente se propaga desde producción de vuelta a desarrollo. La sintaxis `gitGraph` de Mermaid genera estas visualizaciones directamente a partir de texto, lo que facilita su incrustación en READMEs, guías de incorporación y runbooks. Los asistentes de IA frecuentemente producen grafos Git de Mermaid cuando los desarrolladores preguntan 'Muéstrame cómo funciona Gitflow', 'Diagrama la estrategia de ramas para un flujo de trabajo de desarrollo basado en trunk' o 'Ilustra cómo se fusionaría una corrección urgente en nuestro proceso de lanzamiento'. Pegar la salida en Zolkit renderiza la visualización de la rama inmediatamente, permitiendo a los líderes de ingeniería verificar que el flujo de trabajo esté representado con precisión antes de distribuirlo al equipo. El visor de grafos Git de Zolkit soporta todas las construcciones de `gitGraph`: IDs de commit y etiquetas, creación y checkout de ramas, commits de fusión, cherry-pick y la propiedad `type` para resaltar commits como HIGHLIGHT, REVERSE o NORMAL. Múltiples ramas se renderizan en colores distintos para una diferenciación visual inmediata.
Visor y Exportador de Diagramas Mermaid Online Gratis
El Visor de Diagramas Mermaid de Zolkit te permite pegar cualquier código Mermaid y ver un diagrama renderizado al instante — sin instalación, sin registro, sin subidas a servidores. Todo se ejecuta en tu navegador, lo que lo convierte en la forma más rápida de verificar diagramas generados por IA desde Claude, ChatGPT o Gemini. Soporta todos los tipos principales de diagramas Mermaid: diagramas de flujo, diagramas de secuencia, diagramas de clases, diagramas ER, diagramas de Gantt, diagramas de estado, mapas mentales, gráficos Git, gráficos circulares y líneas de tiempo.
Vista Previa Instantánea en Vivo
Los diagramas se renderizan automáticamente mientras escribes, con un retardo de 300 ms para que nunca se sienta lento.
100% Privado
Todo el renderizado ocurre en tu navegador usando mermaid.js. Tu código nunca se envía a ningún servidor.
Exportar SVG y PNG
Descarga tu diagrama como un SVG vectorial nítido o un PNG de alta resolución 2× listo para documentos y presentaciones.
Todos los Tipos de Diagramas Mermaid
Soporta diagramas de flujo, diagramas de secuencia, diagramas de clases, diagramas ER, diagramas de Gantt, mapas mentales, gráficos Git y más.
Listo para Diagramas de IA
Construido para la era de la IA — previsualiza directamente diagramas generados por Claude, ChatGPT, Gemini o cualquier LLM.
Siempre Gratis
No se necesita cuenta, sin límites de uso, sin marcas de agua. El visor Mermaid de Zolkit es completamente gratuito para siempre.
Cómo Previsualizar un Diagrama Mermaid
- 1
Pega tu código Mermaid en el editor de la izquierda — puedes copiarlo desde un asistente de IA o escribirlo manualmente.
- 2
El diagrama se renderiza instantáneamente en el panel de vista previa de la derecha. Si hay un error de sintaxis, un mensaje explica el problema.
- 3
Haz clic en 'Exportar SVG' o 'Exportar PNG' para descargar tu diagrama como un archivo listo para documentación, presentaciones o compartir.
Preguntas Frecuentes
¿Cómo añado IDs de commit y etiquetas a un grafo Git de Mermaid?
Usa `commit id: "mensaje-commit"` para añadir una etiqueta a un commit, y `commit id: "v1.0" tag: "v1.0.0"` para adjuntar una etiqueta de versión. Las etiquetas se renderizan como pequeñas insignias en el nodo del commit, haciendo que los puntos de lanzamiento sean inmediatamente visibles. Los IDs de commit también se pueden usar como referencias para operaciones de cherry-pick: `cherry-pick id: "id-commit"`.
¿Cómo fusiono ramas en un grafo Git de Mermaid?
Después de crear y poblar una rama, haz checkout de la rama de destino y usa `merge nombreDeRama`. Ejemplo: `checkout main` luego `merge develop`. Puedes añadir `id` y `tag` al commit de fusión: `merge feature/auth id: "Merge auth" tag: "v2.0"`. Mermaid renderiza la fusión como una línea de conexión entre las dos pistas de ramas.
¿Puedo cambiar la orientación del grafo Git?
Sí. Añade `LR` después de `gitGraph` para un diseño de izquierda a derecha: `gitGraph LR:`. El valor predeterminado es de izquierda a derecha. Para documentación que se leerá verticalmente (como un README renderizado en móvil), puedes experimentar con `TB` (de arriba a abajo), aunque LR es la dirección convencional para la visualización del historial de Git.
¿Cuál es la diferencia entre gitGraph y un diagrama de secuencia para documentar flujos de trabajo de Git?
gitGraph está diseñado específicamente para mostrar ramificación, fusión e historial de commits — renderiza los carriles de ramas paralelos familiares que los desarrolladores reconocen de herramientas como GitKraken o el grafo de red de GitHub. Un diagrama de secuencia, por el contrario, muestra interacciones entre actores a lo largo del tiempo pero no transmite la estructura de ramificación. Para documentar un flujo de trabajo de Git o un proceso de lanzamiento, gitGraph es siempre la elección correcta.