What is a flow?
A flow is a named overlay that highlights a sequence of connections on the canvas. It answers the question: "How does a request get from A to B?"
Each flow can contain one or more paths, each with its own color. A path is a sequence of segments that follow existing connections. When a flow is visible, its segments light up on the canvas, making it easy to trace the journey.
Flows are saved as part of your .tesseract.json file and persist across sessions.
Opening the Flows sidebar
Click the Flows button in the toolbar (or press F). The sidebar opens on the right side, showing the list of existing flows. A badge on the button indicates the number of saved flows.
Creating a flow
In the Flows sidebar, click New Flow to enter build mode.
Enter a descriptive label (e.g. "User login flow", "Order checkout").
Select a color from the palette for the first path. This color will be used to highlight the connections on the canvas.
Click the connection lines that form the path, in order. Each clicked connection is added as a segment and immediately highlighted on the canvas in the chosen color.
Click Add Path to create additional paths with different colors. This is useful to show alternative routes or parallel flows within the same story. For example, use one color for the request path and another for the response path.
Click Save Flow. The flow appears in the sidebar list and its highlights persist on the canvas.
Managing flows
Each flow in the sidebar has three action buttons:
- Show / Hide (eye icon) — toggle the flow's highlight visibility on the canvas
- Edit (pencil icon) — re-enter build mode to modify the flow's label, paths, or colors
- Delete (trash icon) — permanently remove the flow
You can show multiple flows at the same time. Their colors overlap on shared connections, making it easy to spot where different flows intersect.
Unsaved highlights
When Claude creates temporary highlights via the MCP tools (highlight_path), they appear in an Unsaved section at the top of the Flows sidebar. These highlights are transient — they are not part of the saved project.
Each unsaved highlight has four action buttons:
- Show / Hide (eye icon) — toggle its visibility on the canvas without deleting it. Hidden highlights remain in the list and can be shown again at any time.
- Edit (pencil icon) — convert the highlight back into build mode so you can modify its paths, colors, or segments before saving.
- Save (floppy disk icon) — prompts for a name, then persists the highlight as a permanent flow in the project.
- Delete (trash icon) — discard the highlight.
When to use flows
- Onboarding — create flows for the most important request paths so new team members can follow them visually
- Debugging — highlight the path a failing request takes to quickly identify which component is involved
- Architecture reviews — show reviewers exactly which connections are affected by a proposed change
- Documentation — save common workflows (login, checkout, data sync) as permanent flows in the project
- Presentations — toggle flows on and off to walk an audience through the system step by step