Flowchart

Pro

Shapes carry the meaning and no arrow can cross a box, by construction.

On hover

What happens to a push

Fourteen steps, three decisions, one way back

Push to mainInstall and buildBuild green?Run the suiteSuite passes?Deploy to stagingSmoke testHealthy?Promote to productionLivePost the logFirst failure?Retry onceStoppedyesnoyesnoyesnoyesno
  • start or end
  • step
  • decision
  • defined elsewhere
  • input or output
  • 3 arrows routed outside the columns, which is what a jump or a retry looks like

A push builds, runs the suite, goes to staging and gets promoted. All three failure branches meet at the same place, and a first failure gets one retry. Down follows the flow, up goes back one step, left and right move between boxes at the same level, and Enter pins a box to highlight every route that reaches it. The steps and the arrows follow as a table.

Deployment pipeline from a push to production
StepKindLeads to
Push to mainstart or endInstall and build
Install and buildstepBuild green?
Build green?decisionRun the suite (yes), Post the log (no)
Run the suitestepSuite passes?
Suite passes?decisionDeploy to staging (yes), Post the log (no)
Deploy to stagingstepSmoke test
Smoke testdefined elsewhereHealthy?
Healthy?decisionPromote to production (yes), Post the log (no)
Promote to productionstepLive
Livestart or endnothing
Post the loginput or outputFirst failure?
First failure?decisionRetry once (yes), Stopped (no)
Retry oncestepInstall and build
Stoppedstart or endnothing

Shape is the encoding: a stadium starts and ends, a diamond asks, a parallelogram moves something in or out, a barred box is defined somewhere else. Nothing here is carried by fill colour, so it survives a greyscale print. Arrows that need to travel further than the gap below them take a lane outside the columns, which is why none of them crosses a box.

This component installs from the private registry, which opens with Pro. The command and the one-time setup are shown here once your licence key is in this browser.

6 sections, and every other premium component

The preview above is the real Flowchart, running. One purchase opens the sections above on this page and on every other component in the library.