In line with Microsoft's end of life date of Internet Explorer 11, we will end support for IE 11 on 15th June 2022.

Online draw.io users of app.diagrams.net​

• Saving to local device will stop working.
• Saving to cloud storage options are already not supported by the various vendors:
• Dropbox dropped IE 11 support October 2020.
• Google Drive dropped support March 2021.
• OneDrive dropped support August 2021.
• GitHub do not list IE in their supported browsers.
• Gitlab ended support for IE 11 in the 13.4 release. The gitlab.com site does not support IE.

Users of draw.io with Confluence and Jira Cloud​

Atlassian do not support IE on their cloud products, our removal of support will make no difference.

Users of draw.io with Confluence and Jira Server and Data Center​

Atlassian are removing IE 11 support on specific versions of Jira and Confluence on-premise.

• For Jira, 8.5 is the last supported release EOL 21st October 2021. The first draw.io release that does not support Jira 8.5 will not support IE 11. That will not be before Atlassian's EOL date.
• For Confluence, 7.4 is the last supported release EOL 18th August 2022. This is beyond the Microsoft EOL date, so support will end for Confluence on-premise on 15th June 2022.

Users of the draw.io codebase​

If you deploy your own version of the project from source code, releases up to and including the 15th June 2022 will support IE 11. For any releases after that date you can expect complete failure when using IE 11. Specifically, we may remove IE 11 specific functionality from the codebase to simplify the code.

If you wish to have a IE 11 supported deployment, deploy the last release prior to this date and do not update it.

Alternatives​

You can open, edit and save diagrams created with IE 11 using the desktop application. Windows releases include a no-installation build for those without admin rights on their Windows machines.

Note that we will not support IE mode in Microsoft Edge.

draw.io and the draw.io branded Atlassian integrations are the leading solution for web based sketching and diagramming functionality. The article describes the draw.io integration for Confluence that we, draw.io Ltd., build, deliver and maintain alongside the online version of our editor at app.diagrams.net, our draw.io desktop application.

Confluence Cloud is a popular tool for team productivity suitable for both small and large organisations. Atlassian provides customers with free instances, as long as the instance has ten users or fewer, and you can diagram in these instances with our draw.io Confluence Cloud integration.

Diagram freely

With the draw.io app installed in your free Confluence Cloud instance, you and your small team can draw a wide range of diagrams:

• flowcharts, business process diagrams, and gitflows
• mindmaps, org charts, and tree diagrams
• kanban boards
• mobile mockups and app layouts
• infographics and diagrams for presentations
• floor plans
• circuit layouts and rack diagrams
• UML diagrams and relational schema
• cloud infrastructure diagrams and threat models
• ...
  

The draw.io diagram editor is easy to use and powerful. The draw.io app in Confluence Cloud is also secure and private - Your data stays in the browser while you are editing a diagram and is stored only in your Confluence Cloud instance when you use the draw.io app.

• Attach unlimited diagrams to pages with the draw.io macros.
• Use and connect shapes from an extensive collection of shape libraries.
• Style shapes, connectors and text labels.
• Draw freehand shapes and create custom shapes.
• Use a template from the template library to start diagramming quickly.
• Switch to various editor styles, including a simpler draw.io Board macro, ideal for brainstorming.
  

Install draw.io in a free Confluence Cloud instance​

1. Set up a new Confluence Cloud instance, choosing the Free tier of up to 10 users on Atlassian's Confluence Cloud pricing page.
2. Step through the installation and setup until you see the space landing page and Confluence Quickstart tutorial.
   

Install the draw.io app for Confluence Cloud

1. Click on the gear icon in the top right, next to your user initials to open the Confluence Cloud administration settings.
2. Under the Atlassian Marketplace section, click on Find new apps. Search for draw.io and click on it to see details about the draw.io app for Confluence Cloud.
   Alternatively, go to the draw.io app on the Atlassian Marketplace website.
   
