Mermaid code
flowchart TD
U[Users] --> R[Router / load balancer]
R -->|100% traffic| B[Blue environment<br/>current release]
N[New release] --> G[Green environment<br/>idle]
G --> H{Health checks pass?}
H -->|yes| S[Switch router to green]
H -->|no| F[Fix and redeploy to green]
F --> G
S --> M[Monitor error rate]
M -->|stable| D[Decommission blue]
M -->|regression| RB[Switch router back to blue]
RB --> F Paste this into any tool that renders Mermaid, or into the editor to change the theme and export PNG or SVG. Syntax reference: Flowchart guide.
What this diagram shows
Here Blue environment serves all traffic while New release lands on the idle Green environment. The Health checks pass? diamond gates the Switch router to green step. After the switch, Monitor error rate decides whether blue is decommissioned or the router flips back. The rollback edge RB --> F shows that a reverted release goes back to the fix loop rather than being abandoned.
How to adapt it
- Replace
Router / load balancerwith the component that actually moves traffic for you, such as a DNS record, an ingress controller, or a service mesh. - Add a
Run smoke testsnode betweenGreen environmentand the health check diamond if you run synthetic tests before exposing real users. - For canary releases, change
100% trafficto95% trafficon blue and add a5% trafficedge from the router to green. - Swap
Decommission blueforKeep blue as standbyif you leave the old environment running until the next release.
FAQ
Why is the new release drawn as a separate node instead of an edge into green?
So the diagram has an obvious starting point for the release process that is separate from the live traffic path. Readers can follow users from Users and the release from New release without the two lines crossing.
How do I show the database in a blue-green setup?
Add a single DB[(Shared database)] node and connect both environments to it. The cylinder shape [( )] signals storage. Drawing one database also makes the point that schema changes must be backward compatible.