Storyboard / wireframe flow
Six panels with a brief beneath each — common for UX walkthroughs.
Rendering…
Make it your own.
{
"nodes": [
{ "id":"p1","type":"rect","label":"Panel 1","x":40,"y":40,"fill":"#e2e8f0","stroke":"#475569" },
{ "id":"p2","type":"rect","label":"Panel 2","x":260,"y":40,"fill":"#e2e8f0","stroke":"#475569" },
{ "id":"p3","type":"rect","label":"Panel 3","x":480,"y":40,"fill":"#e2e8f0","stroke":"#475569" },
{ "id":"p4","type":"rect","label":"Panel 4","x":40,"y":260,"fill":"#e2e8f0","stroke":"#475569" },
{ "id":"p5","type":"rect","label":"Panel 5","x":260,"y":260,"fill":"#e2e8f0","stroke":"#475569" },
{ "id":"p6","type":"rect","label":"Panel 6","x":480,"y":260,"fill":"#e2e8f0","stroke":"#475569" },
{ "id":"n1","type":"note","label":"User opens app","x":40,"y":180,"fill":"#fef9c3" },
{ "id":"n2","type":"note","label":"Sees empty state","x":260,"y":180,"fill":"#fef9c3" },
{ "id":"n3","type":"note","label":"Taps CTA","x":480,"y":180,"fill":"#fef9c3" },
{ "id":"n4","type":"note","label":"Onboarding tour","x":40,"y":400,"fill":"#fef9c3" },
{ "id":"n5","type":"note","label":"First diagram","x":260,"y":400,"fill":"#fef9c3" },
{ "id":"n6","type":"note","label":"Share / save","x":480,"y":400,"fill":"#fef9c3" }
],
"edges": [
{ "id":"e1","source":"p1","target":"p2" },
{ "id":"e2","source":"p2","target":"p3" },
{ "id":"e3","source":"p3","target":"p4" },
{ "id":"e4","source":"p4","target":"p5" },
{ "id":"e5","source":"p5","target":"p6" },
{ "id":"f1","source":"p1","target":"n1" },
{ "id":"f2","source":"p2","target":"n2" },
{ "id":"f3","source":"p3","target":"n3" },
{ "id":"f4","source":"p4","target":"n4" },
{ "id":"f5","source":"p5","target":"n5" },
{ "id":"f6","source":"p6","target":"n6" }
]
}