overview

draw.io has several websites:

canvas

ActionKeystrokes
Grid (toggle)Ctrl + Shift + G
Move drawing areaSpace + drag mouse
ZoomAlt + scroll wheel

connectors

ActionKeystrokes
Clone connectorsCtrl + Select connector’s endpoint + Drag
Connect to a point within the shapeDrag > hold Alt > Release mouse button at destination
Add another Waypoint to connectorRight-click connector > Add Waypoint

connections

Floating connections connect to the frame of a shape. This is the default when creating new connectors. When a shape with a floating connection is moved, the connection relocates and the line is kept simple.

Fixed connections connect to a specific point on a shape.

ActionKeystrokes
Create floating connectionStart a connection > Drag to inside of target shape
Create fixed connectionStart a connection > Drag to green circle or green frame of target shape
Change from floating to fixed connectionDrag connection away from shape a bit > Select it again > Drag until green circle or frame appears around shape

layers

The default layer is “Background.” It is always visible. The order of layers affects some shape and connector effects:

  • Line jumps only work for the layer on top.

layer panel

When a shape is selected, the layer it is on is indicated by a black dot in the layer panel.

ActionKeystrokes
Add a layerView > Layers > ➕
Duplicate layersView > Layers > Select layer > Duplicate
Disable editing for all shapes on this layerView > Layers > 🔒
Move shapes between layersSelect the shapes > ⋯ > Move Selection
Show/hide all shapes on this layerView > Layers > 👁

Properties & Placeholders

properties

Properties are metadata associated with a shape or a diagram. They can provide extra information about shapes on hover.

To associate a property with a shape:

  1. Right-click a shape > Edit Data
  2. In the ID field, enter a property name > Add property
  3. In the property’s field, enter a value > Apply

Hover over the shape to see the result.

special properties

  • tooltip: If this property is defined, only its text will be displayed on hover (and no other properties).
  • placeholder: Changes the shape’s label into a placeholder. More information.

placeholders

Placeholders are properties that act as variables. They can used in shape labels and other text fields to show the value of the custom property.

local

Local placeholders apply to a single shape.

Create and use a custom local placeholders:

  1. Right-click shape > Edit > Edit Data
  2. In the ID field, enter a property name > Add Property
  3. In the property’s field, enter a value > check Placeholders > Apply
  4. In the text field of the shape, enter %placeholder%

global

Global placeholders apply to all shapes in the diagram.

Create and use a custom global placeholders:

  1. Make sure nothing is selected
  2. Diagram > Edit Data
  3. Enter a property name > Add Property
  4. In the property’s field, enter a value > Apply
  5. Select the shape that should use the property > Edit > Edit Data > check Placeholders
  6. In the shape, type %placeholder% where placeholder is the name of the property to use

predefined

There are several predefined placeholders: https://www.drawio.com/doc/faq/predefined-placeholders

Use predefined placeholders:

  1. Right-click a shape > Edit Data > check Placeholders
  2. Enter the placeholder to use (such as %date{yyyy-mm-dd}%) in the shape’s label or text field

selecting

ActionKeystrokes
Select all connectorsCtrl + Shift + E
Select all shapesCtrl + Shift + I
Select next/previous shapeTab or Shift + Tab
Select parent ShapeShift + Alt + P
Select shape/connector underneathHold Alt + Click on shape to select next lower shape
Select all intersecting shapes (not juse those fully in selection box)Alt + Drag

shapes

ActionKeystrokes
AligningSelect multiple shapes > Format panel > Arrange > Align
Clone shape with connectorsSelect shape > Alt + Shift + Arrow
Change shape after cloningRelease Alt > Click new shape
Copy style of one shape to anotherStyle tab > Copy Style and Paste Style
Flip shapesSelect shape > Format panel » Arrange tab > Flip
Group ShapesCtrl + G
Ungroup ShapesCtrl + Shift + U
Replace shapeDrag new shape over existing until the blue/black conversion symbol is shown
Replace multiple shapesSelect all shapes to be replaced > Drag new shape over one of the shapes
Insert a new connected shapeHover over the shape > Click blue arrow > Select new shape
Delete a shape and the connected leading to itCtrl + Backspace
Add a hyperlink to a Shape > Right-clickEdit Link > Web Link

swimlane diagrams

ActionKeystrokes
Add a swimlaneHover over the last lane > Click the blue arrow
Move a swimlane to another positionDrag the swimlane slightly to the right > Hold Alt > Drag to desired location
Select the entire poolClick a lane > Click again