graph TD
classDef yellow fill:#FFFDE7,stroke:#1A1A1A,stroke-width:2px;
classDef blue fill:#E3F2FD,stroke:#1A1A1A,stroke-width:2px;
classDef green fill:#E8F5E9,stroke:#1A1A1A,stroke-width:2px;
classDef purple fill:#F3E5F5,stroke:#1A1A1A,stroke-width:2px;
classDef teal fill:#E0F7FA,stroke:#1A1A1A,stroke-width:2px;
classDef orange fill:#FFF3E0,stroke:#1A1A1A,stroke-width:2px;
classDef note fill:#FFF9C4,stroke:#FBC02D,stroke-dasharray:4;
subgraph DESIGN["Design"]
SPEC["API Spec
OpenAPI / Swagger"]:::yellow
MOCK["Mock Server
Prism / Stoplight"]:::teal
end
subgraph BUILD["Build"]
AUTH["Auth Layer
OAuth2 / JWT"]:::purple
IMPL["Implementation
Express / FastAPI"]:::blue
CODEGEN["SDK Codegen
OpenAPI Generator"]:::blue
end
subgraph VALIDATE["Validate"]
TEST["API Tests
Postman / Jest"]:::green
DOCS["API Docs
Swagger UI / Redoc"]:::teal
end
subgraph SHIP["Ship"]
GATEWAY["API Gateway
Kong / AWS GW"]:::orange
RLCACHE["Rate Limit & Cache
Redis / CDN"]:::teal
end
subgraph CONSUME["Consume"]
WEB["Web Client
fetch / Axios"]:::yellow
MOBILE["Mobile Client
Native SDK"]:::yellow
THIRD["Third-party
Webhook / SDK"]:::yellow
end
subgraph OBSERVE["Observe"]
MON["Observability
Datadog / Grafana"]:::green
end
SPEC --> MOCK
SPEC --> IMPL
SPEC --> DOCS
SPEC --> CODEGEN
AUTH --> IMPL
MOCK --> TEST
IMPL --> TEST
TEST -->|"pass"| GATEWAY
CODEGEN --> THIRD
DOCS -.->|"reference"| THIRD
GATEWAY --> RLCACHE
GATEWAY --> MON
RLCACHE --> WEB
RLCACHE --> MOBILE
RLCACHE --> THIRD