Repolode
提交项目
pcottle

pcottle/learnGitBranching

一款交互式浏览器端 git 可视化与教程，输入命令时实时展示提交树的变化。

在 GitHub 查看官网
Star
34,187
Fork
6,033
未关闭 Issue
54
最近提交
前天

这是什么？

LearnGitBranching 是一个 git 仓库可视化工具、沙盒环境，并附带一系列教程和练习关卡。输入命令后，提交树会随之实时更新，直观展示 branch、merge、rebase、reset 等操作对历史记录的影响，这在只用命令行时很难想象。

应用默认进入沙盒模式，内置一个现成的仓库，可以随意尝试命令，并用 undo、reset 等命令撤销或重置。关卡按标签页分组，涵盖本地与远程仓库等不同主题，每关都会统计所用命令数，还设有"git golf"挑战，看谁用的命令最少。

项目是纯前端的 JavaScript 应用，基于 Vite 构建，没有后端和数据库。既可以本地运行和打包，也可以通过 Docker 启动。

核心功能

  • 01实时可视化提交树，每条 git 命令执行后即时更新。
  • 02提供带 undo 和 reset 的沙盒模式，便于自由尝试。
  • 03分层关卡覆盖本地与远程仓库等概念。
  • 04记录每关命令数，并设有"git golf"挑战。
  • 05支持自建关卡，并可通过 JSON 或 gist 链接分享。
  • 06完全在浏览器中运行，无需后端。

适用场景

  • 初次学习 git 的分支、合并和变基操作。
  • 通过分级挑战练习中级 git 技能。
  • 向同事演示某条 git 命令如何改变提交历史。
  • 为培训或课程制作自定义 git 练习关卡。

快速上手

  1. 1

    无需安装，直接在浏览器中打开应用

  2. 2

    或者使用 Docker 运行最新的稳定版镜像

    docker run -p 8080:80 ghcr.io/pcottle/learngitbranching
  3. 3

    然后在浏览器中访问 http://localhost:8080/

收录于专题

开源教育与学习工具图表、示意图与动画可视化工具

标签

#git#version-control#education#visualization#interactive-tutorial#javascript

常见问题

learnGitBranching 是什么？
一款交互式浏览器端 git 可视化与教程，输入命令时实时展示提交树的变化。 LearnGitBranching 是一个 git 仓库可视化工具、沙盒环境，并附带一系列教程和练习关卡。输入命令后，提交树会随之实时更新，直观展示 branch、merge、rebase、reset 等操作对历史记录的影响，这在只用命令行时很难想象。
learnGitBranching 可以免费使用吗？用的什么许可证？
learnGitBranching 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。
learnGitBranching 还在维护吗？
活跃维护中。learnGitBranching 最近一次提交是在 2026年11月5日。
learnGitBranching 适合用来做什么？
初次学习 git 的分支、合并和变基操作。 通过分级挑战练习中级 git 技能。 向同事演示某条 git 命令如何改变提交历史。 为培训或课程制作自定义 git 练习关卡。
learnGitBranching 怎么安装和运行？
无需安装，直接在浏览器中打开应用 或者使用 Docker 运行最新的稳定版镜像: docker run -p 8080:80 ghcr.io/pcottle/learngitbranching 然后在浏览器中访问 http://localhost:8080/
在哪里获取 learnGitBranching？
源代码和安装说明在 GitHub 上：https://github.com/pcottle/learnGitBranching

概要由 AI 根据项目 README 生成；GitHub 数据每日更新。

相关项目