UML deployment diagrams show the architecture of a particular system. They serve to highlight the relationships between the system’s software and hardware components.

You can build UML deployment diagrams quickly and easily in draw.io. We’ll take a look at how below:

Why build your deployment diagrams in draw.io?

draw.io is made for technical diagramming and has everything you need to get started, including:

• A collection of custom shapes: which you’ll find in our UML 2.5 and UML Shape Libraries.
• Version control: see when changes were made to your diagram which you can choose either to keep, or revert the diagram to a previous saved version.
• Shareability and restricted access: only share the diagram with those who need access.
• Export your diagram to different file types e.g. PDF for offline use.

How to build deployment diagrams in draw.io

To get started: in a new Confluence page, start typing “/draw” and select draw.io Diagram.

The shapes you’ll need

Head to +More Shapes in the left side menu, then under the Software category, select UML 2.5 and UML, and click Apply.

Depending on the style of diagram you wish to use, the following shapes will be useful. Simply use the search bar to locate them:

• “Deployment”: there are two deployment shapes. The first shape is particularly useful for building your diagram.

• Cube: this is a handy shape if you want your shapes to “stand out” with a shaded effect.
  • To customize the cube shape:
    • Click on the cube, go to the Arrange tab in the right side menu and click Flip > Horizontal
    • With the shape still selected, use the orange diamond at the top-right edge of the cube shape to adjust the cube’s dimensions.

The deployment and pre-formatted cube shapes

Tip: if you are using the same group of shapes repeatedly, save them to your Scratchpad by clicking and dragging your mouse over the group of shapes to highlight them, then drag the group across onto the Scratchpad.

Add individual or groups of shapes to your Scratchpad

Different connector types

Use different connector types to highlight different relationships between your shapes:

Sharing your diagram

Use Confluence to share and collaborate on your diagram with colleagues. You can easily restrict access in Confluence, depending on who needs to be able to view or edit the diagram.

Adjust permissions in Confluence to control who has access to the embedded deployment diagram

Making changes

If you or someone you have shared the diagram with have made changes, you can view these by heading to File > Revision History in the top menu. Choose to keep the current version, or revert to a previous one.

Once you have built your diagram…

You can export it to a number of formats, including .PNG, .SVG and .PDF.

A deployment diagram built in draw.io. Example taken from Wikipedia: File: Deployment_Diagram.PNG. Copied under the terms of the GNU Free Documentation License.

“Deploy” your next UML diagram

With a range of shapes and features at your disposal, building deployment diagrams in draw.io is a breeze.

To find out more about building other types of UML diagrams, see our blogpost UML diagrams – which diagram to use and why.

Want to dive deeper into the world of draw.io? Access our linktr.ee page to follow us on social media and learn how others use draw.io, as well as pick up some helpful tips and tricks.

Ethical decision-making impacts healthcare delivery at every level: from systems-level decisions, to helping patients and families make the right decision for their own care.

draw.io’s diagrams can assist in providing a visual structure for making ethical decisions; keep reading to find out more, and for a free “Ethical Decision Making” template designed to support Clinical Ethics.

What is ethical decision-making?

Ethical (or values-based) decision-making is not just about making the best decision for the most people. Each person is unique, and trying to force a “one-size-fits-all” solution may not respect what is important to an individual, or what their values are. These values can be informed by culture, religion, or personal feelings. Instead, a structured approach that involves relevant parties will result in a better outcome.

One of the biggest challenges of ethical decision-making is ensuring all involved parties feel their voice has been heard. A process that doesn’t include perspectives from relevant stakeholders will not be an ethical one.

Structure is very helpful in guiding these decisions. A repeatable, documented process makes life easier for the medical professionals involved, and also ensures that the process achieves a shared understanding amongst participants of the key question (what is the problem that is trying to be solved), and what is important (the values) to everyone involved.

The “values-based decisions” framework

Several models exist for helping teams resolve challenging ethical questions, but the “Values-Based Decisions” process by Bashir Jiwani, PhD., is utilized in a number of healthcare organizations and has proven to be effective.*

This step-by-step process seeks to first align all parties around the key question or questions needing to be resolved, then seeks to surface and weigh the values that are important to the key people involved, and only then does it turn to brainstorming options.

