NodlumeStructure painter
Sketch your Next.js architecture diagram right here — no account needed. Paint routes onto a grid and they become a tree; attach shadcn/ui components, layouts and stores; guard pages by role; and download the whole thing as a real Next.js App Router skeleton. Your board is saved in this browser as you draw.
Paint, don't diagram
Sweep the paint tool across the grid and the tree falls out of the geometry: straight down draws a chain of nested routes, across a row fills a level with siblings. Tidy-layout, rename walks and a minimap keep big trees readable.
More than boxes and arrows
Four views over one board — routes, components, state and navigation. Attach real shadcn/ui parts, declare layouts and route groups, share Zustand stores between pages, and mark who may visit what.
A real skeleton out
The download is a genuine Next.js App Router tree — page.tsx per route, layouts where you declared them, component and store stubs with your notes printed into their doc blocks.
Design the whole app, not just the tree
In the Nodlume workspace this canvas is one tab of a full product designer: domain and roles, API routes, a data model, a theme system, security and SEO reviews — with AI that generates route trees, test cases and working code, and real-time collaboration. Targets beyond the web too: desktop, mobile, terminal and browser extensions. The navigation architecture guide explains how to choose patterns before drawing the tree.