As new features are added to draw.io and the menu is refined, new keyboard shortcuts are also built into the editor. Here are some of the new and useful shortcuts for diagramming in draw.io.

Move selected remote shapes and connectors​

Select the shapes and connectors you want to move, then hold Shift+Alt+drag and drag the cursor to reposition the selection even if it is not currently under the cursor.

Increase/decrease font size​

Select a shape or connector or label, and press Ctrl+Shift +/- (NumPad) to increase or decrease the text size. This only works with the + and - keys on the number pad.

Increase/decrease shape size​

Select a shape, and press Ctrl+Shift+arrow key to increase or decrease the right or lower edge of the shape.

Clear all extra waypoints on a connector​

Select a connector and press Alt+Shift+R to reset the waypoints back to the default path.

More keyboard shortcuts in draw.io​

There are many other mouse + keyboard shortcut combinations in draw.io to help you diagram faster, as well as many other key combinations.

Next time you go through the draw.io menu, or right-click and open the context menu, check and see if there is a keyboard shortcut next to the command you want to use.

Here's a one-page reference sheet that you can print out containing the most common and useful keyboard shortcuts in draw.io.

draw.io is one of very few diagram editors that lets you work in dark mode. Colours of shapes, text and connectors change automatically when you switch between light and dark modes. Now with adaptive colours, instead of changing the hue, all colours in a diagram will remain the same hue in both modes, but their intensity will be altered to significantly improve readability in dark mode.

Switch to dark mode in the draw.io editor​

Click on the sun icon in the top right and select Dark to change to dark mode. Alternatively, from the draw.io menu select Settings > Appearance > Dark.

To switch back, click on the moon icon and select Light, or Settings > Appearance > Light from the menu.

Tip: Choose Automatic if you want the editor to reflect your operating system or browser mode.

Dark mode is available in draw.io Desktop, our free online editor at app.diagrams.net, and in integrations such as the unofficial draw.io extension for VSCode, and the draw.io Chrome extension for Notion.

Dark is available in draw.io for Confluence Cloud and Jira Cloud, and diagram thumbnails and the draw.io editor will switch modes automatically when you switch between dark and light themes in Confluence or Jira.

Light and dark colours in draw.io​

All colours in a diagram - shapes, text, connectors and the drawing canvas background colour - now have their intensity changed when you switch modes.

This makes sure that text that is readable and connectors that are visible in one mode, are just as legible in the other mode.

All of the style palette colours (in the Style tab of the format panel), and the global diagram styles are changed to reflect the mode you are working in.

Light mode palette colours

Dark mode palette colours

Set specific colours for light and dark mode​

1. Select a shape or connector, and click on the Fill or Line colour block in the Style tab of the format panel. For text colour, select the colour block in the Text tab of the format panel.
2. The first value (default) is for light mode. Change this to a new hex colour code.
   By default, this will automatically shift hues to remain readable when someone views or edits the diagram in dark mode.
3. Expand Advanced and enter a hex colour code for dark mode. Now, when you are in dark mode, the shape or connector will use this defined colour value instead of an automatic shifted hue.

Exporting diagrams from dark mode​

When you export a diagram to an image, you can select Dark in the Appearance list. Your diagram will be saved over a dark background in the exported image.

When you export a diagram to a PDF, HTML file, draw.io file or URL, or export to a light-mode image, the diagram will be displayed on a light background with the light colour palette.

Colours in existing diagrams​

It is assumed when using dark mode that all diagrams have been created in light mode. As this is by far the most common case, it will ensure the colour intensity change when switching to dark mode will be correct, and your diagram readable.

Note: The mode colour intensity change is a CSS filter - this does not change the colours in your diagram data.

Diagrams not using the right colours?​

If you drew a diagram in dark mode and set specific colours to suit the dark background, when you re-open that diagram in the most recent version of the editor, the colours will not be as you originally set.

This is because the algorithm for converting light-mode colour intensity to dark mode is applied to all colours in a diagram when using dark mode. This will affect a minority of users - not many have been using dark mode exclusively to diagram.

You can continue using the old dark mode and your customised diagram colours

1. Open the draw.io configuration (Settings > Configuration or Extras > Configuration via the draw.io menu)
2. Search for css in the Editor tab.
3. Set the CSS Dark Mode toggle to Off and click Apply.
   

The JSON configuration string will be updated to reflect this.

