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


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

相关推荐
卤蛋fg612 小时前
vxe-table 列拖拽排序与行拖拽排序:让表格布局任意排序
vue.js
粉末的沉淀12 小时前
vue:Vite项目中高效管理纯色SVG图标的方案
前端·javascript·vue.js
卤蛋fg612 小时前
vxe-table 列宽与行高拖拽调整:让表格布局极其灵活,拖拽功能非常强大
vue.js
向日的葵00613 小时前
Vue 路由传参的三种方式(三)
vue.js·路由
如果超人不会飞13 小时前
TinyVue Checkbox复选框组件使用指南
前端·vue.js
如果超人不会飞14 小时前
TinyVue Radio单选框组件使用指南
vue.js
鲁班小子14 小时前
Vite resolve.dedupe 使用教程
vue.js·vite
如果超人不会飞14 小时前
TinyVue Input输入框组件使用指南
vue.js
如果超人不会飞14 小时前
TinyVue Pager分页组件使用指南
前端·vue.js
大刚测试开发实战14 小时前
TestHub重磅更新!AI用例生成增加流式输出、Markdown文档上传、模型配置检测、AI评审开关控制...
vue.js·后端·github