> 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/diagram-builder.md).

# Diagram Builder

Dialog Builder is the modal that transforms highlighted lesson text into a named, interactive SVG diagram asset with just a few clicks.

The Diagram Builder is a no-code wizard that converts any lesson excerpt into an interactive, self-contained SVG diagram in seconds. Just highlight your text, enter a clear diagram name, select a layout style (node map, state flow or tabbed comparison), and hit **Create**—the builder  crafts clean, inline HTML/SVG with built-in click-to-reveal panels and responsive styling. No external libraries, asset pipelines, or hosting tweaks are required; simply drop the generated snippet into your lesson or web page and give learners an immediate, visually engaging way to navigate your content.

### Workflow

1. Select a **Course** and **Lesson**.
2. Highlight text using mouse from the lesson → **Diagram Builder** modal appears.
3. You may edit the selected content or describe the diagram topic.
4. **Complete the form**:
   * **Diagram Name** – a  name for the simulation asset.
   * **Diagram Type** – choose *diagram type*. See below for description of available types

<figure><img src="https://1630048059-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz5vwxN0ZYDFxp9SGEstf%2Fuploads%2FSlLIxJ97G20AVREZe8gG%2Fmindengage-docs(1).png?alt=media&amp;token=e059ccad-dfc8-430f-9fe4-e7bdecb52bf6" alt=""><figcaption></figcaption></figure>

Press **Create** – a floating **Viz Card** appears. See the [Visual Editing operation](/mindengage-docs/common-dialog-boxes/visual-editing.md) for editing the diagram by re-prompting and placing in the document.

***

<figure><img src="https://1630048059-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz5vwxN0ZYDFxp9SGEstf%2Fuploads%2FAek6DIZwh3kM9gmehxmo%2Fimage.png?alt=media&amp;token=c2441030-579f-40b2-8347-5f973fd3a4a7" alt="" width="563"><figcaption><p>Screenshot of a clickable diagram</p></figcaption></figure>

**Supported Diagram Types**

| Diagram Type       | When to Use                                                                                          | How It Works (Based on Prompt Templates)                                                                                                                                    |
| ------------------ | ---------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Node Diagram**   | • Give learners a bird’s-eye map of a concept. Show how major sections relate at a glance            | Turns every top-level section in the selected lesson text into an SVG “bubble.” Clicking a bubble reveals that section’s details in an info box directly below the graphic. |
| **State Diagram**  | • Illustrate finite-state machines, life-cycles, protocols, or workflow steps with clear transitions | Builds an SVG graph where each state is a labeled circle/box and arrows show valid transitions. Clicking a state displays its explanation beneath the diagram.              |
| **Tabbed Diagram** | • Compare multiple variants (e.g., architectures, before/after views) without crowding one canvas    | Creates one SVG per variant, groups them, and wires buttons or a drop-down to toggle visibility. Only one group is shown at a time, keeping the page uncluttered.           |