Perspective is everything

Humanity has come leaps and bounds with advanced technology, medical breakthroughs, and artistic and cultural revolutions. Over the course of history, pioneers have accomplished spectacular achievements, setting the stage for us today and paving the way for advancements that infuse every possible aspect of life.

In our last blogpost of the In-Shape series, we have curated 5 diagrams that have revolutionized the way we think, feel, and visualize, and discover their continued impact on humankind today.

Enter: draw.io’s Diagram Hall of Fame!

1. da Vinci’s Vitruvian Man: A symbol of harmony

Considered to be one of the all-time iconic images of Western civilization, da Vinci’s Vitruvian Man represents the “perfect man”, inspired by the writings of the Roman architect Vitruvius.^[1] The drawing captures the concepts of balance, harmony, and the perfect ideals of the human form. Its enduring popularity since its creation captivates and inspires people even today, and has ensured its place in our Diagram Hall of Fame.

Due to the fragility of the original drawing, it cannot be exposed to light for extended periods of time, and it is usually kept in a climate-controlled, locked room on the fourth floor of the Accademia Gallery in Venice.^[2] In 2019, there was even a petition to ban the drawing from being transported to The Louvre, to mark the 500-year anniversary of the death of Leonardo.^[3] (Fortunately, your draw.io diagrams are expertly preserved and showcased in Confluence, safe from the perils of time, oxygen, and light from spoiling their pristine condition!)

The Golden Ratio

Balance and harmony are often subtle, but essential aspects of visualizing effectively. Get the proportions wrong or inconsistent, and it detracts from the central focus of your diagram.

With draw.io you are able to maintain aspect ratios of your shapes while resizing them. Simply click on a shape, head to the Arrange tab in the right side menu, and check the box, “Constrain proportions”. For an even quicker way to do this, see our shortcut video, How to keep shapes proportional and centered while resizing in draw.io.

2. CO2 Scrubber from Apollo 13: Accounting for every eventuality

When we hear “Apollo 13”, one of the first things likely to spring to mind is the 1995 movie. In the movie, as in real life, an explosion cripples the Apollo 13 spacecraft, resulting in the three astronauts using the Lunar Module for much of the return flight. The problem? The Lunar Module was designed only for two astronauts, adding a third to the spacecraft would result in a fatal overabundance of carbon dioxide.

Mission Control and the crew had a seemingly insurmountable challenge: to keep the three astronauts alive on their return voyage. Complicating things even further was that Mission Control based in Houston was unable to send pictures to the crew. They therefore had to describe everything in detail verbally, and hope the astronauts got the picture. NASA’s engineers put their heads together to come up with a workaround, using command module scrubbers available in the lunar module.^[4]

Key learnings

In business as in life, nothing is plain sailing, and things can and do go wrong. Accounting for all eventualities helps mitigate the risks to an extent, but equally important is learning from critical incidents: what went well, and what can we do in future to reduce risk, prevent repeating mistakes, and improve?

Our blogpost, draw.io for Agile Retrospectives, provides a variety of templates for you to use. They will help guide your team retrospectives, ensuring these are productive meetings where no stone has been left unturned, no man left behind as each colleague has had their voice heard, and your processes are optimized to be absolutely out of this world!

3. Copernicus’ Heliocentric Model: Turning what we know on its head

Copernicus (1473–1543) was a mathematician and astronomer who proposed that the Earth and the other planets revolve around the Sun, which remains motionless at the center of the universe. This is a fact that is taught in schools, and few would question today. However, it was highly controversial at the time, going against everything we’d understood before, namely Ptolemy’s geocentric model that placed Earth at the center of the universe. As a result, most astronomers remained unconvinced by Copernicus’ model for centuries, right up until about 1700^[5].

Fortunately, later on, with a little help from our friends Galileo Galilei and Johannes Kepler, the heliocentric model gained wider acceptance and eventually became the foundation of modern astronomy that we know today.

Challenge your way of seeing things

It’s good to challenge the status quo and our usual way of thinking. This exercise can test the robustness of ideas we would like to go ahead with, as well as ensure what we are currently doing is up to scratch. For a fun, “flipped” way to brainstorm that will challenge the way you approach tasks, check out our template below: 6-3-5 Brainwriting.

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.

4. Moses Harris’ Color Wheel: Putting theory into practice

