A quick recap

We’ve followed our fictional Sketch Team as they kickstarted their AI-driven emote project, visualized their project structures, and ran a Sprint retrospective, all with the help of Jira and draw.io.

The team’s emote feature has now been shipped and is available to users of their streaming platform. They can see the fruits of their labor, and feel deep pride in the work they’ve produced.

But their journey doesn’t end there. As with any Agile project there are continuous updates and releases, integrating the feedback directly from users of their streaming platform.

Keep everything tickety-boo

Their users naturally have questions and comments on the new emote feature release. This feedback is arriving as tickets in the Sketch Team’s Jira Service Management (JSM). While supporting users, the engineers notice very similar themes are starting to emerge. In response, they begin to group user tickets using labels, such as Graphic/Visual, Functionality/Performance, and so on.

Using these labels, they create flowcharts outlining how they will support users based on the group type. These flowcharts can be saved in Confluence, OneDrive, GoogleDrive, or to their local hard drive.

The saved diagrams can easily be embedded in a specific Jira support ticket for the engineer to consult in real time, using it as a checklist to make sure they’ve considered common problem scenarios first.

To embed the diagram in a Jira ticket, just click the three dots […] and select Embed draw.io diagram.

Visualizing support processes with Smart Templates

Now, the team wants a quick and clear way to visualize their various support processes. Not only will this help current engineers develop a consistent approach to ticket management, it will also serve to onboard new engineers they will recruit as their streaming platform continues to grow.

To save time, the engineers can use Smart Templates to generate flowcharts according to their requirements.

The custom diagram below shows the process for Plugins/Extensions support requests. Depending on the issue type and complexity, a customer agent can first work with the user to try the suggestions outlined in the flowchart. If they aren’t able to resolve the issue, the agent can escalate the ticket accordingly.

Further draw.io use cases for JSM could include:

• A flowchart showing the user support process from start to finish. This could have explanations of each ticket stage and what tasks the engineer needs to complete before moving the ticket to the next stage.
• Brainstorming ideas for a new user request form. Here, the colleague proposing the new form can visualize which fields are required, and which are visible/hidden for users. They can then share this with their team so everyone is aligned on which fields they want to keep, before creating the form in JSM.
• A high-level overview of Service Level Agreements (SLAs). For example, the team might have an SLA target to respond to customer queries within 24 hours, or to close tickets within five days of them being open. This could be presented in an easily-digestible visual format for stakeholders across the company.

Auf Wiedersehen, Sketch!

Over time, the engineers successfully develop a robust system to support their users, becoming quicker and more efficient in categorizing and handling tickets and feedback.

As our journey with the Sketch Team draws to an end, you’re invited to continue your own story for your team. Discover more about about using draw.io for Jira and Agile methods in the following articles:

• Inspect and Adapt With draw.io Board Macro
• Agile Check-ins with draw.io’s Board Macro
• Agile Role Evaluation with draw.io
• Use Dynamic Modules in draw.io Whiteboards

A quick recap

In the last blog article, our fictional Sketch Team experimented with Smart Templates to generate custom diagrams that visualize key processes within their AI-driven emote project. They brought these diagrams to life by adding color to shapes and lines, as well as changing the font and border styles. This added a touch of personalization to their diagrams, as well as helped guide stakeholders through their team processes.

The team has reached the end of their current Sprint, but how did it all really go? Did they finish their tasks well before the deadline, or was it a last-minute rush? Did everyone on the team feel listened to? No project, big or small, goes without a hitch, and it’s now time for the Sketch Team to take stock and reflect on how the past two weeks went as a whole: what did they feel went well, and what could be improved for next time?

The opportunity to address the questions above will be in the team’s retrospective. The Sketch Team’s nominated Scrum Master will set up and guide the retro, ensuring a fruitful conversation that celebrates the project and team’s successes, while also paving the way for important lessons learned, and the action items they will take forward. Below we will explore two options for running a retro: in Jira, or in Confluence.

Running a retrospective in Jira

To run a retrospective in Jira, the Scrum Master would first need to create their draw.io retro diagram, and save this to their online OneDrive, GoogleDrive, or to their local hard drive. This will form the basis of the Sketch Team’s discussion.

