AI Visual Runtime

Prompt

Example Theme Planner

SVG Preview

mock

Attempts: 1 Repair: none Fallback: none

Scene JSON

{
  "version": "0.1",
  "id": "photosynthesis-cycle",
  "title": "Photosynthesis",
  "description": "A simple visual explanation of photosynthesis inputs and outputs.",
  "canvas": {
    "width": 900,
    "height": 600,
    "background": "background",
    "padding": 40
  },
  "theme": {
    "id": "clean-light"
  },
  "nodes": [
    {
      "id": "cycle1",
      "type": "component",
      "component": "CycleDiagram",
      "x": 70,
      "y": 96,
      "width": 760,
      "height": 430,
      "props": {
        "items": [
          {
            "id": "sun",
            "label": "Sunlight",
            "icon": "sun"
          },
          {
            "id": "water",
            "label": "Water",
            "icon": "water"
          },
          {
            "id": "co2",
            "label": "Carbon dioxide",
            "icon": "cloud"
          },
          {
            "id": "plant",
            "label": "Plant makes glucose",
            "icon": "leaf"
          },
          {
            "id": "oxygen",
            "label": "Oxygen released",
            "icon": "oxygen"
          }
        ],
        "clockwise": true
      },
      "accessibility": {
        "label": "Photosynthesis cycle diagram",
        "role": "img"
      }
    },
    {
      "id": "title",
      "type": "text",
      "text": "Photosynthesis",
      "x": 450,
      "y": 60,
      "align": "center",
      "fontSize": 28
    }
  ]
}