โ† All examples

Design process

A vertical workflow test for stacked cards and arrow spacing.

Design process A vertical workflow test for stacked cards and arrow spacing. {"version":"0.1","sceneId":"design-process-flow","targets":[{"nodeId":"flow-ask-box","semanticRole":"shape","animation":"fade","order":1,"startPct":14.86,"durationPct":8,"value":"Ask","label":"Ask"},{"nodeId":"flow-sketch-box","semanticRole":"shape","animation":"fade","order":4,"startPct":23.43,"durationPct":8,"value":"Sketch","label":"Sketch"},{"nodeId":"title","semanticRole":"label","animation":"label","order":0,"startPct":32,"durationPct":8,"value":"Design process","label":"Design process"},{"nodeId":"flow-prototype-box","semanticRole":"shape","animation":"fade","order":7,"startPct":32,"durationPct":8,"value":"Prototype","label":"Prototype"},{"nodeId":"flow-ask-label","semanticRole":"label","animation":"label","order":2,"startPct":36,"durationPct":8,"value":"Ask","label":"Ask"},{"nodeId":"flow-sketch-label","semanticRole":"label","animation":"label","order":5,"startPct":40,"durationPct":8,"value":"Sketch","label":"Sketch"},{"nodeId":"flow-test-box","semanticRole":"shape","animation":"fade","order":10,"startPct":40.57,"durationPct":8,"value":"Test","label":"Test"},{"nodeId":"flow-prototype-label","semanticRole":"label","animation":"label","order":8,"startPct":44,"durationPct":8,"value":"Prototype","label":"Prototype"},{"nodeId":"flow-test-label","semanticRole":"label","animation":"label","order":11,"startPct":48,"durationPct":8,"value":"Test","label":"Test"},{"nodeId":"flow-refine-box","semanticRole":"shape","animation":"fade","order":13,"startPct":49.14,"durationPct":8,"value":"Refine","label":"Refine"},{"nodeId":"flow-refine-label","semanticRole":"label","animation":"label","order":14,"startPct":52,"durationPct":8,"value":"Refine","label":"Refine"},{"nodeId":"flow-ask-arrow","semanticRole":"connector","animation":"draw","order":3,"startPct":52.57,"durationPct":14},{"nodeId":"flow-sketch-arrow","semanticRole":"connector","animation":"draw","order":6,"startPct":61.14,"durationPct":14},{"nodeId":"flow-prototype-arrow","semanticRole":"connector","animation":"draw","order":9,"startPct":69.71,"durationPct":14},{"nodeId":"flow-test-arrow","semanticRole":"connector","animation":"draw","order":12,"startPct":78.29,"durationPct":14}]} Design process AskAskSketchSketchPrototypePrototypeTestTestRefineRefine
{
  "version": "0.1",
  "id": "design-process-flow",
  "title": "Design process",
  "description": "A vertical workflow test for stacked cards and arrow spacing.",
  "canvas": {
    "width": 760,
    "height": 720,
    "background": "background",
    "padding": 40
  },
  "theme": {
    "id": "clean-light"
  },
  "nodes": [
    {
      "id": "title",
      "x": 380,
      "y": 58,
      "type": "text",
      "text": "Design process",
      "fontSize": 28,
      "align": "center"
    },
    {
      "id": "flow",
      "x": 220,
      "y": 110,
      "width": 320,
      "height": 500,
      "accessibility": {
        "label": "Design process flow diagram",
        "role": "img"
      },
      "type": "component",
      "component": "FlowDiagram",
      "props": {
        "direction": "vertical",
        "arrows": true,
        "items": [
          {
            "id": "ask",
            "label": "Ask"
          },
          {
            "id": "sketch",
            "label": "Sketch"
          },
          {
            "id": "prototype",
            "label": "Prototype"
          },
          {
            "id": "test",
            "label": "Test"
          },
          {
            "id": "refine",
            "label": "Refine"
          }
        ]
      }
    }
  ]
}