Once the retro template is finalized, the Scrum Master can invite the rest of the Sketch Team to a virtual meeting, share their screen with the draft retro diagram, and add the team’s ideas as the discussion is flowing.

When all the team’s comments have been recorded, the Scrum Master can embed the diagram into the Jira epic for the project, in order to capture the insights from the retro discussion, and to create Jira tasks and subtasks that were agreed upon. For more information on this step, see the section below, Assigning action items in Jira.

Real-time retrospectives in Confluence

An alternative to running the retrospective in Jira is to host it in a Confluence page. The major strength of this is that it allows the team to add their own ideas and collaborate in real time. To set up a retro in Confluence:

1. Create a page in Confluence.

2. In the new page, begin typing /draw and select the draw.io Diagram macro, to start creating the retrospective template. Alternatively, you can download one of the retrospective templates from this related blog article.

3. When your template is ready, use the Share button in the Confluence page to invite your team members to collaborate on the diagram.

Assigning action items in Jira

Once the team has gone through the retro and voted on which action items they will go forward with, this is where Jira comes into play.

The Sketch Team will embed their Sprint retro diagram in the Jira epic for their emote project. The reason is twofold: first, it provides an overview of the discussion and key learnings that the team can refer back to at any point. Second, the action items from the retro can be added as tasks within the epic, to then be assigned and worked on in the next Sprint.

Join us next week for our final article following the Sketch Team, where we’ll look at how their engineers support the requests from users of their newly-released emote feature.

Looking for inspiration for your next retrospective? To get you started, our draw.io for Agile Retrospectives article has some fun coffee and wedding-themed templates for you to download and use with your teams.

A quick recap

In the last blog article, our fictional Sketch Team kicked off their AI-driven emote project for their streaming platform. They held a brainstorming session using draw.io within Jira to illustrate and centralize their creative thoughts.

The next step for the team is to outline their project structure in Jira in order to have an overview of dependencies, and ensure everyone is on board with the plan.

The team is on the hunt for inspiration. As their project will feature AI-driven emotes, what better way to structure their upcoming tasks than by using AI?

AI-generated custom templates at your fingertips

draw.io’s Smart Templates allow you to generate custom diagrams at the click of a button, powered by AI. This can provide a little boost to the Sketch Team’s planning process, with concepts or roadmaps they may not have thought of just yet.

To generate a purposeful Smart Template, you first need a good idea of what your criteria are. For a project roadmap for example, consider:

• What type of diagram do you want? (If you know this already): e.g. “A 3-tier sequence diagram”
  • You can equally use the “Diagram type” dropdown to select the diagram you want. Leaving this blank will leave AI to generate a template type for you
• What purpose do you want it for? e.g. “An emote feature”
• Who are your key stakeholders? e.g. “The designer, the developer, and the project manager”

Found out more about Smart Templates

For more information, check out the following articles:

• Smart Templates, an exclusive new feature from draw.io
• What can you do with a Smart Template?

We will continue to follow the Sketch Team’s emote project journey in the next blog post.

Humanity has always used images to simplify, retain, and understand information. Visualization plays a crucial role, particularly in Agile methods, in helping teams cut through complexity, and enabling efficient and effective collaboration.

Back to the drawing board

From previous experience, the Sketch Team knows all too well that the key to a successful project lies in the planning phase. Therefore before setting up their task breakdown in Jira, they will first need to work out their emote project’s concrete scope and requirements.

To this end, brainstorming is a great way for capturing everyone’s ideas. Traditionally, this process involves concrete walls and plenty of sticky notes. But the Sketch Team is a distributed team that is working remotely, in office, or a mix of both across the globe, so their brainstorming sessions are held digitally. The advantage of this is that it ensures the team’s ideas are captured and accessible at a later date, and are immediately available in Jira to be elaborated on or updated at any time.

3. From here click on Blank Diagram to bring up a blank canvas to map out your ideas. Particular features that are useful for gathering and organizing ideas are the sticky note and brush tools.

4. When you’ve finished the session, you can save your diagram which will automatically attach it to the Jira story, epic, or task you’ve created it in.

There will now be a draw.io tile visible underneath the issue name. Click on this to bring up an image preview of the diagram you have just created. You can then either click on the image to open the viewer mode, or hover over it and then click on the pencil icon to edit the diagram.

