Flows

What are Flows?

Your systems architecture doesn't live in a static world, without interactions and data flows, so neither should your diagrams have to. With IcePanel Flows, you can show and explain the sequence of messages that run through your systems by each use case and focus on the objects and connections used. Flows can be adapted to show a range of interactions, from business use cases (how does our e-commerce system support a purchase?) to technical processes in your system (how do we authenticate users?).

This step-by-step approach will show you how to create and present different flows over the same diagrams seamlessly.

Creating a Flow

You can create up to 3 Flows on the Free plan, and unlimited on Growth and Isolation plans.

To create a new flow in a diagram:

1. Click on the New flow button on the bottom left of the screen

   • If you have already created flows, click on the existing flow and New flow button at the bottom of the list

2. Edit the flow name by clicking on the label or the pencil icon in the list view

Creating a flow

Adding steps to a Flow

To add steps to a flow:

1. Click the Add step button in your flow

2. Select the object you want to start the step from

3. Select the step type — ➡️ Outgoing (default), ↩️ Reply for message direction OR 🔄 Self Action (skip to step 6)

4. 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)

5. Select the connection that connects the 2 objects (the list will only show connections between those 2 objects in the current diagram)

6. Describe what happens in that step. Your description will be added with the step number to the current diagram, highlighting when that step is in focus. (optional)

Tip: We recommend you label your connections with the technical choice and use Flows to identify how that technical connection is used in realistic scenarios between your users, objects and external Systems or Apps.

Adding a step to a flow

Intelligent flow selection

If you have an object or connection selected and there's only 1 receiving object connected to, the steps will auto-fill the receiver and connection.

To do this:

1. Create a flow or go to an existing one

2. Select an object you wish to start the step from in the diagram

3. Click the Add step button in the Flows editor

This will select the receiver and connection, speeding up your flow design process.

Selecting an object and adding a step

Reordering steps

There are 2 ways to reorder steps in a flow:

1. Click on the up or down chevrons above or below the step number

OR

1. Enter a number in the number field of the step

2. Press enter to re-order

2 ways to reorder steps in a flow

Duplicating a step

To duplicate a step:

1. Select or hover on the step you want to duplicate

2. Click the … menu item on the bottom right of the step

3. Click Duplicate step

Deleting steps

To delete a step:

1. Select or hover on the step you want to delete

2. Click the … menu item on the bottom right of the step

3. Click Delete step

Adding paths to a Flow

Paths are only available on Growth and Isolation plans.

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

Parallel paths

Parallel paths are useful for showing asynchronous steps, for example, a messaging queue or any scenario with parallelization. Think of these as AND scenarios.

To create a Parallel path:

1. Click the Add path button at the bottom of the Flow editor

2. Select Parallel path

3. Add a first step by clicking on the Add step button nested in the path

4. To add more steps to the path, hover or select the step and click on the + icon on the bottom right of the step. Then click Add step

5. You can edit the path name by first clicking on the dropdown menu at the top of the path, then on the pencil icon

To add another path in the parallel path:

1. Click on the dropdown menu at the top of the path

2. Click on the Add path button

Creating a parallel path

Alternate paths

Alternate paths show steps based on a choice or scenario. For example, you may want to show different paths for a success or failure scenario. Think of these as OR scenarios.

To add an Alternate path:

1. Click the Add path button at the bottom of the Flow editor

2. Select Alternate path

3. Add a first step by clicking on the Add step button nested in the path

4. To add more steps to the path, hover or select the step and click on the + icon on the bottom right of the step. Then click Add step

5. You can edit the path name by first clicking on the dropdown menu at the top of the path, then on the pencil icon

Creating an alternate 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 flow:

1. Click the Add path button at the bottom of the Flow editor

2. Select Go to flow

3. Click on the Select flow dropdown

4. Select the flow you want to link

Duplicating a path

1. Click on the dropdown menu in the path

2. Click on the … menu item on the right of the path you want to duplicate

3. Click on the Duplicate path button

Deleting paths

To delete a single path:

1. Click on the dropdown menu in the path

2. Click on the … menu item on the right of the path you want to duplicate

3. Click on the Delete path button

To delete an entire path:

1. Click on the dropdown menu in the path

2. Click the Delete all paths button

3. Click on the Delete button to confirm

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.

There are a few ways to go through a flow:

• Use the Back and Next buttons at the top of the Flow editor

• Use the left (back) and right (next) arrow keys

• Click each step in the Flow editor

• Click the step on a connection 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.

Presenting a flow with pinned tags

Flows with paths

Here are a few things to keep in mind when you present flows with paths:

• For Alternate Paths, the flow will highlight the first path created by default in the diagram. Use the ⇥ button on the right of the path area to navigate through the different paths

• For Parallel Paths, the first step of each path will be highlighted by default. For example, if you have 3 different paths in a parallel path, the first step of each will be highlighted when you navigate to the path. Afterwards, the flow will navigate through the first path created by default

• For Go to flow paths, click the ⇥ button to navigate to the flow. By default, the flow will proceed to the next step or path in the original flow

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 also come with a few additional visual customizations when presenting:

1. First, click on the … menu item on the right of the Flow editor

2. To show all connection names in the diagram, click on the toggle (this is turned off by default)

3. To show all steps in the flow, click on the toggle (by default, flows will only show the descriptions of the previous and next steps). If this is turned on, descriptions for each step will appear in your diagram

Adjusting visual settings for Flows

Duplicate a Flow

To duplicate a flow:

1. Open the flow you want to duplicate or the list of flows

2. Click on the … menu item on the right of the Flow editor

3. Click on the Duplicate flow button

Deleting a Flow

To delete a flow:

1. Open the flow you want to delete or the list of flows

2. Click on the … menu item on the right of the Flow editor

3. Click on the Delete flow button

4. Click on the Delete button to confirm

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, descriptions, connection names, and paths. This can be useful to append to an image or PDF of your diagram.

To copy a flow as text:

1. Open the flow you want to copy or the list of flows

2. Click on the … menu item on the right of the flow editor

3. Click on the Copy flow as text button

Copy flow as code

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

1. Open the flow you want to copy or the list of flows

2. Click on the … menu item on the right of the Flow editor

3. Click on the Copy flow as code button

4. Paste the code in a UML tool like PlantUML or WebSequenceDiagrams

At this moment, IcePanel doesn’t support sequence diagram imports to flow

Exporting a flow to a sequence diagram