순서도 만들기이란?
드래그 앤 드롭으로 판단 마름모, 프로세스 박스, 입력/출력 평행사변형, 문서 모양, 연결선을 배치하여 순서도를 만들 수 있습니다. 완성된 다이어그램을 PNG, SVG 또는 PDF로 내보내세요.
프로세스 박스, 결정 다이아몬드, 시작/끝 알약 모양, 입력/출력 평행사변형, 문서 모양 중에서 고르세요. 자리에 딱 맞춰 들어가고, 노드를 옮겨도 연결이 끊기지 않습니다. 노드를 더블 클릭해 이름을 바꾸고, 한 핸들에서 다른 핸들로 드래그해 두 도형을 연결하고, 클릭 한 번으로 색을 바꾸거나 캔버스를 비웁니다. 다이어그램이 완성되면 슬라이드용 투명 SVG, 자유 확대용 PNG, 인쇄용 PDF로 내보낼 수 있습니다.
사용 방법
- 1단계 — 도구 모음에서 도형 노드(프로세스, 판단, 시작/종료)를 캔버스로 드래그하세요.
- 2단계 — 하나의 핸들에서 다른 핸들로 드래그하여 노드를 연결하세요. 더블클릭으로 라벨을 편집할 수 있습니다.
- 3단계 — 레이아웃을 정리한 후 순서도를 PNG, SVG 또는 PDF로 내보내 프레젠테이션, 인쇄, 문서에 활용하세요.
사용 시기
- 코드를 짜기 전에 성공·실패 분기까지 포함한 백엔드 요청 흐름을 문서화할 때.
- 신입이 첫날 읽을 수 있도록 고객 지원 에스컬레이션 경로를 정리할 때.
- 설계 문서에서 글로는 모호해진 알고리즘을 그림으로 옮길 때.
결과
제품 매니저가 사용자 온보딩 흐름을 매핑합니다: 시작 → 가입 → 이메일 인증 완료? (판단) → 예 → 대시보드 / 아니오 → 이메일 재전송 → 인증으로 되돌아감.
자주 묻는 질문
- 프로세스 박스와 결정 다이아몬드의 차이는 무엇인가요?
- 사각형은 동작이나 단계(이메일 발송, 레코드 갱신)를 의미합니다. 다이아몬드는 흐름을 두 갈래로 가르는 예/아니오 분기 질문입니다. 알약 모양은 다이어그램의 시작과 끝을 표시하죠. 이 규칙을 지키면 흐름이 훨씬 잘 읽힙니다.
- 두 도형은 어떻게 연결하나요?
- 노드 위에 마우스를 올리면 가장자리에 작은 핸들이 나타납니다. 한쪽 핸들을 눌러 다른 도형의 핸들까지 드래그한 뒤 놓으면 화살표가 생깁니다. 이후 화살표 중점을 끌어서 다른 노드를 피해가도록 경로를 바꿀 수도 있습니다.
- 박스뿐만 아니라 화살표에도 라벨을 달 수 있나요?
- 예. 화살표를 더블 클릭하면 중점에 입력란이 뜹니다. 결정 다이아몬드에서 두 갈래 출구에 "예"와 "아니오"를 표시하거나, status=200, 재시도 한도 도달 같은 전이 조건을 함께 적기에 좋습니다.
- PNG 대신 SVG로 내보내야 하는 이유는 무엇인가요?
- SVG는 어떤 배율로 확대해도 선명하고, Figma·Illustrator·Inkscape에서 글자나 색을 다시 손볼 수 있습니다. PNG는 해상도가 고정이지만 Confluence, Notion, PowerPoint에 붙여 넣을 때 호환 문제 없이 안정적입니다.
- 캔버스는 노드를 몇 개까지 버틸 수 있나요?
- React Flow는 수백 개 노드까지 비교적 원활합니다. 그 이상이면 사양이 낮은 노트북에서 이동과 확대가 느려집니다. 다이어그램이 그만큼 커지면 상위 개요와 하위 시스템별 상세 다이어그램으로 나눠 링크하는 편이 낫습니다.