순서도 만들기

갈림길을 쓰는 규칙

이 도구는 순서도 문법을 몰라도 쓸 수 있게 규칙을 네 가지로 줄였습니다. 예시 버튼을 눌러 보면 아래 규칙이 어떻게 그려지는지 바로 볼 수 있습니다.

• 적지 않은 갈래는 다음 줄로 갑니다. 「재고가 있나요?」 아래에 「아니오: 품절 안내」만 적으면, 「예」 화살표는 그다음 줄로 이어집니다.
• 「예」 갈래는 다시 본줄기로 돌아옵니다. 「예: 우산 챙기기」처럼 새 단계를 적으면 그 단계를 거친 뒤 다음 줄로 이어집니다. 「아니오」 갈래에 적은 새 단계는 거기서 끝납니다.
• 이미 있는 단계 이름을 쓰면 그곳으로 이어집니다. 「아니오: 오류 표시 -> 비밀번호 입력」이라고 쓰면 오류를 보여 준 뒤 「비밀번호 입력」 단계로 되돌아가는 반복 구조가 됩니다. 이름은 글자가 똑같아야 합니다.
• 갈래를 하나도 적지 않으면 「예」는 다음 줄로, 「아니오」는 바로 앞 단계로 돌아갑니다. 「테스트를 통과했나요?」처럼 될 때까지 다시 하는 흐름에 맞습니다.

갈래 하나에 여러 단계를 잇고 싶다면 「아니오: 품절 안내 -> 환불 -> 주문 취소」처럼 화살표로 이어 쓰면 됩니다.

어디에 쓰나요

• 업무 절차 정리 — 주문 처리, 환불 접수, 결재 흐름처럼 말로 설명하기 긴 절차를 그림 한 장으로 보여 줍니다. 인수인계 문서나 사내 위키에 붙이기 좋습니다.
• 보고서·과제 — 알고리즘 순서도, 실험 절차, 서비스 이용 흐름을 그려 한글·워드·파워포인트에 넣습니다. PNG는 배경이 흰색이라 문서에 바로 어울립니다.
• 기획·개발 — 로그인, 결제, 가입처럼 조건에 따라 갈리는 화면 흐름을 회의 전에 빠르게 그려 공유합니다.
• 일상 정리 — 여행 준비, 이사 절차, 고장 났을 때 확인할 순서 같은 체크 흐름도 같은 방식으로 정리됩니다.

순서도 기호는 이렇게 그려집니다

둥근 상자는 시작과 끝, 네모는 처리(할 일), 마름모는 판단(예·아니오로 갈리는 질문), 화살표는 진행 방향을 뜻합니다. 가장 널리 쓰이는 기본 기호만 써서 누가 보아도 읽을 수 있습니다. 단계가 많을 때는 「왼쪽에서 오른쪽으로」 방향이 가로로 긴 발표 화면에, 「위에서 아래로」 방향이 세로로 긴 문서와 휴대폰 화면에 잘 맞습니다.

Mermaid 코드로 직접 쓰기

「Mermaid 코드」 탭을 누르면 지금 쓴 글이 Mermaid 문법으로 바뀌어 들어갑니다. Mermaid는 글로 도표를 그리는 공개 문법으로, 여기서 코드를 고치면 상자 모양이나 화살표 글귀를 더 세밀하게 바꿀 수 있습니다. 순서도뿐 아니라 사람과 시스템이 주고받는 순서를 그리는 시퀀스 도표(sequenceDiagram), 일정표인 간트 차트(gantt)도 같은 칸에서 그려집니다. 예시 버튼으로 시작해 이름과 날짜만 바꿔 보세요.

코드에 틀린 곳이 있으면 몇 번째 줄 근처인지 미리보기 위에 알려 드립니다. 직전에 그려진 그림은 흐리게 남아 있으니 고치면서 비교할 수 있습니다. 작성 중인 글과 코드는 이 브라우저에 자동으로 저장되어 창을 닫았다 열어도 그대로 남고, 서버로는 보내지 않습니다.