코드로 다이어그램을 그린다, Reladraw 공개
원제 Show HN: Reladraw – A diagram language where you decide where to place things
154 포인트댓글 45
Key Point
AI 에이전트가 다이어그램을 수정할 때 픽셀 계산 없이 관계식 텍스트를 직접 편집할 수 있는 새로운 접근이다.
핵심 요약
- 상대적 위치 관계를 텍스트로 명시하는 다이어그램 언어 Reladraw를 공개했다.
- Mermaid, Graphviz 등은 엔티티와 연결만 정의하면 자동 배치하고, draw.io 같은 도구는 절대 좌표로 완전 제어를 하지만, Reladraw는 '클러스터 왼쪽 위' '두 노드 사이' 같은 상대적 배치를 코드로 쓴다.
- 파일에 좌표가 없고 모든 거리를 명시된 관계식에서 계산하므로, 수정할 때 어떤 문장을 고쳐야 하는지 명확하다.
- 에이전트(AI)가 이미지 좌표를 매번 다시 계산할 필요 없이, 파일의 의도를 읽고 텍스트 자체를 수정하면 된다.
- 0.5.0 버전으로 TypeScript 파서·해석기·SVG 렌더러와 CLI 도구를 갖췄고, 의존성 없다.
- npm으로 전역 설치하거나 클론해서 사용할 수 있으며, Claude Code 등 주요 에이전트용 스킬 패키지도 제공한다.
- 아직 진행 중인 기능은 진단 리포트(그려진 다이어그램의 오류 설명), 엣지 라우팅 개선, 추가 아이콘·도형이다.
- 설계의 핵심은 최소 거리 제약들을 만족하는 가장 타이트한 배치를 찾되, 절대 배치 알고리즘이 관계를 결정하지 않는 것이다.
- 노드 겹침 방지와 엣지 교차는 명시된 배치 관계에서 유도되고, 파일이 결정하지 않은 것만 진단 리포트로 보고된다.
- PIC·pikchr(터틀 그래픽), Graphviz(자동 배치 제약), Structurizr(C4 모델 고정) 등과 달리, 일반 목적 상대 배치 언어이면서도 결정론적이다.
- Apache-2.0 라이선스로 상용 제약이 없고, 채택을 장려한다.
- 문법은 여전히 불안정하므로 변경을 예상하고, 아직 PR 병합은 미루는 상태이다.