用 Gitdiagram 看代码舒服多了，一键可视化！GitHub 代码仓库秒变图表

在日常开发工作中，无论是前端、后端还是全栈开发者，经常会用到 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.git
cd gitdiagram

2、安装依赖项： 

pnpm i

3、设置环境变量（创建 .env 文件），设置 Open AI 的 key： 

cp .env.example .env

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:push

可以使用 pnpm db:studio 查看数据库并进行交互。

7、运行前端：

pnpm dev

现在我们就可以通过 localhost:3000 访问网站。

转自：https://mp.weixin.qq.com/s/H13e_-CBEECGOJ3ir0-KEg