Communicate stories with Flows and Tags

What are Flows?

Flow step types

There are 8 step types. Let's break them down.

Introduction

The Introduction step shows all steps in the current flow before showing each step at a time. You can add details to explain what the flow is about as a way to set the scene before moving into each individual step.

Message

The Message step shows a message between 2 objects using an existing connection in the diagram.

Note: Connection direction doesn't matter for flow steps. You can show responses by flipping the direction of the connection just for the step.

Process

Process steps show when a single model object does something.

Use the Process flow step for:

• • Technical processes you don't need the details for (e.g. an external object processes something and returns the result, like "Process fraud check")
• • Business processes (e.g. "Ensure the new user is successfully onboarded")
• • Actor actions that happen outside of your solution (e.g. "Send physical mail" or "Contact Brian from accounting")

Alternate paths

The Alternate paths step allows you to split a flow and show different paths depending on a decision. This shows OR decisions (when A or B or C are true compared to the others), and is useful for True/False decisions.

It's also useful to show multiple options, such as:

• • Authentication methods
• • Payment methods
• • Web app vs Android app vs Apple app

Parallel paths

The Parallel paths step allows you to show multiple steps happening in parallel or synchronously. This shows AND decisions (when A and B and C are true alongside the others).

This is useful to show:

• • Events/message broker with producers and many consumers
• • Sending notifications to multiple systems
• • Any asynchronous process

Go to another flow

The Go to another flow step allows you to link multiple flows together. Use this to send people to another flow in the same or another diagram. This is helpful for high-level flows that have more detail lower down to tell a full story across multiple C4 model levels. When you go to another flow, you get the option to return back to that step during or at the end of the other flow.

Information

The Information steps allow you to show important information that is not tied to any object or connection. Use this to add details to a flow that don't tie into anything in the diagram.

Conclusion

The Conclusion step is to show the flow has ended and shows all steps in the flow. It allows you to add some closing context to the end of the flow.

Creating a Flow

To create a new flow in a diagram:

1. Click on flow dropdown at the top left of the screen
2. Click New flow
3. Edit the flow name by clicking on the pencil icon in the list view

Adding steps to a Flow

To add steps to a flow:

1. Make sure you're in edit mode (The play button will be visible, CMD/CTRL + E)
2. Click the + Step button in your flow
3. The default step is a Message type between 2 objects. Click the Message button to change this.
4. Select the object you want to start the step from
5. Select the object that's connected to your first selected object (the list will only show connected objects to the one you selected in step 2)
6. If there is only 1 connection between those objects, it will be auto selected. If you have more than 1, select the connection you want to use for that step (the list will only show connections between those 2 objects in the current diagram)
7. Add a title to describe what happens in that step. Your title will be added with the step number to the current diagram, highlighting when that step is in focus. (optional)
8. Optional: You can also add more details for this step too — good for longer pieces of text or technical details.

Tip: We recommend labels on connections to convey high-level technical choices (at level 2 and 3) or business relationships (at level 1). Then use Flows to identify how that technical connection is used in realistic scenarios between your users, objects and external Systems or Apps.

Intelligent flow selection

Select an object or connection before adding a step to automatically fill the details of a step. To do this:

1. Make sure you're in edit mode (The play button will be visible, CMD/CTRL + E)
2. Select a connection for a Message step type — the objects, connection and title will be auto-filled.
3. Select the sender object and SHIFT select the receiver object for a Message step type — the objects, connection and title will be auto-filled. This works in either direction of a connection.
4. Select an object for a Process step type — the objects, connection and title will be auto-filled.

Adding paths to a Flow

Paths allow you to communicate more complex logical steps in your flow. There are 3 types of paths in IcePanel: Alternate paths, Parallel paths, and Go to another flow.

Alternate paths

Alternate paths show steps based on a choice or scenario (e.g. success or failure). Think of these as OR scenarios.

To add an Alternate path:

• • Make sure you're in edit mode (The play button will be visible, CMD/CTRL + E)
• • Click the + Step button
• • Change the step type to Alternate path
• • Add a first step by clicking on the + Step in path button nested in the path
• • To add more steps to the path, select a step before and click on the + Step in path button under that step
• • Edit the path name by first clicking on the dropdown menu at the top of the path, then on the pencil icon of the path

To add another path in the alternate path:

