다이어그램을 코드로 그리는 도구는 크게 두 갈래로 나뉜다. 한쪽에는 Mermaid, Graphviz, D2처럼 개체와 연결만 선언하면 배치는 알고리즘이 알아서 정해주는 자동 레이아웃 계열이 있다. 대부분의 그림에는 이 방식이 정답이다. 반대쪽에는 draw.io, Excalidraw, Figma처럼 좌표를 직접 찍어 완전한 통제권을 주는 절대 위치 도구가 있다. 최근 Show HN에 공개된 Reladraw는 이 둘 사이의 빈자리를 노린다. 모든 위치를 다른 무언가에 대한 상대 관계로 '문장'으로 적되, 파일 안 어디에도 좌표는 쓰지 않는다는 것이 핵심이다.
좌표 대신 관계를 진술한다
예제로 제시된 arch.reladraw 파일은 44개의 진술로 이뤄져 있고 좌표는 단 하나도 없다. 대신 'cluster.hub의 왼쪽 위', 'cluster.desktop1과 cluster.laptop1 사이' 같은 표현이 각 요소의 자리를 정한다. 그림 속 모든 거리는 이런 문장에서 계산되어 나온 결과일 뿐, 배치 자체를 알고리즘이 고른 것이 아니다. 또 한 가지 특징은 어떤 줄도 다른 줄의 위치나 들여쓰기에 의존하지 않는다는 점이다. 중첩 구조가 없으므로 한 문장을 고쳐도 다른 문장이 깨지지 않는다.
자동 레이아웃이 정답이 아니게 되는 순간은 분명하다. 머릿속에 특정한 그림이 있고 '이 모듈은 오른쪽에, 연결은 이렇게' 하는 식으로 자리를 신경 쓰기 시작할 때다. 시스템을 다이어그램으로 그려가며 이해를 쌓는 작업이 대표적이다. 자동 레이아웃 언어에는 그 의도를 말할 방법이 아예 없고, 절대 위치 도구는 통제권은 주지만 복잡한 그림을 조금만 바꿔도 손이 많이 가는 수작업이 된다.
시스템을 한 번에 푸는 방식
Reladraw에서 간격(gap)은 정확한 거리가 아니라 최소 거리다. 두 요소를 나란히 두고 그 사이에 세 번째를 넣으라고 적으면, 앞의 둘은 딱 세 번째가 필요한 만큼만 벌어진다. 세 번째를 지우면 다시 붙는다. 사람이라면 요소를 밀어내 공간을 만들고 나중에 다시 끌어당겨 빈틈을 메우던 작업인데, 텍스트가 늘어나도 어떤 숫자도 낡지 않는다. 리졸버는 각 축을 최소 거리들의 집합으로 보고, 이를 모두 만족하는 가장 촘촘한 배치를 '최장 경로' 계산으로 찾는다. 탐색 없이 한 번에 답이 나오며, 어느 쪽에 무엇이 놓일지는 파일이 정하고 엔진은 거리만 계산한다.
겹침 방지도 이 구조 덕에 저렴하게 해결된다. '두 요소가 겹치면 안 된다'는 원래 상하좌우 네 방향 중 하나를 고르는 탐색 문제지만, 파일이 이미 방향을 정해둔 경우가 대부분이라 그 진술에서 분리 거리를 유도해 다시 전체를 푼다. 이미 푼 레이아웃을 그 자리에서 억지로 고치는 방식은 의도적으로 피한다. 파일이 어느 축으로도 순서를 정하지 않은 쌍은 도구가 추측하지 않고 이름을 대며 지적한다.
진단은 부가 기능이 아니라 출력이다
이 설계가 겨냥하는 또 다른 사용자는 사람이 아니라 AI 에이전트다. 실무에서 흔한 일은 다이어그램을 새로 그리는 게 아니라 고치는 것이다. 픽셀 좌표 기반이면 에이전트는 숫자에서 그림을 재구성한 뒤에야 어떤 숫자를 바꿀지 알 수 있고, 자동 레이아웃이면 배치가 애초에 기록된 적이 없어 읽을 것이 없다. 반면 진술된 배치에서는 자리 정보가 문장으로 파일에 남아 있어, 그림을 바꾸는 일이 곧 위치를 말하는 문장을 바꾸는 일이 된다.
다만 한계도 분명히 구분된다. 에이전트는 자기가 쓴 파일을 다시 읽어 '데이터베이스가 API 아래에 있다'는 의도는 확인할 수 있지만, 서로 다른 것에 걸린 두 클러스터가 결국 겹쳤는지, 텍스트가 노드를 넘쳤는지, 엣지가 네 개를 가로지르는지는 볼 수 없다. 이런 것들은 진술이 아니라 계산으로 풀리는 결과이기 때문이다. 그래서 Reladraw는 진단을 정식 출력으로 삼는다. 'hub가 laptop1과 겹침', 'auth->db 엣지가 4개 엣지와 교차' 같은 보고가 소스와 같은 어휘로 나오고, 에이전트는 렌더링이나 비전 모델 없이 그 텍스트 파일만 고친다. 진단은 결코 완성된 레이아웃을 몰래 밀어 고치지 않는다는 것이 설계의 선이다.
현실적으로 아직 초기 단계다. 버전 0.4.0이며 구문은 안정적이지 않아 바뀔 것을 각오해야 한다. 구현은 런타임 의존성이 없는 TypeScript 파서·리졸버·SVG 렌더러와, 텍스트 파일을 받아 독립 SVG를 쓰는 CLI로 이뤄져 있다. 공개 예제에서 아직 어색한 부분은 배치가 아니라 타이포그래피라고 밝힌다. 노드를 피해가는 최소한의 직교 엣지 라우팅은 첫 버전에 포함될 계획으로 잡혀 있다.
모델 학습 데이터에 없는 신생 언어라 에이전트가 쓰려면 먼저 문법을 배워야 하는데, 저장소는 Claude Code·Codex·Cursor·Copilot 등 각 에이전트의 스킬 디렉터리에 설치되는 에이전트 스킬을 함께 제공한다. 스킬은 설치 시점의 복사본이라 구문이 바뀌면 다시 설치해야 한다. 라이선스는 Apache-2.0이지만 코드에 한정되며 'reladraw'라는 이름과 로고에는 권리를 주지 않아, 포크는 환영하되 다른 이름을 쓰도록 요구한다. 배치를 사람이 명시하는 유사 도구로는 PIC/pikchr(단 관계가 아닌 커서 이동 방식), Structurizr(C4 모델에 묶임), Graphviz의 rank·cluster(여전히 자동 레이아웃의 제약일 뿐) 등이 있으나, Reladraw는 좌표 없는 범용 관계 배치 언어라는 위치를 스스로 구분 짓는다.