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.

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 flowchart LR (or TD) with subgraph Name ... end for logical layers.