Show HN: Reladraw - 요소를 어디에 놓을지 직접 정하는 다이어그램 언어

2 hours ago 1

Reladraw는 좌표 대신 요소 간 상대적 위치를 텍스트로 지정하는 다이어그램 언어로, 자동 배치와 수동 절대 좌표 편집 사이를 지향함 배치 관계는 소스가 결정하고 엔진은 필요한 거리를 계산함. 요소를 추가하거나 텍스트가 길어지면 최소 간격 제약을 풀어 공간을 확보함 에이전트가 그림을 수정할 때 좌표에서 배치를 역추적하지 않고 위치를 지정한 문장 자체를 수정할 수 있음. 다만 소스 재확인만으로 교차선이나 텍스트 넘침 같은 최종 결과까지 검증할 수는 없음 0.5.0에는 런타임 의존성 없는 TypeScript 파서, 제약 해결기, SVG 렌더러와 CLI가 구현돼 있으며, 설치 없이 브라우저에서도 사용할 수 있음 아직 기계 판독 가능한 진단 보고서와 노드를 피하는 간선 경로 계산은 구현되지 않았고, 언어 문법도 안정화되지 않아 변경될 수 있음 자동 배치와 절대 좌표 사이 Mermaid, Graphviz, D2는 개체와 연결을 선언하면 위치를 자동으로 정하며, 대부분의 다이어그램에는 적합하지만 원하는 배치가 명확할 때 이를 직접 지정하기 어려움 draw.io, Excalidraw, Figma 같은 절대 위치 도구는 배치를 완전히 제어할 수 있지만, 복잡한 그림을 수정할 때 수작업이 많이 필요함 에이전트는 어떤 좌표를 바꿀지 결정하기 전에 숫자로부터 그림을 재구성해야 함 Reladraw는 모든 위치를 다른 요소와의 관계로 지정하며, 파일에 좌표를 쓰지 않음 below app.ui, right of app, level with app처럼 배치하고, 간선에는 from: right, to: left처럼 출발면과 도착면을 지정할 수 있음 선언을 중첩하지 않으므로 줄의 위치나 들여쓰기에 의존하지 않음 draw.io로 직접 그린 참조 그림을 옮긴 examples/arch.reladraw는 좌표 없이 44개 문장으로 구성됨 above-left of cluster.hub, between cluster.desktop1 and cluster.laptop1 같은 문장이 배치를 정하고 엔진이 거리를 계산함 현재 비교 결과에서 눈에 띄게 미흡한 부분은 배치보다 타이포그래피임 문법 초안은 SYNTAX.md, 작성 사례는 examples/에 있음 브라우저 편집기에서는 설치 없이 왼쪽 소스를 편집하고 오른쪽에서 다시 계산된 배치를 확인할 수 있음 에이전트가 읽고 수정할 수 있는 배치 다이어그램 작업의 흔한 경우는 새로 그리기보다 기존 그림 수정임...

Read Entire Article