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

In any diagram with branches - trees and org charts, Ishikawa diagrams, wiring diagrams, and even some flow charts - you will have multiple overlapping connectors attached to the parent shape. Using a waypoint shape between connectors will prevent manual alignment frustration when you move the parent or child shapes.

The waypoint shape​

The Waypoint shape is in the Misc shape library, which is a subcategory in the General shape library.

If you are going to use the waypoint shape or any other shape often, add it to the scratchpad so you can find it easily.

1. Search for waypoint in the shape panel.
2. Add this Waypoint shape to the canvas.
3. Drag it back onto the Scratchpad in the shape panel - by putting in the Scratchpad, you won't have to go search for it.
   

Faster and neater diagrams​

Tree diagrams, org charts and flowcharts look great with neat orthogonal connectors - lines with aligned vertical and horizontal bends. These connections look best when 'tied together' where multiple connectors attach to a single parent shape, instead of overlapping.

Select one or more connectors and choose Orthogonal (or Vertical or Horizontal) from the Waypoints drop down list in the Style tab of the format panel.

Place a waypoint shape in between the parent shape and the child shapes at the spot where the connectors would neatly separate. Then drag a connector from the parent shape to the waypoint shape. And drag connectors from the waypoint shape to each of the child shapes.

draw.io automatically repositions connectors as you move shapes around the drawing canvas, especially if you use floating connectors. Waypoint shapes help you keep your connector alignment neat.

Hide the waypoint shape​

While it is useful to see the waypoint shape in some diagrams, such as electrical wiring diagrams, you may want to hide it in tree diagrams and org charts.

1. Select the waypoint shape.
2. In the Style tab of the format panel, deselect the Line checkbox.
   

The waypoint shape will become invisible but still exist. The connectors will neatly line up and go through that point. Click on that spot to select the invisible waypoint shape if you need to move it.

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.

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.
   

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.

Using draw.io in Jira DC​

• Migrate from Jira Server or DC to Jira Cloud.
• Work with diagram revisions on Jira DC issues.
• Convert a Gliffy diagram stored on a Jira DC issue to a draw.io diagram.

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.

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.

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.

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.

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.

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.

Filename	Label text

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

Text to diagram tools in draw.io​

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

• Mermaid diagrams
• SQL to entity shapes
• Specially formatted CSV data
• Basic text-to-diagram converter for trees and lists.

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

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.

Click Insert, and the Mermaid diagram will be generated ad drawn with draw.io shapes.

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.

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

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.

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

Collaborative editing has long been possible in draw.io for Confluence Cloud. From the draw.io for Confluence DC release 13.0, you and your team will be able to edit the same diagram and see each other's changes.

Collaborative editing works in both the draw.io Diagram macro and the draw.io Board macro in Confluence DC. Note the collaboration isn't real-time, we need to ensure a slower update rate is stable and causes no performance issues in the first release.

Real-time multi-user diagramming​

Just like in draw.io for Confluence Cloud, the new collaborative editing feature in draw.io for Confluence DC uses the built-in auto-save feature.

1. When you make a change to a draw.io diagram - add, style, or delete shapes, text and connectors, the diagram will be automatically saved to the Confluence page attachments.
2. The draw.io diagram editor regularly polls the Confluence DC instance to see if any changes were made by other users, then loads these changes into your editor.

You don't need to manually save or synchronise the diagrams - changes will automatically appear in the draw.io editor for everyone editing the diagram.

No shared cursors?

As Confluence DC is not a cloud service with web sockets, there is no way to share and synchronise users' cursors as they work inside the diagram editor.

You can still make gestures on the diagram with the freehand brush to discuss a draw.io diagram in online meetings with your team - the freehand shape will appear in the other users' draw.io editor shortly after you draw it.

Changes are merged from multiple users​

If several users add shapes to the same location on a diagram, draw.io will take all those shapes and simply overlap them.

If one user adds and connects a new shape to an existing shape, but another user deletes the existing shape, both user's changes are saved:

• The child shape will appear to stand alone as its parent was deleted.
• The existing parent shape and any connectors from it to new shapes added by other users will be deleted.

This is the same process followed by the collaborative editing function in draw.io for Confluence Cloud.

Because draw.io merges all the changes made to a diagram, and does not overwrite the attachment with the most recent saved state from one user, you won't lose any data when you are editing a diagram as a team.

