Data security and privacy are central to our draw.io diagramming tool - using our application platform, your diagram data storage means saving and loading is direct between your browser and whichever location your choose to save your diagram file. We don't allow your diagram data to be stored on our servers.

We take the same privacy and security focused approach to non-diagram data too here at JGraph - we don't use cookies or tracking pixels on our website.

Of course, if you contact us here at JGraph for support via GitHub, Google Groups, or one of our social channels, we will have your contact details - necessary to resolve your query.

In our updated privacy policy, we have now clarified that we will not send you any marketing communication using your details or data. We will also not share your personal data with any third-party company for marketing purposes.

Note: The draw.io app listings in the Atlassian Marketplace for Confluence and Jira are managed by Seibert Group GmbH, and therefore are governed by their privacy policy.

Use draw.io Desktop to diagram offline​

Our draw.io desktop app runs fully offline on your local device, and your diagram data stays on your local device. The only external communications from the software are to check for application updates.

draw.io runs on Windows, macOS and Linux - download the draw.io Desktop installer for your operating system.

Configure data transmission lockdown​

Set "lockdown": true in the editor configuration. Lockdown options only apply to cloud-based draw.io versions.

This will disable data transmission apart from directly between your browser where you are editing your diagram, and the cloud platform or location you have chosen to store the diagram file.

1. In the online version of draw.io at app.diagrams.net, select Extras > Configuration in classic mode, ... > Settings > Configuration in Simple mode or the Sketch editor theme to open the configuration.
2. Enter the "lockdown": true JSON string and click Apply.

In the draw.io app for Confluence Cloud (advanced edition only), go to the administration area, then the draw.io Configuration tab. Add "lockdown": true to the UI Configuration, and click Save changes.

Note: There are few functions that use the draw.io servers to perform operations that browsers are not capable of, including to generate a PDF version of your diagram, and import a diagram file in .gliffy format. These functions won't be available if you lockdown data transmission.

Learn more about configuring the draw.io diagram editor

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

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

Real-time multi-user diagramming​

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

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

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

No shared cursors?

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

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

Changes are merged from multiple users​

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

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

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

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

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

Change the synchronisation speed and auto-save interval​

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

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

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

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

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

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

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

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

High Contrast mode​

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

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

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

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

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

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

Better colours for dark mode​

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

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

• To disable adaptive colours for light and dark mode, make sure nothing is selected in your diagram, then in the document Style tab of the format panel, set Adaptive Colors to None. (Also available in the Classic mode menu via Extras > Adaptive Colors).
  

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

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

Note: draw.io Desktop uses the original simple adaptive colours. Set Adaptive colour

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.

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

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

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

FOSDEM: hundreds of open source speakers and events

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

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

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

Open source diagramming​

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

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

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.
  

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.

Feature-based development and lean release cycles are becoming more common in online software services (SaaS products), where continuous development and continuous deployment are required. Feature flags give administrators and developers fine control over what features are available to which customer segments on release.

Traditional software development

Whether you follow an agile development cycle or not, software updates and new applications contain multiple features, bug fixes and improvements. Development of these usually happens on feature branches (or individual developer branches off feature branches). Once a feature is complete, that feature branch is merged into a development (or occasionally a nightly build branch).

After all the planned features are complete and merged to the this development branch, release candidate branches are used to test builds, and then the software is finally released on the main branch, as you can see in the gitflow diagram below.


Software development gitflow template using feature branches without feature flags

Once the software is released, you can't control what features the users see - all users gain access to the same features, at the time of release. If something in the software causes a bug, that bug affects all users.

Feature flags provide fine control over released software​

With feature flags and a deployment service that gives you control over updates and rollouts based on those flags, you can extend this feature-based development approach into release and deployment.

• Release a new feature only for a target subset of your SaaS users.

• Deploy but don't release features that aren't yet ready to test stability and prepare dependent systems.

• Use front-end flags for UI visibility and back-end flags to control APIs and configurations.

• Roll out an update incrementally to your user base.

• Block certain users from accessing certain features.

• Roll back an unstable update by disabling the problematic feature flag.

• Release smaller updates more often and incorporate feedback faster.

Feature flags can make continuous development and continuous deployment smoother for both you and your customers.

Use feature flags with feature branches​

Feature flags don't replace feature-based development branches, they extend their functionality.

For this example, we'll modify the gitflow that we developed in our earlier post (also available as a template in draw.io).

Note: The diagram file used in this post has multiple pages - one for each method used to display feature flags in the gitflow. Open the file in the draw.io viewer and step through the pages to compare the four different methods.

Leaner trunk-based development​

• As the feature-flag based development cycle is lean with short-lived feature branches, controlled after release via flags, we'll merge directly to the main branch (or trunk).
• Whenever a feature is merged to the main branch, open feature branches should pull those changes.