Moses Harris (15 April 1730–1787) was a naturalist, entomologist, and engraver. He was also an accomplished artist, with his drawings of insects featured at the Royal Academy in 1785.^[6] All of these aspects of his life and career set the backdrop for the development of his color wheel, and was meant to serve as a practical guide for artists.^[7] Primarily, it represents how a range of colors can be created from red, yellow, and blue.^[8] The wheel consists of a circular arrangement of colors, typically six or seven, illustrating their relationships and organization.

Drawing on his knowledge of nature, Harris’ descriptions for colors were based on substances, fruits, or flowers:

Source: Lowengard, Object Studies: Hand-Colored Engraving

Although more modern versions of the color wheel have been developed since, Harris’ color model had far-reaching implications. It paved the way for the development of revised color systems, which continue to be used in art schools and artistic environments today.^[9]

Add a splash of color to your diagrams

In draw.io, there are plenty of text, image, and color customization options for you to play with, in order to create bespoke diagrams and whiteboards tailored to your and your organization’s needs. For more information, see our blogpost, Customise default colours, fonts, styles and the draw.io UI in Confluence Cloud.

5. Watson and Crick’s DNA Model: Laying the foundations

Last, but certainly not least, the final diagram featured in our Hall of Fame: Waston and Crick’s DNA Model. Plenty of scientists were racing round the clock to crack the compositional code of DNA and how it was structured, but it was ultimately Francis Crick, Rosalind Franklin, James Watson, and Maurice Wilkins who co-discovered the double-helix structure. Watson, Crick, and Wilkins went on to be awarded the Nobel Prize for the discovery.^[10][11]

The double helix structure is synonymous with our understanding of the human genome and how life can exist, and has had a fundamental impact on modern science and medicine.

Scientific discoveries seldom tend to result in a clearly-defined, “eureka” moment, and it’s important to take a step back and consider how this revolutionary DNA model developed over time. “Scientific discoveries may seem like sudden breakthroughs — the work of a genius who just “sees” the answer — but new findings don’t come out of nowhere. Each breakthrough is made possible by the work that came before it. Some scientific discoveries are a bit like putting together the pieces of a puzzle.”^[12]

Building on strong foundations

Like scientific discoveries relying on a clearly defined model of DNA, the best diagrams are those that are clear to read and built on strong foundations. To avoid your diagram from becoming too confusing and cluttered, you can use layers to build up your draw.io diagrams from simple to complex. This also gives your diagram viewers the ability to choose the level of detail they need to see.

To find out how to build your diagram using layers, see our blogpost, Interactive diagrams with custom links and actions.

Your breakthrough discovery

These diagrams and visualizations were designed by innovators with a vision, and founded on countless breakthroughs and ideas leading up to their pinnacle discovery.

We hope the diagrams featured in our Hall of Fame inspire you to visualize something truly remarkable, and possibly even come up with the next big breakthrough…*

*And if you do, do make sure to give credit to draw.io when you become massively successful!

Resources

[1] Gorman, M. J., The Vitruvian Man

[2] Ruiz, C., If Leonardo’s Vitruvian Man goes on show at the Louvre, we won’t see it again for a decade

[3] Solly, M., Leonardo’s ‘Vitruvian Man’ Is Headed to the Louvre Despite Italian Scholars’ Protests

[4] Space Center Houston, Apollo 13 Infographic: How did they make that CO2 scrubber?

[5] Gringerich, O., The Book Nobody Read: Chasing the Revolutions of Nicolaus Copernicus

[6] Natural History Museum, Moses Harris (1730- c.1788)

[7] Royal Academy of Arts, The Natural System of Colours

[8] Silvestrini, N., Moses Harris

[9] Briggs, D., The RYB hue circle or “artists’ colour wheel”

[10] Science History Institute, Francis Crick, Rosalind Franklin, James Watson, and Maurice Wilkins

[11] Cobb, M., and Comfort, N., What Rosalind Franklin truly contributed to the discovery of DNA’s structure

[12] Stuart, S., The right timing

Your one-stop shop for templates

You should already be familiar with building custom diagram templates in draw.io, but what about incorporating diagram templates within a Confluence page template or blueprint (very meta), to use time and time again?

This is particularly useful for things like holding brainstorming or retrospective meetings with your teams. Often, as time goes by, you develop a routine for these meetings, optimizing the process and storing the knowledge and resources gained to apply to future meetings. Confluence and draw.io are the perfect combo for you to record what’s going well in your brainstorming and retrospective formats, to access in future meetings at the click of a button.

