Skip to main content

30 posts tagged with "features"

View All Tags

The draw.io configuration dialog

· 5 min read

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

New and updated export formats

· 3 min read

You can export your diagram to multiple formats, including various image files (PNG, JPEG, SVG), PDF, XML, HTML and a URL with the diagram data encoded within it.

Export to an animated GIF image

You can now also export your diagram to an Animated GIF. This is ideal for diagrams where you have animated the connectors with flow animations from the source shape to the target shape.
Animated flows on connectors in a draw.io diagram can now be exported to animated GIF images

  1. Select File > Export as > Animated GIF from the draw.io menu.
  2. Set the animated GIF export options.
    • Set the Loops to continue forever or repeat 1, 3, or 5 times. The default is Forever.
      Choose the export settings for the animated GIF image

Export to a JSON file

The JSON file format has less processing overhead that the native .drawio XML format when a program, such as an LLM, is required to parse or transform your diagram.

Export your diagram to a JSON file when you need to pass it into a Javascript-heavy pipeline, into an API for a web application, or to an LLM for further manipulation.

Choose the export settings when exporting a diagram as an XML file

Publish to presentation mode

Presentation mode uses a simplified viewer with the toolbar that is normally at the bottom of the Lightbox moved into the top right of the browser tab. This is ideal when you want to present a diagram at a meeting, or use draw.io to create a slide deck.

Select File > Publish > Presentation Mode to open your diagram page in a simplified viewer.

While in presentation mode:

  • Hover over the diagram to see tooltips, tags, links and shape metadata if you have added these.
  • Click on links - ideal for navigating to another diagram page.
  • Change the zoom level and step through diagram pages using the mini-toolbar in the top right.
The simpler presentation mode in draw.io has a toolbar in the top right

Editable Mermaid diagrams

· 3 min read

When you insert Mermaid description of a diagram via Arrange > Insert > Mermaid, it is now rendered with native draw.io shapes inside a Mermaid container group. The Mermaid source is attached to this container group so you can re-edit it and regenerate an updated Mermaid diagram.
You can restyle the Mermaid diagram and change its shapes - styles will be kept if you regenerate, but geometry changes will not

Insert an editable Mermaid diagram

  1. Click Arrange > Insert > Mermaid. Alternatively, click the + icon in the toolbar, then select Mermaid.
    Click Arrange /> Insert > Mermaid to create a diagram from Mermaid Markdown-inspired code
  2. Paste your text into the text box, then click Insert.
    Paste the text in Mermaid syntax, then click Insert

By default using the Diagram option, Mermaid shapes are converted to native draw.io shapes, then automatically laid out in a Mermaid container group. Hover over a shape or connector to see the Mermaid source.
Hover over a shape in the Mermaid container group to see the source

Use the Style tools in the format panel to change fill and line colours and styles, text colours and fonts, and change the labels of the shapes. These edited styles and labels override any Mermaid style information, and will persist over edits to the Mermaid source.
You can restyle the Mermaid diagram and change its shapes - styles will be kept if you regenerate, but geometry changes will not

You can also resize and reposition shapes and repath connectors within the Mermaid container group. These changes will be overridden if you edit the source and regenerate the Mermaid diagram.

Edit the Mermaid diagram

Because the Mermaid source is still available, you can edit it and regenerate the diagram.

  1. Select one of the shapes in the Mermaid container group to see the edit (pen) icon in the top left.
    Select a shape inside the Mermaid container group, then click the pen icon in the top left to re-edit and regenerate the diagram
  2. Click on the edit icon to re-open the Mermaid dialog, make your changes, and click Apply.

Prevent edits: Click on the padlock icon in the top left of the Mermaid container group to lock the Mermaid diagram to prevent style or geometry changes, or alternatively insert the Mermaid diagram as a single uneditable SVG image.

See the Mermaid section in the user manual for more example diagrams using the Mermaid syntax, configuring the layout engine, and for more a detailed example of drawing a mindmap from Mermaid text.

Better automatic layouts with ELK

