# How to map an unfamiliar repo's components before you change it with diagram-design

Repo: [cathrynlavery/diagram-design](https://github.com/cathrynlavery/diagram-design) | Difficulty: Beginner | Time: 15 minutes | Basis: From the README

Have your agent read a codebase and draw its parts and connections so you can orient before editing.

**Who it is for:** Developer joining a project or reviewing a pull request who needs a quick mental map of an unfamiliar repo

**The problem:** Reading folders and files one by one makes it hard to see how the pieces connect.

**The outcome:** A component and data-flow diagram of the repo that you can review with teammates before approving or writing code.

## Steps

1. Install the skill with: npx skills add cathrynlavery/diagram-design
2. Point your agent at the repo and ask it to map the main components and how they talk to each other.
3. Open the HTML file and compare each box and arrow with the actual code paths.
4. Ask for corrections where the diagram is wrong, then keep the final version in the project docs.

## Prompt to paste into your agent

```text
Use the diagram-design skill to map the components and connections in <repo path or URL> as one HTML and SVG diagram. List any connection you were unsure about so I can verify it against the code.
```

## Caveat

The diagram reflects what the agent inferred from the code it read, so it can miss runtime wiring or hidden dependencies. Treat it as a first draft to verify.

Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/

URL: https://dedupedai.com/use-cases/cathrynlavery-diagram-design/map-unfamiliar-repo-for-review/