Flow stack
Use when order, transformation, or handoff matters.
Open-source interface field guide
Explain the
Explain the
relationship.
Reusable diagram modules and practical notes for building interfaces people can understand—not merely admire.
01 / Modules
A small visual grammar.
Choose a diagram by the relationship in the content. Each example is semantic, responsive, themeable, and dependency-free.
System map
Use when a central platform coordinates several actors or services.
Metric bridge
Use when operating changes compound into a business outcome.
Decision fork
Use when readers need to compare paths and understand the tradeoff.
02 / Observations
Website pattern index.
An inventory of recurring structures observed across live projects. The catalog records transferable ideas, not private source code.
03 / Rules of use
Good diagrams earn their space.
- 01Name the relationship first.
Sequence, hierarchy, comparison, causality, and spatial position need different structures.
- 02Keep prose outside the geometry.
The shape should clarify the model; the surrounding copy should hold nuance and evidence.
- 03Recompose on mobile.
Switch from spatial layout to a readable stack instead of shrinking labels below comprehension.
- 04Make the static state complete.
Motion may direct attention, but the relationship must remain legible without it.