· 3 min read

The new version of the automatic layout dialogs in draw.io now use the Eclipse Layout Kernel (ELK) and its layering algorithms to automatically rearrange the shapes in your diagram.

Use these automatic layout presets to build neat flow charts, trees, org charts and other common diagram layouts quickly.

Rearrange your diagram quickly by applying a layout - select Arrange > Layout from the menu

Change layout options

In most of the preset layouts via the Arrange > Layout menu you can customise the spacing, direction and connector behaviour.

  1. Select Arrange > Layout from the menu, or click + > Layout in the toolbar, then choose the layout preset that suits your diagram best.
  2. Change the layout options if you need to, then click Apply.
    Rearrange your diagram quickly by applying a layout - select Arrange > Layout from the menu

The diagram will be automatically rearranged.

Rearrange your diagram quickly by applying a layout - select Arrange > Layout from the menu

Undo the automatic layout: If you don't like this auto-layout, click Undo in the toolbar or press Ctrl+Z/Cmd+Z to revert to the diagram before it was auto-arranged.

The Flow, Tree, Radial Tree, and Organic layout dialogs store their last-used values in your browser, separately for each layout that you have applied.

Reset defaults: Click Reset in the layout dialog to discard the stored values and reopen the dialog with that preset's defaults.

Use a custom layout

You can further customise the layout algorithm with JSON configuration options via Arrange > Layout > Custom in the draw.io menu, or + > Layout > Custom in the toolbar. Your custom configuration is appended to the JSON definition for that layout preset instead of running the preset immediately on your diagram.
Change the layout algorithm with custom JSON configuration code

Refer to the JSON layout specification for the full documentation of each layout preset.

Tip: This JSON layout specification can also be used to automatically layout imported diagram data from a CSV file.

Legacy layouts

The legacy layouts are still available via the menu Arrange > Layouts > Legacy Layouts.

You can customise the ELK layout settings by entering a JSON configuration string.

The draw.io app for Confluence Cloud transitions to Forge-only

· 4 min read

Atlassian has encouraged all Connect apps to transition to Forge where their modernised Forge architecture can provide increased data security, updated integrated tools and UIs and other useful features. Our hybrid Connect/Forge draw.io app is currently migrating to be fully Forge-only, allowing for enough time to troubleshoot before the first migration deadline in January 2026, should any problems arise.

You should see no difference in functionality - the diagram editor is not changing, and your existing diagrams and draw.io macros will not be changed through this transition.

No full-screen custom macro UI on Forge

We, like many other app developers, delayed moving draw.io to Forge as Atlassian has not yet implemented the full-screen custom UI dialog that is widely used by many Marketplace apps.

A reduced diagram editor size may impact productivity or cause distractions as it does not fully cover the page behind. Some have also reported related display issues with dialogs not appearing correctly on mobile devices in the Forge-only apps.

While we reported this issue back in November 2021, it is currently scheduled by Atlassian to be implemented in FY26Q2 (although, it is not yet included in the Connect-Forge capability equivalence roadmap).

The Forge-only draw.io app cannot run in full screen as Atlassian does not currently support full screen apps in their Forge UI suite - if this is an issue, please add a comment to Atlassian's FRGE-557 or ECO-195 bug reports

If full-screen diagramming or mobile diagramming is a priority for your teams, or if you are an app developer that is affected by this bug, please do comment on the original FRGE-557 issue and the more recent ECO-195 issue.

As soon as this issue has been implemented by Atlassian, the draw.io macros in your Confluence Cloud instance will once again work in full screen.

Updating your draw.io app

Atlassian may choose to rollout these updated Forge-only apps automatically, or your administrator may need to manually update the draw.io app.

If your teams require the full-screen app functionality as described above, we recommend not updating the draw.io app until Atlassian has resolved this issue.

Note: No diagrams or macros will be removed from any pages in which they are used or edited in any way. There is no danger of losing data on this update.

Migrating from DC to Cloud?

Atlassian has also recently announced the end of life for Data Center, with a three-year staged transition period starting in March 2026.

