The dsui flow diagram draws order and branches from steps and arrows. The component flows left to right and turns vertical when narrow, and blog diagrams are now vertical by default. You can try it yourself.
The dsui flow diagram draws order and branches from steps and arrows. A flow in a post has to read well on a phone, so in the blog vertical became the default.
Give it steps (nodes) and arrows (edges) and it splits them into layers in the order the arrows point. Give steps a lane and those in the same lane are grouped into a band. Without arrows, the steps form one chain in the order given.
All the text is in the markup and the arrows also read as sentences, so a screen reader can follow the order. When it scrolls into view the layers appear one after another, and with reduced motion everything shows from the start.
The component's own default is horizontal. It turns vertical by itself when its container gets narrow. The blog's Diagram part, on the other hand, is vertical by default and uses horizontal only when it really has to, as with lanes. A plain one-direction flow reads better vertically on mobile.
| FlowDiagram component | Horizontal, vertical when narrow | The default |
| Blog Diagram part | Vertical | Only with lanes |
The demo below shows steps split into layers, and lanes. Change the direction in the control panel.
A flow chart is about reading order before it is about shape. A horizontal flow looks great on a wide screen, but if most readers are on phones, vertical is the right default.