Free AI Interactive Diagram Prompt Builder

ID

Interactive Diagram Builder

Stage 1 · Configure the learning experience

Standalone configuration tool

1 Diagram & details

2 Components & variables

3 Diagram controls

4 Equation section

5 Student experience

6 Review configuration

Your original diagram is the fixed visual foundation. Controls and animation must respond to its mathematical model.

Step 1 of 6

Upload the confirmed diagram

The uploaded diagram is the visual reference that the interactive version must preserve. Add the information needed to understand how it works.

Diagram file

Choose the original diagram

PNG, JPG, WEBP or SVG image. A clear, high-resolution image is recommended.

No file selected

Diagram title or figure number

What does the diagram show?

How does the process work?

Inputs

Outputs

Known mathematical relationships

The builder does not assume that every visible item can be animated. The later analysis must determine which parts can change and how.

Step 2 of 6

Identify components and variables

List the meaningful parts of the confirmed diagram and the parameters that control them. Add as many as needed.

Important: a variable is not just a label. Its effect must be connected to one or more diagram components through a defined rule or mathematical relationship.

Diagram components

Variables and parameters

Cause-and-effect relationships

Describe what changes when a variable changes. Include indirect or dependent effects.

If a relationship is not known, mark it as needing analysis. Do not invent a scientific rule to make an animation look convincing.

Step 3 of 6

Configure the diagram controls

Choose how students will change parameters and how those changes will be shown on the original diagram.

Variable button placement

Where should variable buttons appear relative to the diagram?

Above the diagram Below the diagram Left of the diagram Right of the diagram Near the related component

Variable button style Compact variable symbol Variable name Symbol and short name Icon and label

Button arrangement Single row with horizontal scroll Multiple rows Vertical stack Adaptive to available space

Slider behaviour

Slider orientation Horizontal Vertical Choose automatically for layout

When should a slider be visible? Only after its variable button is clicked Always visible Show on hover or focus

How many sliders can be open? One at a time Multiple at a time User can switch between modes

Show current numerical value? Yes, beside the slider Yes, above the slider Yes, inside the variable button No

Slider range Use values supplied for each variable Suggest a range for review Use relative range (minimum to maximum)

Show effect of slider change Live, while dragging After releasing the slider After pressing Apply

What should respond on the diagram?

Position / movement Shape / size Angle / direction Arrows / vectors Labels / values Colour / highlighting Path / trajectory Other

Other diagram changes or special instructions

Definitions and explanations

Include definitions of variables? Yes No Only for unfamiliar variables

Definition placement Beside the diagram Above the diagram Below the diagram Tooltip on variable name Expandable information panel

Animation controls

Play / Pause Reset Replay Step forward / backward Progress bar Speed controller

Play button text

Pause button text

Speed control style Dropdown presets Horizontal slider Speed buttons (0.5x, 1x, 2x)

Zoom control style Plus / minus buttons Horizontal zoom slider Plus / minus and fit-to-screen Pinch zoom on touch devices

Include zoom controls Include fullscreen Show rotate-phone hint on mobile when useful

Animation logic

What should happen during the animation?

The animation must be calculated from the selected parameter values. It must not be a fixed decorative animation disconnected from the sliders.

Step 4 of 6

Optional mathematical equation section

This is an independent section. Its controls and sliders will be positioned relative to the equations, not automatically copied from the diagram section.

Include an equation section?

Skip this section if the diagram does not need equations.

Include equations

Equations and layout

Enter equations or formulas

Equation section placement Below the diagram Above the diagram To the right of the diagram To the left of the diagram Separate expandable section

Equation presentation All equations visible Step-by-step reveal One equation at a time Expandable equation cards

Equation variable controls

Where should equation variable buttons appear?

Above equations Below equations Left of equations Right of equations Inline with equation

Equation variable button style Variable symbol only Symbol and name Compact labelled buttons

Slider orientation Horizontal Vertical Automatic

Slider visibility Only after button click Always visible Show on hover or focus

Simultaneous sliders One at a time Multiple at a time User can switch modes

Show current value Beside slider Above slider Inside variable button Do not show

Show units Yes, wherever applicable No Only in final output

Live calculation and output

Replace equation variables with current values Recalculate automatically when values change Show calculation steps Highlight changing terms Display final output Show graph when meaningful Compare before and after values

Output placement Below equations Beside equations Separate output panel Inside the diagram and below equations

Additional equation requirements

Equation variables

Add variables used in the equations. These controls belong to the equation section and may be independent of diagram controls.

Step 5 of 6

Design the student experience

Choose how much guidance the student receives. The goal is to make experimentation intuitive without crowding the diagram.

Target student level Beginner / no prior knowledge School level Higher secondary JEE / competitive examination University level Mixed levels

Explanation depth Simple and concise Step-by-step detailed Scientific and technical Layered: simple first, detail on demand

Learning mode Free exploration Guided step-by-step learning Both: guided first, free exploration after

Interaction guidance Short instructions near controls Tooltips only Guided prompts No instructions

Explain changes when Every time a value changes Student clicks Explain Only during guided mode

Feedback style Explain why an outcome happens Show concise hints Only show numerical feedback No feedback

Optional learning features

Highlight active component Before / after comparison Show dependent variables Show input-output flow Guided experiment Ask student to predict outcome Explain common misconception Reset individual variables

Display and device preferences

Visual theme Clean light mode Soft neutral light mode High contrast light mode Dark mode

Mobile layout Stack controls below diagram Compact controls beside diagram in landscape Switchable portrait and landscape layouts

Diagram space priority Give diagram maximum available space Balanced diagram and controls Keep controls always visible

Accessibility Large touch targets and readable labels Standard controls High contrast and keyboard-friendly controls

Anything else to add?

Step 6 of 6

Review your configuration

Check the collected requirements. You can go back to any step and make changes. Export this configuration to use as the specification for the next stage.

Stage 1 output: This builder prepares the configuration and requirements. It does not yet generate the interactive simulation HTML. The next stage will use this configuration to analyse the diagram and build the working model.

Interactive Diagram Configuration Builder · Stage 1