screen-flow-diagram
Screen Flow Diagram Builder
Build interactive screen flow diagrams as standalone HTML files powered by D3.js. Screen flows are visual navigation maps that show simplified wireframe mockups of actual screens, connected by action labels that describe what the user clicks/taps to move between them. They answer the question: "What does the user see, and what do they tap to get to the next screen?"
What Makes a Screen Flow Different
| Artifact | What it shows | Node style |
|---|---|---|
| Flow diagram | Abstract process with phases and decisions | Generic boxes, diamonds |
| Screen flow | Concrete screen-to-screen navigation | Wireframe mockups with UI elements |
| Journey map | Emotional/experiential view across time | Table grid with phases × dimensions |
A screen flow lives in the middle ground: more visual than an abstract flow diagram, but more structural than a full prototype. Screens contain simplified placeholder content (headers, cards, buttons, lists) that communicates the type of screen without showing actual content.
Architecture
Every screen flow is a single .html file with D3.js loaded from CDN. No build step, no npm — just open in a browser or serve via npx serve.