Use the draw.io editor with the keyboard

You can reach every part of the draw.io editor with the keyboard: menus, toolbar, shape libraries, drawing canvas, format panel, page tabs, windows such as Layers and dialogs. A ring in the focus colour shows which control in the editor has the keyboard focus.

Move the focus with Tab

Press Tab to move the focus to the next control and Shift+Tab to move it back. The order follows the layout of the editor: the menus and toolbars at the top first, then shape libraries, drawing canvas, format panel and page tabs at the bottom. Open windows, such as Layers or Find/Replace, come after the drawing canvas.

Drawing canvas: When the focus moves onto the drawing canvas, nothing is selected. Pressing Tab to step through the diagram follows the z-order stack from front to back, starting with the top shape in the top layer.

• Each Tab then selects the next shape or connector and steps into containers: from a table to its first row and cell, from a container or list to the first shape in it.
• Shift+Tab steps backwards in containers and tables: from a table cell to its row and then the table, from a shape in a container to the container, from a label to its connector.
• Outside of containers, Shift+Tab selects the previous shape or connector.
• After the last shape or connector, Tab clears the selection, and the next Tab moves the focus on to the format panel.
• When the first shape or connector is selected, Shift+Tab clears the selection and the next Shift+Tab moves the focus back to the shape libraries.

See more shortcuts to select shapes and connectors.

Dialogs: In a dialog, Tab and Shift+Tab stay inside the dialog. From the last control, Tab moves to the first control.

Embedded editor: When draw.io is embedded in another application, for example in Confluence, Tab after the last control and Shift+Tab before the first control move the focus out of the editor.

Move the focus with the arrow keys

Hold Shift and press an arrow key to move the focus to the nearest control in that direction. This works everywhere: in the menus, toolbar, shape libraries, format panel, page tabs, windows and dialogs, and into and out of the drawing canvas.

Where	Shift + arrow keys
Drawing canvas, nothing selected	Move the focus to the nearest control in that direction.
Drawing canvas, shapes selected	Move the selected shapes by the grid size. Press Escape to clear the selection first. Alt + arrow keys (Option + arrow keys in macOS) select the nearest shape or connector in that direction, at the same level: from a table cell the next cell, from a shape on the page a whole table or list.
Into the drawing canvas	Keeps the current selection. Press Shift+Enter to move on to the format panel and Escape to return.
Windows and dialogs	Shift+Left and Shift+Right stay in the row. At the start or end of a row, they move to the previous or next control, for example from the preview in the More Shapes dialog to its buttons.
Text fields	Shift+Left and Shift+Right select text. In text with several lines, all arrow keys stay in the text.

To select shapes and connectors with Shift + arrow keys like you move the focus everywhere else, set shiftArrowSelect in the editor configuration (Extras > Configuration). Shift + arrow keys then select the nearest shape or connector in that direction and move the focus out of the drawing canvas if there is none, and Alt + arrow keys (Option + arrow keys on macOS) will then move the selected shapes by the grid size.

When you move or resize shapes with the arrow keys, guides show when shapes are aligned or spaced evenly, as if you were using the mouse to diagram. Note that the arrow keys move by exact steps and may not snap to the guides.

The arrow keys without Shift move the focus in the menu bar, the toolbars and the page tabs. Arrow keys also scroll parts of the editor that scroll, such as the shape libraries, the format panel and the content of windows and dialogs. Text fields, lists and number fields use arrow keys as normal.

Shortcuts that move the focus

Shortcut	Action
Escape	Move the focus back to the drawing canvas, and close the window that has the focus. Close a menu or a dialog. On the drawing canvas, stop editing a label, cancel a move or close a menu or tooltip, or, if there is nothing to stop or close, clear the selection.
/	Move the focus from the drawing canvas to the shape search.
Shift+Enter	Move the focus to the format panel: the Style, Text or Arrange tab of the selection, or the Diagram tab if nothing is selected. On a shape in a tree, Shift+Enter adds a sibling before the shape instead.
Shift+F10 or the Menu key	Open the context menu of the selection, or of the drawing canvas if nothing is selected.
Ctrl+Enter on Windows, Cmd+Enter on macOS	Open the shape picker if nothing is selected. With a selection, this duplicates the selected shapes.

Use controls with the keyboard

Buttons: Press Enter or Space to click the focused button. This works for the toolbar, format panel, page tabs, buttons in the title of a shape library and in windows, and messages in the status, such as Unsaved changes. Click here to save.

Menus: In the menu bar, press Enter, Space or Down to open a menu and move the focus to its first item, or Up for its last item. In a menu:

• Up and Down move between the items. Home and End move to the first and last item. In the Help menu, the Search field comes before the first item: Down in the field moves to the first item and Up to the last.
• Right opens a submenu. Left closes it. In the menu bar, Left and Right open the previous or next menu.
• Enter or Space selects the item. A letter moves to the next item that starts with it.
• Escape closes the menu. Tab, Shift+Left and Shift+Right close the menu and move the focus on from the button that opened it.

Shape libraries: Press Enter or Space on the title of a library to open or close it. Use Shift and the arrow keys to move between the shapes. Press Enter or Space to insert the focused shape into the diagram.

Page tabs: Press Enter on a page tab to show the page. The current page has a menu button next to its name: press Enter on it to open the page menu, for example to duplicate, rename or delete the page.

Format panel: Press Enter on the Style, Text or Arrange tab to show it. In a number field with arrow buttons, Up and Down increase and decrease the value. The focus stays on a button after you click it, for example on To Front.

Lists in windows and dialogs: Step through the Layers and Tags lists and the colours in the colour palette with Tab. Use the arrow keys to move between the items and their buttons, Home and End for the first and last item, and Enter or Space to click. In the colour palette, Shift + arrow keys also move to the nearest colour.

Library dialog: Step through each shape and its delete button in any dialog that edits a shape library, such as the scratchpad with Tab. Press Enter to rename the shape, Space to select it, and Delete or Backspace to delete it.

Explore a diagram with the keyboard

In the Explore viewer, Tab steps through the buttons and onto the diagram. On the diagram, use the arrow keys to highlight the nearest shape in that direction and Enter to move that shape to the centre. Backspace or Alt+Left (Option+Left on macOS) steps backwards. See how to explore a diagram.

Related

• Print the keyboard shortcuts reference.
• See how to select shapes and connectors with keyboard shortcuts
• Explore a diagram interactively