Architecture Diagrams

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

aselimc Updated

File contents

Architecture Diagrams

System Architecture (C4 Style)

graph LR
    Client --> API[API Gateway]
    API --> Auth[Auth Service]
    API --> ML[ML Service]
    ML --> Model[Model Registry]
    ML --> GPU[GPU Cluster]

Sequence Diagram

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

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

aselimc/agents_and_skills/tree/main/.claude/skills/architecture-diagrams commit ba01762623

Frequently asked questions

npx skillmds@latest add aselimc/architecture-diagrams