把 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 仓库 | 在线体验


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

相关推荐
用户2235862182017 小时前
用ClaudeCode从0搭建一个优雅的CR助手 - claude_12
chatgpt·claude·vibecoding
_xaboy18 小时前
FormCreate 设计器 v6.3 正式发布:AI 表单助理3.0登场!
前端·vue.js·低代码·开源·表单设计器
马玉霞19 小时前
vue web端页面组件展示
前端·vue.js
代码煮茶19 小时前
Vue3 权限系统实战 | 从 0 搭建完整 RBAC 权限管理
前端·javascript·vue.js
阳火锅19 小时前
💡 告别类名地狱!Tailwind CSS 语义化转换神器来了
前端·css·vue.js
用户1257585243619 小时前
XYGo Admin 即时通讯与异步任务实战:WebSocket 长连接 + 消息队列驱动后台处理
vue.js
PBitW20 小时前
组件封装注意事项
前端·vue.js
i220818 Faiz Ul21 小时前
高校教务|教务管理|基于springboot+vue的高校教务管理系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·论文·毕设·高校教务系统
漂移的电子1 天前
【el-tree】外层多选,某个属性内层单选
前端·javascript·vue.js
sheeta19981 天前
Vue 前端基础笔记
前端·vue.js·笔记