These aspects of are configurable in Confluence Server/Cloud, Quip, embed mode, online and desktop:

  • Fonts and web fonts
  • Color palettes and themes
  • Shape and connector styling
  • Built-in libraries to show in the left-hand side library panel
  • Custom libraries to show in the left-hand side library panel
  • CSS for the editor appearance
  • Plugins to customize the editor more deeply
  • Width and height for entries in the left-hand side library panel
  • XML for blank diagrams and libraries
  • Global variables
  • XML Compression
  • Default length for new edges
  • Default delay for autosave
  • Use of external resources (Quip only)

Here is a video that explains what can be customized:


  • In Confluence Server, edit the UI Configuration in the Add-on Configuration tab:
  • In Confluence Cloud, go to the Configuration section in the Confluence Cloud Settings.
  • In Quip, create a blank diagram and select Diagram, Preferences, Advanced (Site Admins only):
  • In embed mode, use the configure=1 URL parameter and the respective JSON message as explained here.
  • In the online and desktop versions, edit the configruation via Extras, Configuration (or Diagram, Preferences, Configuration in the Minimal theme):


The configuration is represented as a JSON (JavaScript Object Notation) string with the following options:

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

  • customFonts: Array of font family names to be added before defaultFonts. (9.2.4 and later.)

Note: All fonts must be installed on the server and all clients or be added using the fontCss option. (6.5.4 and later.)

  • presetColors: Color codes for the upper palette in the color dialog (no leading # for the color codes)
  • customPresetColors: Color codes to be added before presetColors (no leading # for the color codes). (9.2.5 and later.)

  • 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). Possible color keys are fill, stroke, gradient and font (font is ignored for edges).

  • customColorSchemes: Color schemes to be added before defaultColorSchemes. (9.2.4 and later.)

  • defaultVertexStyle/defaultEdgeStyle: Defines the initial default styles for vertices and edges. 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: String with a semicolon-separated list of library keys to be initially visible (eg. "general;uml;company-graphics"). Possible keys are custom entry IDs from the libraries field below or keys for the libs URL parameter. (6.5.2 and later.) The default value is "general;uml;er;bpmn;flowchart;basic;arrows2".
  • enabledLibraries: Array of strings with the library keys to be available in the More Shapes dialog. For null, all libraries are visible, for an empty array, no libraries are visible (eg ["general", "uml"]). (9.2.5 and later.)
  • libraries: Array of objects that define new entries for the sidebar and More Shapes dialog. The format of this is as follows:
    [section1,...,sectionN] with sections of the form {title: resource, entries: [entry1,...,entryN]}, entries of the form {id: string, preview: string, title: resource, desc: resource, libs: [lib1,..,libN]} and libs of the form {title: resource, url: string OR data: string, tags: string}. Resource is a language resource of the form {main: string, xy: string} where xy may be any country code (eg. es, fr, de) and main is the fallback if no string is defined for the current country code (ie the default resource) and tags is an optional string with space-separated tags for searching.
    Sections are used for the sections in the More Shapes dialog. Entries are the entries for the sections and each entry may have one or more libraries associated. The id of each entry must be unique, preview is the URL of an image to be used as a preview and desc is used before or in place of the review as a description (preformatted text which supports linefeeds). Finally, libs may use an external resource via the URL in the url field or define the library entries directly via data, which contains the array between <mxlibrary>...</mxlibrary> in library files. By default, all entries with data and the first 20 entries with url are prefetched and added to the search index. To prefetch more entries with url, add "prefetch": true to the respective lib. (9.2.5 and later.)
    Here is an example:
    "main":"Collection of Graphics for Company",
    "de":"Sammlung von Grafiken für Firma"
    "main":"Graphics for Company",
    "de":"Grafiken für Firma"
    This will produce the following More Shapes dialog when combined with enabledLibraries: []:
  • 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.
    To load libraries from the libraries section above, use the defaultLibraries setting above.
  • enableCustomLibraries: Specifies if the open and new library functions are enabled (true or false, default true).
  • templateFile: URL of the source file for the templates dialog with the following format (multiple <template> allowed):
    <?xml version="1.0"?>
    <templates><template section="Title" url="" title="Diagram" preview="" libs="general"/>
    Note: The XML type declaration is required if this file is downloaded via the proxy server (see cors URL parameter). (9.2.5 and later.)
  • 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 web 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.
    Confluence Server: 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:Confluence Cloud: The font URL must be public and must allow access to the origin (CORS header). Eg. "fontCss": "@font-face { font-family: 'Waltograph'; src:  url( format('opentype')}" and "customFonts": ["Waltograph”].
    All fonts will be downloaded to the client when creating images and saving the diagram, so the number of custom fonts should be kept to a minimum. The external image service does currently not support custom fonts.
  • 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.) The plugin sources can be found in the Github project repository. This option is ignored if the configure=1 URL parameter is used to configure the editor. Use the short names for the plugins in case, and in Confluence Cloud, and ss: {"plugins": ["anon;text"]}. This is equivalent to the p URL parameter. (This limits possible plugins to trusted plugins.)
    Note: All plugins are only available for the editor, not the viewer.
  • 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. (6.5.4 and later.)
  • defaultEdgeLength: Defines the length for new edges. (7.2.4 and later.)
  • autosaveDelay: Defines the delay (in ms) between the last change and writing the file for autosave. (10.4.7 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.)
  • override: If this is set to true, then the current settings on the client-side will be ignored. (9.2.5 and later.)
  • globalVars: JSON structure with key, value pairs to define global variables for system-wide placeholders. You should keep the number of entries small.
  • compressXml: Specifies if XML output should be compressed. Default is true (false for Confluence Cloud).

Additional Options for Confluence Server & DC

  • inplaceedits: If set to false, disables launching the diagram editor from the viewer. Default is true. (8.3.13 and later.)
  • forceSimpleViewer: If set to true, it forces simple diagram viewer for every diagram. Default is false. (8.4.0 and later.)
  • defaultMacroParameters: A JSON structure with overrides for default macro parameters. (9.2.5 and later.)
    • border: A boolean. Shows border around viewer if set to true. Default is true.
    • width: An integer. Default width of the viewer. Default is blank.
    • lightbox: A boolean. Enables lightbox(large viewer) if set to true. Default is true.
    • simpleViewer: A boolean. Shows simple viewer if set to true. Default is false.
    • toolbarStyle: A string. Default is "top". Accepted values are :
      • "top" : Shows toolbar above viewer element on mouse hover.
      • "inline" : Shows toolbar inside viewer element on mouse hover.
      • "hidden" : Hides toolbar.
    • links: A string. Default is "auto". Accepted values are :
      • "auto" : Opens local links in current window and external links in a new window.
      • "blank" : Opens all links in a new window.
      • "self" : Opens all links in current window.

Additional Options for Confluence Cloud

  • ui: Defines a string with the ui theme. Possible values are: kennedy, atlas (default), dark and min.

Additional Options for Quip

  • mathematicalTypesetting: Toggles mathematical typesetting using MathJax, which loads JavaScript and fonts from and uses for creating images (true or false, default true).
  • internationalization: Toggles i18n, which uses resources from (true or false, default true). If this is disabled, then the user interface of the Quip live app will be shown in English.
  • iconfinder: Toggles searching shapes using Iconfinder in the Search box of the sidebar.
  • plantUml: Toggles inserting PlantUML markup, which uses (true or false, default true).
  • exportPdf: Toggles export to PDF, which uses (true or false, default true).
  • remoteConvert: Toggles conversion of files that require a remote connection, namely Gliffy, VSD and VSS files (true or false, default true).
  • password: Optional string to protect access to the site configuration (only site admins are allowed access).
  • maxHistoryDays: Number of days to keep editing history. Default is 14. If the last edit is older than this number of days, the history is cleared when editing starts. (Use Preferences, Compress to do this manually.)
  • debug: Toggles debug output in the browser console (true or false, default false).

If these options are not visible in your configuration, click Reset to restore the defaults.

If all above options are disabled, for Quip will not use any external resources or services (other than images from
The Advanced button in the Preferences dialog is only visible for Quip Site Admins.

The maximum allowed size for the configuration in Quip is 10 kB.


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",
"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": [],
"defaultMacroParameters": {
"border": false,
"toolbarStyle": "inline"
"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 configuration of the online version is stored in the user's browser in local storage under the key .configuration:

The current settings of the editor (such as recent colors, current libraries etc) are persisted in the user's browser in local storage under the key .drawio-config:

You can add defaultEdgeLength and autosaveDelay directly to .drawio-config to override default values for the webapp in your browser.

To delete the settings or configuration, in Google Chrome, open the Application tab in the Developer Tools via More Tools, Developer Tools, under Storage, Local Storage and the name of the domain.

If the configuration has an invalid format, a 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.

You can create a link to configure the online version by clicking on Link in the Configuration dialog via Help, Configuration. NOTE: If you need to support Microsoft Edge or IE11 then you'll need to stay under 2,025 character hashes.