Internal diagram authoring tool — not student-facing.

Diagram Studio

Build controlled GCSE-style diagrams as structured JSON, preview them with the same renderer students see, then copy the diagram data into question content when it is ready.

Diagram details

TitleDiagram IDTopicSubtopicDiagram typeCreated bySize presetAccessible description

Tools

Imported images are stored inside the diagram JSON, so permanent saves can render them later.

Templates

Geometry templates

Graph and grid templates

Statistics and table templates

Scale and measuring templates

Live preview

Straight line angle with 65 degrees and x

360 × 230, 11 objects

Drag canvas

Drag objects to move them. Use typed controls for exact values.

Student render preview

Object editor

Selected object

labelaltxyx1y1x2y2cxcyrwidthheightstartAngleendAnglerotationfontSizestrokeWidthopacityTick typeShow object

Export and validation

Validation

No basic validation warnings.

Attach to a question

The question ID below is loaded from the current Studio URL. Use Attach for a browser preview, or Save permanently to overwrite the project diagram data for this question.

Question ID

{
  "diagramId": "ds-angle-straight-line-65-x",
  "title": "Straight line angle with 65 degrees and x",
  "topic": "geometry",
  "subtopic": "angles-straight-line-around-point",
  "diagramType": "angle-straight-line-two-parts",
  "canvasSize": {
    "width": 360,
    "height": 230,
    "preset": "standard-question"
  },
  "objects": [
    {
      "id": "line-ac",
      "type": "line-segment",
      "x1": 54,
      "y1": 155,
      "x2": 306,
      "y2": 155,
      "strokeWidth": 4
    },
    {
      "id": "ray-bd",
      "type": "ray",
      "x1": 180,
      "y1": 155,
      "x2": 128,
      "y2": 74,
      "strokeWidth": 4
    },
    {
      "id": "point-b",
      "type": "point",
      "x": 180,
      "y": 155,
      "r": 4
    },
    {
      "id": "label-a",
      "type": "point-label",
      "x": 42,
      "y": 161,
      "label": "A"
    },
    {
      "id": "label-b",
      "type": "point-label",
      "x": 184,
      "y": 176,
      "label": "B"
    },
    {
      "id": "label-c",
      "type": "point-label",
      "x": 318,
      "y": 161,
      "label": "C"
    },
    {
      "id": "label-d",
      "type": "point-label",
      "x": 118,
      "y": 66,
      "label": "D"
    },
    {
      "id": "angle-known-arc",
      "type": "angle-arc",
      "cx": 180,
      "cy": 155,
      "r": 48,
      "startAngle": 180,
      "endAngle": 237
    },
    {
      "id": "angle-known-label",
      "type": "text-label",
      "x": 136,
      "y": 132,
      "label": "65°"
    },
    {
      "id": "angle-x-arc",
      "type": "angle-arc",
      "cx": 180,
      "cy": 155,
      "r": 58,
      "startAngle": 237,
      "endAngle": 360
    },
    {
      "id": "angle-x-label",
      "type": "text-label",
      "x": 224,
      "y": 113,
      "label": "x"
    }
  ],
  "accessibleDescription": "A straight line A B C with a ray from B to D. Angle A B D is labelled 65 degrees and the adjacent angle D B C is labelled x.",
  "createdBy": "Maths Unlocked Diagram Studio",
  "reviewStatus": "ready",
  "notes": "Sample Diagram Studio diagram attached to one existing angle question to prove the manual workflow."
}

Opening Maths Unlocked

Preparing the next page…

{ "diagramId": "ds-angle-straight-line-65-x", "title": "Straight line angle with 65 degrees and x", "topic": "geometry", "subtopic": "angles-straight-line-around-point", "diagramType": "angle-straight-line-two-parts", "canvasSize": { "width": 360, "height": 230, "preset": "standard-question" }, "objects": [ { "id": "line-ac", "type": "line-segment", "x1": 54, "y1": 155, "x2": 306, "y2": 155, "strokeWidth": 4 }, { "id": "ray-bd", "type": "ray", "x1": 180, "y1": 155, "x2": 128, "y2": 74, "strokeWidth": 4 }, { "id": "point-b", "type": "point", "x": 180, "y": 155, "r": 4 }, { "id": "label-a", "type": "point-label", "x": 42, "y": 161, "label": "A" }, { "id": "label-b", "type": "point-label", "x": 184, "y": 176, "label": "B" }, { "id": "label-c", "type": "point-label", "x": 318, "y": 161, "label": "C" }, { "id": "label-d", "type": "point-label", "x": 118, "y": 66, "label": "D" }, { "id": "angle-known-arc", "type": "angle-arc", "cx": 180, "cy": 155, "r": 48, "startAngle": 180, "endAngle": 237 }, { "id": "angle-known-label", "type": "text-label", "x": 136, "y": 132, "label": "65°" }, { "id": "angle-x-arc", "type": "angle-arc", "cx": 180, "cy": 155, "r": 58, "startAngle": 237, "endAngle": 360 }, { "id": "angle-x-label", "type": "text-label", "x": 224, "y": 113, "label": "x" } ], "accessibleDescription": "A straight line A B C with a ray from B to D. Angle A B D is labelled 65 degrees and the adjacent angle D B C is labelled x.", "createdBy": "Maths Unlocked Diagram Studio", "reviewStatus": "ready", "notes": "Sample Diagram Studio diagram attached to one existing angle question to prove the manual workflow." }