Here’s how it’s done:

Note: You must have already created and saved your draw.io diagram templates and stored them in a Confluence page, before creating a Confluence page template. To find out how to do this, see Leverage your draw.io user experience with custom templates.

1. To start building your Confluence page template, head to the Settings icon at the top-right of the page, click Global Templates and Blueprints, then Add Global Template.

2. Add any relevant text to your Confluence page template. You might want to add a meeting agenda for example, or include some explanatory notes on how the retro process works.

3. Add your existing draw.io diagram template by typing /draw and select either draw.io Board or draw.io Diagram.

4. Use the search bar to locate the draw.io template you wish to use, then click Create.

5. Once you’ve added the diagram, it will be stored in the Confluence page template. When you are finished, click Save to save your changes.*

*In the template view, you will not see a preview of your diagram. However, when you create a new Confluence page and load the template you have created, the diagram will display as expected.

6. Once saved, your template will display in the list of Global Templates and Blueprints. It’s helpful at this stage to add a description about the template for others who may want to use it in future.

When you’re ready to use your template

When you’re ready to use your template:

1. Create a new Confluence page in your team space.

2. Locate the template page you wish to use. If it’s a template you have created, click on My Templates to bring up a list of the ones you own. If it’s been created by someone else, browse through the list, or use the search bar to locate a specific template.

Hover over a template, to preview its contents.

3. Once you click on the template you wish to use, the Confluence page template containing your diagram will be loaded and ready to use:

Tabula rasa

After you have filled in the diagram for your retro and published the page, the changes you’ve made to the diagram and the Confluence page are preserved only on that specific page. When you create a new page and load the same template again, a new version of the Confluence page and diagram are created. So, no need to worry about overwriting your previous retro meeting notes, or the original Confluence template itself!

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.

Introduction

This game design saga draws to a close, and it’s time to take a break, pause, reflect, and appreciate the tool that has been instrumental in this journey. draw.io. In this blog I celebrate the partnership with this versatile tool and how it’s been the guiding light in the game design process.

I know I sound like such a fanboy, and I really am, and I make no apologies for that, it opened many doors in new ways I can be creative, and I am sure it will do the same for you reader.

A Companion from the Start

From the initial stages of game conceptualization, draw.io proved to be my sketchbook/notepad. It allowed me to visually map out ideas, giving structure to our creative storm.

A basic word cloud idea template to start from and can be used for the main story and character creation, anything really.

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.

Crafting Characters and Stories

Delving into character creation and story weaving, draw.io proved to be the canvas. Our protagonist’s quirks, the supporting cast’s dynamics, and the overarching narrative, all took shape on this platform.

Templates of the character creations, each with different levels of detail, characters can be as detailed as the protagonist if you like.

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.

Mechanics, Dynamics, and Aesthetics

Game mechanics, dynamics, and aesthetics form the trifecta of game design. With draw.io, it visualized the dance between these elements, ensuring our game was engaging at every turn.

There are more elements and nuances that take place such as the look regarding the art and character appearances; in those instances I turn to other tools such as Blender, GiMP, Pixilart etc. These artistic elements are important but easier now that the core, bulk and direction of the game has been worked out. draw.io can co-ordinate these elements and give me a look at what the game will need.

A simplified beat sheet template, this will put things together like story and mechanics and help visualize the themes and aesthetics the game will need.

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.

Conclusion

Looking back, it’s evident how pivotal draw.io has been in the game design journey. As I embark on new adventures, with fresh ideas and challenges, I know one thing for sure: draw.io will remain my trusted ally. Here’s to more game design magic! (Alohomora!)

Thank you for taking the time to read this and I hope this has helped to inspire new methods of being creative and encouraging the imagination through this wonderful app.

draw.io Outro

We hope you’ve enjoyed Andy’s series! To look back on the rest of Andy’s storytelling in game design blogposts, see:

1. From Chaos to Clarity: Conceptualizing Your Short Game
2. Crafting Memorable Characters: From Chaos to Clarity
3. Refining Story Plots and Mechanics for Your Short Game
4. Game Design’s Chaos Compass: draw.io

If you want to find out what more draw.io can do for you and your teams to spark your creativity and assist with your storytelling journey, here are some resources, to get you started:

Blogposts

• Smart Templates, an exclusive new feature from draw.io
• Draw timelines and roadmaps in draw.io
• Work with text and connectors
• Whiteboarding for Ideation