From here you can either share the diagram via sharing the link to the Jira issue, or create more draw.io diagrams following the steps above.

And there you have it. All of these tools combined into a single platform within their Jira issue has allowed the Sketch Team’s project development to take shape and hit the ground running. They will then decide as a team on which ideas they will take forward, and which are beyond the project’s scope. The next step will be to take these ideas and transform them into real, actionable tasks.

We will continue to follow their emote project journey in the next blog post.

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.

For over 25 years, the Unified Modeling Language (UML) has been a stalwart of diagramming. But, while UML has stood the test of time, the same can’t be said for traditional software. The difference between Office 95 and a tool like Atlassian Confluence isn’t just a contemporary UI – modern software has revolutionized how teams work together. If you’re still pasting PNG UML diagrams into a Word doc, this is precisely the blog you need to learn about modern collaboration.

It takes a team to design a system

At its core, UML is all about modeling systems. In a modern context, this could be anything from designing an app, to outlining how an HR team will service internal customers. Software teams the world over create and interact with UML diagrams on a daily basis. By harnessing the power of a team (as opposed to a single individual), you not only tackle the ideation and creation process in one go, but the end result should be a diagram that is more accurate, and easier to use.

Older tools made this more difficult. Trying to collaborate by commenting on a shared, emailed PDF is a pain many of us know too well. Where do modern tools exceed the capabilities of legacy software? Three main improvements spring to mind:

1. Live collaboration
2. Better version control
3. Easier sharing

A model for better collaboration

The ability for teams to work together simultaneously on content has been a game-changer. Hopping on a Zoom call with a shared working document lets teams reach a consensus faster, and helps ensure that view points from a variety of stakeholders are considered. Confluence Cloud comes standard with live collaboration on documents, and draw.io is built so that you can work on diagrams together the same way. Just assemble your team, open draw.io for editing, and every teammate can make contributions directly to your UML diagram.

Monitor and control file versions

If you’re a veteran of the corporate world, you probably remember the days of “DocumentName_v14a.pdf” and “DocumentName_v15_FINAL_2.pdf” sitting on shared servers. Determining which version was the latest, or trying to find a specific older version, were time-consuming and infuriating processes.

Here too, Confluence makes life a lot easier for teams. The system’s built-in versioning keeps track of every change, and you can see precisely which user changed what content. Likewise, we have invested significant development time in building versioning into draw.io. Our version control and revision history features allow you to keep track of your diagram’s evolution. The system automatically saves previous versions, so you can revert to a specific point if needed. Perfect for those times when you need to revisit an older version, or see the development of a UML diagram over time.

Get your UML diagrams to the right people

The perfect UML diagram is useless if the right people never see it. Trying to manage a massive email thread, or controlling access to a shared document link, are both problematic compared to more modern, elegant solutions. With a tool like Confluence Cloud, sharing documents with team members is effortless; sharing page links, commenting for team members’ attention, or adding them as editors are all common methods for sharing a document among a group. Atlassian has also recently released a feature called “External Share”, making it possible to share your UML diagrams with people who are outside of your Confluence instance. Finally, for those times when you do need to send a file of the diagram, draw.io is built with a variety of exporting options, including PDF.

Get started collaborating with draw.io

You know that draw.io is your number one tool to master complex situations, for example when it comes to process diagrams, software architectures and relationship visualizations. But every now and then, people approach us asking what more draw.io can do. Well, draw.io is the go-to tool for EVERY team. And to prove it, we will look at something completely different today.

In this blog we’re diving into the world of boardgames to showcase the versatility of draw.io in new and exciting ways. Use this as inspiration to get thinking outside the box, and take draw.io to the next level.

Dominoes

Dominoes is a classic game. Arrange your dominoes to build a chain where the values of joining pairs of tile ends must match in number.

In this example each domino is composed of a group of individual shapes. Click on a domino tile, duplicate it using Ctrl+D (Windows) or Cmd+D (MacOS), and use the rotate function that appears in the top-right corner of the image to rotate the shape accordingly.

Download our Template below as a starting point, or create and customize your own pieces. For example, you could add colors to the domino dots to make all the 2s, 3s, etc. easier to identify.

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

Memory

The game Memory is an easy and effective way to test your recall skills. It can also be used as a revision tool, say for learning new words in another language. Simply choose 2 cards at random to see if they match.

