把 Git 提交历史变成一条流动的河——Project River

是什么

你有没有好奇过一个开源项目十年的贡献者活动长什么样?谁一直在写代码?谁是后来加入的?版本大升级时社区发生了什么变化?

我做了 Project River,一个 Git 历史可视化工具------输入一个 Git 仓库,能把每位贡献者的提交活动渲染成随时间流动的河流图(Streamgraph)。

项目地址:github.com/Lionad-Moro...

在线体验:lionad-morotar.github.io/project-riv...

直接看效果:

河流越宽,说明当天的提交越多。每条色带是一位贡献者,一眼就能看出"谁在写代码"、"社区什么时候开始膨胀"、"核心作者跑了没有"。

几个有趣的发现

项目分开发和静态版,静态版预制了几个知名项目的数据,如果你想分析自己的项目,需要去 Github 拉代码本地运行。

而静态版本预置的个项目的数据,每个都能讲出不同的故事。

React --- Facebook 的集体力量

和 Vue 不同,React 没有一条独大的色带。多条宽带交替出现,反映出 Facebook 内部多人协作的模式。每年的 React Conf 前后都能看到提交量的明显脉冲。

jQuery --- 一个时代的落幕

jQuery 的河流图像一条逐渐干涸的河。2014 年前波澜壮阔,之后逐年收窄。这是前端生态热度更替最直观的注脚。

能做什么

缩放和刷选 --- 底部有一个 minimap,拖动选择框就能聚焦任意时间段。也支持触控板捏合缩放。

贡献者高亮 --- 鼠标悬停在某个色带上,对应贡献者的提交明细会浮现出来,其他层自动淡出。

项目健康信号 --- 自动分析贡献集中度、活跃度趋势等指标,帮助判断一个项目是否"健康"。

怎么用

最快的方式是直接打开 在线 Demo,预置了四个项目的数据。

如果你想分析自己的仓库:

  1. docker compose up -d 启动 PostgreSQL
  2. pnpm install && pnpm db:migrate
  3. pnpm dev 启动开发服务器
  4. 通过页面按钮或 CLI 工具分析你的 Git 仓库

刷新页面就能看到你的河流图了。

为什么是河流图

市面上的 Git 可视化工具(比如 GitHub Insights)大多用折线图或热力图展示提交量。但折线图只能回答"总量多少",无法直观感受比例和流向。

而河流图使用面积编码,同时展示总量和构成变化------对评估开源项目健康度来说,这是更合适的信息密度。

如果你也在关注开源项目的可持续性、或者想看看自己团队的提交节奏长什么样,欢迎试试。

GitHub 仓库 | 在线体验


如果觉得有意思,点个赞让更多人看到,非常感谢!

相关推荐
JavaGuide12 分钟前
推荐 3 个 Vibe Coding 中文开源教程,从入门到实战
ai编程·vibecoding
用户23006739704851 小时前
从 Vibe Coding 到 SDD,我的AI 辅助编程工程化实践
vibecoding
稀土熊猫君1 小时前
一个人能做出什么开源项目?
vue.js·后端·开源
ClouGence4 小时前
Vibe Coding 之后,UI 测试如何跟上开发速度?
测试·vibecoding
duanze6 小时前
从零开始Android商业项目Vibe coding完全指南(八)
app·vibecoding
DarkLONGLOVE1 天前
快速上手 Pinia!Vue3 极简状态管理使用教程
javascript·vue.js
宸翰1 天前
解决 uni-app App 端 vue-i18n 占位符丢失:封装跨端可用的 tf 格式化方法
前端·vue.js·uni-app
火锅小王子1 天前
从 0 到 1:我用 AI Coding 撸了一套带「智能客服」的全栈电商系统
agent·vibecoding
疯狂的魔鬼1 天前
告别 boolean 地狱:一个文件上传组件的状态机实践
前端·设计
用户2136610035721 天前
VueRouter进阶-动态路由与嵌套路由
前端·vue.js