dsui의 플로 다이어그램은 단계와 화살표로 순서와 갈래를 그리는 부품입니다. 글에 넣는 흐름도는 휴대폰에서 읽히는 쪽이 중요해서, 블로그에서는 세로가 기본이 되었습니다.
단계(nodes)와 화살표(edges)를 주면 화살표가 가리키는 순서대로 층을 나눕니다. lane을 주면 같은 레인끼리 띠로 묶입니다. 화살표를 주지 않으면 주어진 순서대로 한 줄로 이어집니다.
글은 모두 마크업 안에 있고 화살표도 문장으로 읽혀서, 화면 읽기 프로그램도 순서를 따라갈 수 있습니다. 화면에 들어오면 층이 차례로 나타나고, 움직임 줄이기 설정에서는 처음부터 모두 보입니다.
부품 자체의 기본은 가로입니다. 가로로 흐르다가 컨테이너가 좁아지면 저절로 세로가 됩니다. 반면 블로그의 Diagram은 세로가 기본이고, 레인이 있는 흐름처럼 꼭 필요할 때만 가로를 씁니다. 한 방향으로 이어지는 단순한 흐름은 모바일에서 세로가 잘 읽히기 때문입니다.
| 부품 FlowDiagram | 가로, 좁으면 세로 | 기본 |
| 블로그 Diagram | 세로 | 레인이 있을 때만 |
흐름도는 모양보다 읽는 순서가 먼저입니다. 가로 흐름은 넓은 화면에서 멋지지만, 글을 읽는 사람 대부분이 휴대폰을 쓴다면 세로를 기본으로 두는 편이 맞습니다.