> For the complete documentation index, see [llms.txt](https://mindengage.gitbook.io/mindengage-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mindengage.gitbook.io/mindengage-docs/common-dialog-boxes/visual-editing.md).

# Visual Editing

MindEngage’s “wizard” flow lets you turn **any highlighted paragraph** into an interactive visual in five clicks.\
The UI is identical for all enrichment builders (Quiz, Code, Diagram, Simulation …); only the modal fields change.\
Below we walk through the **Simulation Builder** example you see in the screenshots.

**In this section we cover two visual creation modes and editing mode**

* Select text and let the model interpret and generate visualization
* Describe the visual and let model generate it
* Edit the generated visuals using prompts

### Generate visual with selected text from lesson

### 1 · Select course + lesson

The two drop-downs at the very top tell the generator **where to save** the asset.

Example:\
Course ▼ → “Applied Machine Learning Made Interactive”\
Lesson ▼ → “Multivariate Linear Regression & Feature Engineering”

### 2 · Highlight text

Inside *Lesson Preview* drag across any sentence or paragraph\
→ the **Visual Simulation Generator** modal opens.

<figure><img src="https://1630048059-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz5vwxN0ZYDFxp9SGEstf%2Fuploads%2FMzPjnDHHFXB2hEybt42W%2Fimage.png?alt=media&amp;token=3baac89f-7532-40f1-a8b7-a3ecde20605c" alt=""><figcaption></figcaption></figure>

### 3 · Fill-in the modal

| Field                   | Purpose                                                                |
| ----------------------- | ---------------------------------------------------------------------- |
| **Prompt** (pre-filled) | This is what the LLM will visualise; tweak wording or add constraints. |
| **Visual Name**         | Shown on files & embeds; keep it short, e.g. *Batch-GD vs SGD*.        |
| **Simulation Type**     | 2-D, 3-D, Physics, ML TensorFlow, etc.                                 |

### 4 · Review the Viz Card

When the server responds MindEngage spawns a floating **Viz Card**:

* **Place Visualization** – enter placement-mode.
* **Edit Prompt** – opens the prompt in a lightweight editor and re-generates “in-place”.
* **Discard** – deletes the asset (nothing is saved).

***

<figure><img src="https://1630048059-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz5vwxN0ZYDFxp9SGEstf%2Fuploads%2FmH9A9w6fcD8UpqWkFu98%2Fimage.png?alt=media&amp;token=c4d9a9b7-a347-4634-aa7f-7ed742c7ce6a" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1630048059-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz5vwxN0ZYDFxp9SGEstf%2Fuploads%2FEJTozkWhTebvg3N903gz%2Fimage.png?alt=media&amp;token=00607325-0ebd-4f8c-9de5-112bb7701968" alt=""><figcaption></figcaption></figure>

### 5 · Placement-mode

A cyan banner appears: *“Click in the preview where you want to insert your visualization.”*\
The next click inside the lesson inserts:

1. a permalink — *Open visualization in new tab*
2. an embedded iframe (`400 px` tall, full-width)

If you change your mind, hit **Esc** to exit placement-mode.

<figure><img src="https://1630048059-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz5vwxN0ZYDFxp9SGEstf%2Fuploads%2FsyrJgGQfr8ypQp3jJRew%2Fimage.png?alt=media&amp;token=458befb8-9349-4724-aa75-bbf80ab14a83" alt=""><figcaption></figcaption></figure>

### 6 · Save or discard

Two sticky buttons appear below the preview:

* **Save Changes** – commits the new HTML.
* **Reset to Last Saved State** – rolls back everything since your last save.

### Generate visual by description

The workflow is same as previous section, except instead of selecting the text form the lesson click "Generate Visual Using Prompt" button.

<figure><img src="https://1630048059-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz5vwxN0ZYDFxp9SGEstf%2Fuploads%2FSIC01h56dG4X0YXbFoZz%2Fimage.png?alt=media&amp;token=0773518c-843b-46ca-bb2f-c975fddd6156" alt=""><figcaption></figcaption></figure>

Describe visual (interactive diagram, simulation...), give the name, simulation type and model and click create.

The remaining steps for placing the visual or editing is similar to previous step.

### Edit visual with prompts

All visual creation pages (diagrams, simulations, quizzes...) has a button "Edit Visual Mode". By clicking this button all the visuals the page supports in the lesson can be selected for editing. Selecting an image shows a dialog box to supply the prompt for editing, change the size or delete it.

<figure><img src="https://1630048059-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz5vwxN0ZYDFxp9SGEstf%2Fuploads%2FxSbdBbLqXv8CnVgCrBnK%2Fimage.png?alt=media&amp;token=e89cbdab-3f06-4aca-8d4c-9cd6df73a6e3" alt=""><figcaption></figcaption></figure>

If you give a prompt for change and click regenerate, the updated visual appears at the top of the lesson window and you can workflow similar to the newly created visual, You will see an options to accept the updated visual,  re-prompt or discard.&#x20;