{
  "enableCssDarkMode": false
}

Then, reload the tab or restart draw.io Desktop to load the new configuration. The colours in the diagrams you had customised for dark mode will now look as expected.

For more information, please visit the related discussion in our draw.io GitHub repository.

Atlassian has just released a dark theme for Jira Cloud for users who don't like working on light backgrounds. With Jira's new dark theme, draw.io diagram thumbnails in a Jira issue now automatically reflect your selected theme.

draw.io has had a dark mode for some time, but diagrams attached to Jira issues displayed on a light background, whether or not you were using the dark mode in the draw.io editor.

Learn more about diagramming with draw.io in Jira

Diagrams on dark backgrounds​

draw.io makes an intelligent guess about text and shape fill colours to keep your diagrams readable when you switch between dark and light.

As your team members can use their preferred dark or light theme, and the diagram thumbnail will match their theme, it's best to double check that your diagram is easy to read in both dark and light mode.

1. Click on the Edit pencil in the toolbar when you hover over diagram thumbnail in a Jira issue to edit it with draw.io. If you don't see this section, click on the draw.io section at the top.
   
2. Click on the sun or moon in the top right to switch to the opposite theme - either Dark or Light_ - and check that your diagram is still readable on that background.
   

Choose Automatic to make the draw.io editor automatically match your operating system's mode (dark mode or light mode).

Note: Switching to dark or light mode in the draw.io editor will not affect the thumbnail on the Jira issue - whether it appears on a dark or light background is based on the Jira theme that the user looking at the issue has chosen.

To use draw.io in dark mode on the web, go to app.diagrams.net/?splash=0&ui=dark, or switch modes via the sun/moon icon in the top right or via the draw.io menu.

Set specific colours in a diagram​

Colours in certain types of diagrams may have specific meanings - if you change their colours when adapting to dark mode, the diagram might not make sense.

If you want your diagram to only ever be on a dark or a light background and not automatically adapt colours to match the user's Jira Cloud theme, you'll need to set a background colour, as well as a specific colours for both light and dark modes on the shapes, connectors and text in your diagram.

1. Open the diagram from the Jira issue in the draw.io editor.
2. Make sure nothing is selected in your diagram, then enable the Background checkbox in the Diagram tab in the format panel.
3. Click on the colour button, select a colour from the palette or enter a colour code, and click Apply. Open the Advanced drop down and set the same colour as the dark mode background colour.
   
4. Style the shapes and connectors via the Fill and Line colours in the Style tab. Make sure you set both the light colour at the top, and the dark mode colour (under Advanced). Style all text labels via the Text tab.

Now, your diagram will use your defined colours in both dark and light mode.

draw.io will be available as an integration in the web-based GitLab Wiki editor on 22 March with the GitLab 15.10 release and product kickoff. When you add your diagram to a GitLab Wiki page while editing the source of that page, it will be saved as an SVG image containing the diagram code, and displayed in the page content.

Like all files in GitLab, the image with its embedded diagram is versioned, so all changes are tracked.

Note: As this integration is still under development until release, small changes may be made.

Diagram in the GitLab Wiki editor​

Add a new diagram: Click on Insert or edit diagram in the toolbar in the Markdown editor.

A blank diagram will be opened in the Sketch whiteboard-style editor theme. Use the diagramming toolbar on the left to access templates and shape libraries.

Save your diagram: It will be added to the page in Markdown as a .drawio.svg file.

Edit an existing diagram: Make sure your cursor is in the diagram file entry in the Markdown code, and select Insert or edit diagram.

View a diagram in the page: Click on Preview to render the page containing the diagram.

Diagram with the GitLab rich text editor​

Edit a diagram: Select the diagram, and click on Edit diagram in the hover toolbar that appears above or below.

Add a new diagram: Make sure no other diagram is selected, then click on the + in the toolbar and select Create or edit diagram.

Save individual diagram files to GitLab​

You can also store your individual diagram files in GitLab. Select GitLab as the save file destination when you create a new diagram, or select Save as from the menu.

Alternatively go to our online editor to start diagramming now using GitLab to store your diagrams.

You'll need to authorise access to your GitLab repositories, if you haven't already done so.

Tip:i As draw.io uses secure direct client authorisation, your password is never shared.

Diagram in VSCode with GitLab​