If you are migrating from Confluence DC to Cloud because of this, or to take advantage of the enhanced security features of Atlassian's modernised Forge architecture, migrate your draw.io diagrams in Confluence using the PageID method that preserves in-diagram links and embedded diagrams.

Which draw.io app for Confluence Cloud?

The draw.io for Confluence Cloud app that is transitioning to Forge is available in two editions - Standard and Advanced. The diagramming features of these two editions are the same.

The Advanced edition of the draw.io app includes premium support, custom security reviews, and additional data security options.

The draw.io Zero Egress app is already Forge-only, and provides strict data security, ensuring no diagram data leaves your Confluence instance (zero egress). For customers with such strict data security requirements, Atlassian plans to offer a single tenant Isolated Cloud and their Atlassian Government Cloud. The draw.io Zero Egress app is designed to work with Atlassian's new secure Cloud offerings.

Read more about the differences between the draw.io apps for Confluence Cloud

Configure draw.io online to disable AI diagrams

· 4 min read

Like many software apps, diagramming tools now have AI-powered features that 'help' you diagram. These can be premium features and may not be easily disabled. With the free online draw.io editor, you have access to the diagram generation features by default. It's easy to disable this in draw.io - configure the editor or use the fully offline draw.io Desktop app.

All version of draw.io are highly configurable, with options for custom colours and fonts, and to enable or disable specific features

Note: Diagram generation features are disabled by default in the draw.io apps for Confluence - ask your instance administrator to configure the draw.io editor if you want to (and are allowed to) use this feature.

While draw.io only shares the text you enter as the query to generate a diagram, and only at the time of generation.

draw.io does not share your diagram data with these LLM tools unless you specifically request that the generator modify your diagram or a selection of your diagram (this behaviour can be customised or disabled in the draw.io configuration).

Note, other diagramming applications typically share your diagram data in full and by default with these generation tools, and do not allow you to customise or limit this behaviour.

If you need to include sensitive data or draw confidential diagrams, your diagramming application must not share your diagram data.

Use an offline tool like draw.io Desktop

Since version 10.7.5, draw.io Desktop has been a fully offline application. You do not need a connection to the internet to use all the built-in shape libraries and templates, or use your own custom shape libraries, fonts or templates stored on your device.

Diagram generation features are not available in draw.io Desktop.

The draw.io desktop app works on MacOS, Windows and Linux

Choose your platform (Windows, macOS or Linux), and download draw.io Desktop to start diagramming securely and privately.

Tip: Many extra template and example diagrams are available in the JGraph/drawio-diagrams repository on GitHub. Download these in advance to use them in draw.io Desktop.

Configure the draw.io web application

Alternatively, you can run the web app while offline as a progressive web app, or configure the editor in your browser to disable the diagram generation features.

All versions of the draw.io application are highly configurable, including but not limited to:

  • default palette colours and styles
  • default and custom fonts
  • custom templates and a customised template library
  • default and custom shape libraries to automatically open by default
  • default page and grid size

Here's a full list of the draw.io editor configuration options for the web application, draw.io Desktop, and the draw.io apps for Confluence Cloud and DC.

Only the online draw.io web application has the diagram generation enabled by default. To disable the diagram generation features, add a line to the editor configuration and refresh the tab to reload the draw.io editor.

Disable diagram generation in the draw.io configuration

This removes the Generate tool from template library and menu, the Generate option from the search field, and the sparkle tool from the toolbar.

Note: Be careful about capitalisation - draw.io configuration options are written using lower camel case (Java).

  1. Select Extras > Configuration from the menu, or ... > Settings > Configuration from the toolbar.
    Access the draw.io configuration via Extras /> Configuration
  2. Add the following JSON string to the configuration: "enableAi": false
    Set the enableAI option to false in the draw.io configuration to disable the Generate in the template library, the Generate menu and search options, and the sparkle tool
  3. Click Apply to save your changes. Reload the browser tab to load the new draw.io configuration and disable the diagram generation features.

