mcpField
G
GitDiagram

GitDiagram

リモート
gitdiagram.com開発ツール18.6k2 日前に更新
リポジトリ公式サイト

GitDiagram について

GitDiagramはGitHubリポジトリを、操作可能なアーキテクチャ図、解説、ナレーション動画に変換します。開発者やAIエージェント向けで、図からコードへ移動でき、Mermaidソースも出力できます。

主な機能

  1. 01AI生成のアーキテクチャ図
  2. 02ストリーミング形式の解説
  3. 03リポジトリのナレーション動画
  4. 04コンポーネントからコードへ移動
  5. 05PNGとMermaidの出力
  6. 06GitHubトークンによるプライベートリポジトリ対応

活用シーン

  1. 01リポジトリ構成の把握
  2. 02図からソースファイルを特定
  3. 03短いプロジェクト解説の共有

MCP 対応

リモートMCPサーバー https://gitdiagram.com/mcp は、公開リポジトリの構成解説、コンポーネント、接続関係、Mermaidソース、保存済み図の検索、解説動画をエージェントに提供します。

設定

リモートサーバーはインストール不要です。クライアントを選んで設定をコピーするか、ワンクリックで導入できます。

エンドポイントhttps://gitdiagram.com/mcp
インストールコマンドをコピー
Claude CodeTerminal
Cursor.cursor/mcp.json
VS Code.vscode/mcp.json
Claude Desktopclaude_desktop_config.json
Windsurf~/.codeium/windsurf/mcp_config.json

コマンドはターミナルで実行し、JSON は各クライアントの MCP 設定に貼り付けて再起動します。認可が必要なサーバーは初回接続時にログインを求めます。

ツール

3
パラメーター型必須説明
repositorystringはいGitHub リポジトリ（"owner/repo" 形式。例："fastapi/fastapi"）、またはリポジトリ内の任意の github.com URL（例："https://github.com/vercel/next.js/tree/canary/packages"）。

詳細

GitDiagram

あらゆるコードベースを可視化できます。公開または非公開のGitHubリポジトリを、インタラクティブなアーキテクチャ図に変換したり、1分間のナレーション付き動画で解説したりできます。AI エージェントも、MCP サーバーまたは各図のMarkdown版（gitdiagram.com/owner/repo.md）を通じて利用できます。

GitDiagramを試す → · GitHubリポジトリのURLで、hubをdiagramに置き換えてください。

GitDiagramのトップページ

ライセンス Ko-fi

CodeRabbit   スポンサー

プルリクエストのAIコードレビュー。CodeRabbitを試す →

新機能：解説動画

GitDiagramで、リポジトリを約1分のナレーション付き動画にできるようになりました。動画ではまず、プロジェクトの目的と使い方を説明し、次に主要な部分がどのようにつながっているか、そして内部の設計判断を1つ簡単に紹介します。

GitDiagramの1分解説を見る

  • 動画ギャラリーを見る → または、図のURLに/videoを追加します（例：gitdiagram.com/owner/repo/video）。
  • MP4をダウンロードできます。横向きまたは縦向き（9:16）で、字幕が焼き込まれています。
  • 新しい動画の作成は早期アクセス段階です。 既存の動画は誰でも視聴できます。

機能

  • ナレーション付き動画でリポジトリの解説を見るか、図のページでVideoを押します。
  • AIが生成した図とストリーミング解説でアーキテクチャを確認できます。
  • リンクされたファイルやディレクトリをクリックして、コードに移動できます。
  • ヘッダーのPrivate ReposからGitHubトークンを使って非公開リポジトリを利用できます。
  • 図をエクスポートしてPNG形式で保存したり、Mermaidのソースをコピーしたりできます。

AI エージェントからGitDiagramを利用する

GitDiagramはhttps://gitdiagram.com/mcpで利用できるリモートMCPサーバーです（キーやサインインは不要です）。エージェントは、公開リポジトリのアーキテクチャ解説、コンポーネント、接続関係、Mermaidソースを読み取り、保存済みの図を検索したり、解説動画を取得したりできます。

Claudeに追加 Cursorにインストール VS Codeにインストール VS Code Insidersにインストール

# 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

ほかのクライアント（ChatGPT、Windsurf、Zed、LM Studio、Gooseなど）では、URL https://gitdiagram.com/mcpを指定してリモートMCPサーバーを追加します。その後、「fastapi/fastapiの構成はどうなっていますか？」のように質問してください。

ローカルで実行する

Bun、Cloudflare R2、Upstash Redis、OpenAI または OpenRouter の API キーが必要です。前提条件と設定については、セットアップガイドをご覧ください。

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

設定ガイドを参考に .env に値を入力してから、アプリを起動します。

bun run dev

localhost:3000 を開きます。

解説動画はデフォルトで無効になっています。有効にするには、.env で VIDEO_EXPLAINER_ENABLED=1、NEXT_PUBLIC_VIDEO_EXPLAINER=1、ANTHROPIC_API_KEY、OPENAI_API_KEY、および音声用の OPENROUTER_API_KEY を設定してください。その他の動画設定については、.env.example をご覧ください。

開発

Next.js、React、TypeScript、Tailwind CSS、Mermaid で構築されています。動画のスクリプトとシーンには Claude または GPT を、音声には OpenRouter（Gemini 3.8 Flash TTS）を使用します。Cloudflare Workers にデプロイされています。

貢献を歓迎します。内容を絞った説明と検証メモを添えて、Issue またはプルリクエストを作成してください。

Romain Courtois の Gitingest に着想を得ています。

コメント

Markdown 対応

MCP は初めてですか？

プロトコルの概要から最初のサーバーの導入まで、よくある疑問にまとめて答えます。

AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。