1. Set up the GitLab Workflow extension for Visual Studio Code.
2. Install Henning Dieterichs' unofficial draw.io extension for Visual Studio Code

The draw.io extension for VSCode lets you view and edit the .drawio diagram files stored in your repositories.

See how this extension works in GitHub - it works in a similar way with GitLab inside VSCode.

Note: The extension only recognises files with the .drawio file extension.

It was quite a year. We want to take this opportunity to thank you for your support, look back at some of the features we've added and updated.

To our diagram editor users

Whether you use our web-based draw.io app or one of our draw.io integrations, or our standalone desktop app, thank you for your support, feedback, and participation in our Google forum and GitHub discussions.

To our open-source contributors and sponsors

Also to our development and support team, translators, bug reporters, and open-source sponsors - we love that you love our secure diagramming app. Thank you for your support and contributions this year.

To those open-source projects and developers we sponsor

Particularly Henning Dieterichs (unofficial draw.io extension for VSCode), Preet (rough style for shapes) and Dan Brown, but we'd like to thank all those we sponsor for your contributions to the open-source community and our application.

New features and updates in 2022​

The biggest and most recent new draw.io feature is our redesigned toolbar and menu for a distraction-free diagram editor.

The new simple mode takes the best parts of all of our editor themes and blends them together with a simple, responsive toolbar and large drawing canvas. To switch to this mode, click on the sun/moon in the top right, and select Simple.

• draw.io users in Confluence Server/Data Center can apply a sensitive label to exclude diagrams from recent lists and search.

• draw.io users in Confluence, and with Google Drive and Microsoft One Drive can see each others' mouse cursors in real time as they collaboratively edit a diagram.
  

• Improvements were made to the mass Gliffy import and Confluence instance migration tools for draw.io users.

• Shape libraries have been expanded and updated with new icons - particularly the Azure, AWS, Google Cloud and SysML shape libraries.

• You can add and edit translations within the shape labels as shape metadata - no need to keep separate diagrams for separate languages.
  

• The editor was translated into new languages - Lithuanian and Latvian.

• Switch between dark and light modes without having to reload the browser tab - click on the sun/moon in the top right and select Dark.

• A connection point editor tool was added - you can now easily customise the fixed connection points for any shape on the drawing canvas.
  

• Swap existing shapes on the drawing canvas by holding down Shift as you drag one over the other. Flip connectors and groups of shapes via the Arrange tab on the format panel.

• Number shapes and connectors with the built-in enumerate property (to replace the number plugin).

• To run your own diagramming server, you can use our Docker image of draw.io for secure and private diagramming behind your firewall.

• Freehand drawing was updated with a variable size brush, which works well with a tablet and pen.
  

• Several advanced tools and features were updated, including Mermaid import, mathematics typesetting, rough style, CSV import, image cropping, font mapping, SVG export, drag and drop diagram import, and more.

• More integrations with a wider range of tools for built-in diagramming - thanks to the developers who have integrated our open-source diagram editor.

And, of course, our team also published a mountain of bug fixes, security patches and smaller optimisation changes to both the web version of draw.io and our own draw.io app integrations.

Finding a typo-proof word that is also pronounced the same throughout the world is simple, how sensible companies fail to stop users from mis-spelling product names eludes us. draw.io demonstrates the right way to do this, clearly. However, a small, minor, fractional, minority of users regularly fall asleep on their keyboards while typing our product name, this is the only rational explanation.

craw.io - do our diagrams make you angry? Or maybe it's a reference to the cleverness of crows? Do those filthy BPMN shapes make your skin crawl?

dra.io - the languages with a close appropriate meaning would be Norwegian (to draw or drag) or Swedish (to pull or tell a story). Or perhaps Yola, the Forth and Bargy dialect (to draw) in County Wexford. We bet you've dropped your lunch under the w key.

dran.io - your turn! (German) Seriously, we're not sure how n slips in for w as those two keys are usually far from each other in most layouts. Perhaps Maltron 3D keyboard users slipping from the a?

draq.io - uncertain, unexpected, indefinable, but riveting. Or perhaps fashionable? Or cut off accidentally while typing something longer...

drag.io - a wonderfully concise description of how to use draw.io - drag shapes onto the canvas and drag connectors between them.

drsw.io - That's tough to say after you've been drinking. Maybe that's the reason you spelt it like that. But that's cool, we'd totally all vote for Sanna Marin if we could.

