Skip to main content

Gliffy vs draw.io - concurrent editing

· 4 min read
draw.io
draw.io Team

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.
Share your mouse cursor with others who are editing the same draw.io diagram in Confluence Cloud

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.
When multiple people edit draw.io diagrams in Confluence, share cursors to see their mouse movements and selection. As changes as they are made, they are saved and synchronised to your editor.
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.

Updated shapes for GCP and AWS network diagrams

· 4 min read
draw.io
draw.io Team

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.
    Enable the AWS19 shape library for Amazon Web Services infrastructure diagrams in draw.io

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.
Hover over any shape to see a preview and its name in draw.io

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

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.
The AWS19 shape library for Amazon Web Services infrastructure diagrams has been updated in draw.io

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.
The GCP icons shape library for Google Cloud Platform infrastructure diagrams has been updated in draw.io

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

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.
Network diagrams in the templates at draw.io

Reporting issues, suggesting features and upvoting

· 6 min read
draw.io
draw.io Team

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
Crop an embedded or imported image in draw.io

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.
    Merge table cells in the Sketch whiteboard-like editor theme in draw.io

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.
    Unmerge table cells in the Sketch whiteboard-like editor theme draw.io

In all of the editor themes, you can also unmerge merged table cells via the Arrange tab of the format panel.
Unmerge table cells in the draw.io editor via the Arrange tab in 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.
You can use different formatting options inside a text label - on part of the label only

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.
    Choose how to export formatted text labels when exporting to a SVG file

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.
    Register that you also have a reported bug or want the requested feature in our drawio repository on GitHub

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.
    Register that you also have a reported bug or want the requested feature in our drawio repository on GitHub

Reviews from real draw.io users

· 3 min read
draw.io
draw.io Team

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.

draw.io review from real users on Capterra


draw.io review from real users on Capterra


draw.io review from real users on Capterra


draw.io review from real users on Capterra

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.

draw.io review from real users on GetApp


draw.io review from real users on GetApp

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.

draw.io review from real users on G2.com


draw.io review from real users on G2.com

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.

New draw.io features and updates in 2021

· 9 min read
draw.io
draw.io Team

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.
Double click on the drawing canvas to add a shape, or click on a direction arrow, or drag a new connection to a shape in another position in the draw.io editor

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.
Select whether students can view or edit the diagram file, or if they automatically get their own copy in their Google Drives on diagrams attached to assignments in Google Classroom
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.
Compare and commit the changes you made to the diagram files in your repository via github.dev

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.
Import an existing diagram into Notion via the menu, or drag and drop the file into the drawing canvas

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.
draw.io in Teams: A diagram added to chat will display the first diagram page as a thumbnail

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.
Use the freehand drawing tool in a draw.io Board diagram to markup diagrams or draw shapes with your mouse

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.
Hover over a template in draw.io to see a larger preview of it

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.
Bring overlapping shapes to the front or send them to the back via the Arrange tab

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.
Diagram complete with background

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.
Drag the waypoint shape from the Misc shape library in draw.io Use waypoint shapes in draw.io to show contact points and enable line jumps to see where wires pass each other without connecting

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.
Tags on shapes and connectors in diagrams allow you to quickly select, hide or display related shapes without them needing to be grouped or on a single layer

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.

Diagramming in a free Confluence Cloud instance

· 7 min read
draw.io
draw.io Team

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:

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.
    Use the freehand drawing tool in a draw.io Board diagram to markup diagrams or draw shapes with your mouse

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.
    Confluence Cloud will step you through the setup of a new instance and space

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.
    Install the draw.io app in your Confluence Cloud instance
  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
With the draw.io Board macro, you have a fully featured online whiteboard inside Confluence Cloud

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.
    Add the draw.io Diagram macro to insert a diagram into Confluence Cloud
  2. Select the Blank Diagram template, enter a filename for your diagram, and click Create.
    Choose a diagram template when you create a new diagram in draw.io
  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.
    The draw.io editor, its tools and panels
  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.
      Create your diagram from shapes, connectors and text, and add styles
  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).
    Embedded diagrams in draw.io for Confluence Cloud

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

New draw.io Board macro for whiteboard-style diagrams in Confluence Cloud

· 7 min read
draw.io
draw.io Team

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.
    Add the draw.io Board macro to a Confluence Cloud page

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.
Zoom in and out and switch the editor into a dark mode with the tools in the bottom right in a draw.io Board diagram

Open the menu in the draw.io Board macro

