Skip to content
SayDiagramSayDiagram

Learn

Flowchart syntax

A practical guide to the Product delivery flow template: directions, shapes, link styles, decisions, subgraphs, and common gotchas.

On this page11 sections
  1. Syntax cheatsheet
  2. 1.Declaration and direction
  3. 2.Nodes and labels
  4. 3.Common node shapes
  5. 4.Link styles and labels
  6. 5.Decisions and branching
  7. 6.Chaining multi-hop paths
  8. 7.Subgraphs and nested direction
  9. 8.Gotchas and escaping
  10. 9.Put it together: Product delivery flow
  11. Check your level

Syntax cheatsheet

Quick reference for this diagram type

ConceptSyntax
DirectionsTB · TD · BT · RL · LR
RectangleA[Label]
Round / stadiumA(Label) · A([Label])
Circle / cylinderA((Label)) · A[(Label)]
DecisionA{Question?}
Arrow / open / dotted / thick--> · --- · -.-> · ==>
Labeled edgeA -->|text| B
Subgraphsubgraph id [Title] … end
  1. 1

    Declaration and direction

    Every flowchart starts with a type keyword plus an orientation. Use flowchart (preferred) or the older graph alias — both work.

    Orientation controls how nodes are laid out: TB / TD top to bottom, BT bottom to top, LR left to right, RL right to left. Pick one early; changing it later reflows the whole diagram.

    • Tip: You can write graph LR instead of flowchart LR — Mermaid treats them the same.
    • Tip: Other directions: TB / TD (top→bottom), BT (bottom→top), RL (right→left).
    • Tip: LR is ideal for pipelines like Idea → Spec → Ship.
    flowchart LR
  Left --> Right
  Right --> Done
    Expand
  2. 2

    Nodes and labels

    A node needs an id. By default the id is also the label shown in the box.

    Put text in brackets to show a different label: A[Idea]. If you redefine the same id later, the last label wins. Once labeled, later edges can omit the text and still reuse it.

    • Tip: Wrap unicode in quotes: A["★ star"].
    • Tip: Markdown in labels: A["`**bold** and _italic_`"].
    flowchart LR
  id1
  id2[Different label]
  id1 --> id2
    Expand
  3. 3

    Common node shapes

    Shape is controlled by the brackets around the label. Rectangles are the default; rounded, stadium, circle, cylinder, and diamond cover most product diagrams.

    Use diamonds for decisions, cylinders for stores, and stadiums for start/stop when you want classic flowchart vocabulary.

    • Tip: Stadium ([]) reads well as a terminal / start-stop shape.
    • Tip: Cylinder [()] is a common stand-in for a database.
    flowchart LR
  A[Rectangle]
  B(Round)
  C([Stadium])
  D((Circle))
  E[(Cylinder)]
  F{Diamond}
  A --> B --> C --> D --> E --> F
    Expand
  4. 5

    Decisions and branching

    Curly braces create a diamond decision node. From there, fan out with labeled Yes / No (or any) edges.

    Loops are just edges back to an earlier node — perfect for “not ready, revise the spec” paths.

    flowchart LR
  Spec --> Ready{Ready?}
  Ready -->|No| Spec
  Ready -->|Yes| Build
    Expand
  5. 6

    Chaining multi-hop paths

    You can chain several links on one line (A --> B --> C) or declare them separately. Separate lines are easier to edit when branches appear.

    Declare a node’s label once, then reuse its id on later edges without repeating the text.

    flowchart LR
  A[Idea] --> B[Spec] --> C[Build]
  C --> D[Review] --> E[Ship]
    Expand
  6. 7

    Subgraphs and nested direction

    Group related nodes with subgraph id [Title] … end. The id is required for stable linking; the title is what users see.

    Inside a subgraph you can set a different direction, which is useful for a vertical checklist inside a horizontal flow.

    • Tip: Link to a subgraph by its id, or to nodes inside it by node id.
    • Tip: Avoid nesting conflicting directions too deeply — layouts get crowded fast.
    flowchart LR
  subgraph delivery [Delivery]
    direction TB
    Build --> Review --> Ship
  end
  Idea --> Spec --> delivery
    Expand
  7. 8

    Gotchas and escaping

    A few Mermaid quirks trip people up. The word end in all-lowercase inside a node can break parsing — capitalize it (End / END).

    If a node id after --- starts with o or x, Mermaid may treat it as a special edge type. Add a space or capitalize. Escape awkward characters with entity codes or quotes when needed.

    • Tip: Typing A---oB creates a circle edge, not a node named oB.
    • Tip: Prefer quoted labels when the text includes parentheses or punctuation.
    flowchart LR
  A[Start] --> B[End]
  C[Task] --> D["A -- B"]
    Expand
  8. 9

    Put it together: Product delivery flow

    Combine LR direction, labeled rectangles, a decision diamond, and a feedback loop to tell the full Idea → Ship story from the examples template.

    flowchart LR
  A[Idea] --> B[Spec]
  B --> C{Ready?}
  C -->|No| B
  C -->|Yes| D[Build]
  D --> E[Review]
  E --> F[Ship]
    Expand

Check your level

80% or higher certifies this lesson. You'll get 3–5 random questions from a larger bank.

Back to examples