Note: If you set the lockdown option to true in the draw.io configuration, this will also disable the diagram generation features.

A modern and streamlined interface for draw.io

· 4 min read

The draw.io editor is being freshened up to match the new Google Drive user interface with a modernised and streamlined user interface. All the drawing editor tools are in the same locations around the drawing canvas, so your workflow will not be disrupted.
The draw.io user interface has been modernised and streamlined, but all the editor tools are in their normal places - your workflow will not be disrupted

Edges and buttons have been rounded, fonts updated, colours softened, related menu items grouped together, and every aspect styled uniformly to match the current UI standards for modern web applications.

This new streamlined design with fewer obvious separators in the header, panels and tabs, and improved text and shape library contrast ensures the draw.io editor is easier to use in high-contrast mode, whether you prefer to work in dark or light mode.

The draw.io user interface has been modernised and streamlined, but all the editor tools are in their normal places - your workflow will not be disrupted The draw.io user interface has been modernised and streamlined, but all the editor tools are in their normal places - your workflow will not be disrupted
The new user interface in the first image above has fewer distracting separating lines in high contrast mode. The older interface in the second image is more cluttered with superfluous separators.

It's not just a visual refresh - the buttons and controls in the draw.io user interface have been optimised to be more responsive, and the codebase has been reworked to improve the editor's efficiency, especially on mobile devices, and allow for future improvements and feature updates.

Switch between modes and editor themes

Although the refreshed UI is easiest to see in Classic and Simple, the three other draw.io editor themes - Minimal, Sketch and Atlas - have also been updated with contrast improvements and modernised dialog elements.

The mode switch icon (sun/moon) for dark/light modes and the classic/simple editor layout that was previously in the top right of the editor has been moved into the menu for all themes.

  • Appearance submenu: automatic, dark, light and high contrast modes
  • Themes submenu: automatic, Classic, Simple, Minimal, Sketch, and Atlas themes

These submenus are accessed slightly differently in each editor theme.

Simple: Click ... in the toolbar and select Settings.
Click ... and select Settings to access the appearance and themes menu when using the Simple draw.io editor theme

Classic and Atlas: Select the Extras menu.
Click ... and select Settings to access the appearance and themes menu when using the Atlas or Classic draw.io editor themes

Minimal: Select Diagram > Settings from the toolbar.
Click ... and select Settings to access the appearance and themes menu when using the Minimal draw.io editor theme

Sketch: Select the triple horizontal bar in the top left, then select Settings.
Click ... and select Settings to access the appearance and themes menu when using the Sketch draw.io editor theme

Work with multi-page diagrams

In Atlas, Classic and Simple themes with the refreshed user interface, the + to add a new diagram page has moved to the bottom left of the editor.
The diagram page tools in the Minimal and Sketch editor themes are unaltered.

Click on the horizontal lines to see a list of all pages in the diagram (if there are too many to fit) and work with the current page directly, or right click on any page tab at the bottom of the editor to rename, duplicate, move and delete it.
Click on the + in the bottom left to add a new page, and the horizontal lines to see a list of all pages in your diagram

Learn more about working with multi-page diagrams in draw.io

draw.io app Editions for Atlassian Confluence Cloud (early access program)

· 2 min read

App editions for Atlassian Confluence Cloud will soon be available for customers who sign up for Atlassian's early-access program. App editions is a new Atlassian Marketplace feature introduced with Forge, and draw.io will be available in Standard and Advanced editions.

If you are not in the early access program, your draw.io Confluence Cloud app will continue to receive regular updates and support as in your current subscription, and of course, the full features of the draw.io diagram editor, including AI-generated diagrams.

