English Français العربية

GitDiagram

Registre officiel Outils de développement

Architecture diagrams, explanations and Mermaid source for public GitHub repositories.

Code source Site web Documentation

Que pouvez-vous faire avec GitDiagram ?

  • Watch a repository explained in a narrated video, or press Video on any diagram page.
  • Explore the architecture with an AI-generated diagram and streamed explanation.
  • Jump to the code by clicking any component's linked file or directory.
  • Use private repositories with a GitHub token via Private Repos in the header.
  • Export diagrams as PNG or copy the Mermaid source.

Installation

Ajoutez ceci à la configuration MCP de votre client (Claude Desktop : claude_desktop_config.json ; Cursor : .cursor/mcp.json ; VS Code et les autres utilisent la même forme « mcpServers »).

Remote (streamable-http)
Claude Code 
claude mcp add --transport http gitdiagram 'https://gitdiagram.com/mcp'
Configuration JSON (Claude Desktop, Cursor, VS Code) 
{
    "mcpServers": {
        "gitdiagram": {
            "type": "http",
            "url": "https://gitdiagram.com/mcp"
        }
    }
}

Documentation

Tirée du README du projet sur GitHub, actualisée chaque semaine. Les liens ouvrent GitHub.

Sommaire
  1. GitDiagram
  2. New: explainer videos
  3. Features
  4. Use GitDiagram from AI agents
  5. Run locally
  6. Development

GitDiagram

Visualize any codebase: turn any public or private GitHub repository into an interactive architecture diagram, or watch it explained in a one-minute narrated video. AI agents can use it too, through the MCP server or the Markdown version of any diagram (gitdiagram.com/owner/repo.md).

Try GitDiagram → · Or replace hub with diagram in any GitHub repository URL.

Sponsored

AI code reviews for your pull requests. Try CodeRabbit →

New: explainer videos

GitDiagram can now turn a repository into a narrated video of about a minute. The video starts with what the project is for and what people do with it, then shows briefly how its main parts fit together and one decision under the hood.

  • Watch the gallery → or add /video to any diagram URL, such as gitdiagram.com/owner/repo/video.
  • Download an MP4 in landscape or vertical (9:16), with captions burned in.
  • Making new videos is in early access. Anyone can watch videos that already exist.

Features

  • Watch a repository explained in a narrated video, or press Video on any diagram page.
  • Explore the architecture with an AI-generated diagram and streamed explanation.
  • Jump to the code by clicking any component's linked file or directory.
  • Use private repositories with a GitHub token via Private Repos in the header.
  • Export diagrams as PNG or copy the Mermaid source.

Use GitDiagram from AI agents

GitDiagram is a remote MCP server at https://gitdiagram.com/mcp (no key or sign-in). Agents can read a public repository's architecture explanation, components, connections and Mermaid source, search the stored diagrams, and get explainer videos.

# 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

In other clients (ChatGPT, Windsurf, Zed, LM Studio, Goose and more), add a remote MCP server with the URL https://gitdiagram.com/mcp. Then ask something like "how is fastapi/fastapi structured?".

Run locally

Requires Bun, Cloudflare R2, Upstash Redis, and an OpenAI or OpenRouter API key. See the setup guide for prerequisites and configuration.

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

Fill in .env using the configuration guide, then start the app:

bun run dev

Open localhost:3000.

Explainer videos are off by default. To turn them on, set VIDEO_EXPLAINER_ENABLED=1, NEXT_PUBLIC_VIDEO_EXPLAINER=1, ANTHROPIC_API_KEY, OPENAI_API_KEY and OPENROUTER_API_KEY (for the voice) in .env. See .env.example for the other video settings.

Development

Built with Next.js, React, TypeScript, Tailwind CSS, and Mermaid. Videos use Claude or GPT for the script and scenes and OpenRouter (Gemini 3.8 Flash TTS) for the voice. Deployed on Cloudflare Workers.

Contributions are welcome. Open an issue or pull request with a focused description and verification notes.

Inspired by Romain Courtois's Gitingest.

Questions fréquentes

Qu'est-ce que GitDiagram ?

Architecture diagrams, explanations and Mermaid source for public GitHub repositories.

Comment installer GitDiagram ?

Il fonctionne comme serveur distant. Dans Claude Code : claude mcp add --transport http gitdiagram 'https://gitdiagram.com/mcp'. Pour les autres clients, collez la configuration JSON de cette page dans leurs réglages MCP.

Faut-il une clé API pour GitDiagram ?

Son entrée au registre n'indique aucune clé ni secret obligatoire. Certaines fonctions peuvent tout de même demander un compte auprès du service auquel il se connecte.

GitDiagram est-il open source ?

Oui. Son code est sur GitHub sous licence MIT.

Qui maintient GitDiagram ?

Il est publié par ahmedkhaleel2004. AI.tn le référence sans le maintenir ni le recommander.

Issu du registre MCP officiel. Être listé n'est pas une recommandation : vérifiez le code et les permissions d'un serveur avant de lui donner accès à vos données.