What it is
Node-graph editor for screens. Each node is a screen (Main Menu / Inventory / Settings / Pause / …) with optional mockup image; edges represent transitions triggered by user actions. Useful for UX reviews and onboarding new UI engineers.
When to use it
- Designing a new screen flow before mocking it up in Figma.
- Showing the team how the inventory connects to crafting connects to shop.
- Spotting a UX dead-end (a screen with no way back).
- Briefing a UI engineer on every transition they need to script.
How to use it
- 1Click "+ Add Screen" and give it a name.
- 2Upload a mockup image to the screen node (optional but powerful).
- 3Drag from a screen's output port to another to define a transition.
- 4Label edges with the trigger ("Open inventory", "Press B", "Item picked up").
Tips you should know
- →Live cursors: teammates editing the same flow see each other move.
- →Mockup images are stored in R2 and count against your project storage budget.
- →Use colour-coded categories for modal vs. fullscreen vs. HUD overlays.
- →Export the flow as PNG (right-click canvas → Export) for slide decks.