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 a updated Mermaid diagram.

Insert an editable Mermaid diagram​

1. Click Arrange > Insert > Mermaid. Alternatively, click the + icon in the toolbar, then select Mermaid.
   
2. Paste your text into the text box, 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.

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 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.
   
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.

Related​

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.

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.

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.
   

The diagram will be automatically rearranged.

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.

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.

Last year, the first few shape libraries were updated to support multi-coloured shape styles. Now, all shape libraries that contain similarly complex shapes have been edited and updated where possible to support multi-coloured styles.

The following categorised shape libraries have been updated with shapes where you can set multiple fill colours:

• Standard: Flowchart
• Software: Mockup, Bootstrap, Salesforce, Android, Atlassian, iOS
• Networking: AWS 3D, Network 2025, Cisco, Citrix, GCP (Google Cloud), Office, Rack, Veeam, IBM
• Other: EIP, Floorplan

For shapes that can have multiple fill colours, you can set these individually in the Style tab of the format panel.

In the example below, the Salesforce shopping cart shapes have been reversed from their default colours (white icons on a dark background) to be a black cart on a light green background.

It was a long and manual task to update all of the shapes in the shapes library. We hope you enjoy using multiple fill colours.

Tip: For increased visual impact using the multi-coloured shapes, the Network 2025 shape library has customisable shadows, as seen in the simple home lab below.

Updated AWS shape libraries to 2026 notation​

Click More Shapes at the bottom of the shapes panel to open all of the shape libraries.

The AWS 2026 shape library has been updated with new shapes to match Amazon's recommended notation.

Within the AWS 2026 shape library, these sub-categories have had the largest changes.

• Many new shapes: General Resources, Analytics, Artificial Intelligence, Financial Management, Internet of things, Management and Governance, and Storage.
• Altered colours: Customer Enablement, Database, Developer Tools and Satellite.

With multi-colour support for the 3D AWS shapes, you can draw some rather pretty AWS infrastructure diagrams.

Note: GCP shape library updates to support Google's most recent icon redesign will follow shortly.

You can use the new polygon shape dialog to draw open or closed polygons quickly and easily by clicking on their perimeter.

To start drawing a new polygon shape, select Arrange > Insert > Polygon from the menu, or + > Polygon from the toolbar.

1. Click anywhere on the grid on the left to add a point.
2. Click again to add another point and a line will be drawn between them.
3. Click a third time to add a third point. This will be connected to both the second and the third point. You need a minimum of three points for a closed polygon.

Continue clicking to add more points. To change the shape of your polygon, you can drag any point to another location in the grid, or click in between two points to add a new point.

No grid: You don't have to work with the grid, if you want to freely position the points in your polygon. Deselect the Grid checkbox.

Open polygon: If you don't want your polygon to be a closed shape, deselect the Close Path checkbox.

The co-ordinates of each point of the polygon will appear in a list on the right.

• Drag them into a new position in the list using the left horizontal line icon.
• Click on the trash icon to the right of any point to delete it.
• Make the line between two points into an arc by selecting the checkbox next to the co-ordinate. Drag the orange arc points to increase or decrease the curvature.
  

At the bottom left of the dialog, you can Undo and Redo changes, Zoom In and Zoom Out, and start over when you click Delete All

Once you have finished drawing your polygon, click Apply to add it to the drawing canvas.

Edit an existing polygon​

• Right-click on the polygon shape to open it in the polygon editor. Alternatively, select the polygon, then select Edit > Polygon from the menu. This only works with polygons drawn in this polygon editor.
• Right-click on the shape and select Edit Connection Points, or select the shape and choose Edit > Edit Connection Points in the draw.io menu to set custom connection points.
  

Related​

• Learn when it's a good idea to draw a custom polygon and see examples of complex polygon shapes drawn in the polygon editor.
• Style polygon shapes like any other shape via the Style tab in the format panel.

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).

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

There are many shapes in the draw.io shape libraries that use more than one line or fill colour. These shapes are being updated so you can change each of the colours and style your diagram with more flexibility.

As the collection of shape libraries is rather large in draw.io, it will take some time to update all of those that contain multi-coloured shapes. The first two libraries that have been updated are Mockups and the AWS 3D shapes.

Each shape still contains a Fill and a Line (outline) colour that typically forms the background colour and the outer line colour of the shape. The additional colours are defined with new, customisable style settings.

For example, the Mockup Map shape has a white background and black outline, but also internal areas with different fill colours and a different internal outline colour.

The list of fill and outline colours will be different for each shape.

How it works

