🔀 연결선 스타일 가이드 | 어디서 꺾어야 할까?

시작 노드 중심 x (px)

시작 노드 중심 y (px)

끝 노드 중심 x (px)

끝 노드 중심 y (px)

굽힘 방식

모서리 라운드 반경 (px, 안 쓰면 0)

점	x	y

결정할 항목	흔히 쓰는 선택지	비고
선 종류	실선 / 파선 / 점선	표준 없음 — 한 다이어그램 안에서 뜻을 하나로 고정
화살촉	채운 삼각 / 열린 선 / 없음 / 양방향	표준 없음 — 방향이 있는 관계에만 붙일지 정함
굽힘 방식	직각 / S자 / 직선 / 곡선	표준 없음 — 섞어 쓰면 같은 관계가 달라 보임
라벨 위치	선 위 / 선 옆 / 꺾인 구간	표준 없음 — 선과 겹치지 않는 쪽으로 통일
교차 처리	점프(건너뛰기) / 그냥 교차	표준 없음 — 선이 많으면 교차 규칙을 먼저 정함

연결선 스타일에는 공인된 표준이 없습니다. 그래서 이 도구는 "이렇게 하라"고 정하지 않고, 결정할 항목과 흔히 쓰는 선택지를 정리해 두고 좌표 계산만 해 줍니다. 좌표는 화면 좌표계(오른쪽이 x 증가, 아래가 y 증가)를 따릅니다.

연결선은 정답이 없고 좌표만 정확하다

플로우차트에서 선 하나를 긋는 일에도 결정할 것이 여럿 있습니다. 실선인지 파선인지, 화살촉을 붙일지, 직각으로 꺾을지 비스듬히 갈지입니다. 그런데 이 중 어느 것도 공인된 표준이 없어 도구가 정해 줄 수 없습니다. 대신 정확히 계산할 수 있는 것은 좌표입니다. 이 도구는 결정할 항목을 정리해 두고, 노드 두 개의 좌표에서 굽힘점을 계산합니다.

계산 방식

가로 먼저는 끝 노드의 x 와 시작 노드의 y 가 만나는 점을, 세로 먼저는 그 반대 점을 굽힘점으로 둡니다. S자는 두 노드의 x 중간값에서 두 번 꺾습니다. 경로 길이는 구간을 모두 더한 값이고, 각도는 시작에서 끝으로 향하는 방향을 화면 좌표계 기준으로 구합니다. 라운드 반경은 굽힘점에 붙은 구간 길이(양쪽이 굽는 가운데 구간은 절반)까지만 들어가므로 그 한도를 함께 출력합니다. 결과의 path 문자열은 그대로 SVG 에 붙여 쓸 수 있습니다. 2026년 10월 기준입니다.

한계

어떤 선 종류나 화살촉이 맞는지 권장하지 않습니다. 노드 테두리와 선이 만나는 지점 계산, 선 자동 라우팅, 노드 피하기, 라운드가 적용된 호까지 포함한 path 생성은 지원하지 않습니다.

자주 묻는 질문

연결선 스타일에 표준이 있나요?

없습니다. 실선과 파선, 화살촉 모양이 무엇을 뜻하는지는 표기법마다 다릅니다. 한 다이어그램 안에서 뜻을 하나로 고정하는 것이 중요하고, 이 도구는 결정할 항목만 정리해 둡니다.

가로 먼저와 세로 먼저는 무엇이 다른가요?

굽힘점 좌표가 달라집니다. 가로 먼저는 끝 노드의 x 와 시작 노드의 y 가 만나는 점에서 꺾이고, 세로 먼저는 그 반대입니다. 경로의 총 길이는 같지만 선이 지나가는 자리가 달라 노드와 겹치는 쪽이 생깁니다.

라운드 반경은 어디까지 넣을 수 있나요?

굽힘점마다 앞뒤 구간에서 반경만큼을 깎아 호로 바꿉니다. 양쪽 끝이 모두 굽는 가운데 구간(S자의 세로 구간)은 두 호가 나눠 쓰므로 길이의 절반까지, 한쪽만 굽는 끝 구간은 길이 전체까지 들어갑니다. 이를 넘으면 호가 서로 먹거나 노드를 지나쳐 선이 끊겨 보입니다.

🔀다이어그램 연결선·화살표 스타일 가이드

관련된 도구

SVG 아이콘 내보내기 최적화 가이드

SVG to Base64 변환기

연결선은 정답이 없고 좌표만 정확하다

계산 방식

한계

자주 묻는 질문

관련된 도구

SVG 아이콘 내보내기 최적화 가이드

SVG to Base64 변환기

연결선은 정답이 없고 좌표만 정확하다

계산 방식

한계

자주 묻는 질문

같은 카테고리 도구