Draw an architecture diagram of an app your coding agent built

A coding agent built the app, and you want a diagram of how the pieces fit. The chat can draw one. You ask for a picture of the modules, you get a Mermaid block, and the next round of edits leaves that picture where the chat left it.

Architecture Dissector keeps the map next to the project. The agent reads the code and saves a map with the blueprint command. The app draws components, workflows, and stored data from that map. Start with an app you know, so you can check the first map against what it actually does.

AGENTS.md is the file those agents already read for project rules. The welcome screen has a short snippet for it, so a later session reads the map before it edits and updates the map after.

The examples come from the map of Skill Cabinet, one of my Mac apps, which is also what the screenshots on the app page show. Use your own project’s names when following along. Choose a Git repository if you want blueprint status to track changes later.

What you need

Architecture Dissector runs on macOS 14 Sonoma or later, on Apple silicon and on Intel. After purchasing it, download the app from your Polar receipt. Unzip it and drag Architecture Dissector to your Applications folder. It is signed with an Apple Developer ID and notarized.

Open the app and use the application menu:

1. Install Command Line Tool… makes blueprint available to your agents.
2. Install Agent Skill… installs the instructions for Claude Code, Cursor, and Codex.
3. Set Up Agents… shows those steps again later.

Drop the app’s folder on the window, or press ⌘O and choose it. Tracking a folder reads it. Architecture Dissector uses read-only git commands and does not write into the project. Maps stay in ~/Library/Application Support/Blueprint.

You need one of those three coding agents, with the skill installed, and the source on disk.

Ask the agent to map it

Open the agent in the app’s folder and send this:

Add this app to Architecture Dissector and map it, including its workflows and stored data. Run blueprint guide and follow it.

blueprint guide is the format the agent has to follow. It reads the project and saves the map. When the save lands, the diagram shows up. If the window is still empty, the agent has not saved a map yet. Send the prompt again and have it save with blueprint.

Start on Overview. The app is a few plain-language blocks. Click one to see what is inside it. Take the Tour walks the map’s explanation and moves the canvas to each part it mentions.

In Depth is the individual components and the connections between them. Technical adds the files, and what travels over each connection. ⌥⌘1, ⌥⌘2, and ⌥⌘3 switch those levels. ⌘1 fits the diagram in the window. Scroll or drag to move, and pinch or use the zoom controls to zoom.

Click a component for the inspector. You get its role, a few precise points, its tech, its files, and what it works with.

Check one path against the source

A diagram can look convincing while describing the wrong app. Before mapping every screen, follow one action you understand. In Skill Cabinet that’s renaming a skill.

Ask the agent to ground that flow in the files it read:

Check the rename-skill path in this map. Identify the sheet where the
new name is typed, the code that renames the folders, and the code that
records the old name. Include their real file paths. Show what happens
when the new name is already taken. If the source doesn't establish a
connection, say what is missing instead of inventing a component. Keep
existing component IDs.

In the Skill Cabinet map, that path goes through three files:

Open one referenced file yourself. Follow the save call to its next function. If the map points at a file that no longer exists, correct it before adding more detail.

The agent can validate a proposed JSON map before replacing the saved one with blueprint set --file map.json --dry-run. That checks the map’s structure, so the source check is still yours.

Read the workflows and the data

The same map has more than one view:

A flow is a column per actor, steps from top to bottom, and branches where a decision splits. Click a step to see what happens there and which components handle it. On Data, each store is a box and each table is a card, with keys marked and a line where a field points at another table.

In Skill Cabinet, follow Rename a skill in Flows. You type the new name, the installer renames the folders and links, and the chats that used the old name still count. If the flow is a single arrow from the sheet to the folders, it leaves out where a taken name is rejected.

Then open Data and find aliases.json. It has two fields, oldName and newName. Compare them with the code that writes the file. The Data view should list what the code stores, not fields invented from the screen labels.

An empty Flows or Data view means that part was not in the map. Ask the agent to add the missing flow, or the tables, by name, and to save again. From the project’s folder, this lists the apps that still have no data map:

blueprint list --missing data

You can read the saved data without the window:

blueprint show --data --json

blueprint show --json is the whole map. blueprint help and blueprint capabilities list the other commands.

The palette restyles every diagram without moving the boxes. Architecture Dissector is the default, Terminal is green on black, Minimal is hairlines with no grid, and ASCII looks like a diagram drawn in Monodraw.

Keep the map with the code

Copy the welcome screen’s AGENTS.md snippet into the app. It tells an agent to read the map first and update it after a change. The chat prompt above does that once. The file does it on every later session.

When you want a named point to compare against, press ⌘S and name the version. From the project folder the same save is:

blueprint snapshot --version 1.0.0

The timeline compares two saved versions. New components are green, changed ones are amber, removed ones are red. On Data, the comparison is field by field. The welcome screen’s other prompt asks the agent to include past releases in the map, which is what gives you those versions to compare:

Add this app to Architecture Dissector and map it, including its past releases. Run blueprint guide and follow it.

After a later edit, a changed-file mark in the sidebar means the source moved since the map was saved. The mark comes from a hash of the files, so the explanation still describes the older code. Ask the agent to run blueprint status, which lists what moved, update the parts that changed, and save. Have it keep the same IDs for existing components, so a comparison shows a changed component instead of a deletion and a new one.

If something looks wrong

If blueprint is not found, use Install Command Line Tool… again. That is what makes the command available to your agents.

If you are worried the mapping edited the app, look at git status in that folder. Tracking and saving a map write under ~/Library/Application Support/Blueprint, not into the project. Include that Library folder in your backups. The source stays where it was.

Get Architecture Dissector

Explore your apps through architecture diagrams, workflows, data maps and version comparisons. Includes the Mac app, blueprint CLI and full MIT source.

See Architecture Dissector → · Read the docs · $20 including tax, with full source code.

More tutorials for my apps →

Want me to talk about your product? You can sponsor this site.