# dsui 플로 다이어그램 : 세로로 읽는 흐름

dsui의 플로 다이어그램은 단계와 화살표로 순서와 갈래를 그립니다. 가로로 흐르다 좁은 곳에서 세로가 되는 부품이고, 블로그의 다이어그램은 이제 세로가 기본입니다. 직접 만져 볼 수 있습니다.

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

## 플로 다이어그램의 세로 읽기

dsui의 플로 다이어그램은 단계와 화살표로 순서와 갈래를 그리는 부품입니다. 글에 넣는 흐름도는 휴대폰에서 읽히는 쪽이 중요해서, 블로그에서는 세로가 기본이 되었습니다.

## 어떻게 그려질까

단계(`nodes`)와 화살표(`edges`)를 주면 화살표가 가리키는 순서대로 층을 나눕니다. `lane`을 주면 같은 레인끼리 띠로 묶입니다. 화살표를 주지 않으면 주어진 순서대로 한 줄로 이어집니다.

글은 모두 마크업 안에 있고 화살표도 문장으로 읽혀서, 화면 읽기 프로그램도 순서를 따라갈 수 있습니다. 화면에 들어오면 층이 차례로 나타나고, 움직임 줄이기 설정에서는 처음부터 모두 보입니다.

## 가로와 세로

부품 자체의 기본은 가로입니다. 가로로 흐르다가 컨테이너가 좁아지면 저절로 세로가 됩니다. 반면 블로그의 `Diagram`은 세로가 기본이고, 레인이 있는 흐름처럼 꼭 필요할 때만 가로를 씁니다. 한 방향으로 이어지는 단순한 흐름은 모바일에서 세로가 잘 읽히기 때문입니다.

| 구분 | 기본 방향 | 가로를 쓰는 때 |
| --- | --- | --- |
| 부품 FlowDiagram | 가로, 좁으면 세로 | 기본 |
| 블로그 Diagram | 세로 | 레인이 있을 때만 |

_출처: dsui v0.22.0 변경 이력과 블로그 글 가이드_

## 직접 만져 보세요

아래 데모에서 단계가 층으로 나뉘는 모습과 레인을 볼 수 있습니다. 컨트롤 패널에서 방향을 바꿔 볼 수 있습니다.

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

## 의견

흐름도는 모양보다 읽는 순서가 먼저입니다. 가로 흐름은 넓은 화면에서 멋지지만, 글을 읽는 사람 대부분이 휴대폰을 쓴다면 세로를 기본으로 두는 편이 맞습니다.