overview

draw.io has several websites:

https://www.drawio.com is the main website
https://www.drawio-app.com is the website for draw.io for Atlassian Jira/Confluence
https://www.diagrams.net is a legacy website that redirects to drawio.com

canvas

Action	Keystrokes
Grid (toggle)	`Ctrl` + `Shift` + `G`
Move drawing area	`Space` + drag mouse
Zoom	`Alt` + scroll wheel

connectors

Action	Keystrokes
Clone connectors	`Ctrl` + Select connector’s endpoint + Drag
Connect to a point within the shape	Drag > hold `Alt` > Release mouse button at destination
Add another Waypoint to connector	Right-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.

Action	Keystrokes
Create floating connection	Start a connection > Drag to inside of target shape
Create fixed connection	Start a connection > Drag to green circle or green frame of target shape
Change from floating to fixed connection	Drag 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.

Action	Keystrokes
Add a layer	View > Layers > ➕
Duplicate layers	View > Layers > Select layer > Duplicate
Disable editing for all shapes on this layer	View > Layers > 🔒
Move shapes between layers	Select the shapes > ⋯ > Move Selection
Show/hide all shapes on this layer	View > 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:

Right-click a shape > Edit Data
In the ID field, enter a property name > Add property
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:

Right-click shape > Edit > Edit Data
In the ID field, enter a property name > Add Property
In the property’s field, enter a value > check Placeholders > Apply
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:

Make sure nothing is selected
Diagram > Edit Data
Enter a property name > Add Property
In the property’s field, enter a value > Apply
Select the shape that should use the property > Edit > Edit Data > check Placeholders
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:

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

selecting

Action	Keystrokes
Select all connectors	`Ctrl` + `Shift` + `E`
Select all shapes	`Ctrl` + `Shift` + `I`
Select next/previous shape	`Tab` or `Shift` + `Tab`
Select parent Shape	`Shift` + `Alt` + `P`
Select shape/connector underneath	Hold `Alt` + Click on shape to select next lower shape
Select all intersecting shapes (not juse those fully in selection box)	`Alt` + Drag

shapes

Action	Keystrokes
Aligning	Select multiple shapes > Format panel > Arrange > Align
Clone shape with connectors	Select shape > `Alt` + `Shift` + `Arrow`
Change shape after cloning	Release `Alt` > Click new shape
Copy style of one shape to another	Style tab > Copy Style and Paste Style
Flip shapes	Select shape > Format panel » Arrange tab > Flip
Group Shapes	`Ctrl` + `G`
Ungroup Shapes	`Ctrl` + `Shift` + `U`
Replace shape	Drag new shape over existing until the blue/black conversion symbol is shown
Replace multiple shapes	Select all shapes to be replaced > Drag new shape over one of the shapes
Insert a new connected shape	Hover over the shape > Click blue arrow > Select new shape
Delete a shape and the connected leading to it	`Ctrl` + `Backspace`
Add a hyperlink to a Shape > Right-click	Edit Link > Web Link

swimlane diagrams

Action	Keystrokes
Add a swimlane	Hover over the last lane > Click the blue arrow
Move a swimlane to another position	Drag the swimlane slightly to the right > Hold `Alt` > Drag to desired location
Select the entire pool	Click a lane > Click again