---
title: "Visualize the Branching in a Flow"
slug: "visualize-the-branching-in-a-flow"
updated: 2026-10-30T05:09:22Z
published: 2026-10-30T05:09:22Z
canonical: "support.whatfix.com/visualize-the-branching-in-a-flow"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://support.whatfix.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Visualize the Branching in a Flow

Whatfix enables you to visualize a branching in a Flow. The visualization provides a single representation of the complete Flow, including all the branched Flows under the main Flow. Expand the branched Flows to view all the steps that are part of the Flow. Visualization of branching helps you understand all the possible paths that an end user can choose based on different branching rules. Badges on the steps also show which steps are Optional or Automated.

> [!WARNING]
> Note:
> 
> - The Visualize icon appears only when you create a Branched Flow.
> - The Visualization flow chart can be viewed even for the existing Branched Flows.

Use the following steps to view the visualization of the Branching in a Flow:

1. Log in to the application where you want to create content, and then launch the **Whatfix Studio**. ![CLM_editor plug in2](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/CLM_editor%20plug%20in%282%29.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A34%3A08Z&se=2026-11-12T08%3A34%3A08Z&sr=c&sp=r&sig=q5Ge%2By%2BYyYLXppO5xlIxhU%2BhQQV3CtXFOOCxZ%2F2I8n8%3D)
2. Click **Flow**. ![Click Flows ](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_Click_Flows.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A34%3A08Z&se=2026-11-12T08%3A34%3A08Z&sr=c&sp=r&sig=q5Ge%2By%2BYyYLXppO5xlIxhU%2BhQQV3CtXFOOCxZ%2F2I8n8%3D)
3. In the Studio toolbar, select a capture mode. ![std_toolbar_capture_modes](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/std_toolbar_capture_modes.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A34%3A08Z&se=2026-11-12T08%3A34%3A08Z&sr=c&sp=r&sig=q5Ge%2By%2BYyYLXppO5xlIxhU%2BhQQV3CtXFOOCxZ%2F2I8n8%3D)

          Note:

          

