Draw diagrams on a touch screen

diagrams.net 06 Apr 2022

Share:

It is easy to diagram on a tablet or any other device with a touch screen because diagrams.net is a web application. Point your browser to app.diagrams.net, select where you want to save your diagram file, and start diagramming.

Simple touch whiteboard

The Sketch diagram editor theme is ideal for diagramming on the smaller touch screens of mobile devices.

You can minimise the panels you aren’t using to gain additional drawing space. If a panel is in the way, drag it to another position in the diagram editor.
Move the floating panels around the drawing canvas and minimise them for more space when using diagrams.net on a tablet

The default more complex editor themes - with the menu, top toolbar and fixed panels - are still easy to use on larger tablets and notebooks with touch screens.
The default diagrams.net editor theme works well on larger touch screens

Touch shortcuts for diagramming on a tablet

While almost all features work just as well with a finger or pen as they do with a mouse, there are a few gesture shortcuts specific to touch screens.

The round highlights in the following tutorials show finger movements on an iOS touch screen. The gestures work similarly on other touch devices.

Open the shape selector: Double tap on a blank area to get the shape selection box and tap on a shape to add it to the drawing canvas.

Type a label: Double tap on the shape or connector to open the on-screen keyboard.
Double tap to open a shape selector, double tap on a shape to add a label, and tap on a direction arrow to add a new shape and connect it

Add a shape: Tap on a shape to select it, then tap on one of the direction arrows and select a shape to add it in that direction. The newly added shape will be connected automatically.

You can also tap on a shape in the shape library, or drag one from the shape library to the drawing canvas, just as you would with a mouse.

Zoom in and out: Pinch to zoom out, and spread two fingers on the touch screen to zoom in, just as you would when editing a photograph. You can also tap on the tools in the toolbar at the bottom right of the screen.
Pinch and spread fingers to zoom in and out on a touch screen in diagrams.net

Move the drawing canvas: Tap and drag on a blank area of the drawing canvas to move to another position. Alternatively, use two fingers to drag the canvas as you zoom in and out.

Rubberband selection: Long tap on a blank area of the drawing canvas, then drag a selection box - a rubberband - around a group of shapes.

Style shapes and connectors: Tap on a shape to select it, or use the rubberband selection to select multiple shapes, then use the tools in the format panel to add colours and styles.
Long tap and drag to select multiple shapes, and style them with the format panel

Right-click context menu: Tap on a blank area of the canvas to open the context menu for the page. Tap on a shape or connector to select it, pause slightly, then tap again to open the context menu.

If you tap twice too quickly (double tap), you’ll start editing the label instead.
Tap on a shape, pause, then tap again to open the context menu on a touch screen when using diagrams.net

Draw connectors: Tap and drag a connector from one of the direction arrows and release it over another shape to connect them.

When you attach a connector, a blue outline on the target shape indicates a floating connector, a green outline indicates a fixed connector. Floating and fixed connectors can also be attached to freehand shapes.
Tap and drag a connector from the direction arrows on one shape and release over another shape to connect the two

Tap and drag the middle of a connector to change its path. Waypoints will be added and removed automatically as you drag it to a new position.

Double tap on a connector to add a label.

Use the freehand brush

In the Sketch editor theme, tap on the freehand tool to open the floating dialog. If using the other editor themes, tap on Arrange > Insert > Freehand in the menus above the drawing canvas.

The freehand brush can draw different line widths. Click the Brush checkbox and move the slider to the width you want to use.
Use the freehand drawing tool in a draw.io Board diagram to markup diagrams or draw shapes with your mouse

The freehand tool works with a mouse or on a touchpad. Plus, it feels very natural with a pen when drawing on a tablet in diagrams.net.

Learn how to edit and style your freehand shapes

Prefer to work on a dark background?

Use dark mode with the Sketch editor theme: When you are using the Sketch whiteboard-like editor theme, tap on the menu icon then tap on Preferences > Dark to toggle dark mode on or off.
Tap and drag a connector from the direction arrows on one shape and release over another shape to connect the two

If you want to continue using a more complex editor theme, tap on Extras > Theme > Dark and reload the browser tab.

Note: When using diagrams.net from your home screen (below), close the application first, then reopen it from your home screen to use the new editor theme.

Add diagrams.net to the home screen

To open the diagrams.net web app faster, add a shortcut to the web application on your home screen on your mobile device.

  1. Go to app.diagrams.net, tap on the share button, then tap on Add to home screen. For example on iOS:
    Tap share and Add to home screen to add the diagrams.net web app shortcut to your mobile device
  2. If you are asked, confirm that you want to add it to your home screen.
    Add diagrams.net as a web app to your home screen on iOS and Android mobile devices

Follow us on GitHub, Twitter, Facebook, Discord.

Share: