Architecture diagrams

Architecture diagrams are vizzy’s own diagram type. Use them to show which services exist and what each one sends to the others. Write a standalone vizzy block whose first line starts with architecture:

architecture LR Shop Platform
group client Clients
service web Storefront in client
service admin Admin Console in client
service gw API Gateway
group svc Services
service catalog Catalog in svc
service orders Orders in svc
service pay Payments in svc
group data Data
service pg Postgres in data
service redis Redis in data
service stripe Stripe
web -> gw : HTTPS
admin -> gw : HTTPS
gw -> catalog : REST
gw -> orders : REST
catalog -> pg : SQL
orders -> pg : SQL
orders -> redis : cart cache
orders -> pay : charge
pay <-> stripe : PaymentIntent
pay --> orders : webhook
desc svc: Stateless services behind the gateway
desc data: Shared stores
hint pay: [Payments](payments.md)
hint svc: [Services]("Stateless, autoscaled 2-10 pods")
hint orders->pay: [Retry policy]("Exponential backoff, 3 attempts")

• service <id> [Label] [in <group>]: a box. node is a synonym for service.
• group <id> [Label]: a container. Services that follow with in <group> join it.
• A -> B : payload: an edge. <-> is bidirectional and --> is dashed. The text after : renders as a chip on the edge.
• desc <id>: text: a description under a service’s label, or under a group’s title (the box grows to fit). Use it to title a whole section. Ids may be referenced before they are declared, so a desc line can sit anywhere in the block.
• hint <id>: [Title](dest): a click-to-open info badge on a service, a group, or an edge (written as A->B). Like desc, it can reference an id before it is declared.