drwa.io - Polish for firewood or wood, probably. Also Creole for right (entitlement).

dwaw.io - this brings to mind an old movie ...
"Mawwiage ... mawwiage is what bwings us togevvar, today."

draw.net and diagrams.io - how could anyone get this wrong? Our naming change will go in marketing textbooks for years to come as an example of how to re-brand effectively.

diagram.io - our top secret site to get money from you. You're only allowed a single diagram here, until you pay up and we redirect you.

graph.io - because draw.io is developed by JGraph? Or is it diagrams.net...

drow.io - flanked by dark elves? Seriously though, the aw sound in English is difficult in other languages - in Japanese, it is closest to the vowel o. It seems to be tricky in Spanish, too.
drow.io should really redirect to a vector drawing of Drizzt.

ddra.io - when said aloud, this is suspiciously close to daedra. Perhaps we should ask Bethesda if Hermaeus Mora, Jyggalag or Peryite is the patron prince of diagrams? Ooo, an idea - a wabbajack tool for hilarious chaos when teams collaborate!

It's summer, we're bored and it's hot. If you'd like to contribute additional misspellings or propose different meanings for those above, share it with draw.io on Twitter.

How many of these domains will be purchased within a week? You can offer to sell them to us at sales@draw.net.

TL;DR : Gliffy on Confluence Cloud saves with last write wins, you lose data concurrently editing. draw.io supports real-time collaborative editing with shared cursors.

Gliffy vs draw.io for Confluence

When comparing diagramming apps, you'll see lists of standard Confluence-supported features - sharing, import and export, search, version history, customisation, security - and, of course, pricing.

Unlike Gliffy, draw.io has concurrent diagram editing. All team members' changes are merged and synchronised - visible to each other in the diagram editor.

When you choose to show your cursor, your team will see where you move your mouse and what you select, all in real-time.

Shared cursors mean better collaboration in draw.io for Confluence​

Each person who is editing a draw.io diagram in Confluence is assigned a colour. Cursors are shared by default - you'll see everyone's name with their mouse pointer as they move around and edit the diagram.

Additionally, when you select a shape everyone else will see it highlighted in your colour.

Don't lose diagram data - use draw.io​

More importantly than seeing a mouse cursor in real time, you don't want to lose any changes as you collaboratively edit a diagram.

That's why draw.io merges and synchronises the changes while you are editing. You don't even have to publish the diagram to Confluence to see everyone's changes in the editor - draw.io saves and synchronises automatically.

Recorded using two different devices, both editing the same draw.io diagram file in Confluence Cloud. Changes are constantly merged and the draw.io diagram is updated in the editor in real time.

Now, let's contrast the collaborative editing process in draw.io the animation above with editing a diagram in Gliffy.

Gliffy vs draw.io - when a team edits a diagram​

The following example shows that you can't see the changes made by others while editing the same Gliffy diagram in Confluence, and that Gliffy follows a last-write-wins approach.

1: Person A adds a shape and publishes the edited Gliffy diagram, then returns to Confluence to view it.
2: Person B was already editing the Gliffy diagram file, so doesn't see the added shape, or that any changes were made by another person.
3: Person B deletes an existing shape and publishes their version, returning to Confluence to view it.
4: Because Person B's Gliffy diagram was the last to be published, it overwrites and ignores the changes made by Person A.

Recorded using two browser windows, both editing the same Gliffy diagram file in a Confluence Cloud instance

Person A must now manually refresh their browser tab to see the updated Gliffy diagram. Only then will they see that their changes have been overwritten by Person B.

Person B remains unaware that another person had edited the Gliffy diagram.

Use draw.io to avoid this problem - share your cursor and let others see you collaboratively edit a diagram in Confluence.

You can create network diagrams from scratch in draw.io using shapes that match the platform you are using - AWS, GCP, Veeam, Azure, Cisco, IBM and many more. Both the draw.io AWS19 and GCP Icon shape libraries for network and cloud architectures have been updated recently.

Open the updated network shape libraries​

Both the Amazon Web Service and Google Cloud Platform shape libraries have been updated recently. Enable the shape libraries that you need to use in draw.io.

1. Click on More Shapes in the left-hand panel.
2. In the Networking section, click on the checkboxes next to the libraries you want to enable, then click Apply.
   

If you want to see the shape names even when you aren't hovering over a shape in the shape libraries, click on the Labels checkbox in the shape library selection dialog.

