43 posts tagged with "features"

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

Works on all supported DC versions​

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

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

Focused on security​

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

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

Secure desktop app for external partners​

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

Technical diagrams plus an online whiteboard​

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

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

Migration and import tools​

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

You may find the new draw.io migration tool more convenient to use in your old DC instance, but it may have issues if you rename pages during the migration process.

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

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

Configure the diagram editor and draw.io settings​

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

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

Diagrams for the medical industry are often described from the perspective of an organisation or hospital, but how can the most important people in medicine - the patients - use diagrams themselves to get better treatment outcomes?

Doctors are under pressure to see as many patients as possible. Plus, it can be quite intimidating for patients during a consultation, and often impossible to describe all relevant symptoms in a way that is concise and clear.

Diagrams that present all the relevant information make life easier for both the patient and doctor.

Humans take in information faster and misunderstand less often when it is presented visually. Plus, if you diagram your medical problems, you can re-use the diagrams with other doctors - it saves you the stress of remembering all the details and explaining them in exactly the same way multiple times.

So, what type of diagrams can patients use?

Concept maps to relate symptoms​

A directed graph or concept map can show at a glance which clusters of symptoms are related, and which are secondary. Such a diagram helps doctors evaluate which illnesses could be the underlying problem and find solutions for multiple symptoms.

• Use light fill colours to group related clusters of symptoms, and black text for ease of scanning and printing.
• Use thicker connectors or shape outlines to show a stronger impact (Line in the Style tab of the format panel).
• Use arrows or a double connector for symptoms that are triggered by other symptoms.

Concept maps to detail diagnoses

Doctors may find it more helpful to see how diagnoses are related if you are unlucky enough to have been diagnosed with several illnesses, especially where treatments can interfere with other diagnoses.

Timelines and symptom cycles​

To show when symptoms started and how they have progressed, or how symptoms appear to worsen or get better in cycles, a timeline or a gantt chart is ideal.

You could also use such a symptom timeline to show how a medication change has impacted symptoms - important when trialling which medication has the most positive effect.

If you have a recurrent problem that requires repeated surgeries or courses of hefty medication, a visual timeline avoids having to explain a lengthy treatment history in conversation, where things are likely to be forgotten or out of order. Use a gradient fill colour to show how symptoms worsen or improve during the cycle.

You will need a few cycles of tracking and recording your symptoms to discover a pattern, but doctors say they find this type of diagram helpful for both diagnosis and treatment.

Triggers vs symptoms​

There are a number of ways to visualise symptoms that are not tied to a timeline or periodic cycle. You could use a cause and effect diagram like the one below, a concept map or mind map, a cluster graph, relational graph - anything that shows how your triggering situations or substances relate to symptoms.

Take the time to record when symptoms appear and what caused them. This is increasingly important with the rise of long covid and other post viral problems, as well as for diagnosing arthritis and other autoimmune diseases, and non-specific chronic pain issues.

T-charts and Venn diagrams also let you quickly and visually sort a list of treatments, situations or medications into categories - those that improve or worsen symptoms, or have no impact.

More diagrams for patients​

There are many other types of diagrams that may be useful, especially if you are attending a doctor's consultation online.

A chart of blood pressure values, or weight over time. If you use a smart blood pressure monitor, export the graph from your monitoring app as an image and drag the image onto the drawing canvas in draw.io.

Or, track it yourself directly in draw.io using a Pool shape from the Advanced shape library and the Waypoint shape (via a shape search) for each value.

A labelled photograph or illustration showing exactly where the symptom occurs, or a freehand sketch. The example below uses shapes from the draw.io library (search for user) with basic shapes on top filled with the sketch style to indicate where different types of headache pain is located.

Organise and update your medical diagrams

Turnover of staff and short leaves of absence in medical clinics has increased in recent years. Which means, you will likely not see one doctor regularly. That makes it more important for you as the patient to be able to explain your medical history quickly to any new doctor - diagrams will help you do this.

Include your name, date of birth and the date you updated the diagram on each page - this helps doctors associate a health record with a patient. Use a plain connector with three labels as it is easy to copy.

More diagramming tips for patients

• Encourage your doctors to scan these diagrams, especially if they need to review your history without you present for insurance or welfare purposes.

• Use one multi-page diagram for your medical diagram - you won't have to hunt through files to find all the relevant information.

