순서도 만드는 방법
- 시작·끝, 처리 또는 판단 도형을 추가하세요. 예시도 바로 편집할 수 있으니 이름을 바꾸고 이동하거나 삭제해도 돼요.
- 도형을 선택해 설정창에서 종류나 색을 바꾸세요. 글자를 클릭하면 직접 편집할 수 있어요. 도형 본체를 끌거나 방향키로 이동하세요.
- 위·아래·왼쪽·오른쪽 연결점에서 다른 도형으로 끌어 연결하세요. 선을 선택하면 문구, 실선·파선·점선과 양 끝 화살촉을 바꿀 수 있어요. 위쪽 팔레트는 독립된 도형을 추가해요.
- 편집 중 실행 취소·다시 실행을 쓰고 순서도가 커지면 확대·축소와 화면 이동을 사용하세요. 크기 조절이 쉬운 그림은 SVG, 바로 삽입할 이미지는 PNG로 받으세요.
도형의 의미
둥근 시작·끝 도형은 절차의 시작과 끝, 처리 직사각형은 ‘재고 확인’이나 ‘확인 발송’ 같은 동작을 나타내요. 판단 마름모에는 질문을 쓰고 나가는 화살표에 보통 예·아니요·통과·재시도 등을 적어요. 이는 관례이며 강제 규칙은 아니에요. 편집기가 단계를 만들어 내거나 판단하고 절차를 실행하지는 않아요. 문구는 짧게 쓰고 필요한 상세 설명은 함께 제공하는 문서에 넣으세요.
예시: 승인 절차
시작에서 ‘요청 검토’로, 다시 ‘승인했나요?’로 연결하세요. ‘게시’라는 끝 도형과 ‘요청 수정’이라는 처리 도형을 추가하세요. 판단의 예 화살표는 게시로, 아니요는 요청 수정으로 연결하고 반복 절차라면 요청 수정을 요청 검토로 되돌리세요. 연결선은 이전 화면 좌표가 아니라 도형을 참조하므로 판단 도형을 옮겨도 붙어 있어요. 도구가 정답을 판단하지 않고도 반복, 분기와 결과 문구를 표현하는 예시예요.
예시: 고객 지원 점검 절차
시작, ‘문의 읽기’, ‘정보가 충분한가요?’를 만드세요. 예는 ‘문제 조사’, 아니요는 ‘추가 정보 요청’에 연결해요. 두 경로를 ‘고객에게 답변’으로 모은 뒤 끝으로 연결하세요. 비슷한 문구의 단계는 빈 도형을 계속 추가하기보다 복제해 수정하세요. 복제한 도형에는 화살표가 복사되지 않아 예상하지 못한 연결이 절차의 의미를 바꾸는 일을 막아요.
선택·이동·편집 기록
선택한 도형에는 점선 테두리와 복제·삭제 동작이 보여요. 설정창에서 문구·색·종류를 수정하며 종류를 바꿔도 이름과 연결은 유지해요. 팔레트는 새 도형을 추가하고 네 연결점은 기존 도형을 이어 줘요. 연결점에 초점을 맞춰 Enter를 누른 뒤 다른 연결점에서 Enter를 누르면 키보드로 연결할 수 있어요. 실행 취소·다시 실행은 캔버스 오른쪽 위에 있어요. 추가·삭제·끌기와 완료한 문구·색·선 스타일 수정이 각각 기록 한 단계예요. 입력칸 밖에서는 Ctrl/Command+Z, Shift+Ctrl/Command+Z와 Ctrl+Y를 쓸 수 있어요. 방향키로 선택 도형을 움직이고 Delete로 삭제해요. 전체 지우기도 취소할 수 있어요.
캔버스와 출력 제한
캔버스는 1,200 × 760 좌표 영역이며 도형 40개, 방향 연결선 60개, 도형당 60자, 분기 문구당 36자까지 지원해요. 도형은 캔버스 가장자리에서 멈춰요. 안정적인 조작과 이미지 생성을 위한 제한으로 무한 화이트보드는 아니에요. SVG는 벡터 도형과 선택 가능한 XML 텍스트를 유지하지만 글꼴 치수는 뷰어마다 다를 수 있어요. PNG는 흰 배경의 1,200 × 760픽셀이에요. 격자, 선택 테두리, 조작부, 확대율과 화면 이동 위치는 파일에 넣지 않아요.
저장·개인정보·호환성
편집은 현재 브라우저 탭에 머물며 업로드하지 않아요. 다운로드는 이미지 내보내기이며 편집용 프로젝트 백업은 아니에요. 새로고침, 페이지 이동이나 언어 변경 시 순서도가 사라지므로 먼저 SVG나 PNG를 저장하세요. 벡터를 지원하고 선명한 확대가 필요하면 SVG, 이메일·채팅·비트맵 문서에는 보통 PNG가 편해요. 계정, 클라우드 동기화, 공동 편집, AI 생성, 템플릿, 자동 배치, 편집 가능한 가져오기를 제공하지 않으며 다른 편집기에서 원래 연결을 복원한다고 보장하지 않아요.
문제 해결
연결이 거부되면 같은 방향 화살표가 없는 서로 다른 두 도형을 사용하세요. 경로나 문구 공간이 없으면 도형을 떨어뜨리세요. 선은 도형 경계를 피해가며 문구는 도형이나 다른 문구와 겹치지 않게 경로 중간에 놓여요. 이름이 길면 줄이세요. ‘화면에 맞추기’로 전체를 보고 빈 공간을 끌어 이동하세요. PNG 생성에 실패하면 SVG를 써 보세요. 공유 전에 화살표와 문구의 의미를 확인하세요.
자주 묻는 질문
텍스트나 AI로 순서도를 자동 생성하나요?
아니요. 모든 도형을 직접 추가하고 이름·연결·위치를 정해요. 프롬프트를 분석하거나 절차를 만들어 내지 않아요.
도형을 삭제하니 연결선도 사라졌어요.
화살표에는 양 끝 도형이 필요해요. 연결 대상이 없는 선이 남지 않도록 도형을 삭제하면 붙어 있는 모든 화살표도 지워요.
다운로드한 파일을 나중에 편집할 수 있나요?
많은 벡터 도구에서 SVG를 열 수 있지만 이 페이지는 프로젝트가 아닌 이미지를 내보내요. 다시 가져오기나 연결선 전체 편집을 보장하지 않아요.
도형을 옮겨도 화살표가 붙어 있나요?
네. 편집기와 출력 파일 모두 출발·도착 도형의 현재 위치를 기준으로 화살표 끝점을 계산해요.
SVG와 PNG의 차이는 무엇인가요?
SVG는 확대해도 선명한 벡터 마크업이며 PNG는 고정된 1,200 × 760 비트맵이에요. 둘 다 현재 도형, 화살표와 분기 문구를 담아요.