Feature-flag canary rollout

This feature-flag canary rollout flowchart focuses on traffic exposure after a deployment: the flag starts default-off, staff see it first, then a 5 percent canary. Each step has a metric gate; if the signal worsens the flag is turned off rather than rolling back a release. After 100 percent it soaks for a release, and the flag is removed so it does not become a permanent branch in the code.

People draw this one to agree the ramp percentages before a launch, to show that rollback is a flag flip rather than a redeploy, or to remind a team that a flag left at 100 percent is unfinished work. The shape that becomes clear in the diagram, over writing it out in prose, is where three different test ‘No’s collapse to the same action: switching the flag off and rolling back.

Open in editor

Mermaid source

---
title: Feature-flag canary rollout
---
flowchart LR
  create([Flag created, default off]) --> internal[Enable for staff]
  internal --> ready{Looks good?}
  ready -->|No| disable[Turn the flag off]
  disable --> aborted([Rolled back])
  ready -->|Yes| canary[Canary at 5 percent]
  canary --> metrics{Metrics within bounds?}
  metrics -->|No| disable
  metrics -->|Yes| ramp[Increase to 25, then 50 percent]
  ramp --> still{Still healthy?}
  still -->|No| disable
  still -->|Yes| all[Roll out to 100 percent]
  all --> soak[Soak for a release]
  soak --> cleanup[Remove the flag]
  cleanup --> done([Flag retired])

Stock Mermaid vs Line9 on this feature-flag canary rollout

Run the same source through the stock Mermaid engine and it often will not look as good. In some cases, Mermaid is able to deliver a usable graph, but not always. On this one:

The same feature-flag canary rollout through stock Mermaid — a band more than seven times wider than it is tall, with three long No arcs to Turn the flag off — Stock Mermaid · same source View full size ↗

The stock Mermaid renderer draws the three test nodes with ‘No’ edges to ‘Turn the flag off’ in a line, rather than grouped around that destination node as the Line9 render draws it. This elongated view doesn't reveal the logical flow as clearly and results in a diagram that's more than seven times as wide as it is tall. Line9 draws this diagram in a far more compact and readable shape, resulting in shorter lines, clearer relationships and a more practical aspect ratio of 1.7:1.

For a fuller product comparison — layout, export, CLI, and pricing — see Line9 vs mermaid.live.

Render your own

Paste any Mermaid flowchart into the free online editor — no account needed. Prefer the terminal? Install the line9 CLI (free for personal use).

More scenarios on the Mermaid examples hub.

Mermaid source

Stock Mermaid vs Line9 on this feature-flag canary rollout

Render your own

Related diagrams