livediagram works on a phone right in your browser, with no app to install. The editor automatically switches to a touch-friendly layout on a phone-sized screen (narrower than 640 pixels, or a touch screen shorter than 500 pixels, so a phone held sideways counts too) so the canvas stays the star and everything is reachable with a thumb. It is great for viewing a diagram, making quick edits, and joining a live session on the go.
A layout built for touch
On a phone the editor keeps the same layout as on a computer, fitted to the width. Along the top, a small card holds the menu button (for the Explorer; a tab's mode is chosen on its start, see Editor Modes), and beside it the palette's strip: the selection mode, the categories as icons (swipe them sideways for the rest), and Search at the end. Tap a category to open its elements across the width of the screen. Layers (and Collaborate, once the tab has a comment or an action) open as pop-overs above their buttons in the bottom-right corner, and the tabs and quick controls run along the bottom.
A few panels are simplified to fit: they stay where they are rather than being dragged around (they start collapsed; tap a panel's header to expand or collapse it), the Map is hidden, and the zoom controls' − and + buttons give way to a single Fit button, since you pinch to zoom.
Held sideways
Turn your phone sideways and the screen gets short, so the header along the top and the tabs along the bottom fold away and the canvas fills the screen. The palette strip, Undo and Redo, Layers and Fit stay where they are. The menu button and the Explorer go away completely, as there is no room for them; turn the phone upright to use them. To reach Share, the document's name or your tabs, tap the small arrow button in the top-right corner, Show Header and Tabs: both bars come back, and the same button (Hide Header and Tabs) folds them away again. Turn the phone upright and they are back as usual.
Held upright, an empty tab opens zoomed out a little (to 60%) and a tab with content opens fitted to it, so you land on a useful overview of the canvas, and when you add a new element it slides into view automatically.
Touch gestures
Your fingers do the work a mouse would on a computer:
- Pinch with two fingers to zoom in and out.
- Double-tap empty canvas to zoom in on that spot. It moves to the middle of the screen at twice the zoom (at least 100%), so a small view becomes readable in one go. Double-tap again to zoom back out to the whole tab, then double-tap wherever you want to go next.
- Double-tap an element to edit it. If it is too small on your screen to work on, the first double-tap zooms in on it so you can see it properly; double-tap it again to edit.
- Drag empty canvas to move around: a phone starts on the Hand tool.
- Tap to select, and drag an element to move it.
- Press and hold an element for half a second (a long press) to open its menu, the touch version of a right-click. On a phone menus open as a sheet from the bottom of the screen; drag it down to close it.
- Press and hold a button that shows only an icon to see its name. Letting go does not press it.
To select several elements, switch the selection mode to Select: then dragging across empty canvas draws a selection box.
Drag handles (an arrow's ends, for instance) have a little extra invisible padding on touch, so they are easier to hit accurately with a fingertip.
What works differently on a phone
A phone has a small screen, no mouse pointer and usually no keyboard, so a few things are not available or work differently:
- Spotlight and the Slide Deck (the presenting tools) are reserved for larger screens.
- The Map and UI Scale are desktop only.
- Quick Style (the small style panel beside a selection) does not show on a phone; every style is still in the element's menu.
- Keyboard shortcuts need a keyboard: with none, use the palette and the on-screen controls, which do everything the shortcuts do. Pair a keyboard and they work as on a computer, as do held-key moves like Shift to keep proportions.
- Hover previews (styles previewing as you rest on them) need a hovering pointer, so on touch a tap simply applies the change.
Was this article helpful?