GitDiagram教程：16k星GitHub仓库秒变交互式架构图

📋 项目简介

GitDiagram（16k星，MIT，TypeScript）将GitHub仓库秒变交互式架构图：分析仓库树+README+源码生成系统级图表，点击组件跳转源文件，URL中hub替换为diagram即用。今日Trending +145。

📊 核心特性

特性	说明
架构优先图表	分析仓库树+README+源码生成系统级架构图，非仅画文件夹
交互式源码链接	点击图表组件跳转到真实源文件/目录
URL替换快速访问	GitHub URL中hub替换为diagram即打开图表
私有仓库支持	支持私有仓库（需配置Token）
Bun+Next.js技术栈	Bun运行时+Next.js框架，快速构建

特性

说明

架构优先图表

分析仓库树+README+源码生成系统级架构图，非仅画文件夹

交互式源码链接

点击图表组件跳转到真实源文件/目录

URL替换快速访问

GitHub URL中hub替换为diagram即打开图表

私有仓库支持

支持私有仓库（需配置Token）

Bun+Next.js技术栈

Bun运行时+Next.js框架，快速构建

⚡ 安装与运行

# 克隆仓库 git clone https://github.com/ahmedkhaleel2004/gitdiagram.git cd gitdiagram # 安装依赖 bun install # 配置环境 cp .env.example .env # 编辑.env添加GitHub Token # 运行 bun run dev

💡 使用建议

📚 常见问题

GitDiagram和GitHub自带的Insights有什么区别？

GitHub Insights显示依赖图和贡献统计，GitDiagram分析源码结构生成系统级架构图，更直观展示模块关系和数据流。

URL替换hub→diagram怎么用？

把github.com/owner/repo改成diagram.com/owner/repo（或gitdiagram.com），直接打开该仓库的交互式架构图。

支持私有仓库吗？

支持。需在.env中配置有权限的GitHub Token，自托管部署后即可分析私有仓库。