再也不怕看不懂 GitHub 代码！这款AI开源项目，一键生成交互架构图

大家好，我是徐小夕。

架构师，曾任职多家上市公司，多年架构经验，打造过上亿用户规模的产品，目前全职创业，主要聚集于"Dooring AI零代码搭建平台"和"flowmixAI多模态办公软件"

上周和大家分享了我研发的 pxcharts 多维表格的 Ultra 版本。

今天和大家分享一款我觉得非常适合学习 github 上开源项目的AI开源工具------GitDiagram。

简单一句话总结它的作用：GitDiagram 可以基于任何github项目的url地址，一键生成这个项目的架构图。

它对于想快速学习github的开源项目的程序员非常有帮助，如果你也是开源项目的作者，也可以使用它帮自己的开源项目生成架构图，让自己的项目更有吸引力。

接下来我就从功能层 ，技术实现层和大家全面分享一下这款开源项目。

什么是GitDiagram

GitDiagram 是一个将 GitHub 仓库转换为交互式图表的工具，能帮助用户快速可视化仓库的系统设计和架构。目前已有接近14k的 star， 说明在技术圈的关注度还是挺高的。

下面是我用它生成的vue框架的架构图：

当然大家对其他开源项目感兴趣，也可以用它来生成架构图，帮助你快速理解这个项目。

功能亮点

1. 即时可视化
2. 可将任何 GitHub 仓库结构转换为系统设计或架构图，帮助用户快速理解仓库的整体架构。
3. 交互性强
4. 用户可以点击图表中的组件，直接导航到对应的源文件和相关目录，方便深入查看代码。
5. 快速生成
6. 借助 OpenAI o4 - mini 实现快速准确的图表生成，提高使用效率。
7. 可定制化
8. 支持用户使用自定义指令修改和重新生成图表，满足不同的可视化需求。
9. API 访问
10. 提供公共 API（正在开发中），方便与其他系统集成。
11. 支持私有仓库
12. 用户可以通过提供 GitHub 个人访问令牌（PAT）来对私有仓库进行图表生成，也可以选择本地自托管应用。

仔细研究了一下这款AI开源项目，接下来和大家分享一下它的实现原理。

实现原理

上面的架构图是我根据自己的理解画的 GitDiagram的实现原理图，感兴趣的朋友可以参考学习一下。下面是我对核心实现流程做的一个梳理：

该项目的核心处理逻辑主要通过提示工程（prompt engineering）实现，将仓库信息转换为 Mermaid.js 图表代码，具体分为三个步骤：

1. 分析项目信息
2. 根据仓库的文件树和 README 文件，生成对系统设计图的详细解释。
3. 建立映射关系
4. 将系统设计中的关键组件映射到项目文件结构中的对应文件和目录。
5. 生成图表代码
6. 根据上述解释和映射关系，生成 Mermaid.js 图表代码。

详细设计步骤

提示 1：生成系统设计解释

1. 系统提示
2. 要求根据项目的文件树和 README，向首席软件工程师解释如何绘制最准确的系统设计图，包括项目类型和目的识别、文件结构分析、README 信息提取等。
3. 代码实现
4. 在gitdiagram/backend/app/prompts.py中定义了SYSTEM_FIRST_PROMPT，作为该步骤的系统提示。

提示 2：建立组件映射

1. 系统提示
2. ：根据系统设计解释和文件树，将系统设计中的关键组件映射到文件树中的对应文件和目录。
3. 代码实现
4. ：gitdiagram/backend/app/prompts.py中的SYSTEM_SECOND_PROMPT定义了该步骤的系统提示。

提示 3：生成 Mermaid.js 代码

1. 系统提示
2. 根据系统设计解释和组件映射，使用 Mermaid.js 创建系统设计图，要求图表包含所有主要组件、清晰显示组件关系、符合解释中的架构描述，并为映射的组件添加点击事件。
3. 代码实现
4. gitdiagram/backend/app/prompts.py中的SYSTEM_THIRD_PROMPT定义了该步骤的系统提示。

接下来和大家分享一下这款项目的技术栈。

技术栈

• 前端
• 使用 Next.js、TypeScript、Tailwind CSS 和 ShadCN 构建用户界面。
• 后端
• 采用 FastAPI 和 Python 实现业务逻辑，使用 Server Actions 处理服务器端操作。
• 数据库
• 使用 PostgreSQL 作为数据库，通过 Drizzle ORM 进行数据库操作。
• AI
• 借助 OpenAI o4 - mini 进行图表生成。
• 部署
• 前端部署在 Vercel，后端部署在 EC2。
• CI/CD
• 使用 GitHub Actions 实现持续集成和持续部署。
• 分析工具
• 使用 PostHog 和 Api - Analytics 进行数据分析。

应用场景

GitDiagram 应用场景还是非常多的，这里我总结3个我觉得比较有价值的场景：

1. 开源项目贡献
2. 对于想要参与开源项目的开发者，GitDiagram 可以帮助快速理解大型代码库的架构，降低入门门槛。
3. 项目文档和沟通
4. 生成的图表可以作为项目文档的一部分，帮助团队成员和利益相关者更好地理解项目架构和组件关系，促进沟通和协作。
5. 学习和研究
6. 在学习和研究其他项目时，通过可视化图表可以更直观地了解项目的设计和实现，提高学习效率。

如果大家对这款AI开源项目感兴趣，可以访问如下地址研究：

github.com/ahmedkhalee...

最后

后续会持续分享更多高价值AI产品 的技术架构和技术实现，同时也会持续迭代功能更强大的智能化 + 多维表格解决方案，大家有好的建议也欢迎在留言区交流反馈～