来自公众号：菜鸟教程
在日常开发工作中，无论是前端、后端还是全栈开发者，经常会用到 Github 上的一些开源项目，很多刚接触的新项目由于结构太复杂，看的也是一头雾水。今天，就来给大家安利一款超好用的开源 GitHub 项目结构可视化图工具—— Gitdiagram！GitDiagram 是一款在线可视化工具，能将任何 GitHub 仓库一键转换为交互式图表。GitDiagram 通过树状图、模块化展示等方式，直观呈现代码目录结构、文件关系及关键逻辑链路，帮助开发者快速掌握项目全貌。GitDiagram 使用 OpenAI 的 o3-mini 生成 Mermaid.js 图表。GitDiagram 使用起来也很简单，只需要将 GitHub 仓库 URL 中的 “github.com” 改为 “gitdiagram.com”，即可跳转到可视化页面。例如我们想了解 CSS 框架 Tailwind CSS 的项目，其 Github 上的开源地址为
https://github.com/tailwindlabs/tailwindcss，我们访问 https://gitdiagram.com/tailwindlabs/tailwindcss，就能看到该工具的自身项目结构图，图表生成如下：
我们可以看到生成的图表很好的展示了一个 Tailwind CSS 应用的模块化设计，各个模块之间通过清晰的接口和层次进行协作。Legend（图例） 图例定义了不同颜色的模块类型：- Core Components（核心组件）：蓝色模块，表示应用的核心功能。
- Integration Layer（集成层）：绿色模块，表示与其他系统的集成。
- Development Tools（开发工具）：橙色模块，表示开发过程中使用的工具。
- Features（功能模块）：紫色模块，表示特定的功能模块。
- Support Tools（支持工具）：灰色模块，表示支持性工具。
然后其他图之间展示了各个模块之间通过清晰的接口和层次进行协作。
我们可以把它导出图片或 Memaid 的代码：
我们可以自己修改 Memaid 代码生成我们想要的图：
GitDiagram 在 GitHub 上已经收获了 9.5k+ 的 Star 了：开源地址：https://github.com/ahmedkhaleel2004/gitdiagram/
在线地址：https://gitdiagram.com/
本地安装
本地开发步骤包括：
1、克隆仓库：
git clone https://github.com/ahmedkhaleel2004/gitdiagram.gitcd gitdiagram
2、安装依赖项：
3、设置环境变量（创建 .env 文件），设置 Open AI 的 key：
4、运行后端：
docker-compose up --build -d
docker-compose logs -f 中显示日志，FastAPI 服务器将在 localhost:8000 上可用。
5、启动本地数据库：
chmod +x start-database.sh./start-database.sh
当提示生成随机密码时，输入“yes”。
Postgres 数据库将在 localhost:5432 的容器中启动。
6、初始化数据库模式：
可以使用 pnpm db:studio 查看数据库并进行交互。
7、运行前端：
现在我们就可以通过 localhost:3000 访问网站。