Videos

• How to split connectors by inserting a shape in your draw.io diagrams

Introduction

The game concept has evolved and our characters have developed. Now it’s time to refine it into a polished gem.

We shift our focus on balancing gameplay, and this will be as simple as it can be to demonstrate the potential of the story and the gameplay in an easy format – this will help to see how much more can be explored when we have the basics set out first.

I plot out the game story plot structure using a 3 act structure used in most storytelling formats from books, film and gaming. (I developed this basic template through draw.io to help with setting out the story and mechanics).

Story Plot Development

Stories are the threads that bind our games together. In this phase, I take raw, chaotic story ideas and weave them into a structured plot.

draw.io will once again be my ally, helping me create a visual representation of our story’s progression. At the same time I will be learning new ways to develop story structures and plot development through draw.io as I navigate the narrative twists and turns.

Using tools like draw.io, I am able to visualize the narrative flow, pinpointing pivotal moments and ensuring that every twist and turn adds depth and excitement to the player’s journey.

I set out a basic plot line based on a timeline and separate them into the acts so I know when, where and what the player will be experiencing.

Based on this modified timeline is what helped shape the 3-act structure for the game. (The original timeline from a previous blog, I was experimenting with the idea of the player playing as the villain/minions in the story as well, but scrapped it as time became a factor).

As you will see, during refinement and process of realisation, there will be elements you will have to give up, sacrifice or set aside as a ‘stretch goal’ as we call it in the industry, where there will be ideas, concepts, mechanics, assets that on paper may be great but may cost too much time or resources to produce, so you set it aside for the future if the possibility arises to bring it into the game.

Mechanics Integration

I use a design framework called MDA (Mechanics, Dynamics, and Aesthetics) it helps balance key parts of developing a game; What a player can do, how they will do it and how it will feel, this is an oversimplification but it serves to see any design principle beyond just one focus of that game (for me it would be narrative (the Aesthetics)) and to think about other important elements that I may miss such as the mechanics of the game and how they player will interact in the world I would have written.

I try to meticulously sculpt player actions, gameplay reactions, and the game’s aesthetic feel. This trinity ensures players not only hear the story but live it, leaving an indelible mark on their gaming memories (at least, that is my hope) and draw.io plays a crucial part in visualizing this balance and I do this by means of The Beat sheet.

The Beat sheet – it contains the plot structure, a timeline and player mechanics described throughout the journey.

The Beat sheet, one of my favourite aspects of game development in narrative design. This tool allows me to sift through the plot, retaining what works while considering the essential mechanics for the intended experience. What I employ is a simplified version of a beat sheet tailored for short game development. Here’s a breakdown:

• Story Beat: A brief snapshot of the story at a specific moment.
• Game Objective: The goal set for the player during that scene or moment.
• Action: The player’s anticipated activity.
• Cutscene: Primarily used for exposition or transitions. Sometimes, players have no control during these segments. Their purpose is to seamlessly transition from one scene to another, such as guiding the player’s journey from one part of the world to another.

Andy Outro

Refining your story plot and mastering your game mechanics is an iterative process that will take a few tries, to get the final version to place you are happy with.

In the last blogpost, I’ll be looking at how draw.io has been instrumental for visualizing my storytelling journey.

draw.io Outro

To follow along with the rest of Andy’s storytelling in game design series, see:

1. From Chaos to Clarity: Conceptualizing Your Short Game
2. Crafting Memorable Characters: From Chaos to Clarity
3. Refining Story Plots and Mechanics for Your Short Game
4. Game Design’s Chaos Compass: draw.io

Introduction

In the universe of game development, characters are the heartbeat, the anchors that tether players to our fantastical realms.

My focus will be my main character Adelaide. This being a short game I want to make sure the main character has had more time spent being defined with background, traits, quirks. Players will be spending most of their time immersed with her in the game.

Other characters will have enough detail to bolster our heroine and have their own personalities.

Chaos in Character Creation

In exploring this chaotic phase, where rough sketches, quirky traits, and unique backstories emerge. I try to keep track of this whirlwind of creativity, I will turn to my trusty companion, draw.io, and utilize this tool to help me store, organize, and breathe life into these initial character ideas.

Chaotic Character Creation is a whirlwind ride of ideas of its own, with its own sketches and concepts. They will be characters ready for their adventures.

