Scrwly visual runtime
API v1

Scenes · 29 canonical examples

Canonical examples

Every example is validated in the test suite and rendered through the same SVG runtime used by the API. Copy the JSON straight into POST /api/v1/render.

Compare the same scenes across all six themes →

Data pipeline A technical process diagram with four symbolic stages. {"version":"0.1","sceneId":"data-pipeline-flow","targets":[{"nodeId":"flow-ingest-box","semanticRole":"shape","animation":"fade","order":1,"startPct":14.11,"durationPct":8,"value":"Ingest data","label":"Ingest data"},{"nodeId":"flow-ingest-icon-halo","semanticRole":"shape","animation":"fade","order":2,"startPct":16.21,"durationPct":8},{"nodeId":"flow-ingest-icon","semanticRole":"shape","animation":"fade","order":3,"startPct":18.32,"durationPct":8,"value":"Ingest data","label":"Ingest data"},{"nodeId":"flow-clean-box","semanticRole":"shape","animation":"fade","order":6,"startPct":24.63,"durationPct":8,"value":"Clean fields","label":"Clean fields"},{"nodeId":"flow-clean-icon-halo","semanticRole":"shape","animation":"fade","order":7,"startPct":26.74,"durationPct":8},{"nodeId":"flow-clean-icon","semanticRole":"shape","animation":"fade","order":8,"startPct":28.84,"durationPct":8,"value":"Clean fields","label":"Clean fields"},{"nodeId":"title","semanticRole":"label","animation":"label","order":0,"startPct":32,"durationPct":8,"value":"Data pipeline","label":"Data pipeline"},{"nodeId":"flow-model-box","semanticRole":"shape","animation":"fade","order":11,"startPct":35.16,"durationPct":8,"value":"Model output","label":"Model output"},{"nodeId":"flow-ingest-label","semanticRole":"label","animation":"label","order":4,"startPct":37,"durationPct":8,"value":"Ingest data","label":"Ingest data"},{"nodeId":"flow-model-icon-halo","semanticRole":"shape","animation":"fade","order":12,"startPct":37.26,"durationPct":8},{"nodeId":"flow-model-icon","semanticRole":"shape","animation":"fade","order":13,"startPct":39.37,"durationPct":8,"value":"Model output","label":"Model output"},{"nodeId":"flow-clean-label","semanticRole":"label","animation":"label","order":9,"startPct":42,"durationPct":8,"value":"Clean fields","label":"Clean fields"},{"nodeId":"flow-report-box","semanticRole":"shape","animation":"fade","order":16,"startPct":45.68,"durationPct":8,"value":"Report result","label":"Report result"},{"nodeId":"flow-model-label","semanticRole":"label","animation":"label","order":14,"startPct":47,"durationPct":8,"value":"Model output","label":"Model output"},{"nodeId":"flow-report-icon-halo","semanticRole":"shape","animation":"fade","order":17,"startPct":47.79,"durationPct":8},{"nodeId":"flow-report-icon","semanticRole":"shape","animation":"fade","order":18,"startPct":49.89,"durationPct":8,"value":"Report result","label":"Report result"},{"nodeId":"flow-report-label","semanticRole":"label","animation":"label","order":19,"startPct":52,"durationPct":8,"value":"Report result","label":"Report result"},{"nodeId":"flow-ingest-arrow","semanticRole":"connector","animation":"draw","order":5,"startPct":54.53,"durationPct":14},{"nodeId":"flow-clean-arrow","semanticRole":"connector","animation":"draw","order":10,"startPct":65.05,"durationPct":14},{"nodeId":"flow-model-arrow","semanticRole":"connector","animation":"draw","order":15,"startPct":75.58,"durationPct":14}]} Data pipeline Ingest dataIngest dataIngest dataClean fieldsClean fieldsClean fieldsModel outputModel outputModel outputReport resultReport resultReport result

Data pipeline

Open JSON

A technical process diagram with four symbolic stages.

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

Design process

Open JSON

A vertical workflow test for stacked cards and arrow spacing.