• If you are dealing with inherited or genetic diseases, use the list shape in the General shape library to model a family tree of diagnosed related illnesses.
  

• Use a table shape to record your medication schedule and allergies on one of the diagram pages.
  

• Export each page of your diagram to an image (PNG) to print it neatly on one neat page and include the diagram data - this will include all diagram pages, although only one will be shown in the image. You can then reopen the PNG image in draw.io later to update your multi-page diagram.
  

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

If you want to continue using the old dark mode and your customised diagram colours, open the draw.io configuration (Settings > Configuration via the draw.io menu), add the following property, and click Apply.

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

When you apply a sensitive label to a draw.io diagram in Confluence Server/Data Center, it will not be listed as a recent diagram or in the diagram search results when creating a new diagram or embedding a diagram.

Note: This is a new feature for draw.io in Confluence Server/Data Center version 8.x. It is not yet available in draw.io for earlier versions of Confluence Server/Data Center or in Confluence Cloud.

Why is this useful?

Use the sensitive label to ensure that draft diagrams are not copied or embedded until they are finalised or approved, and the label on the diagram file attachment is removed.

Mark a new diagram as sensitive​

At the bottom of the new diagram dialog, enable the Mark as sensitive checkbox.

For example, the circle diagram on this page was marked as sensitive. You can see this via the labels in the page attachments list.

Now when you create a new diagram or embed an existing diagram, you won't see this sensitive diagram in the recent diagram list. It will also not be shown when you search for the diagram's filename.

Add a sensitive label to an existing diagram​

All draw.io diagram attachments on a Confluence page are given the drawio label by default. You can add a sensitive label to an existing diagram via the Confluence Server/Data Center page attachments.

1. On the page that contains the diagram file, click on the three dots to open the menu and select Attachments.
   
2. Find the name of the diagram file you want to mark, click on the label icon next to the existing drawio label.
   
3. Type sensitive and click Add, then click Close.
   

Remove the sensitive label from a diagram​

1. Open the page attachments in the same way as above.
2. Find the name of the diagram file, and click on its label icon.
3. Click on the little cross next that is on the sensitive label to delete it.

The Azure shape library in draw.io has been updated. You can draw Azure architecture diagrams for your cloud infrastructure from scratch, or import .vsdx files or exported diagrams from automated infrastructure documentation apps like Cloudockit.

Open this Azure architecture example in the online draw.io editor

Draw Azure diagrams in logical blocks

You will likely never draw a single Azure diagram that contains all levels of detail. You can either start with the overview diagram and work from this top level down to the details, or bottom up starting with the logical blocks in your architecture.

• Azure architecture overview diagram: Includes design principles and the broad choices of specific services in your subscriptions.

• High-level Azure diagrams: Includes Azure services and their configuration, resource groups, virtual networks, and environments. Performance, regional service provision, availability zones, monitoring, backup and recovery services are included at this level of detail.

• Low-level diagrams: These are less common, and usually document the specific details needed to implement the design and the continuous integration/continuous deployment pipelines.

Enable the Azure shape library​

1. Go to our online editor or open one of the draw.io integrations or our desktop app.
2. Click on More Shapes at the bottom of the left panel.
3. In the Networking section, click on the checkbox to enable the Azure shape library, and click Apply.
   

The Azure shape library will load in the left panel, with its shapes separated into categories.

Tip: You can also search for Azure using the Search Shapes text box to see a list of all Azure shapes not sorted in categories.

Use the scratchpad​

Many Azure architectures repeat sub-sections of the architecture for backup or redundancy purposes. Instead of placing copies, you can put that sub-section into the scratchpad.

1. Select all the shapes on the drawing canvas that you want to repeat.
2. Drag these onto the scratchpad in the left panel.

Click on the sub-section shape in the scratchpad to add it to the drawing canvas, or drag another copy from the scratchpad into position.

See how to use the scratchpad in draw.io

Use rectangles to indicate regions​

Use rectangles from the General shape library to indicate a region. Once you've placed and resized a region shape, send it to the back on the Arrange tab of the format panel so that it is placed behind the Azure architecture's shapes.

Next, update the rectangle style to separate regions in the Style tab of the format panel on the right.

• Dashed outline - Change the Line of the region to Dashed using the dropdown list, and ensure the Fill checkbox is not selected to remove the background.
  