Once those options are analyzed against the key question, and the previously-shared values, a course of action will be planned. The strength of this process is the focus is put on collaboration, and shared values.

Using draw.io to make ethical decisions

As we’ve shown in the past, draw.io is a very helpful tool for visual brainstorming. By using draw.io inside of a tool like Confluence, we can leverage collaboration to help teams make ethical medical decisions.

We’ve developed a draw.io template that takes Dr. Jiwani’s process and puts it into our helpful diagramming product. The template serves to guide you and your teams through the decision-making process together.

Here’s how your team can make use of it:

1. Click on the Download Template button below. This will save to the XML file to the Downloads folder on your device.

2. In a new Confluence page, start typing “/draw” and select draw.io Board.

3. Drag and drop the downloaded XML file into the board editor.

4. Click Publish in the top right to save the diagram.

You can download the template here:

1. Open Confluence.
2. Open draw.io (blank whiteboard).
3. Drag & drop your XML file into your blank drawing area.
4. Use it as a custom template if you like.

Once you have made any further changes to the Confluence page the diagram template is embedded in, click on Update to save the page.

The template is now ready for you and your teammates to collaborate in Confluence, where you’ll benefit from:

Real-time collaboration

Invite your collaborators to a team meeting, in-person or online, to work on the diagram together. You will be able to discuss the answers for each step, and, depending on how you prefer to work, have one designated teammate record everyone’s ideas in the diagram, or assign a person to a specific section that they are responsible for filling in.

Additionally, collaborators can quickly add questions or raise comments during the collaborative process, either to be addressed in the meeting itself, or asynchronously.

Export your diagram to PDF

Once you’ve completed the process, you can export the diagram as an offline PDF to maintain a static version for your records. Remember that Confluence page permissions apply to draw.io diagrams too, preventing unintended users from accessing any completed diagram on a page.

Wrap-up

We thank Dr. Jiwani for graciously allowing us to share his process with our users. Is this template helpful for your team? Be sure to let us know, so we can pass the information on to him!

Want to dive deeper into the world of draw.io? Access our linktr.ee page to follow us on social media and learn how others use draw.io, as well as pick up some helpful tips and tricks.

Ditch the autopilot

You might have driven home on more than one occasion after work, only to experience a strange sensation: you’ve gotten home, but you don’t actually remember the process of driving back. This is known as highway hypnosis; you have enough awareness to drive home safely, but not to remember the event of getting there.

This is certainly something you don’t want in any industry involving safety. To mitigate this risk, most medical teams turn to mandatory step-by-step processes, which reduce the risk of healthcare professionals going on autopilot and missing steps due to human error. Healthcare processes are often complex and as such, the importance of visualizing these in an accessible and digestible way will make sure anyone accessing your documentation is able to clearly understand and follow core processes to the letter.

In this blogpost, we’ll be looking at how collaborating on healthcare policies and procedures in Confluence, with the added power of visualizing these processes in draw.io, will ensure your medical staff always has access to, collaborates on, and works within, the latest procedural documentation.

Putting everyone’s heads together

Robust healthcare policies and procedures don’t appear out of thin air – they are working documents that undergo a number of revisions before they are put in place. Even once they’re published, they still need to be regularly reassessed to guarantee they’re up-to-date and continue to fulfill their purpose.

This process becomes much more effective when you have multiple eyes on policy and procedure drafts. It gives team members the opportunity to comment on and question things like: is there anything missing from this policy document? Is the wording accurate and comprehensible? Are the order of the steps in a given process logical? Encouraging your teams to work together and reflect on a draft improves your documentation, as well as team learning as a whole.

Using Confluence to draft your healthcare policies and procedures allows you to quickly and efficiently collaborate with your team on the documentation. What’s more, you will benefit from collaboration features like:

• viewing a document’s revision history to see when changes were last made and who by;
• commenting on documentation, e.g. to request clarification on a section somebody has written;
• “@-mentioning” individuals to draw their attention to specific areas, e.g. to request feedback from a collaborator.

What’s more, collaborating on your drafts in Confluence keeps them all in one central location and, depending on the permissions you grant on Confluence pages, they will be accessible and editable by the right members of staff to keep them accurate and up-to-date.

To update who has access to certain pages, or even set pages to private, simply click the padlock icon in the top right and update the permissions accordingly.

Follow the flow

