PR Lens Vibe 项目
**项目简介** PR Lens 是一个把代码评审可视化的开源工具:它把每个拉取请求(PR)绘制为动画架构图与数据流图
项目简介
PR Lens 是一个把代码评审可视化的开源工具:它把每个拉取请求(PR)绘制为动画架构图与数据流图,直接以评论形式贴在拉取请求内部,让你在读第一行代码之前就看懂这次改动。项目从零自研渲染器而非使用 Mermaid,动画更丰富、能清晰区分代码的新增与删除,也能承载超大规模系统的图景。开源项目可免费使用,同时支持 GitHub、GitLab、Bitbucket 三大平台。
核心功能
- 架构冲击面:图上直接展示这次改动触及系统的哪些组件以及它们之间的调用关系,绿色为新增、琥珀色为改动、红色为删除,一眼看清影响范围。
- 数据流动画:移动圆点按步骤顺序播放改动的执行路径;点击任意箭头,侧面板展示该次请求与响应携带的数据结构与示例,新字段标绿、删除字段标红。
- 可折叠分节:评论内用折叠区拆分整体改动图、新增路径与删除路径,超大改动也能分层查看而不刷屏。
- 交互画布与走查讲解:每个评论都可跳转到全尺寸交互画布,支持平移缩放与明暗双主题;内置走查讲解按播放键逐步展开,避免一次面对全部信息。
- 编码代理实时接入:让你的本地编码代理连接画布,你可以框选若干节点向它提问、观察它实时操作图上的内容,把画布变成理解任意代码库的现场白板。
技术实现
图不是静态截图,而是自研渲染器实时生成的矢量动画:渲染层把拉取请求的文件变更映射为泳道、卡片与连线,用统一的颜色语义标注新增、改动与删除,数据流面板则挂载在每条箭头上展示请求响应负载。渲染结果既以折叠评论形式嵌入代码托管平台内部,也同步发布为可交互画布链接,两者共享同一套图与主题。项目提供四种集成形态:GitHub 应用自动在每个拉取请求下评论;命令行接口可在本机生成;GitLab 通过持续集成组件接入、Bitbucket 通过管道接入;还可以作为技能安装给编码代理,让代理自己动手画图并解读。官方画廊收录了 React Hooks、Node fetch、Kubernetes Ingress 等真实大型项目的拉取请求作为展示,例如 React 第 13968 号拉取请求覆盖三十六个文件、增删五千八百余行,同样能完整绘出,证明渲染器足以应对复杂系统。
快速上手
- 在 GitHub 安装 coldtea-pr-lens 应用,之后每个新拉取请求会自动收到可视化评论。
- 或安装命令行接口:通过 npm 安装 @coldtea/pr-lens-cli,在本机对任意仓库生成图表。
- 或给编码代理添加技能:执行 npx skills add coldteadotai/pr-lens,让代理直接绘制与解读代码。
- 若使用 GitLab,在流水线中加入官方持续集成组件;Bitbucket 则添加对应管道;完成后打开任意拉取请求即可看到图,点击评论内链接进入交互画布。
适用人群
评审大型拉取请求的开发者与技术负责人、维护开源项目的团队、使用编码代理并希望可视化理解任意代码库的工程师,以及同时使用 GitHub、GitLab、Bitbucket 的多平台研发团队。项目社区在 Discord 开放交流,命令行、应用与技能三种接入方式覆盖了从人工评审到代理协作的完整工作流。
官网链接
https://prlens.dev (GitHub 仓库:https://github.com/coldteadotai/pr-lens)
评论与建议
登录 后参与评论或提建议