A default attribute was introduced for the fillcolor and strokecolor attributes.

Each shape has a list of defaultFillColors and defaultStrokeColors attributes which are used to show the customisable colours in multi-colour shapes. These are comma-separated lists that define the default colours in the fillColorStyles and strokeColorStyles attributes within a shape.

Right click on a shape, then edit the colour style attributes, then click Apply.

Which libraries have been updated?

The updated AWS 3D and Mockups shape libraries are available now in the current version of the web-based draw.io editor. The Cloud and IT shape libraries are in the process of being updated to this new, more flexible system of colours. Multi-colour shapes in other shape libraries will be updated after the IT shapes are finished.

Go to app.diagrams.net/clear.html to ensure you are using the most recent version of the online draw.io editor.

Gradients with multi-coloured shapes​

The gradient option in the Style tab of the format panel will use the main background fill colour. The gradient does not apply to any of the other additional colour styles within the multi-colour shape.

Reset to the original colour styles​

To revert to the original colour, the easiest is to copy the original style from an unstyled shape and apply it to the customised shape.

1. Select the unstyled shape. In the Style tab, click Copy Style.
2. Select the customised shape. In the Style tab, click Paste Style.
   

Learn more about styling shapes

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.

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.

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.
   
2. Add the following JSON string to the configuration: "enableAi": false
   
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.

Previously, the draw.io apps for Google Docs, Slides and Sheets allowed you to embed the diagrams directly into your documents. Unfortunately, Google has instituted new security permissions limitations that limit access to your files stored on Google Drive. This means that new installations of the draw.io apps for Docs, Slides or Sheets are unable to access the diagram data in those files.

If you have older, installed versions of these apps, you may be able to continue to embed and work with diagram file in your documents.

Important: We have not disabled the Google Store listings for these apps as that would immediately disable all existing installations. Currently, those older installed versions of these apps still work.

We recommend you convert your embedded diagrams to images in those documents.

The draw.io apps for Google Workspace and the draw.io Chrome app for Google Drive are unaffected - you can continue to store your .drawio diagram files in Google Drive and work with them in our free online editor.

Use draw.io diagrams in Google Docs, Slides and Sheets​

Export your draw.io diagrams to PNG image files and then import them into your Google Docs, Slides and Sheets - drag and drop the image file into your document.

1. Open your .drawio diagram file in the draw.io editor (either our online editor or draw.io Desktop)
2. In the draw.io menu, select File > Export As > PNG, then click Export to save your diagram as an image.
3. In your Google Document, Slide, or Sheet select Insert Image from the menu, or drag and drop your image into your document.

You can work with the image of your diagram in your Google document (Docs, Slides or Sheets) as you would any other image - you can move, resize, rotate, and style it as needed.

Reopen your diagram from a draw.io image file​

If you export your diagram from draw.io to a PNG image with Include a copy of my diagram enabled, you will be able to drop that image file onto the draw.io editor to load the diagram data embedded in that file and continue diagramming.

Note: You cannot reopen images from within Google documents as diagrams as Google strips the embedded diagram data.

Overlay or fill a cell in Google Sheets​

In Google Sheets, you can either import an image of your diagram into a cell or overlay the cells.

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.

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 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.

Classic and Atlas: Select the Extras menu.

Minimal: Select Diagram > Settings from the toolbar.

Sketch: Select the triple horizontal bar in the top left, then select Settings.

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.

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

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.

Related​

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.

In addition to updating the main AWS and Azure shape libraries in draw.io, several new networking and cloud shape libraries have been added, including shapes for Alibaba Cloud, Dynamics365 and OpenStack.

Open cloud infrastructure shape libraries​

1. Click on More Shapes at the bottom of the shapes panel on the left.
   
2. Scroll down to the Networking section and enable the shape libraries you want to use.
   
3. Click Apply to open them in the shapes panel next to the drawing canvas.

Tip: Alternatively, you can always search for a shape if you know its name. For example, searching for "AWS beanstalk" will show all the shapes from the various AWS libraries that have both "AWS" and "beanstalk" in their shape names, even if you don't have the AWS shape libraries open. Hover over any of the shapes to see a larger preview.

Azure Power Platform and Dynamics 365​

The Power Platform shapes have been added to the Azure shape library. These components are often combined with Dynamics365 services and applications in cloud infrastructures.

Tip:* If you prefer to diagram in dark mode, the Azure and Dynamics365 shapes and their labels will automatically change colours to remain readable when you switch between dark and light modes.

OpenStack shapes= library​

