Reladraw: 요소의 배치를 직접 지정하는 다이어그램 언어

AI 요약

Reladraw는 다이어그램의 요소와 연결뿐 아니라 요소 사이의 배치 관계도 텍스트로 적는 언어입니다. Mermaid, Graphviz, D2처럼 위치를 자동으로 정하는 도구는 빠르게 그림을 만들지만, 작성자가 원하는 배치를 세밀하게 지정하기 어렵습니다. 반대로 draw.io, Excalidraw, Figma는 위치를 직접 정할 수 있지만 복잡한 그림을 고칠 때 좌표를 일일이 다뤄야 합니다. Reladraw는 두 방식 사이에서, 배치는 사람이 선언하되 거리 계산은 도구가 맡는 방식을 택합니다.

배치 관계를 소스로 표현합니다

예를 들어 node app.api "API" below app.ui처럼 노드를 다른 노드 아래에 둔다고 적습니다. 데이터베이스를 앱 오른쪽에 두고 앱과 같은 높이에 맞추거나, 연결선이 노드의 어느 쪽에서 시작하고 끝나는지도 지정할 수 있습니다. 좌표를 직접 쓰지 않으며 노드를 들여쓰기 구조로 중첩하지도 않습니다. 관계를 선언한 문장 자체가 배치 의도를 나타냅니다.

간격은 정확한 거리가 아니라 최소 거리입니다. 두 노드 사이에 다른 노드를 추가하면 필요한 만큼 기존 노드가 벌어지고, 새 노드를 지우면 다시 가까워집니다. 글자가 길어져 공간이 더 필요해져도 좌표를 다시 맞출 필요가 없습니다. 배치 해석기는 각 축에서 최소 거리 제약을 모아 최단 조건을 만족하는 가장 촘촘한 배치를 구합니다. 원문은 이를 최장 경로(longest paths) 계산으로 설명합니다. 해석기는 거리만 계산하고, 노드가 무엇의 어느 쪽에 놓이는지는 파일에 적힌 관계가 결정합니다.

노드 겹침도 기본으로 막습니다. 두 노드의 배치 관계에서 한쪽이 다른 쪽으로부터 멀어지는 방향만 허용된다면 그 방향으로 분리합니다. 어느 축에서도 순서가 정해지지 않은 쌍은 도구가 임의로 방향을 고르지 않고 이름을 알려줍니다. 두 축 모두에서 순서가 정해졌다면 겹침이 더 작은 축을 우선해 이동량을 줄입니다. 이때 도구가 판단하는 부분은 최소화하되, 관계 자체를 새로 정하지 않는다는 설계 원칙을 둡니다. 해석기는 기존 결과를 조금씩 고쳐 맞추지 않습니다. 파일이 이미 암시한 분리 조건을 추가한 뒤 전체 제약을 처음부터 다시 풉니다.

자동 배치와 좌표 편집 사이

저자는 다이어그램 작업에서 새로 그리는 일보다 기존 그림을 바꾸는 일이 흔하다고 설명합니다. “인증 서비스를 왼쪽으로 옮기고 큐를 그 뒤에 둬라”는 변경을 픽셀 좌표로 처리하려면 에이전트가 숫자에서 그림을 재구성한 뒤 바꿀 값을 찾아야 합니다. 자동 배치 도구에서는 배치 의도가 소스에 없으므로 렌더링 결과를 확인하고 다시 고치는 과정을 거칩니다. Reladraw에서는 배치 관계가 문장으로 남아 있어 해당 문장을 수정하면 됩니다.

에이전트가 만든 파일을 다시 읽어 데이터베이스가 API 아래에 있는지, 기기 네 대가 동기화 허브에 연결됐는지는 확인할 수 있습니다. 하지만 서로 다른 기준점에 붙은 두 그룹이 겹치는지, 텍스트가 노드 밖으로 넘치는지, 연결선이 여러 선과 교차하는지는 관계 문장만 읽어 알 수 없습니다. 이 문제를 해결하려면 진단 기능이 필요합니다. 진단은 겹침, 선 교차, 텍스트 넘침, 캔버스 바깥 배치, 넓은 빈 공간 등을 기계가 읽을 수 있는 결과로 알려주는 구상입니다. 다만 진단이 노드를 직접 움직여 문제를 고치지는 않습니다. 해결책까지 도구가 정하면 자동 배치의 판단이 다시 들어오기 때문입니다. 진단은 문제가 된 문장을 가리키고, 작성자가 같은 배치 언어로 고칩니다.

현재 구현과 남은 작업