If you sign up for the new early access programme for app Editions in the Atlassian Marketplace, draw.io will be available in the following two editions for Confluence Cloud.

  • The Standard edition includes all the diagramming features of the draw.io editor, including AI-generated diagrams. When you need support, your Confluence Cloud administrators can submit support tickets and receive the standard level of support (9/5 business hours).

  • The Advanced edition of draw.io for Atlassian Cloud products is for large enterprise customers who require advanced support and stricter data security. Along with the fully featured draw.io app from the Standard edition, you will receive the following additional support:

    • Extended support hours and shorter initial response times.
    • A dedicated account manager as your single point of contact for enquiries.
    • Custom security reviews for compliance submissions.
    • Access to development feature previews.
    • In-depth and targeted training materials.
    • A zero-egress switch that can disable all data egress except for Atlassian API calls in the draw.io Forge app version.

See how to use draw.io in Confluence with diagram files stored in Google Drive.

Administrators can configure the draw.io app in Confluence Cloud in the Advanced edition to enable the lockdown option.

You can diagram offline with the draw.io desktop app if you need to work in a highly secure environment.

We are fully committed to data security and privacy - learn more about data protection while diagramming and using draw.io.

draw.io updated for Atlassian Jira Software 10.0

· 3 min read

Atlassian has recently released Jira Software 10.0 and Data Center Platform 7, which includes a large collection of security and automation improvements. The draw.io app has been updated to support Jira Software 10.0 and its long awaited dark theme - your diagrams will switch to dark mode automatically to match your Jira user settings.
draw.io diagrams in Jira DC 10.0 will automatically switch to a dark mode palette when you use the new Jira Dark theme

Important

If you are planning to upgrade to Jira 10.0, Atlassian recommends you update all Marketplace apps that support the new version - like draw.io does - beforehand.

Dark theme Jira issues and diagrams

  1. In Jira, click on your user profile image in the top right, then select Theme.
  2. Choose Dark theme, Light theme, or to Match System to match your operating system's theme.
    draw.io diagrams in Jira DC 10.0 will automatically switch to a dark mode palette when you use the new Jira Dark theme

To add a new diagram to a Jira issue, click on More > Add draw.io Diagram to open the draw.io editor.

Once you have saved your diagram to the issue, the Draw.io Diagrams section will be added in the right column.

Diagrams in the Draw.io Diagrams section will be displayed in whichever theme you selected in Jira automatically.

Note: The draw.io diagram in the Attachments section of the Jira issue is saved and shown as if it were light mode. To edit or open a larger version of the diagram, click on the diagram in the Draw.io Diagrams section of the issue.

Hover over the diagram and click on the edit pencil to open it in the draw.io editor.
draw.io diagrams in Jira DC 10.0 will automatically switch to a dark mode palette when you use the new Jira Dark theme

Using draw.io in Jira DC

draw.io for Confluence Data Center 9.0

· 4 min read

Atlassian has just released Confluence Data Center 9.0, with a wide range of security improvements and user-friendly updates. The draw.io app is fully compatible with Confluence DC 9.0 - when you use the new Dark theme in your Confluence instance, you'll automatically see draw.io diagrams in dark mode.
draw.io diagrams in Confluence DC 9.0 will automatically switch to a dark mode palette when you use the new Confluence Dark theme

Dark mode diagrams in Confluence DC

Just as Confluence has updated their colour palette for accessibility contrast to ensure text page content remains readable on a dark background, draw.io automatically switches to an enhanced dark-mode palette.

Dark mode colours with improved contrast are automatically applied to the diagram previews when you look at any Confluence DC 9.0 page, and also when you click on the diagram to open it in the draw.io lightbox viewer.
When you open a draw.io diagram from a Confluence DC 9.0 page into the lightbox, it will automatically apply your light or dark theme and change the diagram colours to stay readable

Edit draw.io diagrams in dark mode

If you use the Confluence Dark theme, draw.io diagram macros and draw.io board macros will open the draw.io editor automatically in dark mode.

Improved contrast dark mode palette by default

The draw.io dark mode palette in Confluence DC 9.0 uses improved contrast colours by default, ensuring maximum readability of your diagrams when viewed in both dark and light modes.
The dark mode palette in draw.io for Confluence DC 9.0 is designed for the best readability

draw.io board macro in dark mode

