These aspects of draw.io are configurable in Confluence Server/Cloud, Quip and embed mode:

  • 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
  • Default length for new edges
  • Use of external resources (Quip only)

Configuration

  • In Confluence Server, edit the UI Configuration in the Add-on Configuration tab:
  • In Confluence Cloud, add an attachment called configuration.json to a page titled Configuration in a space with the key DRAWIOCONFIG:
  • In Quip, create a blank diagram and select Diagram, Preferences, Advanced (Site Admins only):

Format

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

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

  • customFonts: 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 or key for the libs URL parameter. (6.5.2 and later.)
  • 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}. 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).
    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. (9.2.5 and later.)
    Here is an example:
    [  
       {
          title:{  
             main:"Company"
          },
          entries:[  
             {  
                id:"company-graphics",
                title:{  
                   main:"Graphics",
                   de:"Grafiken"
                },
                desc:{
                  main:"Collection of Graphics for Company",
                  de:"Sammlung von Grafiken für Firma"
                },
                libs:[
                   {
                      title:{  
                         main:"Graphics for Company",
                         de:"Grafiken für Firma"
                      },
                      data:[{"xml":"jZLBbsMgDIafhmuUgKr1mqZbL5u0VyCJF5BMHIHbpG9fEti6Tqq0A5L5/NuYH4Rq3HLyejIf1AMK9SpU44k4RW5pAFHI0vZCHYWUZVxCvj3JVlu2nLSHkf9TIFPBReMZEkkg8BUz6HUwsMpLoQ50ZrQjNDSO0HGGhl0c/FjFUKMdxhh38XzwEaBuAT8pWLb0kLiAZ9tpfP8jaImZ3C9BnVsyTZEGo6d1MLcMq2nFDC3SQKHovZ4tySj5sogNIfltflXVu0Ot8j1jT1ieerWhbNQJyAH7a5TMtmeTFDtZZIcM2MHkupey2CeqQyLDT/Xd/Bhk/7+393fecg/f4AY=","w":52.2,"h":70.8,"aspect":"fixed"}]
                   }
                ]
             }
          ]
       }
    ]
    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.
  • 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="http://example.com/diagram.xml" title="Diagram" preview="https://example.com/diagram.png" libs="general"/>
    </templates>
    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. 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.) This option is ignored if the configure=1 URL parameter is used to configure the editor. Use the p URL parameter instead in this case. In Confluence Cloud, this option is forwarded to the p URL parameter. (This limits possible plugins to trusted plugins.)
  • 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.)
  • override: If this is set to true, then the current settings on the client-side will be ignored. (9.2.5 and later.)

Addtional Option 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 math.draw.io and uses exp.draw.io for creating images (true or false, default true).
  • 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.
  • iconfinder: Toggles searching shapes using Iconfinder in the Search box of the sidebar.
  • plantUml: Toggles inserting PlantUML markup, which uses exp-plant.draw.io (true or false, default true).
  • exportPdf: Toggles export to PDF, which uses exp.draw.io (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).
  • 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, draw.io for Quip will not use any external resources or services (other than images from https://www.draw.io).
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.

Example

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.