3. Install the draw.io app in your Confluence Cloud instance. Note: If you have a team of users larger than 10, start a free trial - when the license expires, you'll still be able to create all types of diagrams, but some advanced features are limited to the licensed version in larger Confluence Cloud instances.

draw.io as an online whiteboard​

1. Edit a Confluence page, type /draw.io and insert the draw.io Board macro. The simple whiteboard-like editor will open.
2. Save your diagram and page so that your remote team members can collaborate on the draw.io Board drawing with you.

Learn more about using draw.io as an online whiteboard in Confluence

Learn the draw.io diagram editor​

1. Edit a Confluence page, then type /draw.io and insert the draw.io Diagram macro. This will open the draw.io editor.
   
2. Select the Blank Diagram template, enter a filename for your diagram, and click Create.
   
3. Get to know the layout of the diagram editor: the shape and format panels, the toolbar, menus and drawing canvas. The default layout is the same as at app.diagrams.net.
   
4. Step through the tutorial to draw a basic flowchart in the draw.io editor.
   • add and connect shapes using the shape libraries on the left
   • add labels to the shapes and connectors on the drawing canvas
   • style your diagram using the tools in the format panel on the right.
     
5. Instead of exporting your diagram, click Publish to save your new diagram, or Save & Exit to save an existing diagram, then publish your Confluence page.

License draw.io for larger teams​

The price of the draw.io app is very affordable in Confluence Cloud. See the tier-price comparison when migrating from Confluence Server to Confluence Cloud with draw.io.

If you have started a free trial in your team of more than 10 users and let the license expire, you will need to purchase draw.io to continue diagramming in your instance.

Licensing the draw.io app for your larger Confluence Cloud instance allows you to receive product support and use all of draw.io's features, including those listed below.

• Import and export .vsdx files.
• Drag and drop diagram files into the editor.
• Add multiple pages to a diagram.
• Export to PDF files and print diagrams.
• Use math typesetting.
• Set up and use custom shape libraries.
• Customise the draw.io editor and set global corporate styles with JSON configuration options.
• Use the search feature to find shapes.
• Use the collaborative editing functionality to simultaneously edit a diagram with your teammates.
• Work with the diagram file's revision history.
• Display an older version of the diagram when viewing a page.
• Import Mermaid code to automatically create a diagram.
• Import CSV data with formatting options to automatically create a diagram.
• Embed diagrams from cloud storage platforms (Google Drive and Microsoft OneDrive).
  

Small teams with up to 10 Confluence Cloud users can use all of the features of the draw.io app for free.

Embed whiteboard-style diagrams in Confluence Cloud pages with the new draw.io Board macro. The Board macro is a new feature for our integration with Confluence Cloud, delivered as part of our draw.io brand.

When you add or edit a diagram using the draw.io Board macro, it uses the Sketch editor theme, with the rough sketch shape and connector styles set as the default global style. The diagram editor has a a white non-paginated background and no grid lines so it feels more like a whiteboard.

A discussion thread on the GitHub draw.io project is open if you have any questions or suggestions.

Add the draw.io Board macro to a Confluence Cloud page​

1. Edit the page and type /draw to see a list of macros you can embed.
2. Select the draw.io Board macro from the list to open the diagram editor.
   

Diagram in Confluence Cloud using the draw.io Board macro​

The draw.io Board macro uses a simplified editor theme, where the diagramming tools are reduced to the essentials. The panels you are used to seeing in draw.io are minimised to make it feel more like a whiteboard.

You can display panels and use the menus at any time to use the full functionality of the draw.io editor in the draw.io Board macro.

Zoom: To zoom in and out, click on the magnifying glass tools in the bottom right. Click on the number in the center to reset the zoom to 100%.

Dark mode: To switch between the default light theme and a dark theme (dark background and interface), click on the moon/sun tool in the bottom right.

Open the menu in the draw.io Board macro​

Click on the draw.io logo in the top left to open the menu.

Undo and redo: Click on the undo and redo arrows next to the menu icon to undo and redo the most recent changes. These will not be shown unless you have edited the diagram.