버전 0.5.0에는 TypeScript 파서, 배치 해석기, 정적 SVG 렌더러, 명령줄 도구가 있습니다. 런타임 의존성은 없으며, .reladraw 파일을 독립형 SVG로 출력합니다. 문법은 여러 배치 관계를 한 노드에 적용하거나, 두 요소 사이에 다른 요소를 놓거나, 정확히 나란히 정렬하는 표현을 지원합니다. GitHub에서 브라우저 편집기를 시험할 수 있고, npm install -g reladraw로 설치해 reladraw diagram.reladraw -o diagram.svg처럼 실행합니다.

아직 진단 보고 기능은 구현되지 않아, 현재는 렌더링에 성공해도 그림의 겹침이나 교차를 알려주지 않습니다. 연결선의 장애물 회피 경로 설정도 미완성입니다. 출발·도착 면과 통과할 틈을 지정하지 않은 선은 두 노드 중심을 잇는 직선이어서 중간 요소를 가로지를 수 있습니다. 아이콘과 도형도 도구 내부에 정의된 종류만 쓸 수 있습니다. 저자는 문법이 빠르게 바뀔 수 있다고 밝혔습니다.

관련 도구와 비교하면, PIC와 pikchr는 배치를 직접 정하고 결정적으로 그리지만 커서가 이동하며 도형을 그리는 터틀 그래픽 방식입니다. Graphviz의 rank와 cluster는 자동 배치 엔진에 제약을 더하는 기능이라 결과 배치가 소스만으로 예측되지 않습니다. Structurizr는 수동 배치를 지원하지만 C4 모델에 묶여 있습니다. Reladraw는 특정 모델에 한정하지 않고 이름 있는 요소 사이의 관계를 적는 범용 배치 언어를 지향합니다. 프로젝트는 Apache-2.0 라이선스를 적용하지만 reladraw 이름과 로고 등 상표 사용 권한은 별도로 부여하지 않습니다.

Hacker News 반응

• @v9v — 좋네요! Pikchr가 조금 떠오릅니다.
  • @jpwalsh234 — 감사합니다! 큰 차이는 Pikchr가 커서가 이동하며 도형을 그리는 터틀 그래픽을 쓴다는 점입니다. Reladraw는 관계와 상대 위치를 선언합니다. 컨테이너 안에 자식 요소가 있거나, 여러 노드가 다른 노드 오른쪽에 있고 서로 연결된 경우 하나를 추가하거나 크기를 바꾸면 나머지가 함께 조정됩니다. 터틀 그래픽처럼 위치를 다시 지정할 필요가 없습니다.
• @tetris11 — 마음에 듭니다. Mermaid 때문에 겪는 문제가 너무 많아요.
  • @jpwalsh234 — 감사합니다! 저도 Mermaid를 좋아하지만 다이어그램이 복잡해지면 Mermaid가 원하는 대로 그려서 결국 Draw.io를 찾게 됩니다. Draw.io도 훌륭하지만 시간이 많이 들 수 있습니다.
• @monster_truck — 정말 좋네요. 감사합니다. Mermaid와 씨름하는 건 특히 일반 형식과 GitHub 형식이 다를 때 너무 답답합니다. 제게 있는 임시 구현 몇 개를 이걸로 바꾸겠습니다.
  • @jpwalsh234 — 감사합니다. Reladraw로 할 수 없는 일을 발견하면 알려주세요. 실제 Draw.io 다이어그램을 살펴보고 Reladraw로 표현할 수 있는지 확인하면서 기능을 찾아가고 있습니다.
  • @Jailbird — 요청하신 김에 말하자면, 직각으로 꺾이는 연결선 옵션이 있으면 좋겠습니다.
  • @jpwalsh234 — 좋은 제안입니다. 할 일 목록에 추가하겠습니다.