Gitflow diagrams are simple to draw and edit - they use the shapes in the General shape library with basic connectors between them. Follow the steps in our earlier post to create a gitflow that matches your branching structure.

_A modified gitflow from the built-in template to show a trunk-based development structure with short-lived feature branches_

Use tags in your gitflow for feature flags​

In a draw.io gitflow diagram, you can indicate feature flags in a number of ways, but the easiest is to add tags to shapes.

Tags let you hide or display tagged shapes and connectors, visualising how released software updates will appear to users when feature flags are enabled or disabled.

Add tags to shapes

• To open the Tags dialog, click on View in the left of the toolbar and enable Tags or press Cmd+K on macOS or Ctrl+K on Windows.
  

• Select the shapes and connectors you want to apply a new tag to, and click + in the Tags dialog. Enter the new tag name and press Enter.

• Select one or more shapes, then click a checkbox to the right of an existing tag to add the tag to the selected shapes.

• To remove a tag from a shape, select the shape, then deselect the checkbox to the right of its tag name.

Note: In this example, we've added the core tag to all trunk (main) versions to make it easier to visualise.

Open this gitflow with all feature flag tags in our diagram viewer

Visualise feature flag-affected branches and releases

Now, with nothing selected in your diagram, click the eye symbols next to tags (feature flags) to see which feature branches and main versions they affect. If more than one flag is applied to a feature, both need to be hidden to hide those branches they affect.

For example, to see which feature branches are flagged as "api", hide all other branches. If you want to select just those shapes/connectors, click on the select checkbox next to the tag name.

Reset to see all tagged shapes: Click the eye at the bottom of the Tags dialog to show all hidden tagged shapes.

Tips for working with tags in draw.io

• Hover over any shape to see their tags.
• Note that connectors coming from or going to hidden shapes will not be displayed even if they are not tagged.
• Hold down Shift and click on any of the eye symbols in the Tags dialog to hide or display all tags.

In our example Gitflow with feature flag tags, to see which versions on any branch have a feature flags applied, hide the core tag. The shapes that have disappeared are ones that have no feature flags - all customers will be able to see all features on those main versions.

Alternative methods to add feature flags to gitflows in draw.io​

If you don't want the interactive visualisation of tags in the diagram editor or viewer, you could add feature flags in the following ways.

 

Feature flag labels on released versions​

Add callouts with list shapes on the released versions to show which feature flags apply, and avoid cluttering the feature branches in the gitflow.

Open this gitflow with feature flags-labelled releases in the viewer

 

Feature flags in custom shape properties​

Also called shape data, these could also indicate feature flags, as just like tags, they are displayed when you hover over a shape in your diagram.

1. Use the Edit drop down in the Style panel of the format panel on the right to edit, copy and paste shape data, or right-click on a shape then select Edit > Edit Data from the context menu.
   
2. Type the name of a new custom shape property in the Enter Property Name field and click Add Property.
3. Add the feature flag names in the field next to the new shape property.
   

Tip: Copy and paste shape data to quickly duplicate custom properties on another shape via Edit > Copy Data and Edit > Paste Data in the right-click context menu.

Learn how to work with custom shape properties

Open this gitflow in the viewer to see feature flags in shape properties

Placeholder shape properties for automatic feature flags​

Using container shapes to indicate feature flags, and placeholders on all feature branch shapes can automatically update feature flags tooltips depending on which container they are in.

In this example, a tooltip shape property with a placeholder shows which feature flag container the branch is in when you hover over a shape. Additionally, the shapes used to label the containers also contain placeholder values.

1. Select the shape that forms the container, expand its Properties in the Style tab in the format panel, and ensure the Container checkbox is selected.
   
2. Add the name of the feature flag to a custom shape property in the container shape, and ensure Placeholders is enabled.
   
3. Drag the feature branch shapes into the container shape, and drop them when the outline is purple.
   
4. Edit the shape properties of one of the feature branch shapes, ensure Placeholders is enabled and add the tooltip custom property with the value being the feature flag property you defined in step 2 surrounded with percentage characters: %flag%
   
5. In the shapes used noting the the containers' feature flag, write the same shape property placeholder in the shape labels - e.g. %flag%

Keep in mind that shapes will only be able to have one feature flag if you use this method as placeholders respect scope, where the placeholder (or variable) takes the value of the container in which it is located.

View this gitflow then click on Edit (the pencil) in the toolbar to open it in the editor and see how placeholder feature flags work

This structure clearly separates branches visually into each feature flag. You can combine this structure with list shapes on the trunk to show which flags apply to the actual release versions.

See how both the tooltips and the shape label changes when we move shapes to another container.

Learn more about placeholder shape properties

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

To our diagram editor users

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

To our open-source contributors and sponsors

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

To those open-source projects and developers we sponsor

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

New features and updates in 2022​

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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