Work with shapes in the draw.io Board macro​

Add shapes: Double click on a blank space on the drawing canvas and select a shape.

Connect shapes: Hover over shapes to see direction arrows.

• Click on the direction arrow to add a new shape in that direction.
• Click and drag a new connector from the source shape and drop it on another shape to connect them.

Alternatively, click on or drag the text, sticky notes, basic shapes and connectors in the top half of the toolbar on the left to add them to the drawing canvas.

Use shape libraries in the draw.io Board macro​

To see the shape libraries and use a greater variety of shapes, click on Shapes in the toolbar to open the Shapes panel.

• Search for shapes by entering a search term and press enter.
• Drag shapes or groups of shapes from the drawing canvas to the scratchpad.
• Enable more shape libraries: Click on More Shapes toward the bottom of the shape library, select the shape library, then click Apply.
  

Draw a freehand shape in the draw.io Board macro​

You can draw images with a transparent background with your mouse.

1. Click on the Freehand tool in the toolbar.
   
2. Click Start Drawing in the Freehand panel.
3. Click and hold to draw a freehand line on the drawing canvas. You can add multiple separate lines in your freehand drawing.
4. Click Stop Drawing when you are finished, to save it as an image with a transparent background.
   

Learn more about drawing and styling freehand shapes

Tip: Use the Style tools in the format panel on the right to change your freehand shape's style, just as you would a shape from the shape libraries.

Style shapes in the draw.io Board macro​

To access the format panel, click on the minimised heading. The tools and options that are available in the format panel will depend on what you have selected in your diagram.

Insert a template in the draw.io Board macro​

Click on the Template tool to select and use a diagram template from the template library. Click on the magnifying glass in the top right of a template to see a larger preview of it.

Save the draw.io Board to Confluence Cloud​

1. Click Publish in the top right to save your diagram.
2. Enter a filename if it is a new diagram, and click Save.
   

You will return to the Confluence page and see a preview of your diagram in the draw.io Board macro.

Finally, publish your Confluence page.

Change the draw.io Board macro viewer settings​

There are two methods to change how your diagram appears to viewers:

When viewing the Confluence page, hover over the diagram, click on the gear icon in the toolbar, change the viewer settings then click Save.

Note: If the diagram uses the Simple Viewer, you will not see the toolbar

Alternatively, from within the draw.io diagram editor, make sure nothing in your diagram is selected, then open the Format panel. The Viewer options are available at the top of the Diagram tab of the format panel.

The Unified Modeling Language (UML) is a set of standard symbols and diagram types, commonly used in data modelling, workflow visualisation, and system modelling. UML notation is the defacto industry standard in the fields of software development, IT infrastructure, business systems and other fields. Many languages, such as SysML, SoaML, and a number of architecture frameworks use and extend UML.

The UML 2.5 specification updated the notation, or the shapes used in diagrams so they could represent a wider range of concepts more clearly. The specification document was extensively rewritten to make it easier to understand.

No new diagram types were added in UML 2.5 - the 14 diagram types that were previously defined in UML 2.0 are extended to cover the additional concepts, with many examples provided in the specification document.

UML diagram types​

UML diagrams are divided into two categories that provide you with static (structural) and dynamic (behavioural) views of a system.

• Structure diagrams: Class diagrams, component diagrams, composite structure diagrams, deployment diagrams, object diagrams, package diagrams, and profile diagrams.
• Behaviour diagrams: Activity diagrams, use case diagrams, state machine diagrams, and the four types of interaction diagrams - sequence diagrams, communication (collaboration) diagrams, interaction overview diagrams and timing diagrams.

Open this in our free diagram viewer

Enable the UML 2.5 shape library​

1. Click on More Shapes at the bottom of the left panel in draw.io, scroll down and click on the checkbox next to the UML 2.5 shape library in the Software section. You may want to also enable the UML shape library. Then click Apply.
   
