While working on an external patent project, I found it difficult to understand node and edge connections at a glance when designing LangGraph structures directly in code. I built this small design tool in two days so I could pull it up whenever a graph became complex.
Drag nodes and edges onto the canvas on the left, and matching LangGraph code appears immediately on the right.
The canvas uses React Flow for drag-and-drop nodes, connections, and editable custom edge paths. During code
generation, the tool traces the node entering each conditional node, groups its outgoing targets, and emits that
branch with add_conditional_edges; other connections become add_edge calls.
I could have diagrammed the structure in n8n, but the required output was LangGraph code I could paste straight into a Python project. Instead of installing and operating a workflow platform, I focused on designing the structure comfortably on screen and taking it straight to code. The tool serializes the nodes, edges, entry point, and graph name as JSON in the URL hash, allowing the same URL to reconstruct and share a design without a server or persistence layer. It is deployed on Netlify so it can be used without installation as needed.