architecture-diagram

# Architecture Diagram Skill "How does the system fit together?" is best answered with a picture. This skill turns a described system into a clean **Mermaid architecture diagram** — clients, services, data stores, and third parties, grouped into logical layers with labelled connections (sync vs async, protocols) — not an undifferentiated blob of boxes. ## Required Inputs Ask for these only if they aren't already provided: - **The components** — services, apps, databases, queues, external APIs. - **How they connect** — who calls whom; sync (HTTP/gRPC) vs async (queue/event); data flow direction. - **Logical groupings** — frontend / backend / data / third-party, or by team/domain. - **Focus** — the whole system or one slice (e.g. just the checkout path). ## Output Format ### [System name] — architecture One line on what the diagram covers and its boundary. ```mermaid flowchart LR subgraph Client Web[Web app] Mobile[Mobile app] end subgraph Backend API[API gateway] Svc[Order service] end subgraph Data DB[(Postgres)] Cache[(Redis)] end Web --> API Mobile --> API API --> Svc Svc --> DB Svc -.async.-> Queue[[Event bus]] Svc --> Cache ``` **Component legend** — one line per non-obvious component (what it is, why it's there). **Notes** — trust boundaries, single points of failure, sync vs async (`-.->` = async), anything to revisit. ## Mermaid Rules (so it renders) - Use `flowc...