CI/CD Pipeline Flow Diagram

Flow diagram of a CI/CD pipeline. A push, drawn as a circle, triggers a build, then the test suite, then a decision diamond asking whether tests pass. Yes leads to a staging deploy and smoke tests; no notifies the developer. A second diamond asks whether the release is approved: yes deploys to production, no holds the release and goes back to the developer.

Diagram source. Edit it live in the browser

title CI/CD Pipeline

type origin Push
type actor Developer
type decision "Tests pass?"
type decision "Approved?"

Push -> Build: commit to main
Build -> Test Suite: image built
Test Suite -> "Tests pass?"
"Tests pass?" -> Deploy Staging: yes
"Tests pass?" -> Developer: no, notify
Deploy Staging -> Smoke Tests: run
Smoke Tests -> "Approved?": green
"Approved?" -> Deploy Production: yes
"Approved?" -> Developer: no, hold release

What this diagram shows

A pipeline with the two questions every pipeline asks: did the tests pass, and did someone say yes to production? Each question is a diamond, with a yes arrow that carries on and a no arrow that goes back to a person.

The circle on the left is the trigger. In Sketmi that's type origin Push, and a diamond is type decision "Tests pass?". Everything else is the usual A -> B: label.

Step-by-step flow breakdown

A commit lands on mainThe push is the starting point, so it gets the origin circle.

BuildThe pipeline builds an image or artifact once. Every later stage uses that same build.

Test suite runsUnit and integration tests run against the build.

Tests pass?First gate. On no the developer is notified and the pipeline stops. On yes it deploys to staging.

Smoke tests on stagingA short set of checks against the deployed build: does it start, can you log in, does checkout load.

Approved?Second gate. A person, or an automated policy, decides whether this build goes to production. A no holds the release.

Writing decisions as text

A decision is a node like any other, so branching is two arrows leaving the same diamond:

type decision "Tests pass?" turns the node into a diamond. Quote the name because of the question mark and spaces.
"Tests pass?" -> Deploy Staging: yes and "Tests pass?" -> Developer: no, notify are the branches. The labels are free text: yes/no, pass/fail, > 100 ms.
Arrows leave the diamond from the side facing where they're going, so branches don't cross over each other.

If you came here looking for a flowchart maker: this covers the start circle, process boxes and decision diamonds, and nothing else from the flowchart symbol set. For a pipeline that's normally enough. See the node shapes in the syntax guide.

When to use this flow diagram

Explaining to a new team member what happens between git push and production.
Proposing a new gate (a security scan, a canary stage) and showing exactly where it goes.
Release process docs, where the YAML is the truth but nobody outside the platform team reads YAML.
Post-incident reviews: which gate should have caught this?

Common variations

Canary release

Add a third diamond after production: Deploy Production -> "Error rate OK?", with yes going to Full Rollout and no to Rollback.

Pull request checks

Start from type origin "Pull Request" and end at Merge instead of a deploy. Same two-gate shape: checks pass, reviewer approves.

Fully automated delivery

Delete the "Approved?" diamond and point Smoke Tests straight at Deploy Production. One line removed, and the diagram re-lays itself.

Related flow diagram examples

Frequently asked questions

How do I add a decision to a flow diagram?

Declare the node as a decision, type decision "Tests pass?", then draw one arrow per outcome from it and label each arrow: "Tests pass?" -> Deploy Staging: yes.

Can a decision have more than two branches?

Yes. Add as many outgoing arrows as there are outcomes, each with its own label.

Does this match my GitHub Actions or GitLab CI config?

It is a picture, not a parser. Sketmi does not read pipeline YAML. You type the stages you want to show, which is usually fewer than the config has.

Can I use this template for free?

Yes. Open it in the editor, rename the stages and export a PNG or SVG. No sign up.