GitDiagram

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

GitDiagram

Visualize qualquer base de código: transforme qualquer repositório GitHub público ou privado em um diagrama de arquitetura interativo, ou assista a uma explicação em vídeo narrado de um minuto. Agentes de IA também podem usá-lo, por meio do servidor MCP ou da versão Markdown de qualquer diagrama (gitdiagram.com/owner/repo.md).

Experimente GitDiagram → · Ou substitua hub por diagram em qualquer URL de repositório GitHub.

[

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

SMS, WhatsApp e RCS por meio de uma única API. Experimente Sent →

Novo: vídeos explicativos

O GitDiagram agora pode transformar um repositório em um vídeo narrado de cerca de um minuto. O vídeo começa com a finalidade do projeto e o que as pessoas fazem com ele, depois mostra brevemente como as principais partes se encaixam e uma decisão interna.

• Veja a galeria → ou adicione /video a qualquer URL de diagrama, como gitdiagram.com/owner/repo/video.
• Baixe um MP4 em formato paisagem ou vertical (9:16), com legendas incorporadas.
• A criação de novos vídeos está em acesso antecipado. Qualquer pessoa pode assistir a vídeos que já existem.

Recursos

• Assista a um repositório explicado em um vídeo narrado, ou pressione Vídeo em qualquer página de diagrama.
• Explore a arquitetura com um diagrama gerado por IA e explicação em fluxo contínuo.
• Vá direto ao código clicando no arquivo ou diretório vinculado de qualquer componente.
• Use repositórios privados com um token do GitHub por meio de Repositórios Privados no cabeçalho.
• Exporte diagramas como PNG ou copie o código-fonte Mermaid.

Use o GitDiagram a partir de agentes de IA

O GitDiagram é um servidor MCP remoto em https://gitdiagram.com/mcp (sem chave ou login). Os agentes podem ler a explicação da arquitetura de um repositório público, componentes, conexões e código-fonte Mermaid, pesquisar os diagramas armazenados e obter vídeos 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

Em outros clientes (ChatGPT, Windsurf, Zed, LM Studio, Goose e outros), adicione um servidor MCP remoto com a URL https://gitdiagram.com/mcp. Depois, pergunte algo como "como o fastapi/fastapi está estruturado?".

Execute localmente

Requer Bun, Cloudflare R2, Upstash Redis e uma chave de API OpenAI ou OpenRouter. Consulte o guia de configuração para pré-requisitos e configuração.

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

Preencha .env usando o guia de configuração e, em seguida, inicie o aplicativo:

bun run dev

Abra localhost:3000.

Os vídeos explicativos estão desativados por padrão. Para ativá-los, defina VIDEO_EXPLAINER_ENABLED=1, NEXT_PUBLIC_VIDEO_EXPLAINER=1, ANTHROPIC_API_KEY, OPENAI_API_KEY e OPENROUTER_API_KEY (para a voz) em .env. Consulte .env.example para as outras configurações de vídeo.

Desenvolvimento

Construído com Next.js, React, TypeScript, Tailwind CSS e Mermaid. Os vídeos usam Claude ou GPT para o roteiro e as cenas, e OpenRouter (Gemini 3.8 Flash TTS) para a voz. Implantado na Vercel.

Contribuições são bem-vindas. Abra uma issue ou pull request com uma descrição focada e notas de verificação.

Inspirado pelo Gitingest de Romain Courtois.