- **Free floating step** is currently Beta. Contact [support@whatfix.com](http://mailto:support@whatfix.com?subject=Enable%20Free-floating%20Flow%20step%20&body=Hi%0A%0AI%20would%20like%20to%20explore%20the%20new%20Free-floating%20Flow%20step%20type.%20Kindly%20enable%20it%20on%20my%20ENT%0A%0AThanks) for more information.
- For more information on different capture modes, see [Quick Capture Modes](https://support.whatfix.com/docs/what-are-quick-capture-flows#quick-capture-modes).

1. Click the desired elements on the application page. ![Create_Flow_Leads_Click](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Create_Flow_Leads_Click.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A34%3A08Z&se=2026-11-12T08%3A34%3A08Z&sr=c&sp=r&sig=q5Ge%2By%2BYyYLXppO5xlIxhU%2BhQQV3CtXFOOCxZ%2F2I8n8%3D)
2. After you have captured the required steps, click **Done**. ![std_toolbar_done1](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/std_toolbar_done%281%29.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A34%3A08Z&se=2026-11-12T08%3A34%3A08Z&sr=c&sp=r&sig=q5Ge%2By%2BYyYLXppO5xlIxhU%2BhQQV3CtXFOOCxZ%2F2I8n8%3D)
3. Enter the name of the Flow. ![Editor_flow_name6](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Editor_flow_name%286%29.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A34%3A08Z&se=2026-11-12T08%3A34%3A08Z&sr=c&sp=r&sig=q5Ge%2By%2BYyYLXppO5xlIxhU%2BhQQV3CtXFOOCxZ%2F2I8n8%3D)

          Info:

          

- Whatfix enables you to add a Display Name for your end users. Use the Content Name for internal tracking, such as region, role, module, or release codes. Users then see the Display Name in the Self Help, Task List widgets, Hub, Flow Automation Popups and Exports. For more information, see [Add a Display Name to Whatfix Content](https://support.whatfix.com/docs/add-a-dislay-name-to-whatfix-content). ![The image shows the Flow name and the Display Name field while creating a flow on the Studio.](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/FlowDisplayName.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A34%3A08Z&se=2026-11-12T08%3A34%3A08Z&sr=c&sp=r&sig=q5Ge%2By%2BYyYLXppO5xlIxhU%2BhQQV3CtXFOOCxZ%2F2I8n8%3D)
- To capture additional steps, click **Add Step**. ![Click Add Step](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Click%20Add%20Step.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A34%3A08Z&se=2026-11-12T08%3A34%3A08Z&sr=c&sp=r&sig=q5Ge%2By%2BYyYLXppO5xlIxhU%2BhQQV3CtXFOOCxZ%2F2I8n8%3D)

1. After element selection, under the **Configurations** tab, scroll down to the **Step Completion Rules** section and choose the **Manual** option. ![Studio_configurations](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image%28371%29.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A34%3A08Z&se=2026-11-12T08%3A34%3A08Z&sr=c&sp=r&sig=q5Ge%2By%2BYyYLXppO5xlIxhU%2BhQQV3CtXFOOCxZ%2F2I8n8%3D)
2. Select **On click of selected element** as the step completion rule. ![Editor_flow_on_selected_element](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Editor_flow_on_selected_element.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A34%3A08Z&se=2026-11-12T08%3A34%3A08Z&sr=c&sp=r&sig=q5Ge%2By%2BYyYLXppO5xlIxhU%2BhQQV3CtXFOOCxZ%2F2I8n8%3D)
3. Click **Save Step**. ![Studio_clicksavestep](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image%28372%29.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A34%3A08Z&se=2026-11-12T08%3A34%3A08Z&sr=c&sp=r&sig=q5Ge%2By%2BYyYLXppO5xlIxhU%2BhQQV3CtXFOOCxZ%2F2I8n8%3D)
4. Hover your cursor over the step you want to create a branch and then click the branching icon. ![clm_branching icon](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_branching%20icon.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A34%3A08Z&se=2026-11-12T08%3A34%3A08Z&sr=c&sp=r&sig=q5Ge%2By%2BYyYLXppO5xlIxhU%2BhQQV3CtXFOOCxZ%2F2I8n8%3D)

Use either of the two ways to visualize branching in a Flow:

**Create new Flow**

Use the following steps to create a new Flow:

1. Once you click the **Branch** icon, click **Create new Flow**. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Click_Create_new_Flow.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A34%3A08Z&se=2026-11-12T08%3A34%3A08Z&sr=c&sp=r&sig=q5Ge%2By%2BYyYLXppO5xlIxhU%2BhQQV3CtXFOOCxZ%2F2I8n8%3D)
2. On the **Set Rules** page, set the following conditions:
  1. **Where does the Branch appear?**
  2. **When does the Branch start appearing?**
  3. **Who does the Branch appear to?** ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/flowbranchingnewsetrules.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A34%3A08Z&se=2026-11-12T08%3A34%3A08Z&sr=c&sp=r&sig=q5Ge%2By%2BYyYLXppO5xlIxhU%2BhQQV3CtXFOOCxZ%2F2I8n8%3D)
3. Click **Next**. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_Click_next.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A34%3A08Z&se=2026-11-12T08%3A34%3A08Z&sr=c&sp=r&sig=q5Ge%2By%2BYyYLXppO5xlIxhU%2BhQQV3CtXFOOCxZ%2F2I8n8%3D)
4. On the **Add Details** page, enter the **Flow Name** and **Description**. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/AddDetails_flowbranchnew.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A34%3A08Z&se=2026-11-12T08%3A34%3A08Z&sr=c&sp=r&sig=q5Ge%2By%2BYyYLXppO5xlIxhU%2BhQQV3CtXFOOCxZ%2F2I8n8%3D)

