Understand code visually.

Connect real repository files to editable diagrams and focused Claude Code tasks.

Open Cabinet See how it works

Repository access is read-only. Board items keep references to files, and no source code.

The workflow

How it works

Connect a repository

Add a public GitHub repository, or a private one you’ve approved through Cabinet’s read-only GitHub App.
Place Code References

Pin files to the board, next to your designs, bugs and notes.
Ask Claude a focused question

Copy a prompt containing the selected file references and one task.
Import an editable diagram

Paste Claude’s reply into Cabinet. It becomes an editable diagram.
Keep it connected to its sources

Diagram nodes remember the repository, branch and commit of the files they represent.
Check whether it became outdated

Compare the recorded commits with the repository today, and update the diagram if it needs it.

Developer Tools

The tools

Connect repositories

A repository is a card on the board. Browse its folders and files from the card.

Public repositories, like facebook/react, work without signing in.
Private ones use Cabinet’s read-only GitHub App.

A Cabinet board with a GitHub repository card and a Code Reference card placed beside design notes — A repository card and three Code Reference cards.

Place Code Reference cards

Put any single file on the board as a card.

A card remembers its repository, branch and commit.
Every card links back to the file on GitHub.
The card stores the reference, and none of the file’s contents.

Code Reference

Repository: facebook/react
File: packages/react-dom/src/client/ReactDOMRoot.js
Ref: main
Commit: 4b7cbe4

A small metadata snapshot — never the file’s contents.

Generate repository structure diagrams

Turn a repository folder into a diagram of its folders and files.

Every node is an ordinary board item.
Move, rename, connect and annotate them.

An editable folder-and-file hierarchy diagram generated from a repository folder — A folder turned into a diagram.

Prepare focused Claude Code tasks

Select some Code Reference cards and pick a task. Cabinet writes a prompt with just those file references and that task. Nothing else from your board goes in.

Explain Investigate bug Plan change Review architecture Create diagram

Overview Balanced Detailed

Diagram prompts have three detail levels.

Cabinet's Copy context for Claude dialog showing task presets and diagram detail levels — The “Copy context for Claude” dialog.

Import editable Claude diagrams

Ask for a diagram and Claude replies in Cabinet’s CABINET_DIAGRAM_V2 format.

Cabinet checks the reply before importing it.
It becomes an ordinary frame and Flow Diagram.
Nothing lands on the board until you import it yourself.

An imported Claude diagram rendered as an editable Cabinet Flow Diagram inside a frame — A diagram imported from Claude’s reply.

Trace diagrams back to code

An imported diagram stays linked to the files it explains.

Select a node to see its files.
Copy a file path, or open the file on GitHub.

A selected diagram node showing the repository files it represents, with options to copy the path or open it on GitHub — A node’s source file, with Copy and Open on GitHub.

Check freshness

A diagram records the commit it was made from. Check freshness compares that with the repository’s current commit.

Up to date: the branch is still at the recorded commit.
Repository changed: the branch has moved on since the diagram was made.
Cabinet can’t tell which file changed, only that the repository has.

A source-linked diagram with its freshness result, comparing the recorded commit with the repository's current commit — The result of a freshness check.

Review and update outdated diagrams

“Review changes” writes a prompt asking Claude to compare the files between the old commit and the current one. Claude can recommend:

No update needed Wording-only update Structural diagram update Full regeneration

“Prepare updated diagram” writes a prompt for a new diagram. The old one stays, and the new one is imported next to it.

An older architecture diagram preserved on the board next to its newly imported, updated version — The old diagram above the updated one.

In practice

What can I use this for?

Designer understanding implementation

Put the relevant files beside a UX flow and ask Claude how the implementation works.

Investigating a bug

Put an error screenshot, the steps to reproduce it and the relevant files on one board.

Planning a feature

Add the existing files and get a diagram of what the new feature might touch.

Documenting architecture

Make diagrams that stay linked to their repository and commit.

Comparing UX intention with code

Put the intended flow beside the implementation diagram and look for what’s missing.

Returning to old work

Open a diagram months later and check whether it’s still accurate.

All together

A whole feature on one board

One board can hold all of this:

Feature brief UX flow Screenshots Bug reports Code Reference cards Repository structure Architecture diagram Implementation tasks Freshness and review state

Safety and privacy

GitHub access is read-only.
Board items store references. No source code.
A Claude prompt only includes the Code Reference cards you select.
Cabinet never calls Claude itself. You copy the prompt and paste the reply.
Imported diagrams are checked before they reach the board.
Nothing changes on the board until you approve it.
Old diagrams are kept when a new version is made.