Rough word cloud for the player character, the villain and ancillary/secondary characters

Character Refinement

When the brainstorming storm subsides, I am left with a room (or brain) full of scribbles. Refining these rough diamonds will shape more of the story and game and how it all plays out as an experience of adventure for the player.

For the character crafting journey, draw.io has been invaluable, turning abstract ideas into clear character maps, and personas, seeing the connected relationships and where they will take the story.

Character details for the main player character

Character details of the villain

Lastly the ancillary/secondary characters that support either villain or player character (our heroine)

You may have noticed reader that the details diminish for each character after our main heroine. That was by choice: at the end of the day the relationships and connections all serve a purpose to drive the story forward, and if you decide that it is your villain or even a minor character that will have more details, if it helps to convey an immersive and compelling story, then great! (and if you do, let me know! I would love to read it/experience it!)

Andy Outro

We have our initial story concept, and we have begun developing the characters. In the next blogpost, we’ll start weaving the threads together, to refine the story plot, and working within a Mechanics, Dynamics, and Aesthetics (MDA) framework to start to map out what the characters will do in the game.

draw.io Outro

To follow along with the rest of Andy’s storytelling in game design series, see:

1. From Chaos to Clarity: Conceptualizing Your Short Game
2. Crafting Memorable Characters: From Chaos to Clarity
3. Refining Story Plots and Mechanics for Your Short Game
4. Game Design’s Chaos Compass: draw.io

Introduction

In my approach to game design, creativity flows like a torrential river. It surges with unbridled energy, carving new pathways as it rushes ahead. This river is the lifeblood of our craft, birthing innovative ideas and ground-breaking experiences. But, like any mighty river, it can be wild, unpredictable, and chaotic. 

Emphasizing the Creative Chaos

This is a journey that most game designers know well and if you didn’t, spoiler alert, it’s chaotic! We celebrate the chaos of game ideation, where ideas bubble up like geysers and concepts collide like celestial bodies. This chaotic phase is where the magic begins, but it’s also where things can get, well, a bit messy.

Here is where draw.io enters stage right, I start with a file called Untitled Diagram.drawio

Last thing on my mind is a file name until something takes shape later on.

The Importance of Structure

Chaos can fuel the creative spark, structure can serve as the guiding hand to shape raw ideas into tangible forms. As a game designer, I must embrace both sides of this creative coin. I will emphasize the importance of structure and a well-organized approach in game ideation as a counterbalance to the beginning of the chaos.

Embracing the Chaos

The Initial Stages

The brainstorming stage. Here, there are no rules, no judgments, only a canvas waiting to be painted with the wildest of ideas. Start at the end, start with a lowly character, or even a colour or anything that comes to mind, it’s a time for creativity to run free, unburdened, undisciplined and unplanned.

I can start with an object or a character and grow from there, whether it is a haunted mug of mouldy coffee (ew! Don’t think of the smell! Or do?), the protagonist, villain or even a minion.

I started with an overall concept based on an article I read about a theoretical supercontinent of Earth called Ur from 3.5 billion years ago for this journey.

Using Visual Representations

Visual representation is key to my process. At the beginning there are notes; words, phrases, illustrations that have no logical flow… Yet! But right then and there I don’t care (Yet!) all these moments of frenetic writing, one idea after the next and disjointed as they may be, I use diagrams, cells, blocks, or formless texts (text without borders/margins or in a cell) in an open draw.io diagram and start creating a cloud of random cells and a vague story with all the aforementioned notes (sometimes I’ll add lemon or soap forgetting it is not a shopping list but it doesn’t matter!)

A word cloud centred around a story prompt, concept or idea.

Benefits of Free-Flowing Brainstorm

But why embrace chaos at all? The answer lies in its unpredictability. It’s in this chaos that I find unexpected gems—ideas we might have missed in the more structured approach. The free-flowing brainstorm opens doors to innovation, pushing me to think outside of the box and more to the “what-ifs” (what if my character did this, what if we explored that, what if I bought lime instead?) pushing beyond my creative boundaries and habits.

In the chaos I begin to see patterns begin to form, something tangible, hidden gems, and potential for an idea to become something greater than the sum of all its disjointed parts.

It’s a process that always helps me to grow creatively and imaginatively.

Organizing the Chaos

Transitioning to Order

Yet, like a chef with all sorts of ingredients (I really need to finish my shopping list), there comes a time when we must transition from chaos to order. This transition is where the magic truly happens, as ideas find their place in the grand kitchen of game design.