The whiteboard-like simple interface of the draw.io board macro also uses dark mode automatically when you have enabled Dark theme in Confluence DC 9.0.
Dark mode is used for the draw.io board editor automatically when you use Dark theme inConfluence DC 9.0

Switch to light mode

To edit a diagram in light mode, change your Confluence Theme to Light first. Select your user icon in the top right, then select Theme > Light from the menu.
To edit a diagram in light mode, switch your Confluence theme to light mode first.

Search for diagrams with OpenSearch

The new integration of OpenSearch will find draw.io diagrams in the same way the built-in Confluence search does - your diagrams are fully searchable via the Confluence search.

draw.io provides the file names and diagram label text to the Confluence search index used by both the built-in basic and advanced search functionality and OpenSearch.

See how searching for diagrams in Confluence Cloud and Data Center works and compare it with other diagramming tools.

FilenameLabel text
Search for a diagram filename in Confluence ServerSearch for label text inside a diagram in Confluence Server

To set up your Confluence DC 9.0 instance to use the new optional search integration, please refer to Atlassian's OpenSearch documentation.

See all the security and usability updates available in Confluence DC 9.0.

Mermaid in draw.io updated to support ELK layout

· 6 min read

Mermaid is a text-based syntax that you can use to describe a diagram, and automatically lay it out neatly on the diagram canvas. Enter your Mermaid diagram description in draw.io via Arrange > Insert > Mermaid in the draw.io menu or + > Mermaid from the toolbar. draw.io has updated to Mermaid version 10.9.1 to support the new ELK automatic layout.
Tell the Mermaid diagram generation tool to use the ELK layout option in your text diagram description

Text to diagram tools in draw.io

There are several text-to-diagram tools built into draw.io:

Paste the Mermaid syntax text version of your diagram and Insert it onto the draw.io canvas An example Gantt chart inserted from Mermaid code
Example Gantt chart generated from Mermaid syntax

Some of these text-to-diagram features generate a diagram as an image on the drawing canvas, and some use draw.io shapes to automatically layout your diagram and let you continue styling and dding draw.io shapes and connectors to it.

You can choose your preferred output when you generate a diagram from Mermaid syntax. By default, your Mermaid diagram will be generated and layed out inside a Mermaid container group using draw.io shapes and connectors.

You can style the shapes, connectors and text in this container group, edit the Mermaid source, and the draw.io styles will be reapplied to any elements that continue to exist. However, any geometry changes (resize, reposition, connector arrow ends) will be reset if you edit the Mermaid source.

Insert a Mermaid diagram in draw.io

An example coffee machine debugging flow is described in Mermaid syntax below.

flowchart TD
A(Coffee machine <br />not working) --> B{Machine has power?}
B -->|No| H(Plug in and turn on)
B -->|Yes| C{Out of beans or water?} -->|Yes| G(Refill beans and water)
C -->|No| D{Filter warning?} -->|Yes| I(Replace or clean filter)
D -->|No| F(Send for repair)

Add this Mermaid diagram to draw.io.

  1. Select Arrange > Insert > Mermaid from the menu or + > Mermaid from the toolbar if you are using the Simple mode or the Sketch editor theme.
    Click Arrange /> Insert > Mermaid to create a diagram from Mermaid Markdown-inspired code
  2. Enter the text description of your diagram using Mermaid syntax in the large text box.
  3. From the drop-down list, select whether you want to insert the diagram with draw.io shapes (Diagram), or as a single SVG image (Image), and click Insert.
    Paste the text in Mermaid syntax, then click Insert

Please refer to the Mermaid documentation for the complete syntax and styling options.

New ELK layouts for large flowcharts

The new ELK layout option, introduced in Mermaid version 9.4, can generate compacter versions of large and complex flowcharts.

Add the following renderer directive to the top your Mermaid diagram text description:

%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%

For example, to layout the example Mermaid graph shown above with the ELK renderer initialisation command, the insert Mermaid dialog looks as follows.
Tell the Mermaid diagram generation tool to use the ELK layout option in your text diagram description

