当前位置：首页 > news >正文

Le Git Graph 终极指南：GitHub提交图谱可视化工具快速上手

news 2026/6/8 12:12:36

Le Git Graph 终极指南：GitHub提交图谱可视化工具快速上手

【免费下载链接】le-git-graphBrowser extension to add git graph to GitHub website.项目地址: https://gitcode.com/gh_mirrors/le/le-git-graph

Le Git Graph 是一款功能强大的浏览器扩展，能够为任何GitHub仓库添加提交图谱可视化功能。这个GitHub提交图谱可视化工具让开发者可以直观地查看代码仓库的分支结构和提交历史，大大提升了代码审查和项目管理的效率。通过简单的安装和配置，你就能在GitHub网站上看到清晰的Git提交图谱。

🚀 为什么选择Le Git Graph？

传统的GitHub界面只提供线性的提交列表，难以直观理解分支合并、代码流向等复杂关系。Le Git Graph解决了这个痛点，它直接在GitHub界面上添加了一个"Commits"标签页，以图形化的方式展示完整的提交历史。

主要优势：

直接在GitHub网站上查看提交图谱
支持公有和私有仓库
基于GitHub GraphQL API，数据实时准确
支持分支过滤和按需加载更多提交
鼠标悬停查看提交详细信息

📦 快速安装步骤

Le Git Graph支持主流浏览器，安装过程非常简单：

Chrome、Edge、Brave等Chromium内核浏览器

访问Chrome Web Store，搜索"Le Git Graph"或直接访问扩展页面进行安装。

Firefox浏览器

在Firefox附加组件商店中搜索"Le Git Graph"进行安装。

安装完成后，打开任何GitHub仓库，你会在导航栏中看到新增的"Commits"标签页。

图片说明：Le Git Graph成功集成到GitHub后的界面，新增了Commits标签页

🔧 配置与授权

首次使用需要授权访问你的GitHub账户。Le Git Graph使用GitHub OAuth进行安全认证：

点击GitHub仓库中的"Commits"标签页
按照提示完成GitHub OAuth授权流程
选择访问级别（仅公开仓库或包含私有仓库）

重要提示：虽然授权界面显示需要读写权限，但Le Git Graph实际上只使用读取权限。这是由于GitHub OAuth API的限制，目前没有只读权限的选项。

🏢 组织私有仓库的特殊配置

对于组织拥有的私有仓库，需要额外配置个人访问令牌（PAT）：

访问GitHub设置中的Token页面
创建个人访问令牌，选择"repo"权限
在Le Git Graph的授权下拉菜单中选择"Custom Personal Access Token"
输入你的个人访问令牌

🎯 核心功能详解

提交图谱可视化

Le Git Graph的核心功能是将Git提交历史转换为直观的图形。每个提交显示为一个小圆点，分支合并用线条连接，让你一目了然地看到代码的演化过程。

分支过滤

通过js/loadBranchesButton.js和js/setBranchOptions.js实现的分支选择功能，让你可以筛选特定分支的提交历史。

按需加载更多提交

当提交历史很长时，js/fetchFurther.js模块负责按需加载更多提交记录，确保页面性能不受影响。

提交详细信息查看

鼠标悬停在提交点上，会显示详细的提交信息，包括作者、提交时间、提交消息等。

🔍 技术架构

Le Git Graph采用现代Web技术栈构建：

客户端：纯JavaScript，基于Manifest V3规范
API通信：GitHub GraphQL API，提供高效的数据查询
认证系统：GitHub OAuth + Firebase云函数
数据获取：js/fetchCommits.js和js/fetchFilteredCommits.js模块

📁 项目结构概览

了解项目结构有助于更好地使用和定制Le Git Graph：

├── js/ # JavaScript核心代码 │ ├── authorisation/ # 授权相关代码 │ ├── fre/ # 功能相关模块 │ ├── addCommitsButton.js # 添加提交按钮 │ ├── drawGraph.js # 绘制提交图谱 │ ├── fetchCommits.js # 获取提交数据 │ └── showCommits.js # 显示提交内容 ├── html/ # HTML模板文件 ├── css/ # 样式文件 └── images/ # 图片资源