Skip to main content

The draw.io configuration dialog

· 5 min read
draw.io Team
draw.io Team

While you could always configure draw.io via a JSON script, there is now a configuration dilaog where you can set each of the options via checkboxes and list selectors. That makes it easier to configure the draw.io editor if you are not comfortable with JavaScript Object Notation (JSON).
Access the draw.io configuration via Extras - Configuration

  1. Select Settings > Configuration from the draw.io menu, or Extras > Configuraion if you are using the Classic or Atlas editor theme.
    Access the draw.io configuration via Extras - Configuration
  2. While on the Editor tab, click on the toggle switches, enter values, select options from the drop down lists, and select custom and new default colours from the palette picker to customise the draw.io editor.
  3. Click Apply to save, then reload your browser tab (Ctrl+R or Cmd+R) to reload the draw.io editor using the new configuration

The editor configuration will updae the JSON code whenever you change a configuration setting via the Editor tab.
Access the draw.io configuration via Extras - Configuration

Make sure you reload the browser tab to reload the new draw.io editor configuration.

Access the draw.io configuration via Extras /> Configuration

Tip: This is a very long dialog with all of the different configuration options, but it is resizeable - grab the bottom right corner to make it larger inside your browser tab.

Configure the draw.io editor​

The default preset colours and style palette can be customised in draw.io

A few custom settings for colours and fonts via the Configuration dialog and the Editor tab are described below.

At any time you can edit or delete the JSON configuration string via the JSON tab of the configuration dialog. See the configuration reference for all JSON configuration options.

Search for configuration options​

Search for a string and press Enter to find a configuration option quickly. For example, searching for colors:
Search for configuration options

Set custom colours​

Set custom palette colours and style colours. customPresetColors in the colour picker dialog used for shape fill, line colour and text colour are followed by presetColours in the top palette. In the larger lower palette are the defaultColors.

  • Hover over existing colours and you'll see a small x appear in the top right of the colour. Click that to delete a colour from the palette.
  • To add a new colour, either paste in a hex code and click Add, or click on the colour box to open a colour picker and click Add.
    The default preset colours and style palette can be customised in draw.io

The default and custom colour schemes below are for the Style palette in Style tab of the format panel. Each style consists of a pair of colours.

  1. Click on the + button to add a new pair at the end of the list.
  2. Click on the colour to the left of F to change the fill colour, and to the left of the next S to change the line (Stroke) colour.
  3. Click on the small x to delete that fill or line colour from the style palette.

Set custom fonts​

Customise the fonts in draw.io

Add font names to the Default Fonts list, pressing enter or clicking Add after each name to change the list of fonts available in the font selection list in the Text tab of the format panel.

Custom Fonts will appear above the default fonts. To use a web font, you'll need to add its Font CSS, including the URL where the font file is hosted.
Customise the fonts in draw.io

Find integration specific options​

It's also easier to see what configuration options are integration only - for example, the section at the bottom are options for draw.io in Confluence Data Center/Server.
Customise the the editor settings for draw.io in Confluence Data Center/Server via Extras - Configuration