도형과 커넥터
업데이트: 2026년 10월 16일

다이어그램을 만들 때 상자를 하나하나 손으로 그릴 필요는 없습니다. 툴바의 고급 도형 메뉴에는 바로 쓸 수 있는 도형과 이들을 서로 잇는 커넥터가 모여 있습니다.
고급 도형 메뉴
이미지 오른쪽에 있는 도형 아이콘을 눌러 엽니다. 네 개의 그룹이 있습니다.
- 커넥터: 요소를 선으로 잇는 커넥터 도구.
- 그래프: 원형 노드와 사각형 노드.
- 순서도: 프로세스, 시작 / 끝, 판단, 입력 / 출력.
- 레이블: 레이블 도구. 텍스트와 스타일에서 설명합니다.
도형 그리기
- 그래프 또는 순서도에서 도형을 고릅니다.
- 캔버스에서 한 모서리부터 반대쪽 모서리까지 드래그합니다. 드래그하는 만큼 도형이 커집니다.
- 드래그하는 동안 Shift 키를 누르고 있으면 비율이 유지됩니다.
클릭만 하면 클릭한 위치를 중심으로 기본 크기의 도형이 나타납니다.
각 도형은 테두리가 있는 텍스트 상자입니다. 선택 도구로 도형을 더블 클릭하면 안에 글자를 입력할 수 있습니다. 텍스트 패널에서는 다른 텍스트 상자와 마찬가지로 도형, 배경, 테두리 두께, 테두리 색상을 바꿀 수 있습니다. 크기를 바꾸려면 여덟 개의 핸들 중 하나를 드래그하세요.
커넥터로 요소 잇기
- 고급 도형을 열고 커넥터를 선택합니다.
- 한 도형에서 다른 도형까지 드래그합니다. 시작점을 클릭한 뒤 끝점을 클릭하는 방법도 있습니다.
- 도형의 가장자리에 가까이 가면 커넥터가 도형에 연결됩니다.
연결된 커넥터는 도형을 따라다닙니다. 상자를 옮기면 선이 자동으로 다시 맞춰집니다. 커넥터는 텍스트 상자, 도형, 이미지, 레이블에 연결할 수 있습니다. 끝점을 빈 공간에 놓으면 그 끝은 연결되지 않은 상태로 남습니다.
끝점 옮기기
선택 도구로 커넥터를 선택하면 양 끝에 핸들이 보입니다. 핸들을 드래그해서 다른 지점이나 다른 도형으로 옮기세요. 도형 가까이에 놓으면 다시 연결됩니다.
시작 및 끝 마커
커넥터를 선택하면 속성 패널에 시작과 끝 선택 항목이 나타나며, 네 가지 옵션이 있습니다.
- 없음
- 화살표
- 점
- 마름모
이를 이용해 단방향 화살표, 양방향 화살표, 다이어그램식 관계를 그릴 수 있습니다. 스마트 도형으로 만들어진 직선에도 같은 선택 항목이 나타납니다. 여러 선을 한꺼번에 선택하면 변경 사항이 모두에 적용됩니다.
같은 패널에서 커넥터의 획 색상과 획 두께도 조절할 수 있습니다.
자주 묻는 질문
커넥터가 도형에 연결되지 않는 이유는 무엇인가요? 끝점을 도형 가장자리에 더 가깝게, 또는 도형 안쪽에 놓으세요. 멀리 놓으면 캔버스 위에 연결되지 않은 채로 남습니다.
프로세스 도형을 만든 뒤에 마름모로 바꿀 수 있나요? 네. 도형을 선택하고 텍스트 패널에서 도형을 바꾸세요.
커넥터는 처음부터 화살표가 달려 있나요? 아니요. 마커 없이 만들어집니다. 속성 패널의 끝(또는 시작)에서 화살표를 선택하세요.
Mermaid에서 가져온 다이어그램도 같은 도형을 사용하나요? 네. 노드는 도형으로, 엣지는 커넥터로 들어오므로 똑같이 편집할 수 있습니다. Mermaid 가져오기를 참고하세요.
다음 단계
- 텍스트와 스타일: 도형 안에 글자를 쓰고 레이블을 추가합니다.
- 선택과 쌓기 순서: 여러 도형을 한꺼번에 이동하고 크기를 조절합니다.
- Mermaid 가져오기: 코드로 완성된 다이어그램을 만듭니다.