Change the synchronisation speed and auto-save interval​

If your Confluence DC users find that changes appear in diagrams they are editing together too slowly, an administrator can increase the polling speed in the draw.io app configuration, by specifying the number of seconds between each poll in the Add-on Configuration field.

Also, you can shorten the time between auto-saving the diagram. A shorter interval will mean more attachment versions of diagrams will be created and added to a Confluence page.

1. Go to the administration area of your Confluence DC instance.
2. Go to the Configuration tab in the draw.io Add-on Configuration section.
3. Add the following lines to the Add-on Configuration text field: pollingInterval=10000 and maxAutosaveDelay=5000
4. Click Save changes to update the draw.io configuration.
   

In the example above, we have set the polling interval to 10 seconds (which is 10,000 milliseconds).

Note: If you collaborate on extremely large and complex diagrams, you may need to set a longer polling interval.

See how to configure the draw.io editor for Confluence DC

The new high contrast mode is available in draw.io: High Contrast makes the editor interface easier to read without adjusting your monitor's contrast settings, similar to the accessibility options in your operating system.

High contrast mode simplifies and removes non-essential backgrounds and increases the definition between interface elements by adding clear outlines. You may find it is easier to read text and it can reduce eye strain.

High Contrast mode​

Choose Settings > Appearance > High Contrast from the draw.io menu.

When you enable high contrast modes or themes in your operating system, the range of colours in the interface is reduced and visual elements are simplified. Panels, tools, buttons, and toolbars have simpler backgrounds (white in light mode, black in dark mode), with a clear outline to better separate the various parts of the application's interface.

In the draw.io editor, High Contrast mode works in the same way.

• Panel backgrounds are simplified to off-white (light mode) or nearly black (dark mode).
• Text labels, shapes, and tools that were previously grey are clearer - black (light mode) or white (dark mode).
• Strong contrasting outlines are added around buttons, between the shape libraries, around the format panel tabs and other elements in the editor interface: a crisp white outline in dark mode, and a black outline in light mode.

The default dark mode is on the left in the screenshot below, and High Contrast mode on the right.

High contrast mode works with all draw.io themes in both dark and light mode, including the Sketch online whiteboard theme.

Better colours for dark mode​

Dark mode is often used to reduce eye strain - with draw.io you can diagram in dark mode using any of our editor themes (click the sun/moon icon in the top right and select the mode you want to use. Alternatively, select Settings > Appearance > Dark Mode from the menu).

A while back, we updated colours automatically change when working with draw.io in dark mode, but continue to use the light mode palette as the default. When you switch to dark mode, by default, shapes, connectors and text change intensity to ensure an improved contrast that remains readable.

• To disable adaptive colours for light and dark mode, open the draw.io configuration via Extras > Configuration or Settings > Configuration. Search for adaptive, and set the Adaptive Colors in the Appearance section to none.
  

• If you want only the black and white parts of your diagram to invert in dark or light mode, set Adaptive Colors in the Editor tab of the Configuration dialog to simple.

• If you want to choose specific dark mode colours for shapes, connectors and text instead of using an automatic adaptive colour, add the dark mode colour for that shape in the colour palette under Advanced.

The draw.io app for Confluence Data Center provides you with a secure and fully featured diagramming tool for visual documentation, along with a simpler whiteboard macro that also includes everything you need to draw complex technical diagrams.

Works on all supported DC versions​

draw.io works on all supported versions of Confluence Data Center, 7.x and later.

Regular updates are released for all supported DC versions, such as updated technical icon sets (shape libraries), new and improved features, and of course bug fixes and optimisations.

Focused on security​

While many organisations have opted to move to Confluence Cloud now that Confluence Server has reached its end of life, you may have found that Confluence Data Center is a better fit for your needs, especially if you are in a regulated industry like finance or healthcare.

draw.io is engineered differently to other diagramming apps - we take data security seriously so you can keep your diagram data secure. We participate in Atlassian's bug bounty program and release regular updates for all supported versions of Data Center.

Secure desktop app for external partners​

When you do need to collaborate confidentially with external partners, your partners can edit draw.io diagram files securely with the free draw.io desktop app, which keeps the diagram data isolated on their computer. The desktop app has the same shape libraries, templates, and tools, and is designed to work fully offline on Windows, macOS and Linux.

Technical diagrams plus an online whiteboard​

