특허 관련 외부 프로젝트를 진행하면서 LangGraph의 그래프 구조를 코드로 바로 설계하다 보니 노드와 엣지의 연결을 한눈에 파악하기 어려웠습니다. 복잡해질 때만 잠깐 꺼내 쓸 수 있도록 이틀 동안 만든 작은 설계 도구입니다.
왼쪽 캔버스에서 노드와 엣지를 드래그해 배치하면 오른쪽에 같은 구조의 LangGraph 코드가 바로
생깁니다. 캔버스는 React Flow로 드래그앤드롭 노드와 연결, 경로를 조정할 수 있는 커스텀 엣지를
구현했습니다. 코드를 생성할 때는 조건부 노드로 들어오는 출발 노드와 여러 목적지를 묶어
add_conditional_edges로 변환하고, 나머지 연결은 add_edge로 출력합니다.
n8n으로 구조를 그릴 수도 있었지만, 최종 결과물은 파이썬 프로젝트에 바로 붙여넣을 수 있는 LangGraph 코드여야 했습니다. 워크플로 플랫폼을 설치하고 운영하는 대신, 화면에서 구조를 편하게 설계한 뒤 바로 코드로 가져가는 데 초점을 맞췄습니다. 노드, 엣지, 진입점과 그래프 이름은 JSON으로 직렬화해 URL hash에 저장하므로, 같은 URL만 열면 별도 서버나 저장 계층 없이 설계를 복원하고 공유할 수 있습니다. 필요할 때 설치 없이 접속할 수 있도록 Netlify에 배포했습니다.