Skip to main content

Supported URL parameters

The draw.io editor supports a range of URL parameters that control the editor's appearance, behaviour, storage integrations, and modes. These parameters are applied in the order described below and can be combined to customise the editor for different use cases.

For example, to open the editor with German localisation, the Sketch theme, and the format panel disabled:

https://app.diagrams.net/?lang=de&ui=sketch&format=0

Language and localisation​

  • lang=xy: Specifies the language of the user interface. Possible values for xy include:
CodeLanguageCodeLanguage
idBahasa IndonesiaroRomână
msBahasa MelayufiSuomi
bsBosanskisvSvenska
caCatalàviTiếng Việt
csČeštinatrTürkçe
daDanskelΕλληνικά
deDeutschruРусский
etEestisrСрпски
enEnglishukУкраїнська
esEspañolheעברית
filFilipinoarالعربية
frFrançaisthไทย
itItalianotaதமிழ்
huMagyarko한국어
nlNederlandsja日本語
noNorskzh中文（中国）
plPolskizh-tw中文（台灣）
pt-brPortuguês (Brasil)
ptPortuguês (Portugal)
  • diagram-language=xy: Sets the language used for diagram content, separate from the UI language.
  • translate-diagram=1: Enables diagram content translation.
  • browser-translate=0: Disables mirroring of diagram text into a hidden HTML container for browser translation features (e.g. Chrome Translate). This is enabled by default.

Shape libraries​

  • libs=key1;key2;...;keyN: Specifies the current shape libraries to display. Possible keys are allied_telesis, android, archimate, archimate3, arrows2, atlassian, aws3, aws3d, aws4, azure, basic, bootstrap, bpmn, cabinets, cisco, cisco_safe, citrix, clipart, dfd, eip, electrical, er, floorplan, flowchart, gcp2, general, gmdl, ibm, images, infographic, ios, lean_mapping, mockups, mscae, network, office, pid, rack, signs, sitemap, sysml, uml, veeam, and webicons.

  • clibs=key1;key2;key;...;keyN: Specifies custom libraries. Keys are file IDs or URLs with a U-prefix.

  • search-shapes=value: Starts with the given value in the search shapes box.

Viewport and page​

  • viewbox={"x": int, "y": int, "width": int, "height": int}: Sets the initial viewport when you specify file IDs.
  • page=index: Starts with the given page. The default is the first page, where the index for the first page is 0.
  • page-id=ID: Starts with the given page ID. Has precedence over the page URL parameter. To find the ID of the current page, right-click on the canvas and select Edit Data. The ID is the first entry in this dialog.
  • pages=[0|1]: Enables or disables multi-page support. When set to 0, the page tab bar is hidden.
  • hide-pages=1: Hides the controls that allow you to change the current page in lightbox mode.
  • pv=[0|1]: Enables or disables page view. When set, takes precedence over the page attribute stored in the diagram file, including when switching between pages.
  • sb=0: Starts with scrollbars disabled.
  • ruler=1: Starts with the ruler enabled.
  • grid=[0|1]: Enables or disables the grid. When set, takes precedence over the grid attribute stored in the diagram file, including when switching between pages.
  • border=60: Sets the border width used in lightbox mode. The default is 60.
  • tags=json: Sets the tag visibility configuration as a JSON value.

