CI/CD pipeline (with rollback)

A CI/CD pipeline diagram is a flowchart of what happens to a change between landing on the main branch and serving traffic: build, unit tests and lint, a container image pushed to a registry, a staging deploy with smoke tests, an approval, and a rolling deploy to production behind a health check. Continuous integration is everything up to the artefact and continuous delivery is everything after it, and drawing both on one page is usually the point — the handover between the two halves is the part of a pipeline people understand least well.

People draw this one when a pipeline has been assembled a job at a time and nobody can describe it end to end any more, when a new engineer needs to know where their commit actually goes, or when an audit asks what stands between a push and production. The detail that earns the diagram is the one most versions leave out: what happens when the production rollout comes up unhealthy. A pipeline drawn with only its green path is a drawing of the day nothing went wrong, which is not the day anybody reaches for the diagram.

CI/CD pipeline Push tomain Build Unit tests andlint Testspass? Fix and push Build and pushimage Containerregistry Deploy tostaging Smoketestspass? Approve release Rolling deployto production Healthy? Roll backrelease Rolledback Released Yes No Yes No Yes No
Open in editor

Mermaid source

---
title: CI/CD pipeline
---
flowchart LR
    Commit([Push to main]) --> Build[Build]
    Build --> Test[Unit tests and lint]
    Test --> Passed{Tests pass?}
    Passed -->|No| Fix[Fix and push]
    Fix --> Build
    Passed -->|Yes| Image[Build and push image]
    Image --> Registry[(Container registry)]
    Registry --> Staging[Deploy to staging]
    Staging --> Smoke{Smoke tests pass?}
    Smoke -->|No| Fix
    Smoke -->|Yes| Approve[Approve release]
    Approve --> Prod[Rolling deploy to production]
    Prod --> Health{Healthy?}
    Health -->|No| Rollback[Roll back release]
    Rollback --> RolledBack([Rolled back])
    Health -->|Yes| Live([Released])

Stock Mermaid vs Line9 on this CI/CD pipeline

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 CI/CD pipeline through stock Mermaid — a band six times wider than it is tall, both return paths drawn as long crossing arcs, and the “No” label stranded mid-diagram
Stock Mermaid · same source View full size ↗

The stock Mermaid shape is very linear and results in a graph six times wider than it is tall. This stretched arrangement forces some of the edges to be very long. The other disadvantage in the Mermaid version is the unnecessary crossing of lines near the ‘Smoke tests pass?’ decision diamond. Line9 lays out the same source at 2.9:1, and thereby keeps most edges very short and easy to trace. It also arranges nodes and edges so that none of them need to cross, aiding readability.

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.