分享一个把 Git 逻辑可视化实操的开源项目 Commitea

Git 的分支合并和 Rebase 逻辑如果只看文档，极其容易在脑子里打结。很多新手（甚至老手）在执行 git rebase 或 cherry-pick 时，其实并不清楚 HEAD 指针和 Commit Graph 到底发生了什么变化，直到把代码搞乱了才去查怎么救。

最近看到一个叫 Commitea 的项目，它把 Git 的操作逻辑做成了一个内存模拟器。你可以在网页端输入真实的 Git 命令，然后实时看到分支图谱的变化。它不是简单的动画演示，而是用 JS 模拟了 Git 的底层行为，比如 Fast-forward 和 Merge Commit 的判定逻辑，以及 Rebase 时历史记录的重写。

对于想快速上手 Git 工作流或者给团队做技术分享的人来说，这种可视化实操比看静态图高效得多。

核心功能与实操场景

这个工具最实用的地方在于它内置了 7 个典型场景，点击就能一步步演示：

• 分支合并与快进： 演示 merge 产生新提交与 fast-forward 的区别。
• Rebase 变基： 实时观察提交记录是如何被“剪切”并“粘贴”到另一个分支顶端的。
• Cherry-pick 与 Hard Reset： 模拟从其他分支拣选特定提交，以及用 reset --hard 强制回滚到某个状态。
• Stash 暂存： 模拟在未提交代码时切换分支被阻塞，以及使用 stash 暂存更改的流程。

支持的命令覆盖了日常开发 90% 的场景：branch, checkout, commit, merge, rebase, cherry-pick, reset --hard, stash, status, log。

开发者视角：技术实现细节

作为开发者，这个项目的架构实现其实比功能本身更有参考价值，尤其是它处理静态内容和动态渲染的方式：

1. 内容同步机制（Single Source of Truth）
它没有在网站代码库里冗余存储 Markdown 文档，而是写了一个自定义的 Astro Content Layer loader。在构建时，直接从公开的 GitHub 仓库拉取 .md 文件。配合 GitHub Action 触发 Vercel 的 deploy hook，实现了“文档仓库更新 → 自动触发构建 → 网站实时更新”的闭环。

2. 高性能 SVG 渲染
为了避免每次输入命令就重新渲染整个分支图导致闪烁，它采用了增量 DOM 更新方案：

• 为每个 Node（提交点）和 Edge（连接线）分配稳定 ID。
• 仅对属性发生变化的元素进行 Diff 更新。
• 这种做法让分支的移动和指向变化有了平滑的动画过渡，而不是生硬的跳转。

3. 极致的静态化部署
整个站点基于 Astro + Tailwind v4，除了一个处理反馈数据的 Vercel Serverless Function (export const prerender = false) 外，其余全部是预渲染的静态 HTML，加载速度极快。

快速上手建议

如果你想尝试，可以直接通过以下路径访问：

• 交互模拟器：https://commitea-web.vercel.app
• 源码仓库：https://github.com/davidbc01/commitea

建议练习路径：
先运行 branch 创建新分支 → commit 提交几次 → 尝试 rebase 到主分支 → 观察 Commit ID 的变化。通过这种方式，你可以直观理解为什么 Rebase 会改变提交历史，以及为什么在公共分支上使用 Rebase 会导致冲突噩梦。