gitdiagram
アプリケーションahmedkhaleel2004/gitdiagram
任意の GitHub リポジトリから、インタラクティブな AI アーキテクチャ図を生成します。
概要
GitDiagram は、任意の公開またはプライベート GitHub リポジトリを数秒でインタラクティブなシステムアーキテクチャ図に変換できる Web アプリケーションです。AI によるアーキテクチャ概要とコンポーネント図をストリーミングで生成し、コンポーネントをクリックすると実際のソースファイルにジャンプできます。また、Mermaid または PNG へのエクスポートにも対応しています。Next.js で構築されており、プライベートリポジトリと結果のキャッシュをサポートし、重複した生成を回避します。
README プレビュー
[](https://gitdiagram.com/)\n\n\n[](https://ko-fi.com/ahmedkhaleel2004)\n\n# GitDiagram\n\nTurn any public or private GitHub repository into an interactive architecture diagram in seconds.\n\nYou can also replace `hub` with `diagram` in a GitHub URL to open its diagram.\n\n> **Sponsor slot:** Reach developers while they are actively exploring codebases. [Sponsor GitDiagram](https://gitdiagram.com/sponsor).\n\n## Features\n\n- **Architecture-first diagrams:** converts a repository tree, README, and bounded source excerpts into a system-level graph instead of merely drawing folders.\n- **Interactive source links:** click a component to open its real file or directory on GitHub.\n- **Streaming generation:** see the explanation arrive while the graph is planned.\n- **Private repositories:** provide a GitHub token locally in the browser; private artifacts use a separate protected storage namespace.\n- **Export:** copy Mermaid source or download the rendered diagram as PNG.\n- **Provider choice:** OpenAI by default, with OpenRouter available for self-hosted deployments.\n\n## Stack\n\n- **Application:** Next.js 16 App Router, React 19, TypeScript, Tailwind CSS, and Radix UI\n- **Generation API:** same-origin Next.js Route Handlers running on Vercel's Bun runtime\n- **Storage:** Cloudflare R2 for diagram artifacts\n- **Coordination:** Upstash Redis for quota accounting, cancellation, locks, and short-lived failure state\n- **AI:** OpenAI or OpenRouter through `AI_PROVIDER`\n- **Analytics:** PostHog\n- **Deployment:** Vercel is the only live runtime; an offline Railway/Docker recipe is retained for disaster recovery\n\nThere is no separate FastAPI implementation, Postgres database, or Neon runtime.\n\n## Production architecture\n\nVercel serves both the UI and the generation endpoints:\n\n- `/api/generate/cost` estimates a run after bounded GitHub ingestion, same-origin and rate limited.\n- `/api/generate/stream` streams Server-Sent Events for explanation and graph progress
FAQ (3)
トラブル対応GitDiagramが新規訪問者に対しても「You exceeded your current quota, please check your plan and billing details」というエラーを表示するのはなぜですか？
このエラーはご自身の使用方法が原因ではありません。GitDiagramの共有サーバーサイドOpenAI APIクォータが枯渇した場合に表示され、初回ユーザーを含むすべての訪問者がブロックされます。メンテナーは問題が修正されたことを確認しているため、gitdiagram.comを再読み込みして再試行してください。ホストされているサイトが再びクォータ制限に達した場合は、独自のAPIキーでGitDiagramをセルフホストしてください。1) git clone https://github.com/ahmedkhaleel2004/gitdiagram.git && cd gitdiagram 2) .env.exampleを.envにコピーし、OPENAI_API_KEYを設定します 3) docker compose up --buildを実行し、ローカルインスタンスを開きます。セルフホスティングでは課金にご自身のOpenAIアカウントが使用されるため、共有クォータを完全に回避できます。
トラブル対応GitDiagramで'Syntax error in text' Mermaid version 11.4.1エラーを修正する方法は？
このエラーは、GitDiagram が生成した Mermaid ダイアグラムコードに Mermaid v11.4.1 で無効な構文が含まれている場合に発生します。これは永続的なバグではなく、一時的な生成エラーです。回避策：同じ GitHub リポジトリ URL を再度送信してください。複数のユーザーが、2回目の試行でダイアグラムが正常に生成されることを確認しています。数回再試行してもエラーが解消されない場合は、リポジトリの構造が Mermaid の解析を壊す文字を生成している可能性があります。後でもう一度お試しいただくか、GitDiagram/Mermaid のバージョンアップデートをご確認ください。
トラブル対応Mermaid バージョン 11.4.1 で LLM が生成したダイアグラムをレンダリングする際に発生する「Syntax error in text」エラーの修正方法
このエラーは、LLMが構文仕様に違反するMermaidコードを時折生成することが原因で発生します。回避策：プロンプトに明示的な制約を追加してください。例：「公式のMermaid構文に厳密に従い、バージョン11.4.1と互換性のある有効なMermaidコードのみを出力しなければなりません。ダイアグラムブロックの外に説明文を含めないでください。」また、特殊文字（括弧、角括弧、スラッシュ）を含むノードラベルは引用符で囲み、有効な矢印構文（-->, -->|label|）を使用し、ノードIDにサポートされていない文字を使用しないよう、モデルに指示してください。エラーが解消しない場合は、レンダリングする前にMermaid Live Editor（https://mermaid.live）で生成されたコードを検証し、失敗している行を特定してください。