2. The UML 2.5 shape library will appear in the left panel.
   

Using these shapes, and some of the shapes from the General and older UML shape libraries, you can create the full range of UML diagrams.

Example UML diagrams​

Click on a diagram below to open in our diagram viewer

Component diagrams show the dependencies between the logical and physical components of a system with the interfaces that each component requires and provides and their ports.

Composite structure diagrams are used to show the internal structure of a classifier, with its properties, parts and relationships, or how a collaboration behaves. You can break down the behaviour of a collaboration into one or more specific situations (occurrences) in a collaboration or collaboration use diagram.

Deployment diagrams shows the system infrastructure and how various software executables and artifacts are deployed on deployment targets.

Activity diagrams are used to model workflows in various ways. In this example, the workflow actions are arranged into swimlanes representing the actors, with a section that allows an interrupt (exception) to cancel the order.

Related​

• The difference between SysML and UML diagrams

With the rising popularity of cloud collaboration, it is not surprising that some diagramming software providers are exiting the on-premises market. You don't have to worry about that with draw.io.

Lucidchart has recently announced that they will begin sunsetting ('kill' or 'cancel' to the rest of us) their Confluence Server and Data Center apps, Lucidchart OnPrem, starting from 6 January 2020. After this date, customers will be encouraged to move their diagrams to Lucidchart's own cloud platform, and use a connector app in Confluence to embed Lucidchart diagrams. The on-prem app will be fully deprecated one year later, on 6 January 2021, when they will stop supporting Confluence 7.5 and require customers to migrate their diagrams.

Bad for companies who require on-premise data storage​

While much is being made of their 'industry-leading security' (have you noticed how everyone is 'industry leading' ...), many companies who are currently use the Lucidchart apps within their on-premises Confluence infrastructure will not be thrilled at the idea of yet another collaboration and storage location, yet another cloud subscription, and yet another set of DPAs. That's even if they are open to the idea of storing data in the cloud in the first place.

draw.io keeps your data in your infrastructure​

If you aren't already using Confluence Cloud, you most likely you want to keep all of your data within your infrastructure, behind your firewall. That's why you are using Server or Data Center products, after all.

The draw.io apps for Confluence and Jira Server let you collaborate and keep your data in your infrastructure. Even when a diagram is being edited, the diagram data is only stored in your employee's browser and in the attachment in Confluence or on your Jira issue.

draw.io and our Atlassian integrations are the leading solution for web based sketching and diagramming functionality. The article describes the draw.io integrations for Confluence that we, draw.io Ltd., build, deliver and maintain alongside the online app.diagrams.net and the offline draw.io Desktop application.

Atlassian recently deprecated their Confluence Server range. As the software market evolves, accelerating the move to Cloud is the next natural step in Atlassian's strategy.

Users able to move to Cloud have seen an overall cost saving due to reduced maintenance and downtime, as well as benefiting from Atlassian's scalability and security record. There are various mechanisms in place to smooth the road to Cloud, including free Cloud licenses while you migrate away from Server.

At smaller tiers Confluence Cloud is the clear winner, at higher tiers the cost outlay is greater (excluding the benefits). You can see a comparison between Confluence Server and Confluence Cloud at various tiers below (pricing as per the July 2021 price list, annual renewal in USD):

Users	Conf Server	Conf Cloud
10	1,300	Free
25	1,300	1,250
50	3,000	2,500
100	5,500	5,000
250	10,900	12,500
500	16,400	18,500
2,000	20,100	61,000
10,000	25,200	256,000

For under 500 users, the cost is largely the same. But that isn't the whole picture, as you're likely to have apps installed, also.

Taking the top selling Confluence app, Gliffy, let's see how the price changes as you move to Cloud and compare it to draw.io on Cloud:

Users	Gliffy Server	Gliffy Cloud	draw.io Cloud
10	5	100	10
25	301	950	187.50
50	630	1,900	375
100	1,178	3,800	750
250	2,406	8,000	1,500
500	3,125	10,250	2,000
2,000	6,566	23,750	4,500
10,000	9,430	95,750	16,500