• • Click on the dropdown menu at the top of the path
• • Click on the Add path button

The group of paths also has a title, which you can use to explain the decision being made and use each path name to explain the choices. Note: Changing an existing step to a path will add that step to the first path.

Parallel paths

Parallel paths are useful for showing asynchronous steps (e.g. a messaging queue or any scenario with parallelization). Think of these as AND scenarios.

To create a Parallel path:

• • Make sure you're in edit mode (The play button will be visible, CMD/CTRL + E)
• • Click the + Step button
• • Change the step type to Parallel path
• • Add a first step by clicking on the + Step in path button nested in the path
• • To add more steps to the path, select a step before and click on the + Step in path button under that step
• • Edit the path name by first clicking on the dropdown menu at the top of the path, then on the pencil icon of the path

To add another path in the parallel path:

• • Click on the dropdown menu at the top of the path
• • Click on the Add path button

The group of paths also has a title, which you can use to explain the decision being made and use each path name to explain the choices. Note: Changing an existing step to a path will add that step to the first path.

Go to flow

Once you have many flows across different diagrams in your domain, you can connect them to communicate even richer stories.

To add a Go to another flow step:

• • Click the + Step button under the active step
• • Change step type to Go to another flow
• • Click on the Select flow dropdown
• • Select the flow you want to link

Presenting flows

Presenting flows is a powerful way to focus attention on the topic you want to discuss in your system design. IcePanel allows you to navigate chronologically or non-linearly across your flow, depending on what you want to communicate.

Ways to go through a flow:

• • Press play to present the flow (we recommend hiding details until they're needed)
• • Use the Back and Next buttons at the top of the Flow editor
• • Use the back and next arrow keys on the keyboard
• • Click each step in the Flow steps dropdown
• • Click the step on a connection directly in the diagram

Tip: Combining Flows with Tags on IcePanel is a useful way to layer on relevant attributes for a particular use case. For example, if you want to go through a flow while also highlighting specific levels of risk or cost across different objects, you can use IcePanel's pin tag feature. Play around with different tags to facilitate different conversations with stakeholders.

Flows with paths

• • Alternate Paths: The flow will highlight the first path created by default in the diagram. Use the Tab button on the right of the path area to navigate through the different paths.
• • Parallel Paths: The first step of each path will be highlighted by default (e.g. if you have 3 paths, the first step of each is highlighted when you navigate to the path). Afterwards, the flow will navigate through the first path created by default.
• • Go to flow paths: The Next button will change to Go to flow and navigate to that flow by default. You can skip this by clicking the Skip flow button at the bottom of the step.

You can rearrange path orders by clicking on the dropdown menu in the path and using the draggable area on the left of each path.

Visual options

Flows come with a few additional visual customizations when presenting:

• • Click on the … menu item on the right of the Flow editor
• • To show all connection names in the diagram, click the checkbox next to that option (this is turned off by default)
• • To show all steps in the flow, click the checkmark next to that option (by default, flows will only show the descriptions of the previous and next steps). If this is turned on, step titles for each step will appear in your diagram.

Exporting a Flow

IcePanel supports exports in a few formats if you plan on sharing images/PDFs of your diagrams or want to visualize them as sequence diagrams.

Copy flow as text

This will copy your steps chronologically with object names, step types, step title, connection names, and paths. This can be useful to append to an image or PDF of your diagram.

To copy a flow as text:

• • Open the flow you want to copy or the list of flows
• • Click on the … menu item on the right of the flow editor
• • Click on the Copy flow as Text button

Example output:

Introduction: Notes about this flow
- Step 1: User: This happens first
- Step 2: User -> API service: Thing happens via Request PNG or PDF export
- Step 3: API service -> Export topic: Then this happens via Publish export request

Copy flow as code

To export your flow as code to create a sequence diagram:

• • Open the flow you want to copy or the list of flows
• • Click on the … menu item on the right of the Flow editor
• • Click on the Copy flow as PlantUML button
• • Paste the code in a UML tool like PlantUML or WebSequenceDiagrams

Note: At this moment, IcePanel doesn't support sequence diagram imports to flow.

Copy flow as Mermaid

To export your flow as Mermaid to create a sequence diagram:

• • Open the flow you want to copy or the list of flows
• • Click on the … menu item on the right of the Flow editor
• • Click on the Copy flow as Mermaid button
• • Paste the code into Mermaid