draw.io has a wide range of shape libraries with up-to-date icon sets, and a large collection of templates for many different types of technical diagrams.

Even when using the simple draw.io board macro in Confluence, you have access to all the shape libraries, features, and tools. You can use draw.io in meetings and for brainstorming, as well as to document your complex infrastructures and business procedures in great detail.

Migration and import tools​

If you choose at some point to migrate to Cloud from DC/Server, to maintain diagram links and embedded diagrams we recommend using the PageID export/import method, now that Atlassian supports 'mass permission change'.

If directed to by draw.io support, you may use the new draw.io migration tool in your old DC instance, but it may have issues if you rename pages during the migration process.

draw.io makes it easy to migrate and import from other diagramming tools in Confluence DC.

• Import all your Gliffy diagrams in your instance as a Confluence administrator.
• Drag and drop an individual diagram file, including vsdx files and Gliffy and onto the drawing canvas to import them.
  

Configure the diagram editor and draw.io settings​

As an administrator, you can configure the draw.io backend in Confluence Data Center via the app administration and set up custom diagram templates and shape libraries.

If your technical diagramming team always use a set palette of colours or shape styles, you can also configure this for everyone in your instance.

We are proud to be be once again sponsoring the popular FOSDEM two-day event for open source software, held at the Université Libre de Bruxelles Solbosch Campus in Brussels, Belgium on 3-4 February 2024. There is no registration and the event is free to attend.

FOSDEM is organised by a large team of volunteers, and provides a space for open source software developers and users to meet, share ideas, and collaborate on open source projects.

If you would like to join a developer room at FOSDEM'24, keep an eye on list of developers that will be calling for participation shortly and the FOSDEM'24 schedule as speakers and projects are confirmed.

FOSDEM: hundreds of open source speakers and events

With well over 5000 developers and speakers attending from all over the world, it’s easily one of the largest events for open source projects.

As usual, there will be a wide variety of presentations by speakers across several tracks, along with keynotes, developer rooms and hacking sessions, lightning talks, project stands with demos and merchandise, and open discussions. You can attend as few or as many activities as you like for free - just turn up on the day.

Unlike previous events, no certification exams are planned for this year. There will be an area for recruiting and job opportunities for open source positions, and several related fringe events that you may be interested in attending.

Open source diagramming​

We greatly appreciate our open source community of developers, bug reporters, translators, contributors and sponsors, as well as the developers of the open source projects that we sponsor directly.

As one of the world’s most widely used browser-based diagramming applications, draw.io can be used online, as a desktop app, deployed locally in a variety of formats. Plus, there is an increasing number of third-party integrations, where developers have embedded our open-source diagram editor into their content and project management tools.

You can swap shapes on the drawing canvas in draw.io via the Arrange tab of the format panel, or by dropping a new shape from the shape libraries on top of an existing shape. You can also reverse the arrows on a connector easily via the Arrange tab.

Connectors to and from a swapped shape will move with it, staying attached and automatically updating its path.

If you want to swap the direction of the connector as well, select the connector after you swap the shapes, then click Reverse on the Arrange tab of the format panel.

Replace an existing shape with a different shape​

Drag a shape from the shape libraries and hover over an existing shape on the drawing canvas until the replace symbol appears, then drop the shape.

Alternatively, double-click on an empty spot on the drawing canvas to open the quick selection box and drag a shape from there over an existing shape, and drop it when the replace symbol appears.

Do more with shapes in draw.io​

There are many more ways you can quickly work with shapes in draw.io. Use these FAQs, tutorials and blog posts to learn how to diagram faster and easier.

Work faster with shape libraries using keyboard shortcuts, and use keyboard + mouse modifier shortcuts to work with shapes faster on the drawing canvas.

Use the Arrange tab tools on shapes and connectors - move shapes forwards and backwards, group multiple shapes, resize shapes and groups of shapes, reposition shapes, rotate shapes and groups of shapes, and work with connector waypoints to perfectly path your connectors.

Style shapes using the Style tab in the format panel. The styles that are available will depend on the shapes you have selected.

See how you can modify the shape properties in the Style tab of a selected shape to turn a shape into a container, change the perimeter, disallow connectors, prevent it from being deleted or clones, and much more. Select a shape and click on Properties at the bottom of the style tab.

And finally, print out these draw.io keyboard shortcuts for easy reference.