Editor appearance and themes​

  • ui=[kennedy|min|atlas|dark|sketch|simple]: Uses the Default (Kennedy), Minimal, Atlas, or Sketch editor theme, and can set Dark mode or the simple mode.
  • sketch=[0|1]: Disables or enables the sketch style. The default is 1 for the Sketch theme and 0 for all other themes.
  • rough=[0|1]: Controls the rough/hand-drawn drawing style for shapes and connectors, independent of the sketch theme.
  • dark=[0|1|auto]: Disables or enables dark mode in the Sketch, Minimal, and Simple editor themes. auto follows the system preference.
  • high-contrast=1: Enables high contrast mode.
  • contrast=0: Sets the default adaptive colour mode to simple (disabling auto-contrast).
  • format=0: Disables the format panel on the right.
  • splash=0: Does not show the splash screen.
  • sidebar=0: Hides the sidebar (shape panels).
  • sidebar-entries=large: Makes sidebar entries larger.
  • windows=0: Disables floating windows (format panel, etc.) in the Minimal theme.
  • shape-picker=0: Disables the shape picker popup.
  • zoom=nocss: Disables the CSS zoom preview.
  • touch=1: Forces the touch mode interface.
  • android=[0|1]: Overrides Android device detection. Android tablets are normally auto-detected, but Chrome's Request Desktop Site mode can change the user agent. Use android=1 to force Android touch behaviour (pan/zoom gestures, virtual keyboard suppression) or android=0 to disable it.
  • math=0: Disables MathJax mathematical typesetting support.
  • math-output=html: Sets the math typesetting output to HTML-CSS.

Chromeless mode​

