Repository iconcurepo.dev
Blog
floorplan preview

haydenschmitty / floorplan

codebase-visualizationarchitecture-diagramsclaude-codecodex

A Claude Code and Codex plugin that reads a codebase and draws an interactive map with plain-English names for every part, file and web request.

3.4k Stars
visibility10 Watchers
fork_right273 Forks
JavaScript
historyUpdated recently

description README.md

Floorplan logo

Floorplan

See how your app actually fits together.

Claude or Codex reads your codebase and draws an interactive map of it. Every part, file and web request gets a plain-English name, and every connection between them is shown.

Claude Code plugin Codex plugin Tests Version License: MIT Node 18+ Zero dependencies

Floorplan on Trendshift

Try the live demo · Watch the video · Install · Quick start · Compared · Features · See it in action · How it works · Docs · FAQ

Watch the walkthrough on YouTube: installing Floorplan, then a tour of the map of Brewline, a coffee subscription app

▶ Watch the walkthrough: installing Floorplan, then a tour of Brewline, a demo coffee-subscription app built across four repos.

Try the live demo → Explore the Brewline map in your browser, no install needed.

Why Floorplan?

You built an app, probably with a lot of help from AI, and it works. But ask "what happens when someone checks out?" or "what breaks if I change this?" and the honest answer is no idea.

Floorplan gives you the diagram nobody drew. Ask Claude Code or Codex for a floorplan and a few minutes later you have a map you can explore, ask questions on, and keep up to date as you work.

  • For builders: understand the app you made, in your own words, without reading the code.
  • For teams: onboard someone in minutes, from the big picture down to the exact file.
  • For working with AI: after every change Claude or Codex makes, see exactly which parts it touched and why.

Floorplan, Archify or Understand Anything?

All three turn code into something you can see, and all three are worth knowing. They answer different questions:

FloorplanArchifyUnderstand Anything
The question it answersHow does the app I built actually work, and what should I worry about?How do I show this clearly?How does this big codebase work, down to the functions?
Made forPeople who build with AI and don't read the codeAnyone explaining a system, a process or an ideaDevelopers getting to know a large codebase
What you getA zoomable map of your whole app: parts, files and endpoints, the screens, the requests between frontend and backend (even across repos), and outside servicesA polished diagram in one of 10 types (architecture, sequence, ERD…) or a one-page explainer, from a repo or just a descriptionA knowledge graph of every file, function and class, with layers, a business-domain view and guided tours
Only hereHealth check (keys in code, open Supabase tables and Firebase rules, fakeable Stripe webhooks, endpoints anyone can use), Recent work (what your AI just changed, and why), blueprints from a PRD10 diagram types, image and video exports, diagrams of things that aren't codeDiff impact, a dashboard that adapts to your role, knowledge-base graphs
Runs inClaude Code, CodexClaude Code, Codex, Cursor, OpenCode and moreClaude Code, Codex, Cursor, Copilot, Gemini CLI and more

Pick Floorplan to understand and check an app you own. Pick Archify to draw a diagram for a doc, a talk or a decision. Pick Understand Anything to study a large codebase function by function.

They also work together: map your app with Floorplan, then use Archify to draw one flow for a presentation.

Features

🗺️ A map at every zoom
Start with the whole app, then double-click into a part, a group of files, a file, and its endpoints. Each view shows what it's used by and what it uses.

💬 Plain English everywhere
"Takes card payments at checkout", not "Stripe API wrapper". Technical terms are explained on hover, and one switch shows the developer view.

🔌 Real connections, across repos
It follows imports, and matches each web request in your frontend to the server endpoint that answers it, even across separate repos.

🖥️ Start from a screen
Pick a page you know and see everything behind it: its parts, the requests it makes, the server code, the data, and outside services.

🧭 Ask the map
"How does a refund reach the customer's card?" comes back as an answer plus a mini-map of just the pieces involved, with a step-by-step walkthrough.

🩺 Health check
Catches the classic mistakes in AI-built apps: keys in the code or sent to the browser, Supabase tables anyone can read, open Firebase rules, Stripe webhooks anyone could fake, and endpoints with no sign-in. Each comes with a ready-to-paste fix. A check, not an audit.

🟢 Recent work
The cards your AI just changed light up green, each with a note on how the change serves what you asked for.

⚡ Stays current, stays yours
Updates re-read only what changed, and an open map reloads itself. Everything runs on your machine, and nothing is committed to git.

Plus guided flows you can request in plain words, a one-minute Start here tour, Export to send a copy to anyone as one HTML file, a layout for phones and tablets with drag and pinch, search, keyboard shortcuts, and right-click actions on every card.

Also: blueprints, for apps you haven't built yet

Floorplan is made for mapping code you already have. It can also start from a PRD, a spec or a description of something you want to build, and draw a blueprint: the same kind of map, showing every part, file, endpoint and screen you'd need and how they'd fit together. Cards are dashed to show it's a plan. Instead of a Health check you get a review of what the plan still leaves open, each part has a ready request to build it, and you can reshape the plan from the map ("also plan out refunds"). Once the code exists, the blueprint becomes a map of the real thing. See Plan something you haven't built yet.

See it in action

Want to click around yourself? Open the [live demo](https://haydens