Flowchart symbols

Flowchart shapes are a small vocabulary that most people half-remember. Using them correctly costs nothing and saves your reader from guessing whether a box is a step or a subprocess.

Every shape below is available in all three editors. In Mermaid the shape is chosen by the bracket you use, which is why the source stays short.

#When to reach for one

Before you standardise diagrams across a team, so everyone draws the same shape for the same thing.
When reviewing a diagram that looks fine but reads oddly.
When converting a hand-drawn sketch into something official.

#How to draw it in Capable

Route	Use when
Mermaid	Bracket syntax picks the shape, so it stays readable as text.
draw.io	The shape palette has the full set, including the rarer ones.

#A worked example

The five shapes that cover almost everything:

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

flowchart TD
  A([Terminator: start or end]) --> B[Process: a step you take]
  B --> C{Decision: a question}
  C -- Yes --> D[(Data store)]
  C -- No --> E[/Input or output/]
  D --> F([End])
  E --> F

#A few things that catch people out

A diamond with one exit is not a decision, it is a step. Redraw it as one.
Subprocess shapes are worth using once a step has its own diagram; link the two.
Colour is not part of the vocabulary. Use it for emphasis, never as the only signal.

Swimlane diagram

Who does what, laid out in lanes.

Business process diagram

Real BPMN 2.0, not boxes that look official.

Examples

Working diagrams you can copy.

Draw the unhappy path too.