In fact, up to 4k users, you will save money on your Gliffy Server renewal by using draw.io on Confluence Cloud. With 10k users, you will pay 75% more for draw.io on Cloud compared to Gliffy on Server. However, if you have 10k users switching to Cloud and keep Gliffy, you pay over ten times (x10) the Server price.

There is a rich selection of apps in the Atlassian ecosystem and it's worth evaluating alternatives when migrating from Confluence Server to Cloud. Some apps, like draw.io with its one-click Gliffy mass importer, make it easy to switch whilst saving you money. Of course, you save that amount every year after you have switched.

You can add maths equations to your diagrams by enabling mathematical typesetting via the draw.io menu. When you enter an equation into a text shape or label, enabling mathematical typesetting will use MathJax to render your equation. MathJax renders equations neatly and works in all browsers.

LaTeX and AsciiMath​

Input equations using LaTeX or AsciiMath.

• LaTeX inline: \(\sqrt{3×-1}+(1+x)^2\)
• AsciiMath inline: `a^b + b^2 = c^2`
• LaTeX in a block: $$\sqrt{3×-1}+(1+x)^2$$

You can also mix LaTeX and AsciiMath inline in the one text field: LaTeX \(\sqrt{3×-1}+(1+x)^2\\) and AsciiMath `a^b + b^2 = c^2`

Enable mathematical typesetting​

Select Extras > Mathematical Typesetting in the draw.io menu to render your equations in MathJax.You can disable it at any time and see the equation's LaTeX or AsciiMath source through the same menu item.

Maths equations in tables​

Just like you can add shapes to table cells, you can also add maths equations to table cells and cross-functional tables.

Open these examples in our diagram viewer

Related​

See the maths typesetting documentation for changing the maths font, troubleshooting printing or display problems, and more examples.

You can now create a new diagram even faster by going to diagram.new or diagrams.new instead of having to remember the full app.diagrams.net address for the online version of draw.io.

.new is the first and only domain that is devoted to helping you get things done fast. Each and every address that ends with .new is an action that lets you create or share content online.

The .new domain helps you create content quickly​

Google has set up the .new domain exclusively to help you create and work with content quickly and easily. Several different types of content and actions are available already:

For example:

• repo.new: creates a new repository at GitHub.
• sheet.new: creates a new Google spreadsheet.
• story.new: creates a new story page on Medium.
• link.new: creates a new short link on Bitly.
• podcast.new: creates a new podcast using Anchor and Spotify.
• diagram.new and diagrams.new: creates a new diagram using draw.io.

Instead of remembering the full URL of the websites and services, just enter the type of content you want to create or action you want to do and add .new to the end.

Only trusted apps​

As there is a rigorous application process with a well-defined registration and security policy, Google only grants trusted and reliable applications or shortcuts a .new address.

Try it out​

Go to diagram.new and create a new diagram.

If you have any questions, please post them to https://groups.google.com/forum/#!forum/drawio. If it's technical, you can open an issue at GitHub.

The reference implementation of the draw.io project will be hosted at app.diagrams.net. Everything else remains the same - the online editor has all the functionality of the draw.io core editor.

.io domains​

There are two major problems with .io domains:

• The first is that the islands which should own the domain suffix, don't, thanks to a wonderful piece of modern day British Imperialism. If you ever feel the need to donate to us, please give it to a more worthy cause.

• Secondly, there was a security issue with the .io domain. In 2017, a researcher managed to take control of four of the seven authoritative name servers for the .io domain. We accept that mistakes can happen, strong processes limit the chances of them happening, but they still can.

However, the domain administrator made no attempt, at any time, to communicate with anyone about the issue. We've no evidence to suggest there is anything to be worried about, but the complete lack of communications means we have lost trust in whoever controls .io domains.

draw.io in Atlassian​

draw.io will remain as-is within Atlassian. Our partnership in that ecosystem with Seibert Group GmbH will continue in the same way for a long time to come.

