Editor Tour

Every toolbar, overlay, panel, and shortcut in the DAI Studio editor — where everything lives and what it does.

The editor is a single browser page: top bar above, tool palette on the left, canvas in the middle with a zoom navigator in its corner, panels on the right, status bar at the bottom. Everything saves automatically as you work.

Top bar

Overlays open over the canvas. Close one with its ✕, by clicking its button again, or with Esc.

Visitors opening someone else’s public document get a Read only badge and a ⊕ Fork Me Now button that copies the document into their own account. They can still use Copy for AI and the Document overlay’s Export section; Types and Skills are disabled. See Sharing & Visibility.

Types overlay

Every element type you can place, organised as views → categories → groups:

• Domains — the free core vocabulary: Workflow (BPMN), AI/ML, Business, Product, Software
• Cloud — Generic, AWS, Azure, Google Cloud, and Cloudflare services (one-time unlock)
• Open Source — hundreds of open-source projects across 17 categories (one-time unlock)
• Other — anything else, such as your own types

Type in Search types… to filter across every view; ↑ / ↓ step through categories. Hover a tile to read its description. Press a tile and the overlay closes, leaving the new element under your pointer — click or release to drop it on the canvas or into a container.

Locked views show 🔒 and an Unlock button; see Accounts & Documents. Types are explained in Choosing Element Types and the Element Types reference.

Skills overlay

A searchable catalog of published agent skills, sorted by popularity, with publishers listed down the left side. Drag a skill onto the canvas to create an AI/ML Skill element pre-filled with its name, ID, source, page link, and install command. The ↗ link opens the skill’s page.

Document overlay

Visitors see only the Export section.

Left palette

Click a tool again (or press Esc) to turn it off. Below the tools are three shapes you can drag straight onto the canvas: Start, End, and Task. Everything else comes from the Types overlay.

Canvas

Selecting. Click to select; Shift-click to add or remove an element. Shift-drag on empty canvas, or the Lasso tool, selects an area. ⌘A selects everything; Esc clears the selection.

Moving around. Drag on empty canvas to pan (the middle mouse button works too). Scroll to move the view; ⌘-scroll or pinch to zoom around the pointer. ⌘ + arrow keys pan the view, in larger steps with Shift.

Moving and resizing. Drag to move; arrow keys nudge the selection by 1px, or 10px with Shift. A selected shape has eight resize handles. Alignment guides appear and shapes snap to their neighbours’ edges and centres while you move or resize — hold ⌘ to move or resize freely.

Labels. Double-click an element, or press E, to edit its name in place. Enter saves, Shift+Enter adds a line break, Esc cancels.

The action menu. A selected element shows a small menu beside it:

• Add end event, Add task, Add note — click to add a connected element, or drag one out to place it
• Link to another element — click it, or drag out of it, to draw a connection
• Change type (T) — opens the type picker
• Clean up layout — on containers: lines children up on an even grid and fits the container around them
• Delete

With several elements selected the menu offers Change type of N elements and Delete N elements.

Connections. Select a connection to edit it: drag an end handle onto another element to reconnect it, drag bend points, or slide a segment. Handles snap to the centres of element sides; hold ⌘ to place them freely. Connections have no action menu — press Delete to remove one.

Containers. Drop elements onto a Task — or any typed element — and it becomes a container; remove its last child and it becomes a plain element again. A container keeps its size: content that extends past its border is clipped rather than growing the container. See Structuring with Nested Groups.

Copy and paste. ⌘C copies the selection to the clipboard as a self-contained .dai fragment. ⌘V pastes .dai XML from anywhere — another document, another browser tab, or a model’s output — and the pasted elements follow your pointer until you click to place them.

The type picker. Press T, or click ⇋ in the action menu or the Properties panel header, to change the type of the selected element — or of every selected element at once. Type to search, ← / → to step through categories, ↑ / ↓ and Enter to choose. Values the new type shares are kept; values it doesn’t have are cleared.

Zoom navigator

The card in the bottom-left corner of the canvas shows a map of the whole diagram. Drag the highlighted box to pan, click anywhere on the map to jump there, and use the slider to zoom from 20% to 400%.

Right panels

The activity bar on the right edge toggles five panels:

If a document uses a type this editor doesn’t have, the element is drawn grey with a dashed outline and the Properties panel shows its values read-only. They are saved unchanged.

Status bar

The document name at bottom-left is also a rename button — clicking it opens the rename dialog (renaming changes the document URL; see Accounts & Documents). Next to it, the save indicator cycles through Saved, Saving…, Unsaved, and Save failed — check connection.

Model pickers

Fields that name an AI model — the Model field on an Agent, a Prompt, or an AI/ML Model element — are dropdowns fed from the live model list at dai.studio/api/models, grouped by provider. The choice is recorded in the file and read by whatever model executes it.

Keyboard shortcuts

On Windows and Linux, use Ctrl in place of ⌘.

Read a page from the Reference to see what every element and attribute in the file means.