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