Review code 100X faster. Lens draws every PR as animated architecture and data-flow walkthroughs, inside the pull request itself.
概要
Understand a pull request, any codebase, or software visually, before you read a line of code PR Lens draws every pull request as animated architecture and data-flow diagrams, posted as a comment inside the pull request itself. For your coding agents, leverage it for understanding any codebase or code change with a live canvas of animated explainers Install the GitHub App · Install the Skill Free for open source · Or have your coding agent draw it: npx skills add coldteadotai/pr-lens We built a custom renderer from scratch. It draws rich animated visuals, reduces cognitive overload, represents code additions, removals and changes and still works for representing very large systems The diagram shows the parts of your system that the code change touches, drawn against the system around it: the components involved, and the calls that run between them. Colors show what changed: is new, is changed, and is removed.
README
PR Lens
Understand a pull request, any codebase, or software visually, before you read a line of code PR Lens draws every pull request as animated architecture and data-flow diagrams, posted as a comment inside the pull request itself. For your coding agents, leverage it for understanding any codebase or code change with a live canvas of animated explainers
Install the GitHub App · Install the Skill
Also runs on GitLab and Bitbucket
Free for open source · Or have your coding agent draw it: npx skills add coldteadotai/pr-lens
Features
Hall of Fame
We ran the pull requests behind React Hooks, Node fetch and Kubernetes Ingress through PR Lens. They were drawn with the same renderer and the same format as the diagrams above.
react/react#13968 · 36 files · +5,868/−130 · 5 lanes. Hooks are added behind a feature flag.
nodejs/node#41749 · 16 files · +8,076/−3 · 5 lanes. fetch, Request, Response and Headers are added to Node itself.
kubernetes/kubernetes#14175 · 8 files · +766/−0 · 4 lanes. The first Ingress type, for L7 load balancing.
Open the Hall of Fame. Every diagram there is live.
Configuration
Add a .github/pr-lens.yml file to change how PR Lens works. GitLab and Bitbucket have no .github/ folder, so there you can use .gitlab/pr-lens.yml or a pr-lens.yml at the top of the repo. They work the same way. The configuration reference lists every setting, its default, and examples.
Fix names and mistakes
When you draw with the CLI, put your fixes in .github/pr-lens.yml. Don’t edit the SVG files it makes:
schemaVersion: 0.1.0
map:
rename:
- match: services/legacy-mailer.ts
to: Postmark sender
exclude:
- "**/*.test.ts"
These fixes sit on top of what the model finds. They keep working as the code changes, even when the model names things differently from one run to the next. You can rename things, leave files out, pin cards to a lane, and group things together. See packages/cli for all of it.
Other ways to run it
For most people, the App is all they need. The options below cover what it doesn’t: your own CI, your own model, or a diagram before the pull request exists.
Packages
| Package | What it is |
|---|---|
packages/schema |
@coldtea/pr-lens-schema: the format every other part uses |
packages/renderer |
@coldtea/pr-lens-renderer: turns a JSON graph into the moving light and dark SVGs on this page, the same way every time |
packages/cli |
@coldtea/pr-lens-cli: reads a diff with your own model key, draws it, and writes the comment |
packages/action |
the GitHub Action: analyzes the change, publishes the diagrams, and posts one comment |
packages/gitlab-component |
the GitLab CI/CD component: does the same on a merge request |
packages/bitbucket-pipe |
the Bitbucket pipe: does the same on a pull request |
packages/agent-skill |
@coldtea/pr-lens-agent-skill: teaches a coding agent to draw the change it just made |
Working in this repo
pnpm install
pnpm verify # build, typecheck, test
You need Node 20.11 or newer and pnpm 10.
Self-hosting the canvas
Start with docs/canvas-api.md.
Community
Ask questions or share your diagrams on Discord. We post new releases and features on X at @drawwithlens.
Contributing
Open an issue first. Wait for one of us to approve it before you or your agents write any code. We close pull requests that have no approved issue. Once your issue is approved, link to it from your pull request.
Commit under your own name only. Don’t add a Co-Authored-By line for a model, a “Generated with” footer, or a session link. You can use an agent (we do too), but the commits are yours and you are fully responsible for them. Most tools add these lines unless you turn them off.
Why we built this
Reducing the cognitive load of reviewing PRs
License
MIT © Coldtea
推奨ツール
別のキーワードを試すか、フィルタを外してください。
インストール
npx skillfish add coldteadotai/pr-lens