Before was where the fun began, and here is where the magic can be realised, where we put all or most of the pieces together. The transition where ideas find their place.

Structured Concepts

Exploring how to structure those initial, wild ideas into a coherent game concept. We introduce the concept of order without stifling creativity, a delicate dance of structure and freedom.

Now, it’s all about giving structure to those brilliant, if not slightly mad, brainwaves of mine, yours, ours, without squashing the creative spark of course!

At the time I use what’s called an affinity diagram, this diagram brings ideas together into their natural relationships, things that seem to make sense grouped together.

A type of affinity diagram, categorizing ideas that seem to flow together or relate to each other.

draw.io: My Creative Ally

Throughout these steps, draw.io has been my toolset for this journey, from an untitled file to put all my disjointed ideas like a notepad, to a now-named file called “Tablet of Ur.drawio”. The seas have become calmer now as the game ideas have been taken from chaos to a rough shape.

At this point I have made a very rough outline of the game with timeline of the story and characters – it is rough and incomplete, but I can see that there is something there taking shape.

Refined the core story, added basic ideas to characters, gameplay, aesthetics and events in the form of a timeline.

Andy Outro

Once you have started to organise your ideas into a cohesive brainstorm, it’s time to focus on who will star in this story.

Join me in my next blogpost where I delve into the realm of character development, and show you how to craft unforgettable characters who will be carefully woven into your story.

draw.io Outro

We’ll be following Andy’s story in the following weeks, covering the following topics:

1. From Chaos to Clarity: Conceptualizing Your Short Game
2. Crafting Memorable Characters: From Chaos to Clarity
3. Refining Story Plots and Mechanics for Your Short Game
4. Game Design’s Chaos Compass: draw.io

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.

Upside down, round and round…

When you’re a seasoned member of staff sauntering (or more likely speed-walking) through the endless corridors and departments, and hopping between floors, it’s easy to forget where you once started: trying to find a particular ward, or the right floor – hospitals are a complex maze when you’re just starting out.

Knowing whom to go to for what is an equal challenge, as hospitals have a myriad of staff with individual and overlapping responsibilities.

However, a well-designed floor plan, paired with an extensive org chart, will save your new staff a lot of time (and pain) of arriving at the wrong place, or bothering the wrong team with information for someone else.

The good news is draw.io can help you design floor plans from the ground up, and org charts from the central teams outward. The key with both is not to deliver all the information in one complex, messy diagram, but rather to start off simple, and then add layers of complexity gradually.

We’ll show you how you can use draw.io features like layers and custom links to give both a brief overview and signpost to the finer details, all within a single diagram.

Floor plans

To get started with your own floor plan, download our XML template here:

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.

This floor plan template uses layers so anyone accessing the diagram can choose to show and hide different layers, depending on the level of detail they would like to view.

For more information on features like clickable actions and custom links for your hospital floor plan, see our blogpost, Interactive diagrams with custom links and actions.

In addition to providing basic information about the physical layout of a hospital, floor plans can also be used to convey important safety information. For example, they might show the location of emergency exits, fire extinguishers, and other safety equipment.

A wide range of floor plan symbols can be found by going to + More Shapes > Other > Floorplans.

Org charts

To get started with your own circular org chart (aka peach diagram), download our XML template here:

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.

An org chart provides a clear overview of a hospital’s hierarchy, showing the relationships between different departments and individuals. This is helpful for understanding who is responsible for what, and who to go to for specific questions or concerns.

With draw.io, you can add metadata to individual shapes, so that if someone hovers over a team name for example, they will see a brief description of what that team does.

Like with our floor plan example, you are able to add custom links, for example to Confluence pages that contain more detailed information on a particular team, its members and their responsibilities.

For more information on how to structure your org chart, see the blogpost, How to build a circular organizational chart in draw.io.

Getting settled in

Your floor plans and org charts will provide new starters with key information in a digestible way, which they can customize to suit their needs in the preview version, i.e. without editing the original version.

This information is a staple in any hospital. It informs new staff of what’s what, helping them feel comfortable and confident to navigate their way as they settle in.

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.

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 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. For all the blogposts in this series, see:

• “Epically” kickstart your project: using draw.io in Jira
• Going retro: facilitating Sprint retrospectives in Confluence and Jira
• Speeding tickets: optimize support in Jira Service Management using flowcharts