Codemap Usage Examples
End-to-end scenarios showing how codemap-dev commands and skills work together.
Scenario 1: Onboarding to a Flask Project
A junior developer joins a team with an existing Flask + SQLAlchemy application.
Step 1: Full onboarding
/codemap:onboard
What happens:
- Scans the project — finds Flask app factory, blueprints, SQLAlchemy models
- Generates
docs/codemap/ONBOARDING.md with stack summary, directory roles, how to run locally
- Generates
docs/codemap/ARCHITECTURE.md with layer descriptions
- Creates 3 diagrams:
docs/codemap/diagrams/architecture.drawio — C4 container diagram (Flask app, PostgreSQL, external APIs)
docs/codemap/diagrams/main-flow.drawio — primary user flow as a flowchart
docs/codemap/diagrams/erd.drawio — all database tables with relationships
Step 2: Understand a specific module
/codemap:explain routes/deals.py
What happens:
- Applies 4-layer model: Context (what the file does) → Data Flow (request lifecycle) → Details (each route handler) → Pitfalls (common mistakes)
- If 3+ components interact, auto-generates a mini-diagram
Step 3: Review your first PR
/codemap:review #15
What happens:
- Fetches PR diff via
gh pr diff 15
- Reviews across 5 dimensions: Security, Correctness, Readability, Patterns, Beginner Pitfalls
- Each finding explains why it matters, not just what to fix
Scenario 2: Understanding a Database Schema
A developer needs to understand the data model before making changes.
Step 1: Generate ERD and documentation
/codemap:db
What happens:
- Auto-detects ORM (SQLAlchemy, Prisma, TypeORM, Django, raw SQL migrations)
- Parses all model definitions — tables, columns, types, foreign keys, relationships
- Reviews schema quality (missing indexes, naming inconsistencies, missing constraints)
- Generates
docs/codemap/diagrams/erd.drawio with color-coded tables
- Generates
docs/codemap/DB.md with table details and relationship descriptions
Step 2: Explore a specific relationship
/codemap:explain models/deal.py
What happens:
- Explains the Deal model — what it represents, its columns, relationships to other models
- Shows data flow: how deals are created, updated, queried
- Notes pitfalls: cascade deletes, missing constraints, N+1 query risks
Scenario 3: Visualizing Architecture for a Team Presentation
A developer needs to create architecture diagrams for a team knowledge-sharing session.
Step 1: System overview
/codemap:diagram architecture
What happens:
- Scans root configs, entry points, all top-level directories
- Generates C4 container diagram showing all services, databases, external APIs
- Saves to
docs/codemap/diagrams/architecture.drawio and opens interactive preview
Step 2: Specific feature flow
/codemap:diagram sequence POST /api/deals
What happens:
- Traces the request from route handler through service layer to database
- Generates sequence diagram with lifelines for each component
- Labels arrows with data being passed at each step
Step 3: Discover all user flows
/codemap:flows
What happens:
- Finds all route definitions and groups them into logical flows
- Generates a flowchart for each major flow (auth, CRUD, key features)
- Writes
docs/codemap/FLOWS.md with descriptions and diagram links
1---2name: codemap-examples3description: This skill should be used when the user asks for "codemap examples", "how to use codemap", "show me what codemap can do", "codemap walkthrough", or wants to see end-to-end usage scenarios for the codemap plugin.4---56# Codemap Usage Examples78End-to-end scenarios showing how codemap-dev commands and skills work together.910## Scenario 1: Onboarding to a Flask Project1112A junior developer joins a team with an existing Flask + SQLAlchemy application.1314### Step 1: Full onboarding1516```17/codemap:onboard18```1920**What happens:**211. Scans the project — finds Flask app factory, blueprints, SQLAlchemy models222. Generates `docs/codemap/ONBOARDING.md` with stack summary, directory roles, how to run locally233. Generates `docs/codemap/ARCHITECTURE.md` with layer descriptions244. Creates 3 diagrams:25 - `docs/codemap/diagrams/architecture.drawio` — C4 container diagram (Flask app, PostgreSQL, external APIs)26 - `docs/codemap/diagrams/main-flow.drawio` — primary user flow as a flowchart27 - `docs/codemap/diagrams/erd.drawio` — all database tables with relationships2829### Step 2: Understand a specific module3031```32/codemap:explain routes/deals.py33```3435**What happens:**361. Applies 4-layer model: Context (what the file does) → Data Flow (request lifecycle) → Details (each route handler) → Pitfalls (common mistakes)372. If 3+ components interact, auto-generates a mini-diagram3839### Step 3: Review your first PR4041```42/codemap:review #1543```4445**What happens:**461. Fetches PR diff via `gh pr diff 15`472. Reviews across 5 dimensions: Security, Correctness, Readability, Patterns, Beginner Pitfalls483. Each finding explains **why** it matters, not just what to fix4950## Scenario 2: Understanding a Database Schema5152A developer needs to understand the data model before making changes.5354### Step 1: Generate ERD and documentation5556```57/codemap:db58```5960**What happens:**611. Auto-detects ORM (SQLAlchemy, Prisma, TypeORM, Django, raw SQL migrations)622. Parses all model definitions — tables, columns, types, foreign keys, relationships633. Reviews schema quality (missing indexes, naming inconsistencies, missing constraints)644. Generates `docs/codemap/diagrams/erd.drawio` with color-coded tables655. Generates `docs/codemap/DB.md` with table details and relationship descriptions6667### Step 2: Explore a specific relationship6869```70/codemap:explain models/deal.py71```7273**What happens:**741. Explains the Deal model — what it represents, its columns, relationships to other models752. Shows data flow: how deals are created, updated, queried763. Notes pitfalls: cascade deletes, missing constraints, N+1 query risks7778## Scenario 3: Visualizing Architecture for a Team Presentation7980A developer needs to create architecture diagrams for a team knowledge-sharing session.8182### Step 1: System overview8384```85/codemap:diagram architecture86```8788**What happens:**891. Scans root configs, entry points, all top-level directories902. Generates C4 container diagram showing all services, databases, external APIs913. Saves to `docs/codemap/diagrams/architecture.drawio` and opens interactive preview9293### Step 2: Specific feature flow9495```96/codemap:diagram sequence POST /api/deals97```9899**What happens:**1001. Traces the request from route handler through service layer to database1012. Generates sequence diagram with lifelines for each component1023. Labels arrows with data being passed at each step103104### Step 3: Discover all user flows105106```107/codemap:flows108```109110**What happens:**1111. Finds all route definitions and groups them into logical flows1122. Generates a flowchart for each major flow (auth, CRUD, key features)1133. Writes `docs/codemap/FLOWS.md` with descriptions and diagram links