Hover over any shape in the shape libraries on the left of the drawing canvas to see a preview and its name.

Drag the shape library panel edge towards the drawing canvas to expand the panel and see more shapes.

Updated AWS19 network shapes​

Enabling the AWS19 shape library will give you a large number of sub-libraries in the left panel, sorted into logical categories. Expand the categories that you need by clicking on the sub-library's title or the arrow next to it.

As you can see below, the AWS19 shape library for modelling cloud service architectures on Amazon's platform is large and varied.

Create a new diagram with the AWS19 shape library already enabled

Updated GCP Icons​

The large Google Cloud Platform shape library containers older labels and icons, whereas the updated GCP Icons are sorted into their own shape library. Click More Shapes and enable the GCP Icons library to see updated sub-libraries shown below.

Create a new diagram with the GCP Icons shape library already enabled

Related​

Some cloud visualisation platforms can output diagrams in the .drawio format, including Cloudcraft and Cloudockit.

Embed the exported diagram in your system documentation or display it in your wiki with one of our draw.io integrations.

Network diagram templates

draw.io includes many templates for common cloud infrastructures on several platforms. Select Arrange > Insert > Template from the menu.

• Learn about infrastructure diagrams
• Use the Veeam shape library for your network diagram
• Draw an abstract C4 model to define a network architecture
• Model your physical rack layouts in draw.io

You can now edit a shape's connection points visually with the new connection point editor. Drag the connection points around the shape, add new connection points, and delete those you don't need.

While you can set custom connection points by entering the coordinates when defining a custom shape, editing the connection points visually is faster and easier.

Right click on a shape and select Edit Connection Points.

The shape will be displayed with its connection points shown as blue crosses.

Select a connection point: Click on a connection point, or select multiple connection points by dragging a selection box around them.

Move connection points: Drag a connection point to a new position. You can also drag connection points to be inside or far outside the shape's outline.

Alternatively, you can shift selected connection points to the left/right or up/down by precise percentages or points. Note that you can only shift these in one direction at a time in this way.

1. Select one or more connection points.
2. To shift them to the right, enter a value in the Dx % or pt field and press Enter. Use a negative value to shift them to the left.
3. To shift the selected connection points up, enter a value in the Dy % or pt field and press Enter. Use a negative value to shift them down.
   

Delete connection points: Select one or more connection points, then press Delete or click on the Delete icon just under the editor on the right.

Add new connection points: Double click anywhere on or around the shape to add a new connection point.

Alternatively, make sure no connection points are selected, then click Add.

• To add multiple connection points at once, change the number in the text field to the left of the Add button.
• To change which edge the connection points are added to, select another value from the drop down list.

Zoom in and out: To zoom in and out, click on the magnifying glass icons, or on the Actual Size and Fit icons directly under the editor on the left.

Define connection points on custom shapes​

You can also add and edit connection points on complex custom shapes using the same steps as above. For example:

Note: If you don't see connection points when you hover over a custom shape, check the Connection Points option in the Arrange tab of the format panel is enabled.

We've recently implemented a number of features, most popularly requested via our drawio Github repository. To reach support at draw.io for diagrams.net and our draw.io apps, please read and follow the instructions on our support page.

Skip to the end of this post to see how to upvote existing issues and feature requests.

Tip: To use the updated features in our online editor, clear the draw.io cache in your browser (clear.diagrams.net), then reload the draw.io editor.

Crop images in the diagram editor​

You can now crop images in the draw.io editor. This works on both images imported into the editor from your device, as well as images embedded from a URL.

1. Right click on an image and select Crop.
2. Resize the crop using the grab handles and drag the crop box to reposition it.
   • Click on Ellipse to use a circular or ellipse-shaped crop.
   • Click on Rounded to round the corners on the rectangular crop.
3. Click on Apply

This is a non-destructive crop. To reset the crop to the original image, click on Reset in the crop image dialog.

Merge and unmerge table cells in the Sketch editor theme​

Merge and unmerge table cells using the Table tool on the toolbar in the Sketch editor theme - our uncluttered online whiteboard theme.

These options only appear when you have selected multiple table cells or a previously merged table cell.

Merge two or more table cells

1. Select two or more adjacent table cells (hold down Shift and click on multiple cells).
2. Click on the Table tool in the toolbar and select Merge. Alternatively, click on Merge in the Arrange tab of the format panel.
   

