Architecture diagrams

vizzy’s own diagram, best for “what does each service send?”. Use 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

• service <id> [Label] [in <group>] — a box (node is a synonym for service).
• group <id> [Label] — a container that following in <group> services join.
• A -> B : payload — an edge; <-> is bidirectional, --> 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). Handy for titling a whole section. Ids may be referenced before they’re declared, so a desc line can sit anywhere in the block.