> For the complete documentation index, see [llms.txt](https://help.blings.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.blings.io/apps/blings-platform/flow-map.md).

# Flow Map basics

Flow Map controls how viewers move through an MP5 experience. Use it to connect scenes, create lineups, keep the project map readable, and save routing changes to the project draft before publishing.

The Flow Map surface belongs to the Platform project workspace and is also available from Studio. When you select **Flow Map** in Studio, Studio opens the same Platform Flow Map for the project so routing stays in one shared place.

{% tabs %}
{% tab title="Open from Studio" %}

<figure><img src="/files/ILtY99z4xkyhj54lnUiL" alt="Studio Flow Map modal with lineups, scene nodes, conditional routing, Save, and Publish controls"><figcaption></figcaption></figure>

Open the project in Studio, then select **Flow Map** from the project bar. Use the Studio entry point when scene edits, connectors, data bindings, or visual changes need to be checked against the full project flow.
{% endtab %}

{% tab title="Open from Platform" %}

<figure><img src="/files/E1maDQEYmCK0CjmOaoSV" alt="Platform Flow Map with lineups, scene nodes, and conditional branches"><figcaption></figcaption></figure>

Open the project in Platform, then select **Flow Map** from the project navigation. Use the Platform entry point when you are validating lineups, simulating viewer data, preparing delivery, or reviewing a project before publishing.
{% endtab %}
{% endtabs %}

## How the Flow Map Works

Every item on the canvas is a node. Every line between nodes is a connector. The player follows connectors from left to right unless a condition or A/B test sends the viewer to a different branch.

<figure><img src="/files/adHSFFjmlo1aiohSpRgF" alt="Flow Map canvas showing two lineups, connected scene nodes, and a condition node with three branch paths"><figcaption><p>Flow Map canvas with lineups, scenes, condition branches, and publish controls.</p></figcaption></figure>

| Element        | What it does                                                                                                                                                 |
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Lineup         | A named playable flow. A project can have one main lineup and additional lineups for alternate entry points or reusable sequences.                           |
| Scene node     | Represents a scene viewers can watch. The scene can contain text, media, personalization, buttons, and interactive elements.                                 |
| Connector      | Sends the viewer from one node to the next. A regular connector continues the default path. A branch connector follows a named condition or variant outcome. |
| Condition node | Evaluates viewer data or a date rule and sends the viewer to the matching branch. See [Conditions](/apps/blings-platform/flow-map/flow-map-conditions.md).   |
| A/B test node  | Randomly assigns viewers to variants according to the traffic percentages you define. See [A/B tests](/apps/blings-platform/flow-map/flow-map-ab-tests.md).  |
| Canvas layout  | Stores where nodes appear on the canvas. Moving nodes changes readability, not playback logic.                                                               |

<figure><img src="/files/j8VKkksTPtmpKqm1Brlt" alt="A lineup node connected to intro and product reminder scene nodes"><figcaption><p>A lineup starts the path, then connectors send viewers through the scene sequence.</p></figcaption></figure>

{% hint style="info" %}
Disconnected nodes can stay on the canvas as drafts, but viewers do not reach them until they are connected to a lineup path.
{% endhint %}

## Build a Basic Flow

{% stepper %}
{% step %}

### Open Flow Map

Open Flow Map from Platform or from the Studio project bar. The canvas shows the lineups, scenes, connectors, and any branching nodes already configured in the project.
{% endstep %}

{% step %}

### Choose the Starting Lineup

Find the lineup that should start the viewer journey. The main lineup is usually the primary entry point for the project.
{% endstep %}

{% step %}

### Connect the First Scene

Drag from the lineup output handle to the scene input handle. The connector tells the player where to go first.
{% endstep %}

{% step %}

### Add the Next Scenes

Continue connecting scenes in playback order. Keep the main path moving left to right so it is easy to scan.
{% endstep %}

{% step %}

### Preview the Path

Preview the experience and confirm that each scene appears in the expected order. Test again after every branching change.
{% endstep %}
{% endstepper %}

## Add and Arrange Nodes

Use the canvas controls to add lineups, organize the map, and adjust visual grouping. A lineup is added as an unsaved draft node until you save the Flow Map.

<figure><img src="/files/7a5jwXMq3ny5AcMdq8F4" alt="Add a lineup control at the top of the Flow Map canvas"><figcaption><p>Add a lineup from the top-left canvas control.</p></figcaption></figure>

<figure><img src="/files/gWNlSOVeCzKsZ7dmeatt" alt="Auto organize and Scene colors controls at the bottom of the Flow Map canvas"><figcaption><p>Use Auto organize and Scene colors from the bottom-left canvas controls.</p></figcaption></figure>

Recommended layout practices:

* Keep the default path moving from left to right.
* Put branch outcomes vertically above or below the condition that creates them.
* Give scenes outcome-based names, such as `Welcome - New Customer` or `Offer - Returning Customer`.
* Keep unused draft scenes disconnected until they are ready for viewers.
* Use **Auto organize** when the map becomes hard to scan.
* Use **Scene colors** when visual grouping helps distinguish scene groups or branches.

## Add Branches and Tests

Use conditions when routing depends on viewer data, dates, URL parameters, or other runtime values. Use A/B tests when the viewer should be assigned to one of several variants by traffic percentage.

{% content-ref url="/pages/fWQPcPw7y4mw0cyd0Kzp" %}
[Conditions](/apps/blings-platform/flow-map/flow-map-conditions.md)
{% endcontent-ref %}

{% content-ref url="/pages/YODwl1L803FnWqKvdtlr" %}
[A/B tests](/apps/blings-platform/flow-map/flow-map-ab-tests.md)
{% endcontent-ref %}

## Save, Preview, and Publish a Flow

Flow Map edits are saved to the project draft. Publishing makes the draft flow available to viewers.

<figure><img src="/files/hwbWLnK99X2aUzvT3Ju3" alt="Flow Map header with Save and Publish controls"><figcaption><p>Save draft changes first, then publish when every path has been tested.</p></figcaption></figure>

Before publishing:

* Preview the main lineup from the start.
* Test every [condition](/apps/blings-platform/flow-map/flow-map-conditions.md) branch, including fallback branches.
* Test each [A/B test](/apps/blings-platform/flow-map/flow-map-ab-tests.md) variant path.
* Confirm disconnected nodes are intentionally unused.
* Check that every path reaches a valid ending.
* Confirm personalized fields used in conditions are available in your project data.

{% content-ref url="/pages/u16IuFWJ28ual5xEuspA" %}
[Draft Preview and Publishing](/apps/blings-studio/flow-preview-and-publishing.md)
{% endcontent-ref %}

{% content-ref url="/pages/VkH17x1J2SH1VmvzEgwU" %}
[Simulation](/apps/blings-platform/simulation.md)
{% endcontent-ref %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.blings.io/apps/blings-platform/flow-map.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.