OpenStack services and apps are common components of Citrix, GCP, IBM and other large hybrid cloud infrastructures. To clearly indicate which components are provided by OpenStack in your infrastructure diagrams, enable the OpenStack shape library.

Alibaba Cloud shape library​

Enable the Alibaba Cloud shape library to document your infrastructure in Alibaba Cloud platform. These shapes cover a wide range of apps and services.

Most of the infrastructure shapes don't have labels by default, as designers tend to rely on logo-recognition for their infrastructure components.

To make your diagram more accessible, select a shape and start typing to add a label. In the Text tab of the format panel, select the Bottom position, and update the Font Colour to match the colour of the Alibaba shape so it is consistent.

Tip: Format one shape and click on Copy Style in the Style tab of the format panel. Then, right-click on the canvas and choose Select Vertices, deselect any regions you may have added, and then click on Paste Style in the Style tab to copy the style onto all of the selected shapes.

Related​

Learn more about drawing various types of network and infrastructure diagrams.

Other cloud platform shape libraries in draw.io include Salesforce, Citrix, Google GCP, Amazon AWS, IBM, and more.

Export AWS diagrams generated from your actual deployed infrastructure to the .drawio format from Cloudockit and Cloudcraft.

The new IBM Cloud shape library in draw.io (right) reflects IBM's updated design language, and extends the existing IBM shape library (left) with a wide range of additional groups, connectors and infrastructure components.

IBM has provided their updated shapes for the new IBM Cloud shape library in draw.io. Please refer to their documentation for their design language style guide, where they explain how shapes and icons should be used in a wide variety of technical diagrams.

Enable the IBM shape libraries in draw.io

1. Click on More Shapes at the bottom of the shapes panel in draw.io.
2. Enable the checkbox next to the SAP shape library in the Networking section and click Apply.
   

Tip: There are also several IBM infrastructures in the template library. Select Arrange > Insert > Template from the menu or + > Template in the toolbar, and look in the Cloud > IBM category.

Using old and new IBM shapes in one diagram​

The new IBM Cloud shapes are compound shapes - a coloured background shape and an icon on top in the centre. This gives you more flexibility in styling your diagram as you can change the two shapes' fill colours independently.

The older shapes are round with a white icon and blue text label, while the new IBM Cloud shapes are square with a white icon and text (in light mode) or black icon and text (in dark mode).

There is also a larger and more varied set of groups (region shapes) in the new IBM Cloud shape library.

The example above is one of the IBM templates available in draw.io with the new IBM Cloud shapes replacing some older components.

Both sets of shapes work well when diagramming in dark mode - the new shapes will switch icon and label colours automatically to remain readable.

Tip: To make the labels look the same on all of your IBM and IBM Cloud shapes, you'll need to edit the text labels to ensure their case matches and the Font Color in the Text tab of the format panel.

However, mixing shapes from the two shape libraries and using their default label styles shows which components of your infrastructure are more recent at a glance, such as for IBM's newer cloud and Watson AI services.

Make your own IBM shapes​

The shapes in both the IBM and IBM Cloud shape libraries represent only part of the constantly expanding IBM Design Language.

You can easily make your own IBM shapes in draw.io using the black IBM .svg icons.

1. Add one of the IBM Cloud shapes that matches the colour you want to use to the drawing canvas to serve as a template for your new shape.
2. Add a simple rectangle from the General shape library.
3. Select the IBM Cloud shape on the drawing canvas and select then select Copy Size in the Arrange tab of the format panel. Select the rectangle and click on Paste Size.
4. Select the IBM Cloud shape again, then select Copy Style in the Style tab of the format panel. Select the rectangle again and click on Paste Style.
   
5. You may need to deselect the Line checkbox in the Style tab, but your shape background should now look correct.
6. Add a label, and move its Position to the Bottom via the Text tab of the format panel.
7. Now, make the compound icon. Drag the .svg file of the UI icon from the UI Icons list in the IBM Design Language - either from the webpage directly, or from your device - onto the drawing canvas to import it. Then drag it over the centre of the background square.
8. Finally, drag a selection box around the new compound shape, right click and select Group from the context menu.
   

Tip: To use this new shape in multiple diagrams, drag the group onto the Scratchpad in the shapes panel.

You can also save the Scratchpad with your custom shapes to share them with your colleagues.

1. Click on the pencil to the right of the Scratchpad library.
   
2. Select Export to save all the shapes in the Scratchpad to a custom shape library.
   
3. Enter a filename, select where to save the custom shape library file and click OK.
   

Learn more about custom shape libraries