Click on the draw.io logo in the top left to open the menu.
Click on the draw.io logo to open the menu when using the draw.io Board macro

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.
Double click on the drawing canvas to add a shape, or click on a direction arrow, or drag a new connection to a shape in another position in the draw.io editor

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.
Click on the shapes or drag them from the toolbar onto 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.
    Click on the Shapes tool to open the Shapes panel and access all the shapes in the shape library

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.
    Click on the shapes or drag them from the toolbar onto the drawing canvas
  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.
    Use the freehand drawing tool in a draw.io Board diagram to markup diagrams or draw shapes with your mouse

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.
Click on the Format panel's title to open it and style shapes, text and connectors in a draw.io Board 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.
Select a diagram template and click Insert to add it to the drawing canvas in a draw.io Board diagram in Confluence Cloud

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.
    Publish your diagram to save it and return to the Confluence Cloud page editor

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.
Set the viewer options to change how your diagram appears on the Confluence page
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.
Set the viewer options within the draw.io Board editor to change how your diagram appears on the Confluence page

UML 2.5 shape library with updated shapes

· 5 min read
draw.io
draw.io Team

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.
Activity diagrams are used to model workflows in various ways

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.

Diagram types defined in UML 2.5
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.
    Enable the UML 2.5 shape library, and the older UML library if you wish to use those shapes
  2. The UML 2.5 shape library will appear in the left panel.
    The shapes in the UML 2.5 shape library let you create clearer and more extensive UML diagrams of many types

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.

Component diagrams show the dependencies between the components of a system.

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.

Composite structure diagrams are used to show the internal structure of a classifier

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

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.

Activity diagrams are used to model workflows in various ways

Manage your budget moving to Confluence Cloud

· 3 min read
draw.io
draw.io Team

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
101,300Free
251,3001,250
503,0002,500
1005,5005,000
25010,90012,500
50016,40018,500
2,00020,10061,000
10,00025,200256,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
10510010
25301950187.50
506301,900375
1001,1783,800750
2502,4068,0001,500
5003,12510,2502,000
2,0006,56623,7504,500
10,0009,43095,75016,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.

Go to diagram.new to create a new diagram

· 2 min read
draw.io
draw.io Team

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:

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.

Diagrams attached to Jira Server issues are now versioned

· 4 min read
draw.io
draw.io Team

Versioning is built into Confluence, and diagrams attached to pages using the draw.io app for Confluence takes advantage of this. When you edit a diagram, the draw.io app creates a new page version so you can easily restore an older version of your diagram.

If you are using draw.io for Jira Cloud, we recommend that you embed diagrams stored in your Confluence instance to take advantage of its versioning and real-time-collaboration tools.

If you are using diagrams attached to issues in Jira Server, these are now also versioned, but in a different way.

The draw.io app now adds a compressed zip file to your Jira Server issues containing multiple diagram files. When you open the attached diagram file from the right panel, you can access the revision history of your diagram via the menu.

Add a diagram to an issue on Jira Server

Once you have installed the draw.io app into your Jira Server instance, you can create diagrams in your issues.

  1. Click on More in the issue toolbar, then select Add draw.io Diagram from the menu.
    Add a draw.io diagram to a Jira Server issue via the issue toolbar
  2. The draw.io diagram editor will open. Create your diagram. When you are finished, click on the Save & Exit button in the top right.
  3. Add a filename, then click Save.

Your diagram will be displayed in the right panel of the issue in the draw.io Diagrams section, and the file will appear in the Attachments section. You can immediately see which version the diagram is by the number in square brackets after the name of the file above the preview on the right.

The draw.io diagram is displayed on the right of your Jira Server issue

Restore a diagram revision in draw.io

  1. Hover over the diagram preview on the right, and click on the pencil icon to edit your diagram.
    Edit an existing draw.io diagram attached to a Jira Server issue
  2. In the editor, select File > Revision History from the menu to open dialog with a list of diagram versions.
    Edit an existing draw.io diagram attached to a Jira Server issue
  3. Each revision shows you who modified it, and when it was modified. Click on a version to see a preview of the diagram. If you want to restore a particular version, click on it, then click Open.
    Restoring an older version of your draw.io diagram in Jira Server creates a new version - no information is lost

This creates a new version of the diagram and adds it to the attached file - no changes are lost.

Tip: To delete a draw.io diagram from your Jira Server issue, hover over the diagram on the right panel of your issue and click on the trash can icon (delete).

See diagram revisions inside the attached file

As the attached diagram is a compressed zip file containing multiple diagram files and some metadata, you can open it on your computer and look at each diagram individually. You can also open the attachment file or any of the included XML diagram files in our online draw.io editor.

  1. Download the attachment to your computer and unzip it using your favourite decompression tool.
  2. The most recent diagram version can be seen in the diagram folder, and older versions under the history folder.
    The file structure within a versioned draw.io attachment from Jira Server

We are sponsoring FOSDEM 2020

· 2 min read
draw.io
draw.io Team

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.

draw.io is sponsoring the FOSDEM'20 conference for open source developers

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.