# dsui Flow Diagram: Flows That Read Top to Bottom

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.

- Language: en
- Published: 2026-11-02
- Tags: design-system, flow-diagram, dsui
- URL: https://devs7ud.io/en/playground/flow-diagram-vertical-en
- Translation (ko): https://devs7ud.io/playground/flow-diagram-vertical.md

## The flow diagram, read down

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.

## How is it drawn

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.

## Horizontal and vertical

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.

| Where | Default direction | When horizontal is used |
| --- | --- | --- |
| FlowDiagram component | Horizontal, vertical when narrow | The default |
| Blog Diagram part | Vertical | Only with lanes |

_Source: dsui v0.22.0 changelog and the blog post guide_

## Try it yourself

The demo below shows steps split into layers, and lanes. Change the direction in the control panel.

[Live demo: flow-diagram](https://dsui.vercel.app/en/items/flow-diagram)

## View

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.