Flowchart (Mermaid)

A flowchart is the diagram most people draw first. This one has the two things a useful flowchart needs and a bad one lacks: labelled branches, and a path back for the case that fails.

#What this example shows

Terminator, process and decision shapes, chosen by bracket type.
Every branch labelled, so no reader has to guess which way is which.
A loop back to an earlier step, which is where most real processes differ from the drawn ones.

#A worked example

Open it, edit it, or copy the source below.

The source, which you can paste into a new diagram and edit:

flowchart TD
  A([Pull request opened]) --> B[Automated checks run]
  B --> C{All checks pass?}
  C -- No --> D[Author fixes and pushes]
  D --> B
  C -- Yes --> E[Reviewer assigned]
  E --> F{Approved?}
  F -- Changes requested --> D
  F -- Yes --> G[Merge to main]
  G --> H([Deploy pipeline starts])

#Making it your own

Swap TD for LR to lay it out left to right, which suits wide processes.
Add a second decision rather than a three-way branch; binary questions read better.
Keep it to one screen. If it will not fit, split it and link the halves.

Styled flowchart (Mermaid)

The same idea, with classes doing the emphasis.

Sequence diagram (Mermaid)

Messages over time, with an alternative and a loop.

Mermaid examples

Back to the rest of these examples.

Copy it. Change one line. See what happens.