项目简介
GitDiagram 是一款网页应用，可在数秒内将任意公开或私有 GitHub 仓库转化为交互式系统架构图。它流式生成 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
常见问题 (3)
故障排除为什么 GitDiagram 即使对新访客也会显示 "You exceeded your current quota, please check your plan and billing details" 错误？
此错误并非由您自己的使用造成——当 GitDiagram 的服务器端共享 OpenAI API 配额耗尽时就会出现该错误,这会阻止所有访问者,包括首次访问的用户。维护者已确认该问题已修复,请刷新 gitdiagram.com 并重试。如果托管网站再次达到配额限制,请使用您自己的 API key 自托管 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 中 Mermaid 11.4.1 版本的 'Syntax error in text' 错误？
此错误发生在 GitDiagram 生成的 Mermaid 图表代码包含对 Mermaid v11.4.1 无效的语法时。这是暂时性的生成失败，并非永久性缺陷。解决方法：重新提交相同的 GitHub 仓库 URL——多位用户确认图表在第二次尝试时成功生成。如果多次重试后错误仍然存在，则该仓库的结构可能产生了导致 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) 验证生成的代码，以定位出错的具体行。