Learn Git Branching 是一个在浏览器里学习 Git 的可视化应用:在左侧终端输入真实的 git 命令,右侧的提交树立刻以动画呈现分支的移动与合并。它由 Peter Cottle 于 2012 年开始开发,GitHub 仓库以 MIT 许可开源,截至 2026-09-30 已积累约 3.4 万 stars 且仍在活跃维护。应用完全在客户端运行,没有后端。

Learn Git Branching 欢迎界面截图:弹出窗口介绍这是网上最可视化的 Git 学习方式,背景中可见提交树与终端

站点速览

项目 内容(截至 2026-09-30)
网址 learngitbranching.js.org
类型 Git 可视化学习工具 / 沙盒
费用 免费
注册要求 无需注册
界面语言 约 24 种语言,含简体中文与繁体中文
开放许可 MIT

核心能力

  • 关卡模式:约 34 个关卡(仓库翻译指南中的统计口径)分为若干系列,循序渐进覆盖提交、分支、合并、rebase、HEAD 与相对引用,以及 clone、fetch、push、pull 等远程协作操作;每关给出目标提交树,达成即过关,还有"git golf"玩法比拼最少命令数。
  • 沙盒模式:一个可随意操作的虚拟仓库,支持 undo、reset、git fakeCreateRemote 模拟远程仓库等教学命令;可用 URL 参数把一组命令分享给他人直接复现。
  • 关卡构建器:build level 命令引导用户自制关卡并导出 JSON 分享。
  • 教学演示:通过 ?demo 链接可观看自动播放的操作演示。

Learn Git Branching 沙盒截图:右侧提交树中 C0、C1 节点与 main 分支指针以图形化方式呈现

站点背景

作者 Peter Cottle 曾在 2012 年受雇于 Google 期间开发了这个工具的早期版本(仓库创建于 2012-08),此后十余年持续维护并完成了多次前端技术栈迁移(现为 Vite 构建的 React/Flux 应用)。翻译由社区贡献,TRANSLATING.md 提供了完整的本地化协作指南。

适用场景

  • Git 初学者在真实命令与可视化反馈之间建立对应关系;
  • 团队培训与课堂教学——讲师可以在沙盒里现场演示 rebase 与 merge 的差别;
  • 有经验的开发者验证冷门命令行为,或自制关卡考校同事。

局限

  • 它是模拟器:不接触真实文件系统与远程服务器,git fakeCreateRemote 只是教学道具。
  • 关卡覆盖 Git 核心概念,但不涉及工作流管理(如 Git Flow 评审)、钩子、子模块等工程话题。
  • 界面为键盘命令驱动,移动端虚拟键盘体验一般。
  • 进度保存在浏览器本地存储中,换设备不会同步(基于其纯客户端架构的合理推断)。

参考资料