# Architecture Diagrams

> Generate Mermaid diagrams for system architecture, data flows, class hierarchies, and API sequences.

- Skill: `aselimc/architecture-diagrams` (Agent Skill)
- Install (CLI): `npx skillmds@latest add aselimc/architecture-diagrams`
- Raw SKILL.md: https://api.skillmd.com/api/skills/aselimc/architecture-diagrams/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Integrations & APIs
- Author: aselimc (https://skillmd.com/u/aselimc)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/aselimc/architecture-diagrams

---


# Architecture Diagrams

## System Architecture (C4 Style)
```mermaid
graph LR
    Client --> API[API Gateway]
    API --> Auth[Auth Service]
    API --> ML[ML Service]
    ML --> Model[Model Registry]
    ML --> GPU[GPU Cluster]
```

## Sequence Diagram
```mermaid
sequenceDiagram
    Client->>+API: POST /predict
    API->>+ModelService: inference(input)
    ModelService->>+GPU: forward pass
    GPU-->>-ModelService: output
    ModelService-->>-API: prediction
    API-->>-Client: 200 OK
```

## Class Diagram
```mermaid
classDiagram
    class BaseModel { +forward(x) +save() +load() }
    class Encoder { +encode(x) }
    class Decoder { +decode(z) }
    BaseModel <|-- Encoder
    BaseModel <|-- Decoder
```

## Rules
- Max ~15 nodes per diagram (split if larger)
- Clear, descriptive labels (no abbreviations without context)
- Use `graph TD` for vertical, `graph LR` for horizontal
- Always wrap in ```mermaid code blocks