> [!WARNING]
> Note:
> 
> The Description text is solely for your (Content author's) reference and is not visible to your end users.
> 
> The maximum character limit for Branch description is 100 characters.
5. Click **Next**. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_Click_next.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A34%3A08Z&se=2026-11-12T08%3A34%3A08Z&sr=c&sp=r&sig=q5Ge%2By%2BYyYLXppO5xlIxhU%2BhQQV3CtXFOOCxZ%2F2I8n8%3D)
6. Click **Add Step**. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Addsteps_branchingflow(1).png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A34%3A08Z&se=2026-11-12T08%3A34%3A08Z&sr=c&sp=r&sig=q5Ge%2By%2BYyYLXppO5xlIxhU%2BhQQV3CtXFOOCxZ%2F2I8n8%3D)
7. Click the desired element on the page that the user needs to select.
8. Review or edit the auto-generated action text on the step. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/editflowstep_flowbranching.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A34%3A08Z&se=2026-11-12T08%3A34%3A08Z&sr=c&sp=r&sig=q5Ge%2By%2BYyYLXppO5xlIxhU%2BhQQV3CtXFOOCxZ%2F2I8n8%3D)
9. Under **Configurations**, expand **Appearance**. ![Change the appearance of the Flow steps](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_Flows_Configurations_Appearance.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A34%3A08Z&se=2026-11-12T08%3A34%3A08Z&sr=c&sp=r&sig=q5Ge%2By%2BYyYLXppO5xlIxhU%2BhQQV3CtXFOOCxZ%2F2I8n8%3D)
10. Change the following configurations:

a. Select a Tool tip appearance from the available options.

b. Select the tip **Color** from the existing color picker or enter the hex code of the desired color.

c. Select the **Close (X) color** from the existing color picker or enter the hex code of the desired color. ![Choose_Flow_Theme.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Choose_Flow_Theme.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A34%3A08Z&se=2026-11-12T08%3A34%3A08Z&sr=c&sp=r&sig=q5Ge%2By%2BYyYLXppO5xlIxhU%2BhQQV3CtXFOOCxZ%2F2I8n8%3D)
11. Expand **Position** and select the desired position of the tooltip. ![Choose_Position_Flow.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Choose_Position_Flow.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A34%3A08Z&se=2026-11-12T08%3A34%3A08Z&sr=c&sp=r&sig=q5Ge%2By%2BYyYLXppO5xlIxhU%2BhQQV3CtXFOOCxZ%2F2I8n8%3D)
12. Under the **Step Completion Rules** section, select the desired rule. For more information on the Step Completion Rules, see [Define step completion rules](/studio/docs/defining-step-completion-rules) ![Define_step_completion rules.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Define_step_completion%20rules.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A34%3A08Z&se=2026-11-12T08%3A34%3A08Z&sr=c&sp=r&sig=q5Ge%2By%2BYyYLXppO5xlIxhU%2BhQQV3CtXFOOCxZ%2F2I8n8%3D)
13. Click **Save Step**. ![Click_Save_step.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Click_Save_step.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A34%3A08Z&se=2026-11-12T08%3A34%3A08Z&sr=c&sp=r&sig=q5Ge%2By%2BYyYLXppO5xlIxhU%2BhQQV3CtXFOOCxZ%2F2I8n8%3D)
14. Go to where you want to start the next step and then click **Add Step** on the Studio. ![Click Add Step.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Click%20Add%20Step.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A34%3A08Z&se=2026-11-12T08%3A34%3A08Z&sr=c&sp=r&sig=q5Ge%2By%2BYyYLXppO5xlIxhU%2BhQQV3CtXFOOCxZ%2F2I8n8%3D)
15. Repeat steps 6 to 13 to add additional steps.
16. After saving all steps, click **Confirm**. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/confirmstep_Branchingflow.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A34%3A08Z&se=2026-11-12T08%3A34%3A08Z&sr=c&sp=r&sig=q5Ge%2By%2BYyYLXppO5xlIxhU%2BhQQV3CtXFOOCxZ%2F2I8n8%3D)

