交互式工具，用于理解 Git 的工作原理、提交历史与合入过程。
- 读取git仓库的提交记录
- 展示提交记录（commit id、作者、日期、提交信息）
- 选中特定commit后，显示修改的文件列表
- 选中特定commit和文件后，显示文件的修改内容
- 选中特定commit后，显示对应的treehash、文件内容和可视化的目录结构
- 选中多个commit后，根据提交顺序绘制提交关系图（前驱后继、分支、合并等关系）
- 提交关系图中，每个commit节点显示commit id
- 选中特定节点后，显示该节点的详细信息（commit id、作者、日期、提交信息、treehash）
- 选中特定节点后，可以查看快照详情（treehash、tree结构、文件列表）
- commit列表可滚动展示，通过复选框控制关系图中显示的commit
- 框架: React + TypeScript + Vite
- Git操作: simple-git（通过Vite插件集成）
- 可视化: D3.js
仓库：hitzhangjie/git-vis。npm 包名为 @hitzhangjie/git-vis（未作用域名 git-vis 已被占用），命令行仍为 git-vis：
npm install -g @hitzhangjie/git-vis
git-vis /path/to/your/repo
git-vis .npm install# 开发模式（自动启动 Vite + Electron）
npm run dev:electron
# 打包安装包（macOS: dmg / Windows: nsis / Linux: AppImage）
npm run distCLI 启动行为：
- 不传路径：进入仓库输入页
- 传入有效仓库路径：直接进入可视化页面
- 传入无效路径：回退到仓库输入页
在任意目录下打开本地 Git 仓库：
# 在项目目录内执行（开发时）
npm run git-vis -- .
# 或安装为全局命令后
npm link
git-vis /path/to/your/repo
git-vis .命令会校验仓库路径、启动开发服务器，并自动在浏览器中打开界面，无需再手动输入路径。
npm run dev访问：http://localhost:3000，在页面中手动输入仓库路径。
- 打开仓库 — 使用
git-vis <repo>自动打开，或在 Web 界面输入路径后点击「打开仓库」 - 查看提交列表 — 左侧面板显示所有提交记录，点击查看详情
- 查看提交详情 — 中间面板显示修改的文件列表，点击文件查看差异
- 查看快照 — 在commit详情页面点击"查看快照"按钮查看tree结构
- 查看关系图 — 勾选左侧提交列表中的commit，右侧面板显示关系图
- 关系图使用D3.js力导向图算法，支持拖拽节点
- 点击节点查看详细信息
- 确保系统已安装Git
- 确保指定的路径是一个有效的git仓库
- 大型仓库可能需要较长的加载时间
ps: badcase/git_cp_mistake.tgz 是一个精心构造的 badcase，git merge feature / git cherry-pick feature上提交，此时均不会报冲突，但是直观上我们认为应该报冲突，毕竟修改有重叠 …… 但是实际上不是的。这个疑问也是为了做这个项目可视化git内部细节、帮助更多git用户了解更多细节的一个源头。
文档： 工程结构、HTTP API、本地开发见 docs/DEVELOPMENT.md；设计说明见 docs/1-SUMMARY.md。