• Coloured background - Click on the colour block to the right of the Fill checkbox and select a new colour from the palette. Ensure the Line checkbox is not selected or set the colour to match the fill colour.
  

Tip: Group all of the shapes contained within the region with the region rectangle so you can more easily move them together.

Draw connectors​

Hover over any shape in the diagram to drag a connector from one of the four connection arrows, then drop it on another shape (or group of shapes) to connect the two.

Floating connectors: Floating connectors move around the perimeter of the shape intelligently as you reposition it on the drawing canvas. Drop the connector on the target shape when the outline is blue.

Fixed connectors: Fixed connectors remain connected to a particular point on the target shape when you reposition it. Drop the connector on a connection point (a little cross) or when the outline of the shape is green.

Learn more about working with connectors in draw.io

Azure architecture templates​

Several Azure diagram templates are available in the template library.

1. Click Arrange > Insert > Template to open the template library.
2. Expand the Cloud section and select Azure to see the Azure diagram templates.
   
3. Click on a magnifying glass in the top right of any template to see a preview.
4. Select a template and click Insert to add it to the drawing canvas.
   

Export and embed your Azure diagram​

Select File > Export as from the menu.

• Image formats: Select one of PNG, SVG, or JPEG.
• PDF: You can also crop the PDF export to the diagram size.

Tip: Make sure you select the Include a copy of my diagram in the Image export options dialog to allow those you share it with to edit it.

Embed diagrams in the following documentation platforms

• Confluence Cloud
• Jira Cloud
• Google Docs
• Microsoft Word, Excel and Powerpoint
• Google Sites
• GitHub markdown pages
• Notion

Using diagrams.net or draw.io together with scripts and data sources, you can create data-driven diagrams, with colours, shapes, text labels and even animations that change to reflect live data.

Aside from live diagrams of cloud network infrastructures, and charts that visualise data in graphs, there are few true data-driven diagrams. As draw.io does not include spreadsheet or graph functionality - it's a diagram editor - dynamically updated charts are not possible.

You can program your own scripts or use integrations with other applications to achieve data-driven diagrams where diagram shapes change to reflect live data because draw.io is open source and the .drawio diagram format uses accessible XML.

How it works​

Each shape in a draw.io diagram has a unique shape ID.

Because the diagram data is stored in your file using XML tags, you can use a script to search for the shape ID in the XML source and replace common shape properties with a different value to reflect the data at that time.

What you'll need

• diagram created in the draw.io editor and saved as an XML file
• application or script to do the following:
  • display and refresh the diagram
  • query or read the live data
  • analyse the data values and update the shape properties in the diagram according to programmed rules

Example - factory status floorplan​

To show you how to build such a data-driven diagram, we'll use an example of a dashboard that shows the status of a machine on a factory floorplan based on real-time sensor data from that machine.

This example uses Grafana and Arnaud Genty's Flowcharting plugin to feed the real-time sensor data recorded in a database to scripts that update the shapes in the diagram based on rules that we define.

Draw your diagram and set it up for data​

Create your diagram in draw.io online or one of our draw.io apps.

You can draw any type of diagram - flow charts, wireframes, floorplans, org charts, wiring diagrams, etc.

Avoid using complex shapes for elements you want to update. Those that contain multiple fields, like tables, entity shapes or swimlanes won't typically have unique IDs that you can refer to later.

In this example, we've created a factory floorplan with simple text shapes to show important machine information.

Set custom unique shape IDs

For each shape that will dynamically update based on a data source, you should override the auto-assigned shape ID to make it easier to refer to later.

1. Right-click on a shape and select Edit Data. Alternatively, select a shape and press Ctrl+M or Cmd+M.
2. Hold down Shift and double click on the ID string at the top.
3. Change the shape ID to something more memorable - make sure it is unique.
4. Click Apply to save the new shape ID, then click Apply to save the shape data.
   

In our example, all of the text shapes that say Text are to be updated. Each has been assigned a new custom unique shape ID.

View the shape IDs in the Properties section on the Style tab.

Export your diagram as an XML file

You need to read (and copy) the full XML source of your diagram, so export it as an XML file so it can be easily opened by a text editor.

1. Select File > Export As > XML from the menu.
2. Save the file to your local device.

Create a dynamic dashboard​