> [!NOTE]
> Info:
> 
> Once you create a Branch Flow, toggle the **Show Slides** button to see the Flow Slides and Branch Map. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/toggleslides_BranchFlow.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A34%3A08Z&se=2026-11-12T08%3A34%3A08Z&sr=c&sp=r&sig=q5Ge%2By%2BYyYLXppO5xlIxhU%2BhQQV3CtXFOOCxZ%2F2I8n8%3D)
> 
> Click on Branch Map to see the Flow in a flowchart. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/seebranchMap.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A34%3A08Z&se=2026-11-12T08%3A34%3A08Z&sr=c&sp=r&sig=q5Ge%2By%2BYyYLXppO5xlIxhU%2BhQQV3CtXFOOCxZ%2F2I8n8%3D) A flowchart that displays a single-view representation of how the entire Flow appears. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_Visualization(1).png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A34%3A08Z&se=2026-11-12T08%3A34%3A08Z&sr=c&sp=r&sig=q5Ge%2By%2BYyYLXppO5xlIxhU%2BhQQV3CtXFOOCxZ%2F2I8n8%3D)

View the following details in the visualization chart:

- The main Flow and its steps
- The branched Flows and their steps
- Branching conditions for the branched Flows
- The Optional or Automated badge below the preview text of each step
- A map view of the visualization flow chart ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/branchingExample.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A34%3A08Z&se=2026-11-12T08%3A34%3A08Z&sr=c&sp=r&sig=q5Ge%2By%2BYyYLXppO5xlIxhU%2BhQQV3CtXFOOCxZ%2F2I8n8%3D)

> [!NOTE]
> Info:
> 
> A map view gives you an idea of the view port area. It is a rough sketch of the Visualization flow chart. ![branching](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/branching.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A34%3A08Z&se=2026-11-12T08%3A34%3A08Z&sr=c&sp=r&sig=q5Ge%2By%2BYyYLXppO5xlIxhU%2BhQQV3CtXFOOCxZ%2F2I8n8%3D)

1. Once the branches are created, click Save Flow. ![clm_branching_save flow](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_branching_save%20flow.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A34%3A08Z&se=2026-11-12T08%3A34%3A08Z&sr=c&sp=r&sig=q5Ge%2By%2BYyYLXppO5xlIxhU%2BhQQV3CtXFOOCxZ%2F2I8n8%3D)

**Add existing Flow**

Use the following steps to add a branch by adding an existing Flow:

1. Once you click the **Branch** icon, click **Add existing Flow**.

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/click_branch.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A34%3A08Z&se=2026-11-12T08%3A34%3A08Z&sr=c&sp=r&sig=q5Ge%2By%2BYyYLXppO5xlIxhU%2BhQQV3CtXFOOCxZ%2F2I8n8%3D)
2. On the **Set Rules** page, set the following conditions: **a.** **Where does the Branch appear?**

**b. When does the Branch start appearing?**

**c. Who does the Branch appear to?** ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/importExistingFlow_branchingFlow.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A34%3A08Z&se=2026-11-12T08%3A34%3A08Z&sr=c&sp=r&sig=q5Ge%2By%2BYyYLXppO5xlIxhU%2BhQQV3CtXFOOCxZ%2F2I8n8%3D)
3. Click **Next**. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/AVR_Click)next(1).png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A34%3A08Z&se=2026-11-12T08%3A34%3A08Z&sr=c&sp=r&sig=q5Ge%2By%2BYyYLXppO5xlIxhU%2BhQQV3CtXFOOCxZ%2F2I8n8%3D)
4. On the **Select Flow** page, select the **Flow** you want to import. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/selectexistingFlow_branchingFlow.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A34%3A08Z&se=2026-11-12T08%3A34%3A08Z&sr=c&sp=r&sig=q5Ge%2By%2BYyYLXppO5xlIxhU%2BhQQV3CtXFOOCxZ%2F2I8n8%3D)
5. Click **Next**. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/AVR_Click)next(1).png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A34%3A08Z&se=2026-11-12T08%3A34%3A08Z&sr=c&sp=r&sig=q5Ge%2By%2BYyYLXppO5xlIxhU%2BhQQV3CtXFOOCxZ%2F2I8n8%3D)
6. On the **Select Steps** page, select the Flow steps: ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/selectSteps_branchingFlow.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A34%3A08Z&se=2026-11-12T08%3A34%3A08Z&sr=c&sp=r&sig=q5Ge%2By%2BYyYLXppO5xlIxhU%2BhQQV3CtXFOOCxZ%2F2I8n8%3D)
7. After selecting the steps, click **Save**. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/saveFlow_branchingFlow.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A34%3A08Z&se=2026-11-12T08%3A34%3A08Z&sr=c&sp=r&sig=q5Ge%2By%2BYyYLXppO5xlIxhU%2BhQQV3CtXFOOCxZ%2F2I8n8%3D)

