Layered architecture
Horizontal layers that hold as planes. Pack members side-by-side; wire across band boundaries.
Edit source — diagram updates live
Source
diagram "Layered architecture" {
direction TD
presentation {
title: "Layered architecture"
titleSubtitle: "Presentation → API → data as stretch bands"
groupAccent: true
}
layout {
density: normal
spacingScale: 1.05
}
edges {
route: metro
crossings: smart
}
group system {
arrange: stack
align: stretch
group web "Experiences" {
arrange: pack
browser: rect "Browser" { icon: monitor }
mobile: rect "Mobile" { icon: smartphone }
partner: external "Partner portal" { icon: building-2 }
}
group api "Services" {
arrange: pack
gateway: gateway "API Gateway" { icon: waypoints }
checkout: service "Checkout" { icon: shopping-cart }
catalog: service "Catalog" { icon: package }
billing: service "Billing" { icon: credit-card }
}
group data "Data" {
arrange: pack
bus: broker "Event bus" { icon: logos:rabbitmq }
cache: cache "Redis" { icon: logos:redis }
db: database "Postgres" { icon: logos:postgresql }
}
}
browser -> gateway
mobile -> gateway
partner -> gateway
gateway -> checkout
gateway -> catalog
gateway -> billing
catalog -> db
checkout ..> cache
billing -> db
checkout => bus "OrderPlaced"
}
Try this
Move billing into the data band and watch the band reflow.