Model types
UI Mockups
A UI Mockup is a low-fidelity sketch of a screen, built by dragging widgets onto a device frame. It is deliberately not a design tool: there are no colors, no fonts and no spacing controls, because the point is to say what is on the screen and roughly where, not what it will look like when it ships.
Mockups exist mainly to be placed into other models. When an EventStorming flow says a user submits an order, the mockup shows the screen they submit it from, right there in the lane.
UI Mockups require a Pro or Enterprise plan.
Creating a mockup
Mockups have their own compartment under each Domain on the dashboard, below Published Languages. Click the + button on that compartment, type a name, and press Enter.
You can move the compartment above the model list with Show above models in its menu, if mockups are what you reach for most.
Choosing the kind
The first time you open a new mockup it asks what kind of screen it is. This sets the canvas size and the outer chrome, and it is the first design decision you make rather than a form field on the way in.
- Browser: a browser window with an address bar. The most common choice, since most mockups are of web UIs.
- Mobile: a phone screen, portrait, with a status bar showing the time, 5G, signal and battery.
- Desktop: an application window with a title bar.
- Terminal: a console with a shell prompt. See Terminal mockups below.
- Bare: no chrome at all, for a dialog or a fragment of a larger screen.
You can change the kind later from the properties panel. It is not locked in.
The widget palette
Widgets are added by dragging one from the palette onto the frame, or by clicking it to drop one in the corner. The palette and the properties panel share the left sidebar, with a splitter between them you can drag to give either more room.
| Widget | What it is |
|---|---|
| Window | A primary or child application window. |
| Dialog | A focused sub-task on top of a window. |
| Panel | A group box, for gathering related controls. |
| Tabs | A tabbed notebook. |
| Label | Static text. |
| Text Input | A single-line entry field. |
| Text Area | A multi-line entry field. |
| Select | A drop-down. |
| List | A list box, with one item shown selected. |
| Checkbox | A check box, checked or not. |
| Radio | A radio button, selected or not. |
| Button | A push button. |
| Table | Named columns over placeholder rows. |
| Icon | Any icon from the standard icon set. |
| Console | Lines of terminal output. See Terminal mockups. |
Everything snaps to a grid, so a mockup stays tidy without you aligning anything by hand.
Containers
Window, Dialog, Panel and Tabs are containers. Dropping a widget onto one makes the widget belong to it, which means:
- Moving the container moves everything inside it.
- Deleting the container deletes its contents too.
- The deepest container wins. Dropping onto a Panel that sits on a Window nests inside the Panel.
Editing a widget
Select a widget and the properties panel shows what can be changed about it: its Text, and whatever else that kind of widget has: the form a Window takes, whether a Checkbox is checked, the tabs on a notebook, the columns and row count of a Table, which item of a List is selected, or which icon an Icon shows.
There is no color, font or spacing control anywhere, and that is on purpose.
The frame
With nothing selected, the properties panel edits the mockup itself rather than a widget:
- Kind: Browser, Mobile, Desktop, Terminal or Bare.
- Width and height: frames are resizable, and the sizes above are only what a new mockup opens at. A mockup bound for an EventStorming lane needs to be small, so this matters more than it sounds.
- Zoom: 1×, 2× or 3×.
Zoom magnifies the drawing without changing its size. It is the same idea as the zoom control in other model editors: the same frame, the same widgets in the same places, drawn larger. Use it when a mockup needs to be legible inside a model. If a magnified mockup then takes too much room, reduce the width and height.
As the frame gets smaller its chrome shrinks with it, so a small Browser does not spend a quarter of its height on an address bar.
Terminal mockups
A Terminal mockup is a console: a prompt, typed commands, and output. It opens with a Console widget already in it, so it is a working terminal the moment you choose it.
Terminal frames have two extra properties:
- Columns and rows instead of width and height, because 80×24 is how a terminal is described. The size shows in the title bar.
- Shell, which picks the prompt and names the title bar:
| Shell | Prompt | Title bar |
|---|---|---|
| Linux / macOS | user@host:~$ |
bash |
| Windows Cmd | C:\Users\you> |
Command Prompt |
| PowerShell | PS C:\Users\you> |
Windows PowerShell |
The Console widget's lines are edited as plain text in the properties panel, one line per line, so the easiest way to build one is to run the real thing and paste what it printed. A + prompt button adds a fresh prompt line. Lines that look like a command render bright and output renders dimmer, the way a real terminal separates the two, and a block cursor sits at the end of the last line.
A Terminal frame is always dark, in both light and dark themes, because that is how a terminal is recognized at a glance.
The Console widget is not limited to Terminal frames. A Console inside a Desktop frame is an IDE with a terminal panel; inside a Browser frame it is a web shell like Codespaces or CloudShell.
Working on the canvas
- Left drag on empty canvas draws a selection box. Right drag pans the view.
- Shift adds to the selection.
- Delete or Backspace removes the selection, and its contents if it is a container.
- Undo, Redo, Cut, Copy and Paste are on the toolbar and on their usual shortcuts. See Keyboard shortcuts.
- The zoom controls sit bottom-right, with fit, center and a minimap on hover, exactly as in every other editor.
Download SVG on the toolbar saves the mockup as a scalable image, for a slide or a document.
Placing a mockup in a model
This is what mockups are for. EventStorming, Flow and Ports & Adapters models all carry a UI Mockup tool. Choose it, pick a mockup by name from the list, and it is placed as a step in the flow.
A placed mockup:
- Draws the real thing, not a placeholder. It follows the model's light or dark theme.
- Connects like any other node, with edges from and to all four sides. The connection points appear when you hover over it or bring an edge near.
- Keeps its shape when you resize it, so a Mobile mockup stays tall and narrow.
Keeping it up to date
A placed mockup is a snapshot, so editing the mockup does not silently rewrite every model it appears in. When the original has changed, the placed copy offers a sync button that pulls the current version in. The model's author decides when the picture changes.
Syncing keeps the size you gave the node and only corrects its proportions, so a lane you laid out deliberately is not rearranged by someone else's edit. Raising a mockup's zoom enlarges it wherever it is placed next; a node already sized in a model keeps the size it was given.
If the original mockup has been deleted, the placed copy says so and offers to recreate or unlink it rather than leaving a dead node.
Managing mockups
Each row in the Mockups compartment has a menu with Edit, Duplicate, Export, Share and Delete, the same actions every other model row carries. Sharing and access work exactly as they do for any model. See Sharing and access.
Renaming from Edit updates the name everywhere, including the frame's title bar.