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 |
Change from floating to fixed connection | Drag connection away from shape a bit > Select it again > Drag until |
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 |