1. Install Grafana and the Flowcharting plugin.
2. Configure one or more data sources in Grafana.
3. Create a new dashboard and add a Flowcharting panel.
   

Add the diagram to the dashboard

1. Open the diagram .xml file you previously saved in a text editor.
2. Copy all the diagram data that appears after the initial <?xml ... > tag.
   
3. Now, add the diagram data to the Flowchart panel in Grafana.

• Set the Editor URL & Theme to our online service at embed.diagrams.net, and select Dark or Light from the drop down list. If you run your own draw.io server, use its URL instead.
• Set the Source Type to XML.
• In the Source Content text field, paste the diagram data you copied from your text editor.
  

The diagram will appear in the dashboard preview panel.

Map diagram shape IDs to data queries with rules

Now, you need to link the diagram shapes you want to update, with queries of a data source and rules defined in the Flowchart panel.

1. Write the queries to extract the data you need from your data sources. Set the name of the metric to the diagram shape ID that it updates so it's easier to see which query updates which shape.
   
2. Set the behaviour in the Mapping section for each query.
   • Set Identify by to ID as that is how we identify a specific shape.
   • Enable Regular expression and add some rules. In the What field of the rule, enter the specific shape ID for the shape you want to update.
     
     The shape label is Active or Stop based on the latest database value.

Refer to the Flowcharting mapping documentation if you need help with this step.

You can change the colour or tooltip of the shape, its text label or link, or add an animation.

Now, when your dashboard runs and your data queries are updated, your diagram will update according to the rules you have set.

More data-driven diagram examples​

1. Select one of these live examples of diagrams in the Flowcharting plugin.
2. Expand the title and select Edit to see how it is set up.
   

By using URL parameters with our online version of draw.io, you can add translation properties in the shapes themselves while you work in the diagram editor. You can switch languages in the editor via the Extras > Diagram Language in Classic mode, and via Settings > Diagram Language if you use Simple mode.

If you want to make a diagram available in multiple language, most diagramming applications require you to use separate files. Changes made to the original diagram require edits to multiple copies of a diagram.

Translating directly in the diagram editor has a number of advantages:

• See the label strings in context and translate a diagram faster.
• Check that labels in different languages still fit, without having to understand the language.
• Modify the diagram once - not separately for each language.

Diagram translation is enabled by default​

If switching the diagram language as described below doesn't work, make sure it is not disabled via the menu.

Explicitly enable diagram translation

Add the translate-diagram=1 URL parameter to the URL of our diagram editor, or go directly to the following link:

• https://app.diagrams.net/?ui=kennedy&translate-diagram=1

Alternatively, add "translateDiagrams": true to the draw.io editor configuration.

Translate labels on shapes and connectors​

When you have enabled the diagram translation feature via the URL parameter above, the original label is shown at the top of the Edit Data dialog.

1. Right-click on a shape or connector and select Edit > Edit Data from the context menu. Alternatively, select a shape and press Ctrl+M or Cmd+M.
2. Add a language for the label in the format label_XY where XY is a two-letter language code, and click Add Property.
   
   E.g. label_de is German, label_es is Spanish, label_jp is Japanese, etc.
3. Enter the translated text to the right of the shape property you just added. Click Apply when done.
   

Now, when you hover over a shape in the editor, you can see which languages have been added.

Tip: To get rid of a translation, click the x to the right of the translated string.

Note: If you don't see the original label in the Edit Data dialog, you haven't enabled the diagram translation feature with the URL parameter above. Add the parameter to the app.diagrams.net URL in your browser, and if necessary, reload the diagram in the editor.

Switch diagram language in the editor​

Once you have added a translation to a shape or connector label, you can switch the diagram to that language via the menu. This doesn't change the editor's language - only the text in the diagram.

In the diagram editor:

1. Open the menu and select Settings > Language.
2. Choose the language you want to use and refresh the browser tab.
   
   Open this example in the draw.io editor

The labels of shapes that have that language in their shape properties will update and display in that language. Any shapes that have not yet been translated will continue to display a label in the original language.

Switch diagram language in the lightbox viewer​

At the moment, you need to use URL parameters to change the language of a diagram when it is displayed in the lightbox (such as when you export the diagram as a URL).

Add both &translate-diagram=1&diagram-language=XY to the lightbox URL, where XY is the language you want to view the diagram in.

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.

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.
   

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.