# Code Maps

Code Map generates diagrams of your code visually rendered, always accurate, produced from your actual codebase. Use it to understand system structure, trace data flow, map dependencies, or explain architecture to a teammate. Diagrams are rendered using Mermaid directly in your IDE.

***

### Opening Code Map

Open it by selecting Code Map section in the C0 panel

<figure><img src="/files/Z73wnKoSUaZPpmDetMUa" alt=""><figcaption></figcaption></figure>

***

### What you can map

#### Request and data flow

Trace how a request moves through your system from entry point to response, including every service, function, and data transformation along the way.

```
Show me how a checkout request flows through the system, 
from the API endpoint to the order being created in the database.
```

```
Map the data flow for user authentication 
from the login form submit to the session being set.
```

#### Module and dependency structure

Visualize how your modules depend on each other. Identify circular dependencies, overly coupled modules, and the natural seams in your system.

```
Map the dependencies between the services layer. Show which services depend on which.
```

```
Show the dependency graph for the checkout module. 
I want to understand what it touches before I refactor it.
```

#### Class and inheritance hierarchies

Visualize class relationships inheritance, composition, and interface implementation.

```
Map the class hierarchy for the payment providers.
Show how the base class and each provider implementation relate.
```

#### State machines and lifecycle flows

Diagram how an entity moves through states over its lifetime.

```
Map the lifecycle of an order every state it can be in and the transitions between them.
```

```
Show the states a subscription can be in and what events cause transitions.
```

#### System architecture

Get a high-level architectural view of a system or feature area.

```
Give me an architectural diagram of the notification system all the components involved and how they connect.
```

***

### How Code Map works

C0 reads your codebase using the knowledge base call graphs, import chains, class relationships, and function interactions and generates a Mermaid diagram that accurately represents the structure or flow you asked for.

The diagram is grounded in your actual code, not a generic template. Function names, class names, module names, and flow paths come from what's really there.

***

### Diagram types

C0 selects the most appropriate Mermaid diagram type based on your request:

| What you're mapping                         | Diagram type                         |
| ------------------------------------------- | ------------------------------------ |
| Request or data flow                        | Flowchart (`graph LR` or `graph TD`) |
| Sequence of interactions between components | Sequence diagram                     |
| Module or file dependencies                 | Graph or flowchart                   |
| Class hierarchy or relationships            | Class diagram                        |
| State transitions                           | State diagram                        |
| Process or lifecycle                        | Flowchart or sequence diagram        |

You can also request a specific diagram type:

```
Show the authentication flow as a sequence diagram.
```

***

### Example outputs

**Request flow — checkout endpoint:**

```mermaid
graph TD
    A[POST /api/orders] --> B[AuthMiddleware.verify]
    B --> C[OrderController.checkout]
    C --> D[CartService.getCart]
    C --> E[PaymentService.charge]
    E --> F[Stripe API]
    F -->|success| G[OrderService.create]
    F -->|failure| H[PaymentFailedError]
    G --> I[InventoryService.reserve]
    G --> J[NotificationService.send]
    G --> K[OrderRepository.save]
    K --> L[(Database)]
    J --> M[EmailService.send]
    J --> N[PushService.send]
```

**State machine — order lifecycle:**

```mermaid
stateDiagram-v2
    [*] --> Draft
    Draft --> PendingPayment : user submits checkout
    PendingPayment --> PaymentFailed : payment declined
    PaymentFailed --> PendingPayment : user retries
    PendingPayment --> Confirmed : payment succeeds
    Confirmed --> Processing : warehouse picks up
    Processing --> Shipped : tracking number assigned
    Shipped --> Delivered : delivery confirmed
    Delivered --> [*]
    Confirmed --> Cancelled : user cancels
    Processing --> Cancelled : admin cancels
    Cancelled --> [*]
```

**Sequence diagram  auth flow:**

```mermaid
sequenceDiagram
    participant Client
    participant AuthController
    participant AuthService
    participant TokenValidator
    participant SessionManager
    participant Redis

    Client->>AuthController: POST /auth/login
    AuthController->>AuthService: authenticate(email, password)
    AuthService->>AuthService: bcrypt.compare(password, hash)
    AuthService->>TokenValidator: generateAccessToken(userId)
    TokenValidator-->>AuthService: accessToken
    AuthService->>SessionManager: create(userId, accessToken)
    SessionManager->>Redis: SET session:{token} userId TTL 7d
    Redis-->>SessionManager: OK
    SessionManager-->>AuthService: session
    AuthService-->>AuthController: { user, accessToken }
    AuthController-->>Client: 200 { user, token }
```

***

### Saving diagrams to your documentation

Exported Mermaid source renders natively in GitHub, GitLab, Notion, Confluence, and most modern documentation tools. Copy the diagram source from C0 and paste it directly into your docs. You can export as Mermaid source code or an SVG.

### Tips

**Use Code Map before refactoring.** Before restructuring a module or splitting a service, map its dependencies. You'll see every connection that needs to be preserved, moved, or cut before you've changed anything.

**Use Code Map when onboarding to unfamiliar code.** A five-minute diagram of a system's request flow tells you more than twenty minutes of reading files. Start with the map, then drill into the files you care about.

**Follow up with Chat.** Code Map and Chat work well together. Generate a diagram to understand the structure, then switch to Chat to ask questions about the specific parts you don't understand.

**Map state machines for product clarity.** State diagrams are useful beyond engineering. An order lifecycle diagram or a subscription state machine is something a product manager, a support team, or a designer can read and validate. Generate it in C0 and drop it into your team's documentation.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.codemate.ai/c0/code-maps.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.