Our draw.io documentation and official blog will move away from the .io domain to drawio.com.

What's next?​

Our web site at www.drawio.com is focused on the core open source project and the reference implementation at app.diagrams.net.

We are testing https://app.diagrams.net to check everything that works on the old draw.io domain works there. Don't switch away from www.draw.io just yet.

When we're happy with the new app sub-domain we'll mark it as the canonical domain and file open requests from Google Drive will be sent there.

What do I need to do?​

Hopefully, nothing. If you use draw.io within your group or company, maybe send a message to let your colleagues know the name is changing. There is time to feedback any concerns you may have.

If you have questions, please post them to https://groups.google.com/forum/#!forum/drawio. If it's technical you can open an issue at GitHub.

FOSDEM is a free two-day event held each year, organised by volunteers, to promote the use and development of free and open source software. Open source software developers and users can meet, share ideas, and collaborate.

FOSDEM’20 will be held at the Université Libre de Bruxelles Solbosch Campus in Brussels, Belgium on 1-2 February 2020.

There is no registration and the event is free to attend!

We are a sponsor of FOSDEM’20​

As an open source technology stack and one of the world’s most widely used browser-based diagramming applications, we are proud to be sponsoring FOSDEM’20 and supporting open source developers around the world.

Open source has a huge number of advantages for customers. With draw.io you get the following benefits.

• Increased trust – anyone can scrutinise the source code.
• Extendable – open source encourages third-parties to develop integrations with various platforms.
• No lock-in SaaS – you’ll always have access to the desktop app even if the website goes away.

Our goal is to provide free, high quality diagramming software for everyone and disrupt the world of diagramming tools.

FOSDEM: hundreds of open source speakers and events​

With thousands of attendees from all over the world taking place, it’s one of the largest events for open source projects. The 400+ speakers and 500+ events are organised by a hard-working team of volunteers.

In this 20th instalment of the conference, it’s free to participate in more than 50 developer rooms where talks, hacking sessions and open discussions are held on a huge variety of topics, all related to open source development and projects.

In addition to the developer rooms, there are keynotes, main track talks, as well as stands you visit to chat in person with open source project developers. Certification organisations also run several exams during the conference that visitors can take.

Keep an eye on the FOSDEM website or follow @fosdem on Twitter as the schedule of speakers and events are confirmed.

DESKTOP VERSIONS PRE 10.7.5 ARE STRONGLY RECOMMEND TO DOWNLOAD AND INSTALL A NEW DESKTOP BUILD {: .alert .alert-danger}

Desktop versions prior to 10.7.5 have a critical security flaw, so we’re disabling them all, sorry. To resolve, just go to the draw.io desktop project on GitHub, https://github.com/jgraph/drawio-desktop/releases, and download the latest version for your platform. Once that’s installed, you’re good to go again.

Versions of draw.io Desktop from 10.7.5 onwards run completely isolated from the internet, so the security hole can’t reappear.

We regularly publish new example diagrams you can use as templates in the jgraph/drawio-diagrams repository on GitHub so they are easy to access. In this repository you'll find diagram examples that are used in:

• blog posts and FAQ answers
• the example gallery on our website
• training courses
• feature and plugin demonstrations
• draw.io template library

Open a diagram as a template​

If you find an example diagram that you want to use as a template in your diagram, click Arrange > Insert > Template.

In the template library dialog, click on From Template URL, and enter the URL of the diagram you want to use.

For example: https://raw.githubusercontent.com/jgraph/drawio-diagrams/dev/examples/maths-examples.drawio

Note: This must be the file data, not the page on which the file is attached.

Click Create, and draw.io will open the template diagram in a new browser tab. Name your diagram, and now you can edit it as you need.

See the drawio-diagrams repository on GitHub for more ways to use these examples as templates for your diagrams.

Related​

• Learn more about using template diagrams in draw.io.
• See how to set a diagram as a background in a multi-page diagram.