Simple electric circuit A flow diagram showing current through a simple circuit. {"version":"0.1","sceneId":"electric-circuit-flow","targets":[{"nodeId":"flow-battery-box","semanticRole":"shape","animation":"fade","order":1,"startPct":14,"durationPct":8,"value":"Battery pushes charge","label":"Battery pushes charge"},{"nodeId":"flow-battery-icon-halo","semanticRole":"shape","animation":"fade","order":2,"startPct":16,"durationPct":8},{"nodeId":"flow-battery-icon","semanticRole":"shape","animation":"fade","order":3,"startPct":18,"durationPct":8,"value":"Battery pushes charge","label":"Battery pushes charge"},{"nodeId":"flow-wire-box","semanticRole":"shape","animation":"fade","order":6,"startPct":24,"durationPct":8,"value":"Wire carries current","label":"Wire carries current"},{"nodeId":"flow-wire-icon-halo","semanticRole":"shape","animation":"fade","order":7,"startPct":26,"durationPct":8},{"nodeId":"flow-wire-icon","semanticRole":"shape","animation":"fade","order":8,"startPct":28,"durationPct":8,"value":"Wire carries current","label":"Wire carries current"},{"nodeId":"title","semanticRole":"label","animation":"label","order":0,"startPct":32,"durationPct":8,"value":"Simple electric circuit","label":"Simple electric circuit"},{"nodeId":"flow-bulb-box","semanticRole":"shape","animation":"fade","order":11,"startPct":34,"durationPct":8,"value":"Bulb uses energy","label":"Bulb uses energy"},{"nodeId":"flow-battery-label","semanticRole":"label","animation":"label","order":4,"startPct":36,"durationPct":8,"value":"Battery pushes charge","label":"Battery pushes charge"},{"nodeId":"flow-bulb-icon-halo","semanticRole":"shape","animation":"fade","order":12,"startPct":36,"durationPct":8},{"nodeId":"flow-bulb-icon","semanticRole":"shape","animation":"fade","order":13,"startPct":38,"durationPct":8,"value":"Bulb uses energy","label":"Bulb uses energy"},{"nodeId":"flow-wire-label","semanticRole":"label","animation":"label","order":9,"startPct":40,"durationPct":8,"value":"Wire carries current","label":"Wire carries current"},{"nodeId":"flow-bulb-label","semanticRole":"label","animation":"label","order":14,"startPct":44,"durationPct":8,"value":"Bulb uses energy","label":"Bulb uses energy"},{"nodeId":"flow-return-box","semanticRole":"shape","animation":"fade","order":16,"startPct":44,"durationPct":8,"value":"Current returns","label":"Current returns"},{"nodeId":"flow-return-icon-halo","semanticRole":"shape","animation":"fade","order":17,"startPct":46,"durationPct":8},{"nodeId":"flow-return-icon","semanticRole":"shape","animation":"fade","order":18,"startPct":48,"durationPct":8,"value":"Current returns","label":"Current returns"},{"nodeId":"flow-return-label","semanticRole":"label","animation":"label","order":19,"startPct":48,"durationPct":8,"value":"Current returns","label":"Current returns"},{"nodeId":"note","semanticRole":"label","animation":"label","order":20,"startPct":52,"durationPct":8,"value":"A complete loop lets current keep moving.","label":"A complete loop lets current keep moving."},{"nodeId":"flow-battery-arrow","semanticRole":"connector","animation":"draw","order":5,"startPct":54,"durationPct":14},{"nodeId":"flow-wire-arrow","semanticRole":"connector","animation":"draw","order":10,"startPct":64,"durationPct":14},{"nodeId":"flow-bulb-arrow","semanticRole":"connector","animation":"draw","order":15,"startPct":74,"durationPct":14}]} Simple electric circuit Battery pushes chargeBattery pushes chargeBatterypushes chargeWire carries currentWire carries currentWire carriescurrentBulb uses energyBulb uses energyBulb usesenergyCurrent returnsCurrent returnsCurrentreturns A complete loop lets current keep moving.

Simple electric circuit

Open JSON

A flow diagram showing current through a simple circuit.