Unmerge merged table cells

1. Select the merged cells in the table.
2. Click on the Table tool in the toolbar on the left and select Unmerge.
   

In all of the editor themes, you can also unmerge merged table cells via the Arrange tab of the format panel.

SVG export options for formatted text​

Previously, draw.io exported shapes and labels with HTML formatted text embedded as a foreign object in the SVG. This displays fine in browsers, but a number of users had issues with exporting and editing in SVG editors, which wasn't a use case we had considered.

Now, you can choose how formatted labels should be exported, and whether the SVG file it should contain a warning about the text not being SVG.

For example, in the following diagram, some of the shapes have bold and italic words in the label text - they use formatted text.

When you export this diagram as a SVG (File > Export as > SVG), you can now choose the Text Settings.

• No Change includes the warning embedded in the raw SVG data (default).
• Embed Fonts includes the fonts in the exported SVG file in case the viewer doesn't have the font installed.
• Convert Labels to SVG transmits the diagram to our servers, generates a PDF, then pipes that through Inkscape, and returns the SVG output.
  

Note with this last option:

• You transmit the diagram to our servers. Diagram data is not stored after this PDF/SVG conversion has finished and the SVG output is returned.
• The text is converted to a path. Screen readers can't read it and you can't select it.
• The file size will be larger.

To report a bug or request a feature​

If you are using our draw.io apps in Atlassian Confluence or Jira, please contact your instance administrator for details of your support entitlement.

For our online diagram editor and any of the draw.io integrations that we support via our open source project, follow the steps below.

Go to the Issues tab in our drawio GitHub repository and first search through the list of existing issues to see if your issue or idea has been previously posted.

Upvote an existing issue or feature request​

If you find an existing issue related to yours:

1. Click on the issue title to see the full issue description.
2. Click on the emoji icon at the bottom of the description, and select the 'thumbs up' icon.
   

This will ensure that the most popular bugs and feature requests get pushed to the top.

Raise a new issue or request​

If you have a question, rather than want to report an issue or request a new feature, please look under the Discussions tab in our Github repository.

1. From the Issues tab in our drawio GitHub repository, click on New issue.
2. Click on Get started next to either Bug report or Feature request.
3. Enter a clear and unambiguous title for your bug report or feature request.
4. Follow the instructions and fill in the Preflight Checklist in the large text field.
5. Describe your problems or suggested feature in the appropriate sections of the checklist, clearly and in detail.
6. Click Submit new issue when you have finished.
   

The barrier to anyone diagramming and whiteboarding with draw.io is lower compared to many other SaaS applications. From reviews and customer feedback, some of the things they like the most include:

• you don't need to register and it costs nothing
• you can diagram in all major operating systems
• there is an offline desktop version
• you can give your diagram to anyone else and they will be able to load and edit it freely
• you can store unlimited diagram files wherever you prefer
• project development is in the open and anyone can take part

But don't take our word for it - here is what draw.io users are actually saying on popular review sites.

On Capterra​

Capterra verifies reviewers through LinkedIn and checks their reviews for a range of fraudulent activity and credibility. They are one most popular software review sites for businesses.

See more draw.io reviews on Capterra

On GetApp​

GetApp has monitored software trends for the past 10+ years, and collates reviews on its site from a number of other trusted platforms.

See more draw.io reviews on GetApp

On G2​

The G2 company gathers user reviews of software products from their own community, and aggregated data collated from various other social and online sources, with more weight given to recent reviews.

See more draw.io reviews on G2

Thank you to our reviewers​

Useful as these reviews are, we don't actively monitor review sites regularly - if you have a suggestion or want to report a bug, please go to the the support page on the Github project. That is best place to get our attention.

This past year has seen a number of new features and big updates to draw.io, including the online editor, our Confluence and Jira apps, and other integrations for a variety of platforms.

Data security and privacy​

As a unique security-first diagramming app, we want to provide you with the best in data privacy and data security.

Building on the data governance and lockdown options we implemented last year, our draw.io branded app for Confluence Cloud and Jira Cloud was the first secure diagramming app to meet Atlassian's rigorous Cloud Fortified standard, making it your most secure choice for diagramming and visualization.

The draw.io App for Github is an alternative authorisation method you can use to limit draw.io's repository access to specific repositories, rather than all of the repositories in your account.

