드래그 가능한 커스터마이징 기능을 갖춘 코드 기반 다이어그램 도구

• oxdraw는 Rust로 작성된 ‘Diagram as Code’ 도구로, 코드 기반 다이어그램을 시각적으로 편집하고 재현 가능한 형태로 유지하도록 설계됨
• 다이어그램은 Mermaid 문법으로 작성되며, 웹 인터페이스를 통해 노드 위치, 색상, 연결선 등을 드래그로 조정 가능
• 시각적 수정 내용은 Mermaid 파일 내 주석 형태로 저장되어 다른 Mermaid 도구와의 호환성을 유지함
• CLI와 React 기반 웹 편집기로 구성되어 있으며, 명령줄 렌더링과 실시간 편집 모드 모두 지원
• 코드 생성형 다이어그램의 생산성과 시각적 편집의 자유도를 결합해, Lucidchart와 같은 GUI 도구의 대안으로 주목받음

프로젝트 개요

• oxdraw의 목표는 선언적이고 재현 가능한 문법을 통해 고품질 다이어그램을 쉽게 생성·유지하는 것임
  • 다이어그램은 Mermaid 문법으로 작성되며, 시각적 조정은 웹 인터페이스에서 수행
  • 사용자가 시각적으로 수정한 내용은 원본 코드에 반영되어 버전 관리와 자동화가 가능
• 수정 내용은 Mermaid 파일 내 주석(comment) 형태로 기록되어, Mermaid 생태계의 다른 도구와 완전한 호환성 유지
• 저장소는 Rust 기반 CLI와 React 기반 웹 인터페이스로 구성되어 있으며, CLI는 .mmd 파일을 이미지로 컴파일함

프로젝트 비전

• 개발자는 과거 Mermaid를 활용해 아키텍처 다이어그램이나 코드베이스 시각화를 수행했으나, 세밀한 편집 한계로 인해 Lucidchart 등으로 옮겨야 했음
• oxdraw는 Mermaid의 코드 기반 자동화와 Lucidchart의 시각적 자유도를 결합하는 것을 목표로 함
• 이를 통해 코드 생성형 다이어그램의 재현성, 협업성, 자동화 가능성을 유지하면서도, 시각적 완성도를 높이는 방향을 지향

사용 방법

• Cargo를 통해 설치 가능: cargo install oxdraw
• 다이어그램 렌더링: oxdraw --input flow.mmd
• 인터랙티브 편집기 실행: oxdraw --input flow.mmd --edit
• CLI는 Mermaid 파일을 입력받아 SVG 또는 PNG 출력을 생성하며, --edit 옵션으로 로컬 웹 편집기를 실행

CLI 플래그 설명

• -i, --input <PATH>: Mermaid 소스 파일 입력
• -o, --output <PATH>: 렌더링 결과물 저장 경로 지정
• --png: PNG 형식으로 출력
• --scale <FACTOR>: PNG 렌더링 배율 조정 (기본값 10.0)
• --edit: 시각적 편집기 실행
• --serve-host <ADDR> / --serve-port <PORT>: 편집기 서버의 주소 및 포트 지정 (기본 127.0.0.1:5151)
• -b, --background-color <COLOR>: 배경색 지정 (SVG 전용)
• -q, --quiet: 렌더링 완료 메시지 등 출력 억제

프런트엔드 기능

• 노드 및 엣지 조작
  • 선택된 노드나 엣지 삭제 (Delete/Backspace 키 지원)
  • 노드 색상, 테두리, 텍스트 색상 개별 지정 및 초기화
  • 엣지 색상, 선 스타일(실선/점선), 화살표 방향 설정
  • 엣지 경로에 드래그 가능한 제어점(control point) 추가 및 제거
• 캔버스 및 편집기 상호작용
  • 노드 드래그 시 격자 스냅 및 정렬 가이드 표시
  • Shift+화살표로 노드 이동
  • 엣지 핸들을 드래그해 경로 수정, 더블클릭으로 핸들 추가/삭제
  • 서브그래프 단위 이동 지원 — 그룹 내 노드 및 엣지 함께 이동
  • 소스 패널은 Mermaid 파일을 실시간 반영하며, 자동 저장 및 상태 표시(저장 중/오류 등) 제공
  • 상단 툴바에는 현재 파일 경로 및 저장 상태 표시

다이어그램 경로 알고리듬

• path_algo.mov 파일은 다이어그램 경로 계산 알고리듬의 동작을 시연
• 최적 경로에 대한 해석은 다양하며, 일부 사용자는 부드러운 곡선을 선호하지만, 작성자는 명확한 직선형 구조를 선호한다고 설명
• 선 겹침(overlap) 여부에 대한 선호도도 다르며, 작성자는 지나치게 긴 선을 피하기 위해 일부 겹침을 허용
• 예시에서는 관계를 삭제하고 노드를 이동할 때, 알고리듬이 자동으로 경로를 재계산하는 과정을 보여줌
• 알고리듬은 아직 개선 여지가 있으며, 향후 지속적인 발전이 예상됨

기술 구성 및 라이선스

• Rust 55.7% , TypeScript 40.0% , CSS 3.4% , 기타 0.9%로 구성
• MIT 라이선스로 공개되어 자유로운 사용 및 수정 가능
• 현재 506개의 Star, 10개의 Fork를 보유하며, 활발한 커뮤니티 관심을 받고 있음

종합 평가

• oxdraw는 코드 기반 다이어그램 관리의 자동화와 시각적 편집의 직관성을 결합한 새로운 접근
• Mermaid 생태계와의 완전한 호환성을 유지하면서, Rust의 성능과 React의 인터랙티브 UI를 활용
• 개발자와 디자이너 모두에게 협업 가능한 다이어그램 워크플로우를 제공하는 도구로 주목받는 중