Branching Flow

About this block

Branching Flow is a process section built around a flowchart. Under a centered heading and lede, an SVG diagram shows a draft entering automated checks, branching into an all clear path and a flagged path, and both rejoining at a highlighted launch node. Beneath the diagram a numbered four step list explains each stage in a sentence. The chart scrolls horizontally on small screens instead of squashing.

The diagram is one SVG with plain coordinates and text elements, so relabeling nodes and branch conditions is string editing. The filled node marks the automated heart of the process and the outlined nodes mark the human moments, keep that contrast when you relabel. The step list is a plain array and accepts three to six entries cleanly.

When to use

Reach for this block when your process has a decision in it. The sibling pipeline-flow tells a linear story, this one shows the fork and rejoin that makes automation trustworthy: routine work flows through, judgment gets a human. It beats three-step-cards when the steps interact rather than queue, and vertical-timeline when sequence matters less than logic.

A natural flow around it on a Marketing Pro page:

Before

• Features to introduce the automation the diagram then explains

After

• Stats to quantify how much flows through the fast path
• CTAs for teams ready to stop routing approvals by hand

What you can display

One strong use is campaign approval with compliance checks. Other forked processes that fit:

• Lead routing. Score check branching to sales or nurture, both feeding the same pipeline node.
• Content moderation. Automated screening with a human review branch before publishing.
• Expense approval. Policy check passing small claims through and routing exceptions to finance.

Tip: name the branch conditions in plain words on the diagram, all clear and flagged do more persuading than yes and no.