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. So I built it to take a structure designed on screen straight to code, without installing a workflow platform. 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.