It's possible to globally configure certain aspects of the draw.io editor interface for all users in Confluence and Quip. Those parts are:


  • The default font list
  • The default color palettes and theme colors
  • The default shape and connector styling
  • The default built-in libraries to show in the left-hand side library panel
  • The default custom libraries to show in the left-hand side library panel
  • CSS overrides for the editor appearance
  • Font CSS to inject custom fonts
  • Plugins to customize the editor more deeply
  • The default width and height for entries in the left-hand side libraries
  • The default XML for blank diagrams and empty custom libraries
  • The default length for new edges
  • Use of external resources and services


To configure the editor in the Add-on Configuration under UI Configuration, a JavaScript object (JSON) can be defined that holds the following variables:

  • defaultFonts: Font family names in the format panel font drop down box

Note: All fonts must be installed on the server and clients or be made available using the fontCss option below (draw.io v6.5.4 and later).

  • presetColors: Color codes for the upper palette in the color dialog (no leading # for the color codes)

  • defaultColors: Color codes for the lower palette in the color dialog (no leading # for the color codes)

  • defaultColorSchemes: Available color schemes in the style section of the format panel (use leading # for the color codes)

  • defaultVertexStyle/defaultEdgeStyle: Defines the initial default styles for vertices and edges. If this is changed after users have used the application, "Clear Default Style" must be clicked for the default styles to be updated. Note that the styles defined here are copied to the styles of new cells, for each cell. This means that these values override everything else inherited from other styles or themes (which may be supported at a later time). Therefore, it is recommended to use a minimal set of values for the default styles. To find the key, value pairs to be used, set the style in the application and find the key and value via Edit Style (Ctrl+E). For example, to assign a default fontFamily of Courier New to all edges and vertices (and override all other default styles), use {"defaultVertexStyle": {"fontFamily": "Courier New"}, "defaultEdgeStyle": {"fontFamily": "Courier New"}}. (6.5.2 and later.)
  • defaultLibraries: Defines a semicolon-separated list of default libraries in a string. This is overridden by the current user-defined setting if the application has been used. Possible IDs are: android, archimate, archimate3, arrows, arrows2, atlassian, aws2, aws3, aws3d, azure, basic, bootstrap, bpmn, cabinets, cisco, citrix, clipart, eip, electrical, er, floorplan, flowchart, gcp, general, gmdl, ios, lean_mapping, mockups, mscae, network, office, pid, pid2, rack, search, signs, sysml, uml, veeam and webicons. (6.5.2 and later.)
  • defaultCustomLibraries: Defines an array of IDs for custom libraries to be loaded. In Atlassian Confluence, the IDs are of the form A1...An, eg. {"defaultCustomLibraries": ["A1"]}. To get the ID for a custom library, move the mouse over the entry in the Select Library dialog or the title of the library in the sidebar and wait for the tooltip to appear, eg. my library (A1), where A1 is the ID. If there is no tooltip, open the library in a diagram and read the <mxAtlasLibraries> section in the page attachment with the diagram name and no .PNG extension. (6.5.2 and later.)
    Alternatively, the ID can be of the form UencodedURI to load a library from an URL, eg. {"defaultCustomLibraries": ["U%2Fconfluence%2Fdownload%2Fattachments%2F720900%2FScratchpad.xml%3Fapi%3Dv2"]}
    NOTE: To encode a URL, enter the URL on this page and press the URL Encode button.
  • css: Defines a string with CSS rules to be used in the page. For example, to change the background color of the menubar, use the following entry: {"css": ".geMenubarContainer { background-color: #c0c0c0 !important; } .geMenubar { background-color: #c0c0c0 !important; }"} (6.5.2 and later.)
  • fontCss: Defines a string with CSS rules for custom fonts to be used in diagrams. This should be one or more @font-face rule, eg. to use a font file attached to a Confluence page: {"fontCss": "@font-face { font-family: 'Marvel'; src:  url(/confluence/download/attachments/720900/Marvel-Regular.ttf?api=v2) format('truetype')}"}
    The fonts in this section are used for drawing diagrams in the editor and creating images in Google Chrome, Firefox and Microsoft Edge. (All other browsers require the font to be installed on the server-side.) For creating images in the browser, the font must be on the same domain, contain a CORS header or will be proxied via the Confluence server. Note that all fonts will have to be downloaded to the client when an image is created or when the diagram is saved to the page, so the number of custom fonts should be limited to a minimum.
    For the viewer in the page and the print output in the lightbox, the Global Stylesheet under Stylesheet in the Look and Feel section of the Confluence administration is used. In the above case, it should match fontCss with the following rule:Note: The external image service does currently  not support custom fonts. (6.5.4 and later.)
  • plugins: Defines an array of URLs for plugins to be loaded with the editor. Plugins are JavaScript files that can modify the editor UI and behaviour. For example, to load a text.js plugin from a page attachment, use the following configuration: {"plugins": ["/confluence/download/attachments/720900/text.js?api=v2"]} (6.5.4 and later.)
  • thumbWidth/thumbHeight: Defines the width and height for the sidebar entries. (6.5.4 and later.)
  • emptyDiagramXml/emptyLibraryXml: Defines the XML for blank diagrams and libraries. (Quotes must be double-escaped. 6.5.4 and later.)
  • defaultEdgeLength: Defines the length for new edges. (7.2.4 and later.)
  • version: The current version of the configuration (any string, eg. "1.0"). If this is different from the last used version, then the current settings on the client-side (.drawio-config) will be reset. Default is null. Change this to force the stored settings in the client to be reset and apply the current configuration. (7.2.8 and later.)

Additional settings for Quip

  • mathematicalTypesetting: Toggles mathematical typesetting using MathJax, which loads JavaScript and fonts from math.draw.io and uses exp.draw.io for creating images (true or false, default true). (Quip 1.2.1 and later.)
  • internationalization: Toggles i18n, which uses resources from www.draw.io (true or false, default true). If this is disabled, then the user interface of the Quip live app will be shown in English. (Quip 1.2.1 and later.)
  • iconfinder: Toggles searching shapes using Iconfinder in the Search box of the sidebar. (Quip 1.2.1 and later.)
  • plantUml: Toggles inserting PlantUML markup, which uses exp-plant.draw.io (true or false, default true). (Quip 1.2.1 and later.)
  • exportPdf: Toggles export to PDF, which uses exp.draw.io (true or false, default true). (Quip 1.2.1 and later.)
  • password: Set this to any string value to protect the configuration from unauthorized changes. (Quip 1.2.4 and later.)
If these options are not visible in your Site Configuration, press Reset to restore the defaults.
If all above options are disabled, draw.io for Quip will not use any external resources or services (other than images from https://www.draw.io). Note that all users can change the site configuration if there is no password assigned.


The following is an example for a JSON string with default values (if a variable is omitted):


{"defaultFonts": ["Helvetica", "Verdana", "Times New Roman", "Garamond",
  "Comic Sans MS", "Courier New", "Georgia", "Lucida Console", "Tahoma"],
"presetColors": ["E6D0DE", "CDA2BE", "B5739D", "E1D5E7", "C3ABD0", "A680B8",
  "D4E1F5", "A9C4EB", "7EA6E0", "D5E8D4", "9AC7BF", "67AB9F", "D5E8D4",
  "B9E0A5", "97D077", "FFF2CC", "FFE599", "FFD966", "FFF4C3", "FFCE9F",
  "FFB570", "F8CECC", "F19C99", "EA6B66"],
"defaultColorSchemes": [[null, {"fill": "#f5f5f5", "stroke": "#666666"},
  {"fill": "#dae8fc", "stroke": "#6c8ebf"}, {"fill": "#d5e8d4", "stroke": "#82b366"},
  {"fill": "#ffe6cc", "stroke": "#d79b00"}, {"fill": "#fff2cc", "stroke": "#d6b656"},
  {"fill": "#f8cecc", "stroke": "#b85450"}, {"fill": "#e1d5e7", "stroke": "#9673a6"}],
  [null, {"fill": "#f5f5f5", "stroke": "#666666", "gradient": "#b3b3b3"},
  {"fill": "#dae8fc", "stroke": "#6c8ebf", "gradient": "#7ea6e0"},
  {"fill": "#d5e8d4", "stroke": "#82b366", "gradient": "#97d077"},
  {"fill": "#ffcd28", "stroke": "#d79b00", "gradient": "#ffa500"},
  {"fill": "#fff2cc", "stroke": "#d6b656", "gradient": "#ffd966"},
  {"fill": "#f8cecc", "stroke": "#b85450", "gradient": "#ea6b66"},
  {"fill": "#e6d0de", "stroke": "#996185", "gradient": "#d5739d"}],
  [null, {"fill": "#eeeeee", "stroke": "#36393d"},
  {"fill": "#f9f7ed", "stroke": "#36393d"}, {"fill": "#ffcc99", "stroke": "#36393d"},
  {"fill": "#cce5ff", "stroke": "#36393d"}, {"fill": "#ffff88", "stroke": "#36393d"},
  {"fill": "#cdeb8b", "stroke": "#36393d"}, {"fill": "#ffcccc", "stroke": "#36393d"}]],
"defaultColors": ["none", "FFFFFF", "E6E6E6", "CCCCCC", "B3B3B3", "999999", "808080",
  "666666", "4D4D4D", "333333", "1A1A1A", "000000", "FFCCCC", "FFE6CC", "FFFFCC",
  "E6FFCC", "CCFFCC", "CCFFE6", "CCFFFF", "CCE5FF", "CCCCFF", "E5CCFF",
  "FFCCFF", "FFCCE6", "FF9999", "FFCC99", "FFFF99", "CCFF99", "99FF99",
  "99FFCC", "99FFFF", "99CCFF", "9999FF", "CC99FF", "FF99FF", "FF99CC",
  "FF6666", "FFB366", "FFFF66", "B3FF66", "66FF66", "66FFB3", "66FFFF",
  "66B2FF", "6666FF", "B266FF", "FF66FF", "FF66B3", "FF3333", "FF9933",
  "FFFF33", "99FF33", "33FF33", "33FF99", "33FFFF", "3399FF", "3333FF",
  "9933FF", "FF33FF", "FF3399", "FF0000", "FF8000", "FFFF00", "80FF00",
  "00FF00", "00FF80", "00FFFF", "007FFF", "0000FF", "7F00FF", "FF00FF",
  "FF0080", "CC0000", "CC6600", "CCCC00", "66CC00", "00CC00", "00CC66",
  "00CCCC", "0066CC", "0000CC", "6600CC", "CC00CC", "CC0066", "990000",
  "994C00", "999900", "4D9900", "009900", "00994D", "009999", "004C99",
  "000099", "4C0099", "990099", "99004D", "660000", "663300", "666600",
  "336600", "006600", "006633", "006666", "003366", "000066", "330066",
  "660066", "660033", "330000", "331A00", "333300", "1A3300", "003300",
  "00331A", "003333", "001933", "000033", "190033", "330033", "33001A"],
"defaultVertexStyle": {},
"defaultEdgeStyle": {"edgeStyle": "orthogonalEdgeStyle", "rounded": "0",
  "jettySize": "auto", "orthogonalLoop": "1"},
"defaultLibraries": "general;images;uml;er;bpmn;flowchart;basic;arrows2",
"defaultCustomLibraries": [],
"css": "",
"fontCss": "",
"plugins": [],
"thumbWidth": 46,
"thumbHeight": 46,
"emptyDiagramXml": "<mxGraphModel><root><mxCell id=\\"0\\"/><mxCell id=\\"1\\" parent=\\"0\\"/></root></mxGraphModel>",
"emptyLibraryXml": "<mxlibrary>[]</mxlibrary>",
"defaultEdgeLength": 80
}


The current settings of the editor (such as last used styles, current open libraries etc) are persisted in the user's browser in local storage under the key .drawio-config. To test changes to default values in the UI configuration (such as defaultVertexStyle), delete the .drawio-config entry in local storage before starting the editor. In Google Chrome, the entry can be deleted by opening the Application tab in the Developer Tools via More Tools, Developer Tools, under Storage, Local Storage and the name of your Confluence domain:



If the configuration has an invalid format, a draw.io configuration error is shown in the Console tab when the diagram editor starts. 

If double-escaped quotes (\\") are replaced with single-escaped quotes (\"), then the configuration is valid JSON and can be checked with a validator such as JSONLint.