In draw.io you can use the toggle function to manually show or hide an image layer. In this case, click on 2 cards to reveal a pair of images and see if they match. If they do, you have won those cards, and they will remain visible. If they don’t match, click the images again to hide them.

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

Checkers

Our domino example highlights how to duplicate and rotate shapes, and Memory allows us to see how to show and hide layers in draw.io. But what about moving boardgame pieces?

Checkers demonstrates this beautifully. The checkerboard needs to stay “fixed” throughout the game whereas the pieces need to be moved diagonally, either to an adjacent unoccupied square, or one square further when you jump over your opponent’s piece to capture it.

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

To build a playable checkerboard:

1. Drag and drop a blank checkerboard image into the Canvas. Alternatively, you can use our Template above, or even create your own following our guidance in the video below.
2. Go to View > Layers to bring up the Layer panel.
3. Rename the layer (e.g. Checkerboard) and lock it by clicking on the padlock symbol.
4. Click on the plus icon (+) to create a new layer for the pieces. Keep this layer unlocked, so that you and your opponent can freely move your pieces.
5. Add the checker pieces in. To do so, either:
   • drag and drop images you’ve already prepared, or
   • build a checker piece using the circle shape.
6. For the second option, change the color of your piece using the Style menu. As before with the dominoes example, use Ctrl+D (Windows) or Cmd+D (MacOS) to duplicate the pieces and drag and drop them to the required positions.
7. Duplicate an additional piece and then follow the previous step again to create the opponent’s checker pieces.

If you want to find out more about how to toggle shapes or layers on or off, check out Interactive diagrams with custom links and actions.

The possibilities are endless

People can accomplish amazing things when they come together with a shared goal. As Atlassian likes to say, “Impossible Alone”. At the recent Atlassian Team 23 conference in Las Vegas, our team at draw.io had the opportunity to experience this firsthand. With the help of conference attendees, we were able to make a meaningful impact by supporting four incredible charities.

Join us as we reflect on this heartwarming event and celebrate the good we can do when we unite for a cause.

Return a Postcard, Create a Donation

During the conference, attendees were presented with postcards that had four scratch-off areas. We asked that they randomly select one box and scratch it off, and when they bring it back to our booth, we will then donate $25 to the charity they had revealed. To sweeten the deal, we also gave away a set of high-quality headphones to one fortunate attendee who returned their card. The lucky winner was none other than Marcos, an Atlassian Community leader, who was over the moon with excitement. Congrats, Marcos! We hope you’re enjoying your new headphones.

We were grateful for every selection made and the contributions we were able to make to these important causes. We were inspired by the generosity of our fellow conference-goers and the difference we were able to make through our collective efforts.

draw.io’s Commitment to Making a Positive Impact: Supporting Charities

At draw.io, we are committed to creating tools that enable people to work together effectively and make a positive impact in their communities. That’s why we were thrilled to support four outstanding charities during the Atlassian Team ‘23 conference: the World Wildlife Fund (WWF), Doctors Without Borders, Black Girls Code, and Save the Children International.

The WWF is a leading conservation organization that works to protect wildlife and preserve natural habitats around the world.
Doctors Without Borders is an international humanitarian group that delivers emergency medical aid to people affected by conflict, epidemics, and disasters.
Black Girls Code empowers young girls of color to become future leaders and innovators in the tech industry.
Save the Children International is dedicated to improving the lives of children around the world by providing education, healthcare, and protection from harm.

Thanks to the generosity of our fellow conference-goers, we were able to collect a total of $2375 to donate to these worthy causes.

Each of these organizations aligns with draw.io’s core values of collaboration, innovation, and making a difference in the world. We are proud to have supported them and encourage our users and partners to join us in making a positive impact in their own communities.

Taking the Pledge 1%

Giving back is a fundamental part of our identity as a company. That’s why we have committed to the Pledge 1% initiative, a program that encourages businesses to donate one percent of their profit, equity, product, or time to charitable causes.

As a team, we are committed to supporting organizations that are making a difference in the world. By participating in the Pledge 1%, we are taking a concrete step toward fulfilling this commitment. The money we raised during Atlassian Team ‘23 is just one example of how we are working to make a positive impact in the world.

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