How to make an easy to read flowchart
By: Janna Cameron
Tags: Flowchart, Vui Design, Design, UX Design

How to make an easy to read flowchart

A guide for VUI designers

When you design a VUI, you will undoubtedly draw a flowchart or two. The examples available make this seem oh-so-straightforward. Just draw a couple of boxes, a decision or two, and you’re done.

The reality is much less serene. Flow charts can quickly go haywire.

Problem #1: They can sprawl in lots of directions

If your flowchart looks like the roots of a plant in a pot that’s too small, you have a problem. A sprawling flow chart is hard to follow, and can lead to inconsistencies. Flow charts like the one below are the reason people hate flow charts.

How are people going to figure out how to make toast with such a messy chart?

Problem #2: They can have hard to follow loops

It can get pretty confusing to follow a loop that extends past the current view. The cleaned-up toast flow is easier to follow, except for the mega “enough for everyone” loop.

A cleaner chart for toast-making. The loop to the right is ridiculous.

Problem #3: They can require screen-sharing to discuss

Are you literally opening up your chart and pointing to boxes to discuss your flow? What language would you use to talk about the toast flow above? Likely you would either talk about the name of decisions or individual boxes. There aren’t any obvious sections.

If this has happened to you, consider borrowing some ideas from Drakon, an extension to traditional flowchart language.

What is Drakon?

Drakon was designed as part of the Russian Space Program to make algorithms more comprehensible. Woo! Space!

What makes Drakon generally useful is its custom patterns and layout rules.

To give you a taste for how a Drakon chart compares to a traditional flow chart, consider a Drakon-ish version of the steps to make toast.

A Drakon-chart for the toast-making process.

Isn’t Drakon orderly?

Building a Drakon chart

Basic building blocks

Drakon is easy to understand because it doesn’t reinvent the wheel. It uses many familiar flowchart symbols.

Start/ End

Action

For voice assistants, you can punch things up a bit by making a custom style for dialogue.

Question

Oh wow. I’ve always wanted this Alexa skill.

Subroutines

Drakon calls this insertion. It’s basically a repeating pattern. These are great for modular parts of flows like custom fallbacks. To make your subroutine documents easy to reference, consider numbering your subroutine blocks.

Drakon-specific visual vocabulary

Drakon charts are easier to interpret and discuss than typical flowcharts thanks to custom symbols and patterns, like Silhouette.

Silhouette

The silhouette pattern provides a way to display a flow compactly and label individual parts.

The silhouette pattern uses two Drakon-specific symbols: headline and address.

Headline

Each silhouette part starts with a headline symbol containing its name. This is super-handy for when discussing a chart. You can quickly direct attention to a section: “What I really want to work through today is the ‘cook until done’ part.”

Address

Each part ends with an “address” symbol that names where to go next. The address and headline can be colour coded to improve readability.

You can also use a smaller address symbol to indicate a certain next step is less common.

A “mini-address”

Here’s an example of silhouette applied to making toast.

The colour-coding helps people know what section to jump to next.

The flow is broken into “prepare bread”, “cook until done”, “add fixings” and “done cooking”. The “add fixings” path has two potential endings. One is “done cooking”. The other is to “prepare bread”, because, inevitably, when you start making toast, someone else is going to want a slice.

Shelf

Another interesting pattern is the shelf. A shelf is a special case of the action symbol. It has two compartments. The top compartment is used to define a sender and/or a target. The bottom is to define the action.

A shelf is useful for identifying system-defined dialogue. For example, a shelf can be used for Google Assistant’s “Place and location” helper.

The top compartment of the shelf contains the name of the helper.

The bottom compartment contains the dialogue associated with this helper.

Choice pattern

The choice pattern is nice for modelling local intents. Here’s the choice applied to a prompt.

The choice pattern introduces two symbols:

Choice

Drakon distinguishes between Questions, which have a Yes/ No answer and choices, which have multiple potential answers. The choice symbol is similar to a traditional flowchart decision symbol.

Case

Where a traditional flowchart would list options above flow lines, Drakon charts list options within case symbols. Case symbols act as sub-headers.

So many options for toast fixings

Layout rules

Beyond the custom patterns, Drakon includes some layout rules that bring needed order to flow-chart drawing.

Here are some notable rules:

There is one start, there is one end. The happy path is the most direct path. Go down first; send branches to the right. This matches people’s natural reading order. Put any loops as the final options.

Notice the easiest path (orange line added for emphasis) is on the left. The fallback is on the right.

3. Avoid arrowheads. These add visual clutter, and are only required for loops. For the fixings choice, the only arrow in the chart comes from the fallback.

Notice that most paths don’t have arrowheads.

4. Align related actions. This is called “Common fate”. You can help people see that actions on different paths are related through alignment. In the example below, the various methods of adding fixings to the bread are aligned to show their relatedness.

The 3 “fixings” application steps are aligned.

5. Fit diagrams to a single screen. This is easier to do with the silhouette pattern.

6. Don’t cross paths.

You’re not going to capture every detail

While Drakon elegantly handles a lot of things, you’re not going to capture all of the details of VUI design. Be prepared to document a number of things outside your charts, such as invocation phrases, training phrases/ sample utterances and custom slots.

Some parting tips

These examples might break some Drakon rules. If you’re interested in learning more about “pure” Drakon, here’s some good references used in the making of this post.