A modern and streamlined interface for draw.io
The draw.io editor is being freshened up to match the new Google Drive user interface with a modernised and streamlined user interface. All the drawing editor tools are in the same locations around the drawing canvas, so your workflow will not be disrupted.
Edges and buttons have been rounded, fonts updated, colours softened, related menu items grouped together, and every aspect styled uniformly to match the current UI standards for modern web applications.
This new streamlined design with fewer obvious separators in the header, panels and tabs, and improved text and shape library contrast ensures the draw.io editor is easier to use in high-contrast mode, whether you prefer to work in dark or light mode.
The new user interface in the first image above has fewer distracting separating lines in high contrast mode. The older interface in the second image is more cluttered with superfluous separators.
It’s not just a visual refresh - the buttons and controls in the draw.io user interface have been optimised to be more responsive, and the codebase has been reworked to improve the editor’s efficiency, especially on mobile devices, and allow for future improvements and feature updates.
Switch between modes and editor themes
Although the refreshed UI is easiest to see in Classic and Simple, the three other draw.io editor themes - Minimal, Sketch and Atlas - have also been updated with contrast improvements and modernised dialog elements.
The mode switch icon (sun/moon) for dark/light modes and the classic/simple editor layout that was previously in the top right of the editor has been moved into the menu for all themes.
- Appearance submenu: automatic, dark, light and high contrast modes
- Themes submenu: automatic, Classic, Simple, Minimal, Sketch, and Atlas themes
These submenus are accessed slightly differently in each editor theme.
Simple: Click ... in the toolbar and select Settings.
Classic and Atlas: Select the Extras menu.
Minimal: Select Diagram > Settings from the toolbar.
Sketch: Select the triple horizontal bar in the top left, then select Settings.
Work with multi-page diagrams
In Atlas, Classic and Simple themes with the refreshed user interface, the + to add a new diagram page has moved to the bottom left of the editor.
The diagram page tools in the Minimal and Sketch editor themes are unaltered.
Click on the horizontal lines to see a list of all pages in the diagram (if there are too many to fit) and work with the current page directly, or right click on any page tab at the bottom of the editor to rename, duplicate, move and delete it.
Learn more about working with multi-page diagrams in draw.io