Energy transfer A linear science process with longer labels. {"version":"0.1","sceneId":"energy-transfer-chain","targets":[{"nodeId":"flow-chemical-box","semanticRole":"shape","animation":"fade","order":1,"startPct":14.11,"durationPct":8,"value":"Chemical energy","label":"Chemical energy"},{"nodeId":"flow-chemical-icon-halo","semanticRole":"shape","animation":"fade","order":2,"startPct":16.21,"durationPct":8},{"nodeId":"flow-chemical-icon","semanticRole":"shape","animation":"fade","order":3,"startPct":18.32,"durationPct":8,"value":"Chemical energy","label":"Chemical energy"},{"nodeId":"flow-electrical-box","semanticRole":"shape","animation":"fade","order":6,"startPct":24.63,"durationPct":8,"value":"Electrical energy","label":"Electrical energy"},{"nodeId":"flow-electrical-icon-halo","semanticRole":"shape","animation":"fade","order":7,"startPct":26.74,"durationPct":8},{"nodeId":"flow-electrical-icon","semanticRole":"shape","animation":"fade","order":8,"startPct":28.84,"durationPct":8,"value":"Electrical energy","label":"Electrical energy"},{"nodeId":"title","semanticRole":"label","animation":"label","order":0,"startPct":32,"durationPct":8,"value":"Energy transfer","label":"Energy transfer"},{"nodeId":"flow-light-box","semanticRole":"shape","animation":"fade","order":11,"startPct":35.16,"durationPct":8,"value":"Light output","label":"Light output"},{"nodeId":"flow-chemical-label","semanticRole":"label","animation":"label","order":4,"startPct":37,"durationPct":8,"value":"Chemical energy","label":"Chemical energy"},{"nodeId":"flow-light-icon-halo","semanticRole":"shape","animation":"fade","order":12,"startPct":37.26,"durationPct":8},{"nodeId":"flow-light-icon","semanticRole":"shape","animation":"fade","order":13,"startPct":39.37,"durationPct":8,"value":"Light output","label":"Light output"},{"nodeId":"flow-electrical-label","semanticRole":"label","animation":"label","order":9,"startPct":42,"durationPct":8,"value":"Electrical energy","label":"Electrical energy"},{"nodeId":"flow-thermal-box","semanticRole":"shape","animation":"fade","order":16,"startPct":45.68,"durationPct":8,"value":"Thermal loss","label":"Thermal loss"},{"nodeId":"flow-light-label","semanticRole":"label","animation":"label","order":14,"startPct":47,"durationPct":8,"value":"Light output","label":"Light output"},{"nodeId":"flow-thermal-icon-halo","semanticRole":"shape","animation":"fade","order":17,"startPct":47.79,"durationPct":8},{"nodeId":"flow-thermal-icon","semanticRole":"shape","animation":"fade","order":18,"startPct":49.89,"durationPct":8,"value":"Thermal loss","label":"Thermal loss"},{"nodeId":"flow-thermal-label","semanticRole":"label","animation":"label","order":19,"startPct":52,"durationPct":8,"value":"Thermal loss","label":"Thermal loss"},{"nodeId":"flow-chemical-arrow","semanticRole":"connector","animation":"draw","order":5,"startPct":54.53,"durationPct":14},{"nodeId":"flow-electrical-arrow","semanticRole":"connector","animation":"draw","order":10,"startPct":65.05,"durationPct":14},{"nodeId":"flow-light-arrow","semanticRole":"connector","animation":"draw","order":15,"startPct":75.58,"durationPct":14}]} Energy transfer Chemical energyChemical energyChemicalenergyElectrical energyElectrical energyElectricalenergyLight outputLight outputLight outputThermal lossThermal lossThermal loss

Energy transfer

Open JSON

A linear science process with longer labels.

Flow Diagram Visual scene flow-diagram {"version":"0.1","sceneId":"flow-diagram","targets":[{"nodeId":"flow-one-box","semanticRole":"shape","animation":"fade","order":1,"startPct":14.86,"durationPct":8,"value":"Input","label":"Input"},{"nodeId":"flow-one-icon-halo","semanticRole":"shape","animation":"fade","order":2,"startPct":17.71,"durationPct":8},{"nodeId":"flow-one-icon","semanticRole":"shape","animation":"fade","order":3,"startPct":20.57,"durationPct":8,"value":"Input","label":"Input"},{"nodeId":"flow-two-box","semanticRole":"shape","animation":"fade","order":6,"startPct":29.14,"durationPct":8,"value":"Process","label":"Process"},{"nodeId":"title","semanticRole":"label","animation":"label","order":0,"startPct":32,"durationPct":8,"value":"Flow Diagram","label":"Flow Diagram"},{"nodeId":"flow-two-icon-halo","semanticRole":"shape","animation":"fade","order":7,"startPct":32,"durationPct":8},{"nodeId":"flow-two-icon","semanticRole":"shape","animation":"fade","order":8,"startPct":34.86,"durationPct":8,"value":"Process","label":"Process"},{"nodeId":"flow-one-label","semanticRole":"label","animation":"label","order":4,"startPct":38.67,"durationPct":8,"value":"Input","label":"Input"},{"nodeId":"flow-three-box","semanticRole":"shape","animation":"fade","order":11,"startPct":43.43,"durationPct":8,"value":"Output","label":"Output"},{"nodeId":"flow-two-label","semanticRole":"label","animation":"label","order":9,"startPct":45.33,"durationPct":8,"value":"Process","label":"Process"},{"nodeId":"flow-three-icon-halo","semanticRole":"shape","animation":"fade","order":12,"startPct":46.29,"durationPct":8},{"nodeId":"flow-three-icon","semanticRole":"shape","animation":"fade","order":13,"startPct":49.14,"durationPct":8,"value":"Output","label":"Output"},{"nodeId":"flow-three-label","semanticRole":"label","animation":"label","order":14,"startPct":52,"durationPct":8,"value":"Output","label":"Output"},{"nodeId":"flow-one-arrow","semanticRole":"connector","animation":"draw","order":5,"startPct":58.29,"durationPct":14},{"nodeId":"flow-two-arrow","semanticRole":"connector","animation":"draw","order":10,"startPct":72.57,"durationPct":14}]} Flow Diagram InputInput?InputProcessProcessProcessOutputOutputOutput

