GitDiagram

npx add-mcp 'https://gitdiagram.com/mcp'

GitDiagram

Visualiza cualquier base de código: convierte cualquier repositorio de GitHub, público o privado, en un diagrama de arquitectura interactivo, o míralo explicado en un video narrado de un minuto. Los agentes de IA también pueden usarlo, a través del servidor MCP o la versión Markdown de cualquier diagrama (gitdiagram.com/owner/repo.md).

Prueba GitDiagram → · O reemplaza hub con diagram en cualquier URL de repositorio de GitHub.

[

](https://gitdiagram.com/out/sent-2026-09?placement=readme)_Patrocinado

SMS, WhatsApp y RCS a través de una sola API. Prueba Sent →

Nuevo: videos explicativos

GitDiagram ahora puede convertir un repositorio en un video narrado de aproximadamente un minuto. El video comienza con para qué sirve el proyecto y qué hace la gente con él, luego muestra brevemente cómo encajan sus partes principales y una decisión interna.

• Mira la galería → o añade /video a cualquier URL de diagrama, como gitdiagram.com/owner/repo/video.
• Descarga un MP4 en horizontal o vertical (9:16), con subtítulos incrustados.
• La creación de nuevos videos está en acceso anticipado. Cualquiera puede ver los videos que ya existen.

Características

• Mira un repositorio explicado en un video narrado, o pulsa Video en cualquier página de diagrama.
• Explora la arquitectura con un diagrama generado por IA y una explicación en streaming.
• Salta al código haciendo clic en el archivo o directorio vinculado de cualquier componente.
• Usa repositorios privados con un token de GitHub mediante Repos Privados en el encabezado.
• Exporta diagramas como PNG o copia el código fuente de Mermaid.

Usa GitDiagram desde agentes de IA

GitDiagram es un servidor MCP remoto en https://gitdiagram.com/mcp (sin clave ni inicio de sesión). Los agentes pueden leer la explicación de la arquitectura de un repositorio público, sus componentes, conexiones y código fuente de Mermaid, buscar en los diagramas almacenados y obtener videos explicativos.

# Claude Code: the plugin adds the MCP server and a /gitdiagram skill
claude plugin marketplace add ahmedkhaleel2004/gitdiagram
claude plugin install gitdiagram@gitdiagram
# ...or just the MCP server
claude mcp add --transport http gitdiagram https://gitdiagram.com/mcp

# Codex
codex mcp add gitdiagram --url https://gitdiagram.com/mcp

# Gemini CLI
gemini extensions install https://github.com/ahmedkhaleel2004/gitdiagram

# GitHub Copilot CLI
copilot mcp add --transport http gitdiagram https://gitdiagram.com/mcp

En otros clientes (ChatGPT, Windsurf, Zed, LM Studio, Goose y más), añade un servidor MCP remoto con la URL https://gitdiagram.com/mcp. Luego pregunta algo como "¿cómo está estructurado fastapi/fastapi?".

Ejecutar localmente

Requiere Bun, Cloudflare R2, Upstash Redis y una clave de API de OpenAI u OpenRouter. Consulta la guía de configuración para los requisitos previos y la configuración.

git clone https://github.com/ahmedkhaleel2004/gitdiagram.git
cd gitdiagram
bun install
cp .env.example .env

Completa .env usando la guía de configuración, luego inicia la aplicación:

bun run dev

Abre localhost:3000.

Los videos explicativos están desactivados por defecto. Para activarlos, establece VIDEO_EXPLAINER_ENABLED=1, NEXT_PUBLIC_VIDEO_EXPLAINER=1, ANTHROPIC_API_KEY, OPENAI_API_KEY y OPENROUTER_API_KEY (para la voz) en .env. Consulta .env.example para los demás ajustes de video.

Desarrollo

Construido con Next.js, React, TypeScript, Tailwind CSS y Mermaid. Los videos usan Claude o GPT para el guion y las escenas, y OpenRouter (Gemini 3.8 Flash TTS) para la voz. Desplegado en Vercel.

Las contribuciones son bienvenidas. Abre un issue o pull request con una descripción enfocada y notas de verificación.

Inspirado en Romain Courtois 's Gitingest.