Click Insert, and the Mermaid diagram will be generated ad drawn with draw.io shapes.
The ELK layout may be more suited for larger and more complex flows

While this example is small and simple, larger flows with complex decisions and many branches may be displayed better using this ELK renderer option.

Note: As this is an experimental feature from the Mermaid developers, it currently only supports the flowchart layout.

See more about configuring the Mermaid layout engine

Large Mermaid flowchart with and without ELK

Below, one of the more complex draw.io flowchart templates has described in text using Mermaid syntax and inserted as an image. The more compact version on the left used the new ELK renderer directive, and the one on the right did not.

The ELK layout may be more suited for larger and more complex flows

With the ELK renderer directive, the Mermaid code for this flowchart looks as follows.

%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%

graph TD
A[\Replenish Value Add stock/] --->C
B(Order product with Value Add) --->C
C{Frequent process?} --->|Yes|D
C --->|No|F
D{New template?} --->|Yes|E
D --->|No|G
E(Create work order template) --->G
F(Create work order) --->H
G(Copy template to work order) --->I
H(Add materials to work order processes) --->J
I(Adjust material quantities) --->J
J(Monitor work orders) --->K
K{Material quantities in stock?} --->|No|L
K --->|Yes|M
L(Procure materials) --->M
M(Change status to In Progress) --->N
N{External Vendor to perform step?} --->|Yes|O
N --->|No|P
O(Add vendor costs) --->Q
P[\Perform work order step/] --->R
Q([Ship materials to Vendor]) --->S --->X
R{Additional processing required?} --->|Yes|N
R--->|No|T
S[\Perform work order step/] --->U
T(Receive final stock) --->V
U(Receive product from vendor) --->W
V(Ship product on order) --->Y
W{Partial quantity received?} --->|Yes|X
W --->|No|Z
X[Create work order backorder] ---> J
Y(Change status to complete) --->AA
Z(Pay vendor invoice) --->R
AA([Finish])

Privacy policy updates

· 3 min read

Data security and privacy are central to our draw.io diagramming tool - using our application platform, your diagram data storage means saving and loading is direct between your browser and whichever location your choose to save your diagram file. We don't allow your diagram data to be stored on our servers.

We take the same privacy and security focused approach to non-diagram data too here at JGraph - we don't use cookies or tracking pixels on our website.

Of course, if you contact us here at JGraph for support via GitHub, Google Groups, or one of our social channels, we will have your contact details - necessary to resolve your query.

In our updated privacy policy, we have now clarified that we will not send you any marketing communication using your details or data. We will also not share your personal data with any third-party company for marketing purposes.

Note: The draw.io app listings in the Atlassian Marketplace for Confluence and Jira are managed by Seibert Group GmbH, and therefore are governed by their privacy policy.

Use draw.io Desktop to diagram offline

Our draw.io desktop app runs fully offline on your local device, and your diagram data stays on your local device. The only external communications from the software are to check for application updates.

draw.io runs on Windows, macOS and Linux - download the draw.io Desktop installer for your operating system.

Configure data transmission lockdown

Set "lockdown": true in the editor configuration. Lockdown options only apply to cloud-based draw.io versions.

This will disable data transmission apart from directly between your browser where you are editing your diagram, and the cloud platform or location you have chosen to store the diagram file.

  1. In the online version of draw.io at app.diagrams.net, select Extras > Configuration in classic mode, ... > Settings > Configuration in Simple mode or the Sketch editor theme to open the configuration.
  2. Enter the "lockdown": true JSON string and click Apply.

In the draw.io app for Confluence Cloud (advanced edition only), go to the administration area, then the draw.io Configuration tab. Add "lockdown": true to the UI Configuration, and click Save changes.
Configure draw.io for Confluence Cloud to lock down your diagram data to match your Atlassian data residency settings

Note: There are few functions that use the draw.io servers to perform operations that browsers are not capable of, including to generate a PDF version of your diagram, and import a diagram file in .gliffy format. These functions won't be available if you lockdown data transmission.

Learn more about configuring the draw.io diagram editor