We researched a stricter implementation of our content security policy on the test se.diagrams.net domain. Take up of the domain has been very low, so we will port all the changes we can from that project and then close it down.

New and updated integrations​

Several new integrations were released, and existing ones were updated in the past year. New and updated features common across all integrations are described in the following section.

draw.io for Atlassian Confluence and Jira

With the draw.io apps for Confluence Cloud and Jira Cloud, you can embed diagrams that are stored in Confluence Cloud in your Jira Cloud issues. Keep all of your visual documentation for systems, processes and software in your Confluence Cloud knowledge base, and reference them in your project tasks in Jira.

The draw.io app is now free in small Confluence Cloud instances (up to 10 users). If you are taking advantage of Atlassian's offer of a free Confluence Cloud instance for your small team, you can now add the draw.io board macro and embed diagrams in Confluence pages without needing to purchase a license.

We've improved the draw.io app's performance within Atlassian host products, updated the authentication to use the new API, and refreshed the Kennedy editor theme. The Gliffy and Lucidchart conversion features received a number of updates and bugfixes throughout the year.

The new draw.io board macro in Atlassian Confluence uses the updated Sketch editor theme by default, providing teams with an easy-to-use digital whiteboard.

draw.io for Google Workspace, Drive and Classroom

Google Classroom continued to be used extensively by schools and training providers. The draw.io app for Google Drive lets you integrate diagrams into Google Classroom assessment tasks and discussions. Diagrams set in assessment tasks can be collaboratively edited, or act like a template with each student getting their own copy.

Tip: Install the Google Workspace apps for Docs, Sheets and Slides to embed diagrams in your Workspace documents.

draw.io for VSCode and GitHub

In combination with the third-party draw.io app for VSCode, and the github.dev web-based code editor, you can now edit diagrams stored in GitHub, without needing to change to another tab. You can even compare changes side-by-side on commit.

draw.io diagrams in Notion

You can use the draw.io for Notion extension for the Chrome, Opera and Edge web browsers to store your diagram files in your Notion pages. The diagram editor loads inline in your Notion page using the simple Sketch editor theme.

draw.io for Microsoft Teams

You can now collaborate in real time on diagrams stored in Microsoft One Drive or Sharepoint, directly from your team’s channel with the draw.io app for Microsoft Teams. Install the draw.io app in your Teams channel to add diagrams to conversations or to a Teams tab.

Diagram import and file conversion

The free draw.io Importer extension for the Google Chrome browser lets you convert all of your Lucidchart diagrams to draw.io in a couple of steps. This lets you continue editing all of your diagrams now that Lucidchart has limited Lucidchart EDU, their previously free education plan, to only three editable diagrams.

New features and updates in 2021​

The Sketch editor theme, and the right-click context menu received a comprehensive overhaul. The tools and menus were simplified and reorganised to make it feel much more like a whiteboard you can sketch freely on. You can expand or collapse most of the panels, and move them to another location around the drawing canvas.

The freehand drawing tool was updated along with the whiteboard like editor theme.

You can now search for templates and click on the magnifying glass in the top right of any template to see a larger preview. The draw.io template library was also expanded with more templates and template categories.

In addition to moving diagram elements to the front or the back of an overlapping stack, you can step shapes and connectors forwards and backwards in the z-order stack using the Bring Forward and Send Backward buttons on the Arrange tab in the format panel.

You can now use a diagram page as a background behind another diagram page. It will be printed along with the diagram, and is ideal for watermarking your diagrams, providing a common layout for mockups, or adding a template for diagram metadata on development documentation.

A waypoint shape is now available in the Misc shape library (part of the General collection). You can use the small waypoint shape to join connectors together, replacing overlapping connectors with the same target or source shape neatly and cleanly.

Tags have been brought into the draw.io editor as a core feature and the experimental tags plugin has been retired. Add one or more tags to shapes and connectors to group them without needing to place them on the same layer in your diagram.

Use the Tags dialog (View > Tags) to group, select, hide or display the tagged shapes.

Several shape libraries saw new or updated stencils, including AWS, C4, GCP, BPMN 2.0, electrical and swimlane shapes.

Many more features have been updated, expanded, and some simplified. Additional interface translations have been completed, and existing translations refreshed - thank you to all of our translators!

And of course, a mountain of bugs have been squashed.

See the changelog in our drawio GitHub repository for full details of all of the releases.