Visualize any GitHub codebase: free interactive architecture diagrams and one-minute explainer videos. Replace 'hub' with 'diagram' in any GitHub URL.

GitDiagram – 速報概要

何ができるか – 任意の公開または非公開GitHubリポジトリを、インタラクティブなアーキテクチャ図（Mermaid）とコードベースを解説する1分間のナレーション付き動画に変換します。

なぜ重要か – プロジェクトの構造を理解するには多くのファイルを読む必要があります。GitDiagramはこれを自動化し、開発者やAIエージェントが即座に各部分の接続関係を把握し、ソースコードに直接ジャンプできるようにします。

主な機能（READMEに記載）

機能	得られるもの	動作の概要（高レベル）
インタラクティブ図	フォルダ/ファイルのMermaidベースの可視化。クリックするとGitHub上の該当コードが開く。	サービスはリポジトリをクローンし、ディレクトリツリーとインポート文を解析。その後、サイト上でレンダリングされるMermaid構文を出力する。
1分間のナレーション付き動画	リポジトリの目的、主要コンポーネント、設計意思決定を解説する短い動画（ランドスケープまたは縦長）。字幕が埋め込まれている。	ClaudeまたはGPTでスクリプト生成、Claude/GPTでシーン計画、OpenRouterのGemini 3.8 Flash TTSで音声生成。
エクスポートオプション	図のPNGエクスポート、またはRaw Mermaidソースのコピー/貼り付け。	シンプルなUIボタン。Mermaidソースはサーバーに保存され、ダウンロード可能。
プライベートリポジトリ対応	UIヘッダーでGitHubの個人アクセストークンを入力することで、プライベートリポジトリにアクセス可能。	トークンはバックエンドに送信され、裏でリポジトリをクローンする。
AIエージェント統合（MCPサーバー）	リモートの MCP エンドポイント（`https://gitdiagram.com/mcp`）を提供。アーキテクチャデータ、コンポーネント一覧、接続関係、Mermaidソース、動画URLを返す。	認証不要。エージェントはエンドポイントに問い合わせ、JSON形式の説明を受信可能。
ローカル開発	Next.js + Bunでサービス全体を自前で実行可能。Cloudflare R2、Upstash Redis、OpenAI/OpenRouterキーが必要。	`bun install` → `.env.example`をコピー → キーを入力 → `bun run dev`。

使い方

Web UI – https://gitdiagram.com/owner/repo にアクセス（GitHub URLのhubをdiagramに置き換えても可）。ページにはインタラクティブ図とVideoボタンが表示される。
AIエージェント – MCPサーバーURLをClaude、Cursor、VS Code、Gemini CLI、Copilot CLIなどに追加。「How is fastapi/fastapi structured?」 などの質問をすると、エージェントは図と説明を取得する。
セルフホスティング – リポジトリをクローンし、Bunをインストール。必要なクラウドサービス（R2、Redis）とAPIキーを設定。bun run devを実行。.envでVIDEO_EXPLAINER_ENABLEDと音声APIキーを有効化すると動画生成が可能。

技術スタック（READMEより）

フロントエンド：Next.js、React、TypeScript、Tailwind CSS、Mermaidによる図のレンダリング。
バックエンド：Bun（高速JavaScriptランタイム）で動作。生成されたアセットはCloudflare R2に保存、メタデータはUpstash Redisでキャッシュ。
AIコンポーネント：OpenAI/OpenRouterでコード解析用プロンプト、Claude/GPTでスクリプト作成、Gemini 3.8 Flashでテキストから音声生成。
デプロイ：Vercelでホスティング。障害時のフェールオーバー用にRailway/Dockerを備える。

誰が恩恵を受けるか？

開発者 – 新しいコードベースに参加する際、視覚的なマップと動画ウォークスルーで迅速に理解。
コードレビュー担当者 – 図の任意のノードから直接該当ファイルにジャンプ可能。
AI駆動ツール – 構造的概要が必要なエージェントはMCPエンドポイントを呼び出せる。
教育者 / ドキュメント作成者 – 最小限の努力でオープンソースプロジェクト用の視覚的・動画資産を生成可能。

すぐに始める（クイックチェックリスト）

ライブサービスにアクセス – https://gitdiagram.com/owner/repo。
プライベートリポジトリを追加 – ヘッダーの「Private Repos」をクリックし、GitHubトークンを貼り付け。
動画を視聴 – 「Video」ボタンをクリック、またはURLに /video を追加。
エクスポート – PNGまたは「Copy Mermaid」ボタンを使用。
AIと統合 – MCP URLをお好みのAIクライアント（Claude、Cursor、VS Codeなど）に追加。

ライセンスとサポート

ライセンス：MIT（LICENSEを参照）。
資金調達：Ko-fiリンクと Sent（SMS/WhatsApp API）のスポンサーバッジ。

上記のすべての情報はリポジトリのREADMEから直接取得。外部の仮定は一切追加していない。

ahmedkhaleel2004/gitdiagram