Once your processes in Confluence have gone through revisions and the draft finalized, it’s time to visualize these. The most common way to visualize processes and subprocesses is by using flowcharts, as they summarize the key points in the documentation and guide the reader through a logical flow.

Flowcharts help healthcare teams and stakeholders understand the processes implemented, the order of tasks and stages, and the roles of team members. This understanding is crucial for effective coordination and communication throughout your healthcare procedures.

The biggest advantage of creating your process flowcharts in draw.io is that you are able to create and embed them directly into the document drafts in your Confluence pages.

Working hand in hand

Collaborating in Confluence and visualizing in draw.io work hand in hand. They are complementary tools that can be used to maintain the high standards required in the healthcare industry. Flowcharts provide a holistic overview of your policies and procedures, while Confluence document drafts are used to collaborate and get everyone’s input before settling on a final version as a group. All of this is vital for sharing knowledge, maintaining best practice, and in turn improving patient safety and quality care.

By using draw.io for your flowcharts and Confluence for your documentation, all your content is securely stored in one central place, only accessible to those you decide need to collaborate on these processes to optimize them.

So, don’t let highway hypnosis govern your patient safety care: use Confluence to draft your key processes and draw.io to visualize them.

Want to dive deeper into the world of draw.io? Access our linktr.ee page to follow us on social media and learn how others use draw.io, as well as pick up some helpful tips and tricks.

Connections hold together what belongs together. Connections show sequences, or draw your attention to essential steps in a given process. But even more importantly, they can also save you time. For example:

“You meet the person of your dreams. You gather all your courage and want to talk to them. At the last moment, you check their hands. Left hand, ring finger… there is already a 1:1 relationship – damn it!”

So, a ring in a specific location can instantly tell a complete story in the background. What ends unhappily for the protagonist in our little example has immense value in the business world. Relationships here are not just 1:1; they are multilayered. For this reason, norms have been created to reflect this multilayeredness and enable associative entities.

In this blogpost, we deal with formatting using different connection endpoints in draw.io. If you are interested in the topic of connectors in general, we recommend our YouTube Connectors Playlist, which contains many helpful tips and tricks.

The default connection in draw.io is the classic arrow; there is no symbol indicating the line start, and an arrowhead to designate the line end. However, you can change this via the Format panel and the Style tab to create your own individual, expressive connectors with just two mouse clicks. Remember to save the connection in your scratchpad or even create a custom library, so that you and your colleagues can benefit from your preliminary work.

You can change further settings via the same menu. For example, depending on the diagram, it can be very useful to increase the size of the line start and end, to emphasize these.

But of course, that’s not all. There are specific connectors that are used according to international standards. So why build your own connectors, when draw.io already has them at hand? Many libraries in draw.io already offer predefined connectors. You can find examples in our General library, which can save you a lot of time. Equally, you can use our Shape Search to find specific associations.

When creating diagrams adhering to standards such as BPMN 2.0, you will find all the elements you need in the corresponding library. To locate these, head to +More Shapes in the diagram editor, or the + icon in the board editor, each located at the bottom of the left sidebar.

Locating the BPMN 2.0 shape library in the draw.io diagram editor

Locating the BPMN 2.0 shape library in the draw.io board editor

Want to dive deeper into the world of draw.io? Access our linktr.ee page to follow us on social media and learn how others use draw.io, as well as pick up some helpful tips and tricks.

Visualize everything, your way

Customization is at the core of draw.io, and dark mode forms a key part of this.

Just as visualization is paramount for presenting complex information in a digestible format, so is choosing the right background to allow you to diagram the way that you want. Whether you’re looking to reduce strain on the eyes, save some battery, or you simply like the aesthetics, draw.io’s dark mode feature further enhances your customization capabilities to align with your personal preferences.

Easily switch to dark mode

Switching to dark mode will invert the color scheme, thus maintaining contrast between the background, shapes and text. You can easily switch to dark mode at the click of a button.

To view your diagram in dark mode:

1. Click on the sun icon on the right of the screen
2. Choose Dark to switch to dark mode, or Automatic, for draw.io to mirror your system settings.

Tips:

• Although the colors will always adapt to be visually distinct in light or dark mode, it’s never a bad idea to switch between the two, to double-check how things look in the opposite theme from the one you created it in. This is especially important for diagrams embedded in Confluence or Jira*, where other collaborators on the diagram might not be using dark mode.
• When working with PNG, JPG, or SVG file types, you can export your diagram in light or dark mode. Just click on the Appearance dropdown menu and select the option you want.

*Dark mode has already been released for Jira. Confluence is in the process of rolling out dark mode, which is currently in its beta phase. If this option is available to you, you will find it by clicking on your profile picture and selecting Theme BETA. Changing your mode to light or dark will automatically set your embedded draw.io diagram to mirror the same mode. You may need to refresh your Confluence or Jira webpage for the changes to fully apply to your diagram.

Want to dive deeper into the world of draw.io? Access our linktr.ee page to follow us on social media and learn how others use draw.io, as well as pick up some helpful tips and tricks.

Why should you stop to read a blog post about tables in draw.io? After all, Confluence has its own table functionality, right? You’re probably more excited about creating stunning diagrams and energizing whiteboards!

And we get it! That being said, while you might not purchase draw.io for its table features, there are some compelling advantages to using draw.io for your table creation, instead of relying solely on Confluence’s built-in Table feature.

So, whether you’re already a draw.io user or considering a diagramming app, the Tables feature is an exciting addition that shouldn’t be overlooked. Enough chitchat, let’s jump right in!

What are the advantages of using a draw.io Table?

While Confluence provides a solid foundation for basic charting needs, let’s explore how draw.io Tables can elevate your experience and cater to specific requirements that go beyond the standard features provided by competing solutions.

Increased design options

“Form follows function”, as the saying goes. Nevertheless, your company has design guidelines, and you eat with your eyes first! In draw.io you have a full range of design options to choose from. For example, you can use the unique colors of your corporate design directly in your tables, liberating you from the constraints of standard color palettes found in other tools. What’s more, you can customize the size of cells and adjust the separators between rows and columns to your liking.

These options are what distinguish a table that is visually tailored to meet your corporate standards, from an ordinary one. You can find a comprehensive list of all your options on our YouTube channel in the playlist “Tables”.

“Cell-abrating” our features

With these notable strengths in mind, let’s take a look at concrete cases when it comes to table creation with draw.io. The magic word is ‘Relationships’. For tables made with draw.io, you can:

• easily visualize connections between cells
• highlight interdependencies
• even add comments directly within your table using virtual sticky notes.

Within our Whiteboard macro, you can further enhance your creativity by manually sketching your comments using the Brush tool.

Take a look at the example below to see how using tables for more complex constructs, like this cross-functional flowchart, promotes a better understanding of information, and empowers effective communication.

Last month we introduced draw.io’s latest feature, Smart Templates, which uses AI and machine learning to generate diagramming templates quickly and easily. Feedback from users has been very positive, and the response to our demos at Atlassian Team ’23 let us know that people are really excited about a tool that helps them diagram faster. With that in mind, we wanted to use this blog to offer a little diagramming inspiration, to show off just how powerful this new feature really is.

Don’t need to hear any more, you just want to get started diagramming smarter? You can try draw.io and Smart Templates for free for 30 days, just visit the Atlassian Marketplace and start an evaluation today.

Create Entity Relationship Diagrams quickly

We know many of our customers create Entity Relation Diagrams (ERD). These diagrams are commonly used when designing databases (or troubleshooting databases), but they can be time consuming to create; mapping all the entities and relations takes time. However, Smart Templates can get you started quickly, as long as you provide the entities and relationships you’re trying to map.

In the example below, we entered the text string “an e-commerce database design featuring customer information and previous purchase history and demographic information” and the Smart Template’s AI produced the diagram below in seconds:

Your fields may need to be tweaked, and you might have more relationships than this, but at this point you could easy edit text and copy/paste the entities and relationships. By using Smart Templates we saved ourselves a lot of time and hassle, and got moving on perfecting our diagram quicker.

Let Smart Template inspire your flowcharts

Many job roles require the use of flowcharts on a regular basis. Maybe you’re an HR professional who needs flowcharts to resolve a tricky personnel issue. What about the flowcharts used by risk managers to asses potential problems before they start? Or think about support engineers who are faced with challenging service requests on a regular basis; a flowchart definitely helps standardize responses. We wanted to see how complex we could make a flowchart using Smart Templates to really show how much time it saves. So, we gave it this text input, “A flowchart for rolling out a new salary structure at an enterprise company, including salaries, bonuses, and commissions”, and here’s what it produced for us:

What is interesting about this example is that the Smart Template did some of the thinking for us; we hadn’t even considered Performance Objectives in our initial query. Is there more we can do to make use of Smart Template’s ability to find information?

Data-Driven Diagramming

We have mainly talked about using Smart Templates to quickly create the “skeleton” of a diagram, with the assumption that our users are then going to tweak the contents/text to fit their exact needs. But, a side benefit of Smart Templates is that it can source actual data for your diagrams, making it faster to create them. In the example below, we prompted for “the royal family tree starting at Queen Victoria to present day”, and the template provided exactly the data we were looking for:

This should set your imagination running thinking about the various pieces of data you could pull in. You could ask “create a map of every brand under the Proctor and Gamble umbrella”, or “create a flowchart of every type of ISO certification”, or “list every element in the periodic table”. Why stop there? There’s no end to the queries you can give Smart Template:

• Who is the greatest NBA player of all time?
• Is Star Wars better than Star Trek?
• What is the meaning of life?

Instead of manually typing in data, let Smart Templates save you time so you can start customizing it quicker.

Just scratching the surface

With the feature still fairly new to the world, our users have only just begun to discover the power of Smart Templates. Have you been able to design a unique or interesting diagram using Smart Template? If so, we would love to hear from you; we’re excited to learn how the feature is being used, and how we can improve it in the future. Please reach out to us at sales@drawio-app.com.

Want to explore all the features of draw.io? Visit the Atlassian Marketplace to get started, and soon you’ll be able to create any diagram you can dream of in Confluence or Jira. You can use draw.io to visualize everything, including process modeling and relationships (BPMN 2.0, ERD, Flowcharts, Swimlane diagrams…), software development and networks (UML, UML 2.5, AWS, Azure, Cisco, GCP, IBM…) and administration (Org charts, Mind maps, Floor plans, Infographics). Give us a try and you’ll quickly see why draw.io is the top-rated app in the entire Marketplace.

It takes something special to stand out amongst the opulence of Las Vegas, but if there’s anything Team draw.io loves, it’s a challenge. We set out to make Atlassian Team ’23 our best event ever, and after a fun week of getting face to face with our customers, partners, and Atlassians, we’re feeling like we were the big winners in the Expo Hall.

Our newest feature: Smart Templates

We were really excited to show Team ’23 attendees a brand new feature, Smart Templates. We know that when it comes to building complex diagrams, our customers don’t want thousands of templates, they want the right template. The Smart Templates feature uses machine learning and AI to create editable diagrams in just seconds, all from a simple text prompt. Every user we showed this feature to was impressed, and many commented that it would save them a lot of time in their diagram creation.

Our Community Engagement Coordinator, Emily Fedor, recently produced a video demonstrating Smart Templates, check it out here:

From Smart Templates to Smart Partners

The first appearance of our new feature actually took place the day before Team kicked off, at Seibert Media’s Info Session. This event brings together Partners from across the ecosystem to learn the latest news, best practices, and tips/tricks to help their customers get the most from their Atlassian tools. At this year’s event we hosted two sessions. In the first, Mike Rink shared with Partners draw.io’s vision for building successful apps in the cloud. Then, Ashley Flanagan and Carlotta Kuhn showed Partners how to run better meetings with Confluence (and a little help from draw.io). These sessions will be posted on our YouTube channel soon!

What the F#ck is the Eierlegende Wollmilchsau?

That was the question we posted to everyone who visited our booth. And the answer is that the Eierlegende Wollmilchsau is draw.io’s mascot! This creature comes from a German phrase, which can be translated into something like “an egg laying, wool having, milk giving, bacon growing animal doesn’t really exist; you can’t get everything you want”.

We disagree! We think that our customers deserve to have it all, and that’s why we consider draw.io to be the one tool for every team. Our mascot was featured prominently in our booth artwork and our merch, and they definitely found a place in all of our hearts. We even used them as a supporting character in a Dungeon & Dragons adventure we played with attendees in our booth. 

We recognize that the word might not be familiar to English speakers, but the best way to learn is by trying! So, we challenged Team ’23 attendees to pronounce the animal’s name, and you can see the hilarious results for yourself on our YouTube channel:

What’s in Store for Team ’24?

Team ’23 was special, but the draw.io team isn’t one to take things easy for too long. We’ll pause to recover, but soon we’ll start planning for our big Vegas comeback show. We are looking with excitement toward Atlassian Team ’24, once again taking place in Las Vegas next May, and we hope to see you there!

Want to stay on top of Team draw.io’s exciting adventures? Be sure to follow our social media channels so you don’t miss out.

Gitflow diagrams can be a valuable tool for coordinating development efforts and ensuring that code is properly organized and maintained. Additionally, they can be used as a reference for new team members to quickly understand the branching model used in a project.

If your team uses Confluence, draw.io’s whiteboard editor offers an easy way to design your Gitflow diagram right in your project page. Read on to learn more, or visit the Atlassian Marketplace to try the app.

draw.io’s whiteboard editor

draw.io’s whiteboard macro uses our intuitive drag-and-drop diagram builder, with a simplified editor so you have more space to sketch out your ideas. With draw.io installed, open your Confluence page and insert the draw.io Board macro to get started.

Working with a template

While you may find it helpful to build your own Gitflow diagram from scratch, you can also start out with a pre-built template. To access draw.io’s Gitflow template, click on the boxed plus sign in the left-hand menu, and then select Template…

In the template library, choose the Software category and scroll down until your find the Gitflow template, then press Insert. With the diagram inserted you can now add or remove nodes, edit the labels and make it your own.

If you prefer to build your own Gitflow diagram from square one, the process can be just as fast as modifying the template.

Creating your master branch

In a Gitflow diagram, the master branch is the main branch where the official release history is recorded. Start your branch by adding a circle shape to the board – you can click and drag it from the shapes panel, or simply press the F key. Each circle in this branch will represent a different production release of your project.

You can resize and stretch the circle with the handles of the bounding box, and modify the color and line style from the format menu on the right. Once you are happy with the look of your circle, click the Set as Default Style option in the format menu. This will apply the same styling to any other shapes you add to the board. Finally, double click on the circle to label it with the version number.

To add your next production release node, click on the first circle, and select the arrows outside the bounding box. You can either click and drag to create an arrow ending in another circle, or click the arrow and select the shape you want, in this case a circle.

Just like the circles, you can also style the lines between nodes, changing their color and stroke, and the formatting will be automatically applied to the next line you create.

You can repeat this process for as many version numbers as you need, updating the labels as you go. Finally, if you want to add a legend to your diagram, you can finish your main branch by selecting a square shape instead of a circle and labelling it “Master Branch”.

Add your project, feature and development branches

Depending on the scope of your diagram, your next branch could represent a project, a feature, or the development of pre-production code.

To create your second branch, copy and paste one of the circles from the master branch and then change the color, remembering to Set as Default Style. Once again use the blue arrows to clone as many nodes as you need for this branch, and finish with a square shape to label the branch.

Alternatively, you can simply copy and paste the entire first branch, and with all your nodes selected, change their color. If you need to change the spacing between nodes, just click and drag them into position and the lines will automatically adjust. Add any extra nodes, and then finish by updating your labels.

Repeat the process to create branches for features, hotfixes and whatever other supporting branches are required.

Connect the branches

In a Gitflow diagram, the connections between branches represent the flow of changes between them, indicating which changes have been merged or integrated into which branches. These connections help to visualize the relationship between different branches, and can help your team understand the overall evolution of the codebase.

To connect the branches in your diagram, hover your cursor over a circle and select one of the anchor points around its edge. Click and drag from there to the destination circle. You can style the connecting line, and you can also change the curve of the line by clicking on it and dragging the blue anchor point.

Using libraries

draw.io’s board editor is designed with a streamlined set of shapes and tools, but there are plenty of other icons and images available if you need them. In the left-hand menu, click the plus sign and then Shapes to open the larger library. You can use the search bar to find the specific shape you want, search by use case, and even upload your own images.

With a clear and concise diagram, you and your team can gain a deeper understanding of your codebase, and more effectively manage and collaborate your projects, all within Confluence. Visit the Atlassian Marketplace to find out more about draw.io and get started.

Do you like to dive deeper into the world of draw.io? Access our linktr.ee page to follow us on Social media and learn how others use draw.io and hopefully pick up some tips and tricks.