PR Lens：把每个 Pull Request 画成动态架构图的代码评审神器

Skill超级捕获手 技术创作者 2026-09-27 2041 阅读

PR Lens：把每个 Pull Request 画成动态架构图，代码评审提速 100 倍

PR Lens 把 Pull Request 变成一张可动的架构图和数据流走读图，直接贴在 PR 评论里——不用读一行代码，先看清改了什么、再决定从哪里下手。9 月冲上 GitHub Trending，已被 React、Vue、Node.js、Rust 等顶级开源项目采用，月均处理 2500+ PR。作为 GitHub App 安装后全自动运行，Claude Code 也能通过 skill 直接调用。截至 2026-09-27 约 1.5k Stars。

功能与原则

PR Lens 的核心是一个三步渲染管道：读取 git diff → 按规范写入 JSON 图文档（.pr-lens/graph.json）→ 调用 CLI 渲染为 SVG 动画。不同于截图或静态图，它做的是有语义的架构blast radius：用颜色标记增删改（绿＝新增，琥珀＝修改，红＝删除），用箭头和节点呈现组件间的调用关系，用动画演示数据流的执行顺序。

四条设计原则：
– 先理解再读代码： blast radius + 数据流走读让你在打开任何一个文件前就知道改动的范围和影响
– 不改生成物，只改配置：如果图上名字不对，在 .github/pr-lens.yml 里加映射规则，下次运行自动生效，而不是手工改 SVG
– 对大仓库同样有效：单文件改动到 monorepo 100 文件，都用同一套视觉语法（lane / node card / edge / delta color）
– 开发者自助，CI 付费：GitHub App 免费对开源仓库开放，CI 和自定义模型集成走 CLI 和 Action

认可度

GitHub Stars 约 1.5k（截至 2026-09-27），4 周内从 0 起步并持续增长。已在多个顶级开源项目生产环境使用：react（+5,868/−130）、nodejs（+8,076/−3）、vuejs（+1,081/−670）、rust-lang、kubernetes、tokio-rs、neovim、django、webpack、vllm-project，月均 2500+ PR 进图。9 月多次进入 GitHub Trending，每日新增 Stars 约 23 个。ClaudeWave Trust Score 92/100。

链接

GitHub：https://github.com/coldteadotai/pr-lens

官方画廊（所有公开 PR 图）：https://prlens.dev/gallery

原作者

由 Coldtea AI（@coldteadotai）开发维护。Coldtea AI 专注于 AI 辅助开发工具，另一代表作包括 abide（Claude Code 行为约束 Skill，约 3.3k Stars）和面向代码 Agent 的实用工具链。

介绍

代码评审是开发流程中最费时间的环节之一——尤其是接手一个陌生的代码库时，往往要花大量时间才能搞清楚一个 PR 到底改了什么、影响哪些模块。PR Lens 从这个痛点切入：当你打开一个 PR，先看到一张动态的架构图，告诉你这个 PR 改了哪些组件、它们之间怎么通信、数据的起点和终点在哪——看完图，代码改动的大致范围已经了然于胸。

技术实现上，PR Lens 通过 git diff 拿到变更的文件和内容，将代码结构抽象为「节点」（组件/文件）和「边」（调用或数据流），用颜色标注变更类型。渲染产物是 SVG 动画，评论里配有关键路径的逐步走读，按一步一帧的方式演示数据从输入到输出的完整流程。每张图都链接到一个交互式画布（prlens.dev），支持放大、切换明暗主题、在节点上直接向 AI Agent 追问。GitHub App 安装后无需任何配置，每 Push 自动更新评论；开发者也可以在本地通过 CLI 或 Claude Code Skill 手动触发。

特点

  • 架构 blast radius 可视化：彩色标注影响范围，绿/琥珀/红分别表示新增/修改/删除的组件
  • 数据流动画：箭头逐步演示数据经过的每一步，附有 payload 详情（点击箭头展开请求/响应结构）
  • 嵌套钻取：评论用 <details> 分层，大图套小图，从整体 blast radius → 新增路径 → 废弃路径层层钻入
  • 多平台部署：GitHub App（一键安装，全自动评论）/ GitHub Action / CLI / Claude Code Skill
  • 配置覆盖，不改生成物：通过 .github/pr-lens.yml 做 rename/exclude/lane pin，不直接编辑 SVG，重跑自动生效
  • 开源免费：GitHub App 对所有公开仓库免费；私有仓库和高级功能走付费计划

使用方法

方式一：GitHub App（推荐，最省事）

访问 https://github.com/apps/coldtea-pr-lens 安装到需要的仓库。安装后每个 PR 自动生成一条带图的评论，每次 Push 自动更新，无需任何 API Key。

方式二：Claude Code Skill

npx skills add coldteadotai/pr-lens

在 Claude Code 里告诉它：

Diagram the change you just made with PR Lens and attach it to the pull request.

Agent 自动完成：读 diff → 写 graph.json → validate → render → 用 gh pr create --attach 把图附到 PR 描述里。如果图上名字不对，告诉 Agent 去改 .github/pr-lens.yml 而不是改 SVG。

方式三：CLI 手动渲染

# 安装 CLI
npm install -g @coldtea/pr-lens-cli

# 读 diff 并渲染（明/暗主题）
git diff --find-renames > /tmp/diff.patch
npx @coldtea/pr-lens-cli render /tmp/diff.patch --theme light

# 本地验证图文档是否合规
npx @coldtea/pr-lens-cli validate .pr-lens/graph.json

使用场景与人群

适用场景

  • 大型代码库的 Code Review：PR 涉及十多个文件时，先看 blast radius 图再读代码
  • Monorepo 多包变更：跨包依赖关系在一张图上清晰呈现
  • AI Agent 辅助开发：Agent 生成代码后用 PR Lens 自审，再提交给人类评审
  • 开源项目维护者：快速评估外部 PR 的影响范围和安全风险

目标用户

  • 需要频繁做 Code Review 的工程师（尤其是跨模块、大范围改动）
  • AI Coding Agent 用户（Claude Code / Codex / Cursor 等）
  • 开源项目维护团队（免费 GitHub App）
  • 技术lead / 架构师（快速评估 PR 范围，不逐行读代码）

输入与输出案例

案例一：大范围重构

输入：一个 PR 改了 16 个文件，涉及 fetch、Request、Response 和 Headers 进入 Node.js 核心模块。

输出：一张 5-lane 架构图，顶层显示 Node.js 核心组件（Event Loop / HTTP Parser / Stream 等），变更节点用绿色高亮，调用边用箭头标注数据流向。评论里附有动画演示：fetch 请求从进入 Event Loop → 经 HTTP Parser 解析 → 到 Stream 处理的完整路径。点击任意箭头可展开 request/response 结构体详情。

案例二：AI Agent 自审

输入：Claude Code 刚实现了一个新功能（假设是支付模块），用户让它用 PR Lens 生成图。

输出：Agent 读取 git diff，生成 .pr-lens/graph.json，validate 通过后渲染 SVG，附到 PR 描述里。作者点开 prlens.dev 上的交互画布，用鼠标滚轮放大、切换 dark 模式，确认改动范围符合预期后提交评审。整个过程无需人工读 diff，Agent 负责生成架构图，人类负责决策。

GitHub: https://github.com/coldteadotai/pr-lens

评论区

0 条评论

登录后可评论。

Skill超级捕获手 2041 阅读