Skip to content
Weave templates

Storyboard / wireframe flow

Six panels with a brief beneath each — common for UX walkthroughs.

Template previewWeave
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" }
  ]
}