Flows
Last updated
Was this helpful?
Last updated
Was this helpful?
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.
There are 8 step types:
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.
The Message
step shows a message between 2 objects using an existing connection in the diagram.
Connection direction doesn't matter for flow steps. You can show responses by flipping the direction of the connection just for the step.
The Process
steps show when a single model object does something.
Use the Process flow step for:
Technical process you don't need the details for such as when an external object processes something for you and just returns the result such as "Process fraud check"
Business processes such as "Ensure the new user is successfully onboarded"
Actor actions that happen outside of your solution, such as "Send physical mail" or "Contact Brian from accounting".
The Alternate paths
step allows you to split a flow and show different paths depending on a decision. This is to show OR
decisions, when A or B or C ... are true compared to the others.
This is useful to show 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
etc.
The Parallel paths
step allows you to show multiple steps happening in parallel or synchronously. This is to show AND
decisions, when A and B and C ... are true alongside the others.
This is useful to show:
Events/message broker with Producers with many consumers.
Sending notifications to multiple systems
Any asynchronous process
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 to have 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.
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.
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.
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:
Click on flow dropdown at the top left of the screen
Click New flow
Edit the flow name by clicking on the pencil icon in the list view
To add steps to a flow:
Make sure you're in edit mode (The play button will be visible, CMD/CTRL
+ E
)
Click the + Step
button in your flow
The default step is a Message type between 2 objects. Click the Message button to change this.
Select the object you want to start the step from
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)
If there is only 1 connection between those objects, it will be auto selected. If you 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)
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)
Optional - You can also add more details for this step too - good for longer pieces of text of technical details.
Tip: We recommend labels on connections to convey high-level technical choices (at level 2 & 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.
Select an object or connection before adding a step to automatically fill the details of a step.
To do this:
Make sure you're in edit mode (The play button will be visible, CMD/CTRL
+ E
)
Select a connection for a Message
step type will be added with the objects, connection and title auto-filled.
Select the sender object and SHIFT
select the receiever object for a Message
step type will be added with the objects, connection and title auto-filled. This works in either direction of a conection.
Select an object for a Process
step type will be added with the objects, connection and title auto-filled.
You can reorder by dragging the grip icon by the number of the step card.
Make sure you're in the edit mode (The play button will be visible, CMD/CTRL
+ E
)
Click and drag the grip handle to the left of a step card to the desired location.
A blue line will appear where the step will be placed when you let go.
To place in a path, drop on the path itself. The path will turn grey, indicating you're hovering on the right place.
To duplicate a step:
Make sure you're in the edit mode (The play button will be visible, CMD/CTRL
+ E
)
Hover on the step you want to duplicate
Click the …
menu item on the top right of the step
Click Duplicate step
To delete a step:
Make sure you're in the edit mode (The play button will be visible)
Hover on the step you want to delete
Click the …
menu item on the top right of the step
Click Delete step
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 — Alternate paths, Parallel paths, and Go to another flow.
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:
Make sure you're in the 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.
You can 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 names to explain the choices.
Changing an existing step to a path will add that step to the first path.
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:
Make sure you're in the 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.
You can 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 names to explain the choices.
Changing an existing step to a path will add that step to the first path.
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
Click on the paths dropdown
Click on the …
menu item on the right of the path you want to duplicate
Click on the Duplicate path
button
To delete a single path:
Click on the paths dropdown
Click on the …
menu item on the right of the path you want to duplicate
To delete all paths:
Click on the …
menu at the top of the paths
Click the Delete
button
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:
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 ⬅️ or ⬆️ (back) and ➡️ or ⬇️ (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.
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, 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.
Flows also come with a few additional visual customizations when presenting:
First, 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
To duplicate a flow:
Open the flow you want to duplicate or the list of flows in the dropdown
Click on the …
menu item on the right of the Flow editor
Click on the Duplicate flow
button
To delete a flow:
Open the flow you want to delete or the list of flows in the dropdown
Click on the …
menu item on the right of the Flow editor
Click on the Delete flow
button
Click on the Delete
button to confirm
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.
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:
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 code
button
Paste the code in a UML tool like PlantUML or WebSequenceDiagrams
At this moment, IcePanel doesn’t support sequence diagram imports to flow