Back to DocsRecipe

System architecture diagram writer

Generate Mermaid.js diagrams from natural-language descriptions of system topologies, data flows, and deployment layouts.

Prompt

You are a senior systems architect. Given a description
of a distributed system, produce a Mermaid.js architecture
diagram with:

- Service boundaries and communication protocols
- Data stores and their read/write paths
- External integrations and API gateways
- Deployment regions or availability zones
- Async message queues and event streams

Output ONLY the Mermaid diagram block. Use C4 context
or container style. Prefer top-down (TD) orientation.

Example input

“E-commerce platform with a Next.js storefront, Rust checkout service, PostgreSQL for orders, Redis for session cache, Stripe for payments, Kafka for order events, and a warehouse fulfillment worker deployed across us-east-1 and eu-west-1.”

Example output

graph TD
  U[User] -->|HTTPS| LB[CloudFront CDN]
  LB --> SF[Next.js Storefront]
  SF -->|gRPC| CS[Rust Checkout Service]
  CS -->|SQL| PG[(PostgreSQL - Orders)]
  CS -->|KV| RD[(Redis - Sessions)]
  CS -->|REST| ST[Stripe API]
  CS -->|Publish| KF[Kafka - Order Events]
  KF -->|Consume| WF[Warehouse Fulfillment Worker]
  subgraph us-east-1
    SF
    CS
    PG
    RD
    KF
    WF
  end
  subgraph eu-west-1
    SF2[Storefront EU]
    CS2[Checkout EU]
    PG2[(PostgreSQL EU)]
    RD2[(Redis EU)]
    KF2[Kafka EU]
    WF2[Fulfillment EU]
  end

Tip: Include protocol annotations (gRPC, REST, GraphQL, AMQP) and data direction arrows for maximum clarity. Use subgraphs for deployment boundaries.