Chromeless mode provides a read-only viewer for diagrams. Set chrome=0 to enable it.

  • chrome=0: Uses the chromeless read-only viewer.
  • target=[auto|self|frame|blank]: Opens links in the same window or frame or in a blank window. auto is the default, which opens relative links and anchors in the same window in chromeless mode, and all links in a new window in editing mode.
  • highlight=hex: Specifies the highlight colour (with no leading #) for links in chromeless mode.
  • edit=url: Adds a link for the Edit button in chromeless mode. Use edit=_blank to edit the diagram as a new copy.
  • lightbox=1: Uses the lightbox in chromeless mode (larger zoom, no page visible).
  • transparent=1: Uses a transparent background in chromeless mode.
  • nav=1: Enables folding in chromeless mode.
  • layers=1: Adds layer control in chromeless mode.
  • layer-ids=id1 id2...: Space-separated list of layer IDs to show. If not specified, all layers are shown.
  • link-icons=1: Shows a small overlay icon on cells that have a link, making them easier to discover in the lightbox. Equivalent to the show-link-icons key in the data-mxgraph JSON for HTML embeds and to the showLinkIcons Editor.configure flag.
  • tooltip-icons=1: Shows a small overlay icon on cells that have a tooltip. Equivalent to the show-tooltip-icons key in the data-mxgraph JSON for HTML embeds and to the showTooltipIcons Editor.configure flag.
  • tooltips=0: Suppresses cell tooltips in the chromeless viewer, which otherwise expose a cell's link and custom attributes (such as linkTarget) on hover. Intended for embed, inline, and viewer hosts. Applied both at the tooltip handler and at the content level, so it holds regardless of the handler state.
  • close=1: Shows the Close button in chromeless mode, which closes the window when selected.
  • toolbar=0: Disables the toolbar in chromeless mode.
  • toolbar-config=json: Configures toolbar buttons in chromeless mode as a URL-encoded JSON value.
  • noPrint=1: Hides the print button in the chromeless toolbar.
  • noExport=1: Hides the image export button in the chromeless toolbar.

File and diagram management​

  • open=prefix+ID: If location hash properties are not available, use this as a replacement. The browser will add the hash property to the URL immediately and not remove the URL parameter. An existing hash property takes precedence.
  • data=xml: Provides diagram XML data directly in the URL.
  • rev=id: Selects a specific revision of a Google Drive or Dropbox file.
  • title=title: Sets a new file title. Used with the create and url parameters.
  • notitle=1: Uses the default filename for new files. Used with the url parameter.
  • template-filename=name: If the #U hash property is used but the URL does not contain a filename to determine binary mode. See the list of supported location hash properties.
  • drafts=0: Disables draft states (does not save unsaved files in IndexedDB).
  • nowarn=1: Suppresses the warning before an unload for local files.
  • svg-warning=0: Suppresses the warning for old viewers in SVG export.
  • rt=1: Uses chromeless mode with Google Drive realtime enabled.
  • override-mime=1: Saves all Google Drive files as application/vnd.jgraph.mxfile.
  • openInSameWin=1: Opens files in the same window instead of new tabs.

Creating diagrams from templates​

The create parameter allows you to create a new diagram from a template URL, data, or message. It can be passed as either a URL query parameter or a hash property:

  • URL parameter (?create=value): The value is sent to the server as part of the request URL. Suitable for short values such as template URLs.
  • Hash property (#create=value): The value after the # is never sent to the server — it stays entirely in the browser. This makes it more suitable for longer values and for cases where the diagram data should remain private.

For the largest payloads and maximum privacy, use the postMessage approach described below, which avoids putting any diagram data into the URL at all.

Value formats​

  • create=url: Creates a new file from a template URL. If the value is not a URL and is not empty, the script will try to use window.opener[url]. In embed mode, window.opener[name] will be used to get the initial XML. Note that this requires the same origin policy in the opener/parent for reading the variable.

  • create={json}: If the value starts with a {, it is treated as a JSON object using the format {type: 'type', data: 'data'}. An optional compressed argument can be true if the data is compressed. For a worked example of constructing the #create URL and compressing the data with pako, see the tool for generating a diagram and compressing the data with pako. The supported types are:

TypeDescription
xmlStandard draw.io XML diagram data.
csvCSV data that is imported using the CSV import descriptor format.
mermaidMermaid diagram syntax that is converted to a draw.io diagram (example).
generateA natural language text prompt that is sent to an AI model to generate a diagram. The data value is the prompt text describing the diagram to create.
messageSignals that the diagram data will be provided via postMessage instead of in the URL. See Using postMessage for large data below.

Running a layout on the created diagram​

The JSON object accepts an optional layout field to run a layout on the diagram after it is created. This works for every type and is useful when the supplied diagram has no meaningful coordinates and you want draw.io to position the shapes. The layout value is either a preset name or a custom-layout array:

  • Preset name — one of verticalFlow, horizontalFlow, verticalTree, horizontalTree, radialTree, or organic (the same presets as the Arrange > Layout menu):

    {"type": "xml", "data": "<mxGraphModel>...</mxGraphModel>", "layout": "verticalFlow"}

  • Custom-layout array — the full JSON layout specification, which supports layout sequences and per-layout options (it can also be passed as a JSON string starting with [):

    {"type": "xml", "data": "<mxGraphModel>...</mxGraphModel>", "layout": [{"layout": "elkLayered", "config": {"elk.direction": "RIGHT"}}]}

The same layout value is accepted by the embed protocol's load action and the desktop --layout command-line flag. After the layout runs, the editor updates the #create hash to the laid-out XML and removes the layout field, so reloading reproduces the result without running the layout again.

Using postMessage for large data​

For large diagrams or when privacy is important, use type: 'message' to send the data via postMessage instead of encoding it in the URL. The iframe sends a message with event ready when it is ready to receive the data, and the parent/opener responds with action create and the data in the same format as described above. Since the diagram data is exchanged directly between the parent window and the iframe, it never appears in the URL and is not subject to URL length limits.

iframe.src = 'https://www.draw.io/#create=%7B%22type%22%3A%22message%22%7D';
// For lightbox use 'https://www.draw.io/?lightbox=1&dark=auto&border=10&edit=_blank#create=%7B%22type%22%3A%22message%22%7D';

window.addEventListener('message', function(event)
{
    if (JSON.parse(event.data).event === 'ready')
    {
        event.source.postMessage({action: 'create', data: createObj}, '*');
    }
});

The three approaches in order of increasing payload capacity and privacy:

ApproachData in URLSent to serverMax data size
URL parameter (?create=...)YesYesLimited by URL length
Hash property (#create=...)Yes (after #)NoLimited by URL length
postMessageNoNoUnlimited

AI diagram generation​

  • smart-template=value: Triggers AI-generated diagram creation from a text prompt. The value is a URL-encoded text description of the diagram to generate.

Plugins​

Integration parameters​

  • picker=0/1: Disables or enables the Google file picker in dialogs.
  • thumb=0: Disables the creation of thumbnails in Drive.
  • gitlab=url: Sets the URL-encoded path to a custom GitLab installation to use for GitLab file operations.
  • gitlab-id=ID: Specifies the client ID of the custom GitLab application when using a custom GitLab instance.
  • vars=json: Uses a URI-encoded JSON string for global placeholders for use in labels and tooltips where enabled, e.g. vars={"key":"value"}.
  • base=url: Sets the base URL to use for links. Use this if document.referrer is not available in embed mode.

Storage modes​

  • local=1: Uses device mode only.
  • storage=device: Adds a device storage option for touch devices.
  • noDevice=1: Hides the device/local file options in dialogs.
  • browser=0/1: Disables local storage as a storage location (0) or shows the browser option in the storage dialog (1).
  • save=local/remote: Enables or disables saving files locally. The default is local. If disabled, files are echoed via a servlet for a local save.
  • mode=[google|onedrive|github|dropbox|gitlab|device|browser|trello]: Switches to the specified storage mode.

Cloud integration toggles​

  • gapi=0: Disables the Google integration.
  • db=0: Disables the Dropbox integration.
  • od=0: Disables the OneDrive integration.
  • ms365=0: Disables the Microsoft 365 integration.
  • tr=0: Disables the Trello integration.
  • gh=0: Disables the GitHub integration.
  • gl=0: Disables the GitLab integration.
  • drive=0: Simulates app.diagrams.net regardless of the domain name (uses the old app ID).

Collaboration and sync​

  • sync=[none|manual|auto]: Enables or disables collaborative editing. The default is auto.

Special modes​

  • offline=[1|0]: Registers or unregisters the progressive web app. All remote storage locations are disabled when offline.
  • pwa=0: Disables the ability to register or unregister the progressive web app. When installed, it will stay installed.
  • stealth=1: Disables all features that require external web services (such as PDF export).
  • gapi-stealth=1: Disables all features that require external web services except Google Drive (such as PDF export).
  • lockdown=1: Disables all data transmission apart from directly between the browser and the selected data storage location. See data governance lockdown.
  • demo=1: Shortcut for db=0&gapi=0&math=0&picker=0. Disables the splash screen and creates an empty, local diagram file.

Embed and client modes​

  • embed=1: Runs diagrams.net in embed mode. Use this mode with embed.diagrams.net only.
  • embedInline=1: Enables inline embed mode. Automatically sets embed=1, ui=sketch, plugins=0, proto=json, and prefetchFonts=1.
  • configure=1: Sends the configure event and waits for the configure action. See more about embed mode.
  • proto=json: Enables the JSON protocol for postMessage communication in embed and client modes. See the JSON protocol in embed mode.
  • client=1: Runs diagrams.net in client mode. This displays a normal UI and sends a ready message to the opener or parent when the page is loaded. After receiving a message containing XML or compressed XML, a local file is created. The file is then set to modified so the connection to the window can be closed after sending the initial XML. Whether the XML is loaded again after a page refresh depends on the caller implementation. Use proto=json to use a custom protocol for special cases.
  • suppressNewWindows=1: Routes link clicks and popups through the embedding host instead of opening new browser windows or tabs (forces popupsAllowed off): link clicks are reported via the openLink event and the "open in new window/tab" options are hidden. Intended for sandboxed embed and inline hosts such as a VS Code webview. Also settable as the suppressNewWindows Editor.configure flag — see embed mode.

Deprecated parameters​

  • url=url: Deprecated — Use the #U hash property (#U{uri_encoded_url}) to open a diagram from a URI-encoded URL, e.g. https://app.diagrams.net/#Uhttps%3A%2F%2Fraw.githubusercontent.com%2Fjgraph%2Fdrawio-diagrams%2Fmaster%2Fdiagrams%2Fschema.xml
  • desc={compressed-json}: Passes the CSV import descriptor (example). Works with the www.draw.io domain only.

Additional resources​