• @lastscattering — TikZ의 배치 라이브러리와 비슷하네요. right=of, below left=of 같은 기능을 LaTeX 없이 쓸 수 있겠습니다. TikZ에서 노드보다 힘들었던 건 연결선이었습니다. 두 선이 상자 같은 면을 쓰려고 하면 금세 보기 안 좋아집니다. 해석기가 경로를 정하나요, 아니면 from:과 to:만 있나요? 배치 문장이 충돌하면 첫 번째 문장이 우선하나요, 오류가 나나요?
  • @jpwalsh234 — 장애물을 피해 자동으로 경로를 찾지는 않습니다. 다만 A, B, C의 연결선이 모두 D의 왼쪽 면으로 가면 그 면을 공유하며 서로 교차하지 않도록 간격을 둡니다. 면이 짧으면 공간을 만들기 위해 바깥으로 휘어집니다. “이 두 노드 사이로 지나가라”처럼 경로를 지시할 수도 있습니다. 함께 성립하는 문장은 모두 적용합니다. 오른쪽이면서 다른 노드 아래에 놓이는 식의 조건은 괜찮습니다. 전부 성립할 수 없다면 충돌하는 문장을 이름과 함께 오류로 알립니다. 조용히 하나만 적용하지는 않습니다.
  • @drfloyd51 — “조용히 하나만 적용하지 않는다니” 정말 좋네요. 절대 바꾸지 마세요. 불평하는 사람도 있겠지만요.
  • @jpwalsh234 — 도구가 “도움이 되려고” 결정을 내리면 예상하기 어렵고 답답해질 수 있다고 생각했습니다. 예를 들어 두 노드 사이로 선을 지나가게 했는데 노드가 대각선으로 놓이면, 요청한 틈이 세로인지 가로인지 도구가 추측해야 합니다. 추측하지 않고 모호하다고 알려주면 작성자가 원하는 경로를 명시할 수 있습니다.
• @aktenlage — 흥미롭네요. Copilot에게 .dot 다이어그램 생성 스크립트를 작성시켰을 때, 배치 문제에서 저와 똑같이 어려움을 겪는 게 재미있었습니다.
  • @jpwalsh234 — 감사합니다. .dot에서는 배치 엔진이 요소 위치를 결정하므로 에이전트가 결과를 알 수 없습니다. 그래서 렌더링하고, 확인하고, 다시 조정해야 합니다. Reladraw에서는 사람이나 에이전트가 “이 노드를 저 노드 오른쪽에 둔다”고 직접 적고, 도구가 계산을 맡습니다.
• @recroad — 버그가 좀 있는 것 같습니다. edge parser -> renderer "test edge" from: left to: right를 추가했는데 곡선 화살표를 그리지 못했습니다.
  • @jpwalsh234 — 실제 버그네요. 찾아주셔서 감사합니다. 확인해보겠습니다.
  • @jpwalsh234 — 플레이그라운드에서 수정했습니다. 감사합니다. 경로를 더 나아지게 할 아이디어도 얻었습니다. 예를 들어 선이 위쪽이 아니라 아래쪽으로 휘게 하거나, 복잡한 예시에서 한 요소 위를 지나고 다른 요소 오른쪽을 지나게 할 수 있겠네요. npm 패키지도 곧 업데이트하겠습니다.
• @threecheese — 렌더러까지 함께 배포해야 하나요? 배치 지시가 결국 절대 좌표로 바뀐다면, 에이전트가 쓰는 간단한 인터페이스는 유지하면서 다양한 렌더링 백엔드를 대상으로 삼을 수 있지 않을까요?
  • @jpwalsh234 — 좋은 제안입니다. 배치 지시는 절대 좌표로 변환됩니다. 현재 CLI에는 좌표만 계산하고 JSON으로 출력하는 기능이 없습니다. 이를 지원하는 데 필요한 로직은 거의 갖춰져 있어 CLI를 조금 고치면 됩니다. 할 일 목록에 추가하겠습니다.
• @wrs — Mermaid는 오픈소스 아닌가요? 새 언어를 만드는 대신 Mermaid에 이런 배치 제약을 추가하면 안 되나요?
  • @jpwalsh234 — 생각해볼 만한 질문입니다. 자동 배치 엔진 위에 배치 제약을 얹으면 엔진이 위치를 정하는 한편 작성자가 위치를 밀거나 제한하게 됩니다. Graphviz의 rank는 다이어그램 모양에 대략적인 영향을 주는 방법입니다. 별도의 상대 배치 방식으로 Mermaid 다이어그램 유형을 추가할 수도 있지만, 사실상 새 언어가 될 가능성이 큽니다.
• @apinstein — AI 코딩 시대에 꼭 필요한 도구 같네요. 다이어그램은 제 정신 모형과 에이전트의 모형을 높은 대역폭으로 맞추는 좋은 방법이라고 생각합니다. 시각 자료는 실제 아키텍처를 유지하면서 개발 속도를 높이는 데 병목이 됩니다. 에이전트가 쓸 다이어그램 도구 목록에 추가하겠습니다.
  • @jpwalsh234 — 에이전트와 함께 일할 때 추상화 수준이 높은 정신 모형을 유지할 방법이 필요하다는 생각을 저도 비슷하게 하고 있습니다. 저장소에 시작용 에이전트 스킬이 있지만 아직 기본적인 수준입니다.

원문: Hacker News / 번역·요약: Trawling