> [!NOTE]
> Info:
> 
> Once you add a Branch Flow, toggle the **Show Slides** button to see the Flow Slides and Branch Map. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/toggleslides_BranchFlow.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A34%3A08Z&se=2026-11-12T08%3A34%3A08Z&sr=c&sp=r&sig=q5Ge%2By%2BYyYLXppO5xlIxhU%2BhQQV3CtXFOOCxZ%2F2I8n8%3D)
> 
> Click on Branch Map to see the Flow in a flowchart. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/seebranchMap.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A34%3A08Z&se=2026-11-12T08%3A34%3A08Z&sr=c&sp=r&sig=q5Ge%2By%2BYyYLXppO5xlIxhU%2BhQQV3CtXFOOCxZ%2F2I8n8%3D) A flowchart that displays a single-view representation of how the entire Flow appears. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_Visualization(1).png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A34%3A08Z&se=2026-11-12T08%3A34%3A08Z&sr=c&sp=r&sig=q5Ge%2By%2BYyYLXppO5xlIxhU%2BhQQV3CtXFOOCxZ%2F2I8n8%3D)

View the following details in the visualization chart:

- The main Flow and its steps
- The branched Flows and their steps
- The Optional or Automated badge below the preview text of each step
- A map view of the visualization flow chart ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/branchingExample.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A34%3A08Z&se=2026-11-12T08%3A34%3A08Z&sr=c&sp=r&sig=q5Ge%2By%2BYyYLXppO5xlIxhU%2BhQQV3CtXFOOCxZ%2F2I8n8%3D)

> [!NOTE]
> A map view gives you an idea of the viewport area. It is a rough sketch of the Visualization flow chart. ![branching](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/branching.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A34%3A08Z&se=2026-11-12T08%3A34%3A08Z&sr=c&sp=r&sig=q5Ge%2By%2BYyYLXppO5xlIxhU%2BhQQV3CtXFOOCxZ%2F2I8n8%3D)

1. Click **Save Flow**. ![clm_branching_save flow](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_branching_save%20flow.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A34%3A08Z&se=2026-11-12T08%3A34%3A08Z&sr=c&sp=r&sig=q5Ge%2By%2BYyYLXppO5xlIxhU%2BhQQV3CtXFOOCxZ%2F2I8n8%3D)

## Step Badges

The visualization chart shows a badge below the preview text of each Optional or Automated step. Use the badges to identify how a step behaves without opening the step.

Following are the Badges that appear on steps in the main Flow and in the branched Flows:

- **Optional:** The step is skipped if its page, element, or condition does not appear for the end user. For more information, see [Define a step as optional](/studio/docs/defining-a-step-as-optional).
- **Automated:** Whatfix performs the step for the end user. For more information, see [Flow Automation](/studio/docs/flow-automation).

Steps that are neither Optional nor Automated do not show a badge.

---

> [!WARNING]
> Note:
> 
> Branching Rules are now available as **New Visibility Rules** in Studio.

With New Visibility Rules for Branching on Studio, you can define exactly where, when, and for whom a Branch Flow appears. These rules apply only to the specific step they're configured on, making it easier to create more personalized and dynamic experiences. For more information, see [New Visibility Rules for Branching in Flows](/studio/docs/advanced-visibility-rules-for-branching-in-flows).