Choose a different diagrams.net UI theme

diagrams.net 13 Apr 2021

Share:

You can customise the diagrams.net editor and choose your preferred theme for the user interface. The UI theme control which editor elements are displayed, minimised or hidden, including the menu, toolbar, panels and dialog boxes.

There are four different themes to choose from, with a fifth currently under development.

Change the editor theme via the diagrams.net menu

  1. Select File > Extras in the diagrams.net menu.
  2. Choose Kennedy, Minimal, Atlas, or Dark. To use the new Sketch style, see the description below.
  3. Reload the diagrams.net editor to start using your select UI theme.

Please visit Github to leave feedback about the sketch and minimal UI themes and help guide their development.

Tip: If you are new to diagramming, read the introduction to the diagrams.net editor that looks at all the various important elements.

Kennedy

The Kennedy UI theme, named after the Google UI, is the default style for diagrams.net, and shows the menu, toolbar, file name, language selector, fixed panels either side and diagram pages below the drawing canvas.
Choose your favourite UI theme in diagrams.net from Kennedy, Atlas, Dark, Minimal and Sketch
Start using diagrams.net with the Kennedy theme

Atlas

If you are used to using the draw.io apps on Atlassian Confluence or Jira, and would prefer to keep using that interface at diagrams.net.

The Atlas UI theme does not show the diagram’s filename or the Share button, but the rest of the editor elements are displayed in roughly the same positions.
Choose your favourite UI theme in diagrams.net from Kennedy, Atlas, Dark, Minimal and Sketch
Start using diagrams.net with the Atlas theme

Dark

If you prefer to work on a dark background with light outlines and text, or if you are creating an infographic that will be printed on a dark background, the Dark UI theme is for you - it’s a mostly inverted version of the default Kennedy theme.

When using the Dark theme

  • Sharing diagrams: You may need to change the text label and shape/connector colours to be readable if you plan to share your diagrams with colleagues who use a light UI theme.
  • Exporting diagrams: Also, make sure you set the background of your diagram to transparent before you export it to a PDF or image format, or it will have a black background.

Choose your favourite UI theme in diagrams.net from Kennedy, Atlas, Dark, Minimal and Sketch
Start using diagrams.net with the Dark theme

Minimal

If you are diagramming on a tablet or a mobile device, the Minimal theme allows you to collapse the panels around the drawing canvas for less ‘clutter’.

When using the Minimal theme

  • The menu is minimised to the Diagram tool on the toolbar, panels can be toggled on and off as you need, or minimised to their titles to make room for more drawing.
  • The panels are floating in the Minimal theme, you can drag them to a new position over the drawing canvas.
  • Select Diagram > Preferences > Theme when using the Minimal UI theme to change to another one, then refresh the page.

If you are new to diagramming and feel overwhelmed with the number of tools displayed in a diagram editor, you may find the Minimal theme easier to use.
Choose your favourite UI theme in diagrams.net from Kennedy, Atlas, Dark, Minimal and Sketch
Start using diagrams.net with the Minimal theme

Sketch

If you prefer minimal tools and the rough style enabled by default, like you would in a whiteboarding app, the new Sketch UI style is for you.

Sketch may also be a useful theme for introducing younger children to diagramming or supporting them as they add diagrams to their documents and in Google Classroom with the Google Drive add-in.

As this theme is currently being developed, to use it, go to sketch.diagrams.net
Sketch theme is currently being developed
Open this tutorial in the new Sketch theme at diagrams.net
Tip: Resize your browser to line everything up with the tutorial.

Follow us on GitHub, Twitter, Facebook, YouTube.

Share: