Flowcharts and state diagrams

What each one shows#

Both are shapes joined by arrows. They differ in what a shape stands for.

• A flowchart shows the steps of a process, in order. Each shape is something that happens, or a question with an arrow for each answer, and each arrow says what comes next. Use one for a recipe, a sign-up, a checklist with decisions, or how a piece of code runs.
• A state diagram shows the conditions one thing can be in, and what moves it from one to another. Each shape is a state the thing stays in for a while, and each arrow is a change, named for what causes it. A small filled dot marks where it starts, and a circle with a dot in it where it can end. Use one for an order (placed, paid, shipped), a door (closed, open, locked), or a screen in an app.

The same drawing can be read either way: choose under Read as. Both examples below were drawn and read here, with the names typed after drawing. Each shape the reader found is tinted, and each arrow it read is shaded under the ink.

flowchart TD
  A(["Start"])
  B["Boil the water"]
  C{"Milk?"}
  D["Add milk"]
  E(["Serve"])
  A --> B
  B --> C
  C -->|"no"| E
  C -->|"yes"| D
  D --> E

stateDiagram-v2
  direction LR
  state "Closed" as A
  state "Locked" as B
  state "Open" as C
  [*] --> A
  A --> C : open
  C --> A : close
  A --> B : lock
  B --> A : unlock

State diagrams#

Choose State diagram under Read as, and the same drawing is read as states and the transitions between them. Draw a start as a small filled dot, and an end as a circle with a dot or a small circle in it. Mermaid writes both as [*] and draws a start or an end from the way the arrow runs, so a small circle works for either too.

• Dots. A dot is a small closed or filled mark that an arrow ends at, standing clear of every shape: drawn on its own, or filled in at the free end of its arrow in the same stroke. A circle up to 50 drawing units across, round or a little oval, is a dot too, and so is one up to 70 across with a filled or closed mark inside it, or a circle in a circle up to 70 across. A filled or closed head drawn a little short of a shape stays that arrow's head, and a letter that no arrow ends at stays out.
• Names. States are numbered in reading order, "State 1", "State 2", and take names as shapes do. A start or an end has no name, and Mermaid gives a choice none, so a tap on one opens no name box.
• What each shape is. Under Names, each shape's menu makes it a state, a choice, or a start or end, and the choice stays with its strokes, as a look does in a flowchart.
• Transitions are plain. Mermaid draws every transition in a state diagram the same way, so dotted and thick lines read as plain ones, an arrow with heads at both ends becomes two transitions, and colored ink colors the states only. A line's style and name are kept for when the drawing reads as a flowchart again.
• Composite states. A transition between two states inside the same group is written inside it; any other is written at the top. A dot inside a group starts or ends that group, and its transition is written inside it, to the state there that holds the other end. When the other end is outside the group, the group itself stands for the dot.