--- title: "Visualize the Branching in a Flow" slug: "visualize-the-branching-in-a-flow" updated: 2026-04-17T13:16:20Z published: 2026-04-17T13:16:20Z --- > ## 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. 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) 2. Click **Flow**. ![Click_Flow_Studio.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Click_Flow_Studio%281%29.png) 1. Enter the name of the Flow as you want it displayed to the users. ![Studio_Flowname](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image%28374%29.png) 2. Click **+ Add Step**. ![Studio_addstep](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image%28370%29.png) 3. Click the desired element on the page that the user needs to select. Note: - With the Flow enhancement feature, you have the option to select two types of Flow steps, and not just element latching Flows. A dialog box appears on the application to highlight the two types of Flows. Under **Choose step type**, select a Flow step based on your requirements: either **Attached to element** or **Free-floating**. ![Studio switcher enables you to switch between 2 flow types: element-attached flow types and free-floating flow types](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_Switcher_Flow_Types.png) | Attached to element | Free-floating | | --- | --- | | When you select this type of Flow step, it remains attached to an element on your application. | When you select this type of Flow step, it remains flexibly positioned devoid of any element attachment. | - For more information, see [Free-floating Flows](/studio/docs/free-floating-flows) and [Create a Free-floating Flow step](/studio/docs/create-free-floating-flows). - Free-floating Flows 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. 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) 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) 3. Click **Save Step**. ![Studio_clicksavestep](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image%28372%29.png) 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) Use either of the two ways to visualize branching in a Flow: Create new Flow Use the following steps to create a Branch Flow: 1. Once you click the branch icon, click **Create new Flow**. ![Click Create new Flow for branching in Flows ](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_Branching_CreateFlow.png) 2. Under **Set Rules**, define the branching rules. For more information, see [Visibility Rules for Flow steps on Studio](/studio/docs/advanced-visibility-rules-for-flow-steps). ![Set branching rules for Flows on Whatfix Studio](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_branching_SetRules.png) 3. To define the conditions for branching, click **Add Rule** and then add a rule. ![Studio_branchingrule](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/2024-10-18_14-02-18.png) 4. Go to the **Steps** tab, and then click **Add Step**. ![clm_branching_branched flow_add step](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_branching_branched%20flow_add%20step.png) 5. Click the desired element on the page that the user needs to select. 6. Review or edit the auto-generated action text on the step. ![clm_branching_edit the tip](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_branching_edit%20the%20tip.png) 7. Under **CONFIGURATIONS**, expand **Appearance**. ![Studio_configureflow](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_configureflow.png) Make the following configurations: - Select a Tool tip appearance from the available options. - Select the tip **Color** from the existing color picker or enter the hex code of the desired color. - 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) 1. 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) 2. Scroll down to the **Step Completion Rules** section and set the step completion rule. ![clm_branching flow_step completion rule](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_branching%20flow_step%20completion%20rule.png) 3. Go to the **ADVANCED OPTIONS** tab, and then set the Display Rules. ![clm_branching_display rules](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_branching_display%20rules.png) 4. Click **Save Step**. ![clm_branching_save step](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_branching_save%20step.png) 5. To add additional steps, repeat steps 6 to 10. 6. Click **Save Branch**. ![clm_branchong_save branch](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_branchong_save%20branch.png) 7. Once done, click the **Visualize** icon. ![clm_flows_branching_visualize icon](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_flows_branching_visualize%20icon.png) 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 - A map view of the visualization flow chart ![flowchart](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/flowchart.png) your title goes here 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) 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) Add existing Flow Use the following steps to Import an existing Flow: 1. Once you click the Branch icon, click **Import Flow**. ![clm_branching_import flows](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_branching_import%20flows.png) 2. Click **Add Rule** to define the conditions for branching. ![clm_branching_import flow](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_branching_import%20flow.png) 3. Click **Attach flow** to select and attach the Flow you want to branch to. ![Studio_attachflow](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image%28375%29.png) 4. Select the step number you want the Flow to jump to, and then click **Attach**. ![clm_branching_add steps](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_branching_add%20steps.png) 5. Use the **Add Another Branch** button to add multiple branching conditions as required. ![clm_branching_add another branch](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_branching_add%20another%20branch.png) 6. Click **Save Branch**. ![clm_branchong_save branch](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_branchong_save%20branch.png) 7. Once done, click the **Visualize** icon. ![clm_flows_branching_visualize icon](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_flows_branching_visualize%20icon.png) 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 - A map view of the visualized flow chart ![flowchart](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/flowchart.png) Info: 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) 1. Click **Save Flow**. ![clm_branching_save flow](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_branching_save%20flow.png) --- 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).