순서도 만들기
단계를 적기만 하면 순서도가 알아서 그려집니다.
왼쪽 끝에 붙은 줄은 위에서 아래로 차례대로 이어지고, 줄을 들여 쓰면 바로 위 줄에서 갈라집니다. (시작)과 (종료)는 둥근 상자, ?로 끝나는 줄은 판단, /텍스트/는 입력·출력입니다. 갈래를 예: 또는 아니요:(또는 원하는 라벨:)로 시작하면 화살표에 라벨이 붙습니다. 한 줄에 -> 이름만 쓰면 그 상자로 가는 화살표가 그려집니다. Tab은 들여쓰기, Shift+Tab은 내어쓰기입니다.
순서도
- 시작 (→ 이메일과 비밀번호 입력)
- 이메일과 비밀번호 입력 (→ 정보가 맞나요?)
- 정보가 맞나요?
- 대시보드 열기 (→ 종료)
- 남은 시도 횟수가 있나요?
- 경고 표시 (→ 이메일과 비밀번호 입력)
- 계정 잠금
- 비밀번호 재설정 메일 발송 (→ 종료)
- 종료
어떤 데이터도 기기 밖으로 나가지 않습니다
이 도구는 브라우저 안에서만 작동합니다. 여기서 입력하거나 연주하거나 녹음한 내용은 기기에만 남고, 서버로 전송되거나 저장되지 않습니다.
사용 예시
예: 회사 휴가 결재 흐름을 들여쓰기만으로 순서도로 그리기
사내 휴가 신청 절차를 한 줄에 한 단계씩 적습니다. 3일 이상이면 팀장 결재 뒤 본부장 결재까지, 그보다 짧으면 팀장 전결로 끝나고, 반려되면 날짜를 바꿔 다시 신청하는 흐름입니다. 방향 “위에서 아래로”, 색상 “파랑”.
- 왼쪽 끝에 “(시작)”, “휴가 신청서 작성”, “3일 이상인가요?”를 적습니다. ?로 끝나는 줄은 마름모 판단이 됩니다.
- 그 아래 들여 써서 “예: 팀장 결재”, 한 번 더 들여 써서 “본부장 결재”, “예:”와 같은 깊이로 들여 써서 “아니요: 팀장 전결”을 적습니다.
- 왼쪽 끝으로 돌아와 “승인되었나요?”를 적으면 두 갈래가 여기서 다시 만납니다. 그 아래 들여 써서 “아니요: 날짜를 바꿔 다시 신청”, 더 들여 써서 “-> 휴가 신청서 작성”을 적으면 처음 단계로 돌아가는 화살표가 그려집니다.
- 왼쪽 끝에 “/인사 시스템에 휴가 등록/”과 “(종료)”를 적습니다. /로 감싼 줄은 입력·출력 평행사변형입니다.
| 상자 | 모양 |
|---|---|
| 시작, 종료 | 둥근 상자 |
| 휴가 신청서 작성 | 단계 (사각형) |
| 3일 이상인가요? | 판단 (마름모) |
| 팀장 결재, 본부장 결재, 팀장 전결 | 단계 (사각형) |
| 승인되었나요? | 판단 (마름모) |
| 날짜를 바꿔 다시 신청 | 단계 (사각형) |
| 인사 시스템에 휴가 등록 | 입력·출력 (평행사변형) |
상자 10개, 화살표 11개인 순서도가 됩니다. “승인되었나요?”에는 “아니요” 갈래만 적었지만, 다음 단계로 이어지는 화살표에는 “예”가 자동으로 붙습니다. PNG·SVG·PDF로 저장해 사내 업무 매뉴얼에 붙이거나 공유 링크로 보낼 수 있습니다.
사용 방법
- 한 줄에 한 단계씩 입력합니다. 판단은 줄 끝에 ?를 붙이고, 그 아래에 갈래를 들여 써서 예:와 아니요:로 시작하세요.
- (시작)과 (종료)는 둥근 상자, /텍스트/는 입력·출력입니다. 앞 단계로 돌아가는 화살표는 한 줄에 -> 이름으로 씁니다.
- 방향과 색상을 고른 뒤 PNG, SVG, PDF로 다운로드하거나 공유 링크를 복사하세요.
자주 묻는 질문
- 상자를 끌어 놓는 대신 글로 입력하는 이유는요?
- 배치가 자동이기 때문입니다. 상자는 겹치지 않고, 화살표는 상자를 피해 가며, 중간에 단계를 넣으면 전체가 알아서 다시 정렬됩니다. 휴대폰에서도 빠르게 만들 수 있습니다.
- 갈래가 두 개인 판단은 어떻게 만드나요?
- 줄 끝에 물음표를 붙이고(“정보가 맞나요?”) 그 아래에 갈래를 들여 씁니다. “예: 대시보드 열기”, “아니요: 다시 입력”처럼요. 그다음 왼쪽 끝으로 돌아온 줄에서 두 갈래가 다시 만납니다.
- 반복(루프)은 어떻게 그리나요?
- 갈래 안에 한 줄로 ->와 돌아갈 상자의 이름을 씁니다. 예를 들어 “-> 이메일과 비밀번호 입력”이라고 쓰면 됩니다.
- 나중에 이어서 고칠 수 있나요?
- 네. 마지막 개요는 이 브라우저에 저장되고, “공유 링크 복사”로 만든 링크를 열면 어디서든 같은 순서도가 열립니다.
- 결재 흐름처럼 두 갈래가 다시 합쳐지게 하려면요?
- 판단 아래에 갈래를 들여 쓰고, 그다음 단계를 다시 왼쪽 끝에 적으면 두 갈래가 그 상자로 모입니다. 갈래 끝에 (종료)나 -> 이름이 있으면 그 갈래는 합쳐지지 않고 거기서 끝나거나 다른 상자로 갑니다.
- 상자 모양은 어떻게 정해지나요?
- (텍스트)는 둥근 시작·종료 상자, ?로 끝나는 줄이나 {텍스트}는 마름모 판단, /텍스트/는 평행사변형 입력·출력, 나머지 줄과 [텍스트]는 사각형 단계입니다. 기호는 상자 안에 표시되지 않습니다.
- 다이어그램이 업로드되나요?
- 아니요. 브라우저 안에서 그립니다. 마지막 개요는 이 기기에만 저장되고, 공유 링크에는 개요 자체가 담깁니다.