Stacked abstraction levels: a tech stack, a model, a hierarchy of concerns.
1 layer stack example
SaaS platform layers
Five layers from infrastructure to experience, with the platform layer under discussion.
Layers are full-width bands with the same x and width, so the hierarchy is the shape. The index tag sits left, the name centre-left, the note right, and one focal layer carries the accent because it is the one being redesigned.
A layer diagram, or layer stack, shows a system as horizontal bands stacked on top of each other, each one an abstraction level that builds on the one below. Familiar examples are the OSI model and a SaaS tech stack from infrastructure up to the user interface.
Read it bottom up. Lower layers are foundations, upper layers are closer to the user, and each layer should only depend on the layers beneath it.
When to use a layer diagram
Use it to explain a platform's architecture at a glance, from infrastructure and data to services and apps.
Use it to teach a conceptual model where each level adds meaning, such as a network or maturity model.
If you need to show how components call each other, use an architecture diagram, since a stack hides connections.
How to make a good layer diagram
Keep to four to seven layers and order them consistently, foundation at the bottom.
Name each layer and list two or three representative components inside it.
Use vertical bars at the side for concerns that span every layer, such as security or monitoring.
Highlight the layer under discussion instead of coloring every band differently.