Flow Diagram

Open JSON

Canonical Scrwly scene example: flow-diagram

Food chain A compact horizontal flow with five trophic roles. {"version":"0.1","sceneId":"food-chain-flow","targets":[{"nodeId":"flow-sun-box","semanticRole":"shape","animation":"fade","order":1,"startPct":13.67,"durationPct":8,"value":"Sun","label":"Sun"},{"nodeId":"flow-sun-icon-halo","semanticRole":"shape","animation":"fade","order":2,"startPct":15.33,"durationPct":8},{"nodeId":"flow-sun-icon","semanticRole":"shape","animation":"fade","order":3,"startPct":17,"durationPct":8,"value":"Sun","label":"Sun"},{"nodeId":"flow-grass-box","semanticRole":"shape","animation":"fade","order":6,"startPct":22,"durationPct":8,"value":"Grass","label":"Grass"},{"nodeId":"flow-grass-icon-halo","semanticRole":"shape","animation":"fade","order":7,"startPct":23.67,"durationPct":8},{"nodeId":"flow-grass-icon","semanticRole":"shape","animation":"fade","order":8,"startPct":25.33,"durationPct":8,"value":"Grass","label":"Grass"},{"nodeId":"flow-insect-box","semanticRole":"shape","animation":"fade","order":11,"startPct":30.33,"durationPct":8,"value":"Insect","label":"Insect"},{"nodeId":"title","semanticRole":"label","animation":"label","order":0,"startPct":32,"durationPct":8,"value":"Food chain","label":"Food chain"},{"nodeId":"flow-insect-icon-halo","semanticRole":"shape","animation":"fade","order":12,"startPct":32,"durationPct":8},{"nodeId":"flow-insect-icon","semanticRole":"shape","animation":"fade","order":13,"startPct":33.67,"durationPct":8,"value":"Insect","label":"Insect"},{"nodeId":"flow-sun-label","semanticRole":"label","animation":"label","order":4,"startPct":36,"durationPct":8,"value":"Sun","label":"Sun"},{"nodeId":"flow-bird-box","semanticRole":"shape","animation":"fade","order":16,"startPct":38.67,"durationPct":8,"value":"Bird","label":"Bird"},{"nodeId":"flow-grass-label","semanticRole":"label","animation":"label","order":9,"startPct":40,"durationPct":8,"value":"Grass","label":"Grass"},{"nodeId":"flow-bird-icon-halo","semanticRole":"shape","animation":"fade","order":17,"startPct":40.33,"durationPct":8},{"nodeId":"flow-bird-icon","semanticRole":"shape","animation":"fade","order":18,"startPct":42,"durationPct":8,"value":"Bird","label":"Bird"},{"nodeId":"flow-insect-label","semanticRole":"label","animation":"label","order":14,"startPct":44,"durationPct":8,"value":"Insect","label":"Insect"},{"nodeId":"flow-soil-box","semanticRole":"shape","animation":"fade","order":21,"startPct":47,"durationPct":8,"value":"Decomposer","label":"Decomposer"},{"nodeId":"flow-bird-label","semanticRole":"label","animation":"label","order":19,"startPct":48,"durationPct":8,"value":"Bird","label":"Bird"},{"nodeId":"flow-soil-icon-halo","semanticRole":"shape","animation":"fade","order":22,"startPct":48.67,"durationPct":8},{"nodeId":"flow-soil-icon","semanticRole":"shape","animation":"fade","order":23,"startPct":50.33,"durationPct":8,"value":"Decomposer","label":"Decomposer"},{"nodeId":"flow-soil-label","semanticRole":"label","animation":"label","order":24,"startPct":52,"durationPct":8,"value":"Decomposer","label":"Decomposer"},{"nodeId":"flow-sun-arrow","semanticRole":"connector","animation":"draw","order":5,"startPct":52.33,"durationPct":14},{"nodeId":"flow-grass-arrow","semanticRole":"connector","animation":"draw","order":10,"startPct":60.67,"durationPct":14},{"nodeId":"flow-insect-arrow","semanticRole":"connector","animation":"draw","order":15,"startPct":69,"durationPct":14},{"nodeId":"flow-bird-arrow","semanticRole":"connector","animation":"draw","order":20,"startPct":77.33,"durationPct":14}]} Food chain SunSunSunGrassGrassGrassInsectInsectInsectBirdBirdBirdDecomposerDecomposerDecomposer

Food chain

Open JSON

A compact horizontal flow with five trophic roles.