flowchart — Lattice component
Lattice

flowchart

ProgressionCanvasGraph

A free-form flowchart: shapes, groups and lines, written as a list.

Open in Playground
Variant

Use for a process or decision flow, an org chart, a data flow or a system map: any set of boxes where the lines between them are the point. Every list item is a shape; a sub-list of shapes makes its parent a group; an arrow in a row connects shapes by name. Nothing implies order, so the same grammar draws a tree, a pipeline or a few disconnected boxes.

org-chartprocessworkflowoverview

When to use

  • The lines are the point. A flowchart earns its space when the audience needs to see what connects to what: a decision flow, who reports to whom, where data goes. If the boxes are the point and the order is fixed, a step list or timeline reads faster.
  • Up to about a dozen shapes. Starting budgets: a decision flow six steps deep with four branches; an org chart three levels deep and eight across; a data flow three groups and twelve shapes; a system map ten shapes. Past that the type shrinks toward the floor; split into an overview and detail slides.
  • Free-form, not a state machine. For a machine with states and events, where the numbering is the reference, use state-chart. A flowchart implies no order and has no start or end markers.

When not to use

  • A sequence dressed as a flowchart. Five boxes in a line with arrows between them is a list with decoration. Use list-steps or timeline-list, which read faster and fit more words.
  • Timed interactions or schedules. Messages between actors over time are a sequence diagram (diagram with Mermaid); work across dates is gantt or roadmap.
  • Color with no key. Every slot and status the chart uses shows up in the derived key. Renaming entries is free; painting meaning the reader cannot decode is not.

Common mistakes

  • Nesting a shape under a connection row. A sub-list makes its parent a GROUP, so it must sit under a shape's row, never under - -> B. Lint names it: flowchart-nested-under-connection.
  • Styling a shape from the line that points at it (-> B diamond``). A span after a connection's target styles the LINE. Give B its own row and put diamond there.
  • Writing an arrow that is meant as text (Input -> Output as one name). Escape it: Input \-> Output. A comparison like 2 => 3 is warned about for the same reason.

Authoring

<!-- _class: flowchart -->

## The flow in one line.

- Start `pill` => Check => Decide?
- Decide? `diamond`
  - -yes-> Ship
  - -no-> Fix -> Check

Slots

SlotSelectorRequiredDescription
titleh2yesSlide heading: name the takeaway, not the diagram.
eyebrowp > codenoOptional eyebrow naming the system or domain.
shapesul > liyesOne item per shape, in any order. The shape's name is its displayed text; other rows refer to it by that name, ignoring case. A trailing inline-code span styles it: an outline (box square pill diamond circle cylinder io doc), a color c1…c8, one channel fill=cN / border=cN / text=cN, a status word (done, fail, …) or an id #kyc to refer to it by. One word stands alone; several go in one record, in any order: \{#kyc, diamond, c2}. An icon from the icons plugin draws beside the name: icon=gateway (before the name, or above it when the chart is pinned tb); add icon-only to draw the icon alone, and the name stays as what a screen reader says and the hover title. A group draws no icon.
groupsli > ulnoA sub-list of shapes makes its parent item a GROUP, drawn as a tinted background behind its members, like a Mermaid subgraph. cN on a group tints it. Groups nest. A line can start or end at a group.
connectionslinoAn arrow in a row connects shapes: A -> B, A => B (the heavy main path), A -- B (no head), A <-> B, A <- B. A label sits inside the arrow: -ships via->. A row may start with the arrow (- => B), meaning "from the item this row sits under", or name its source (- A => B). & fans out: A -> B & C. A trailing span after the target styles the line: dashed dotted open dot cross loose cN, several in one record (\{dotted, cross}).
detailli > blockquotenoA > blockquote under a shape is its HIDDEN DETAIL, the house style both graph charts share: the slide never shows it. It appears when the shape is hovered or tapped in Present, Practice and Preview (the shape carries data-mark, the text rides an inert <template class="chart-detail">), and it is folded into the slide's speaker note. A PDF does not show it: text the page must carry belongs in a caption.
keyp > codenoThe chart derives its own key from what it uses. One bracketed span right below the list renames entries by the word you typed: ` [{"=>", Happy path}, {dotted, Later}] `. It only renames; it never hides or adds an entry.
captionp > emnoAn italic paragraph below becomes the chart caption.

Anatomy

┌─────────────────────────────────────────┐
│  header                                 │
│  Diagram heading.                       │
│                                         │
│       ┌────┐    ┌────┐    ┌────┐        │
│       │ A  │ →  │ B  │ →  │ C  │        │
│       └────┘    └────┘    └────┘        │
│                                         │
│        (Mermaid rendered as SVG)        │
│  footer                           1/19  │
└─────────────────────────────────────────┘

Variant decision rule

  • default (no modifier) — Almost always. The chart lays itself out both ways and keeps whichever sets the type larger on the stage. A long flow that would shrink its type on one line wraps into rows in reading order, as the state chart does; a fan-out that already reads at size keeps its shape. A dense chart whose type nears the floor takes the universal compact modifier, which tightens the spacing.
  • lr — The flow must read left to right whatever the stage shape (a pipeline, a data flow). On a portrait deck lr falls back to tb, because a row cannot fit a tall box.
  • tb — The flow must read top to bottom (an org chart, a decision tree).
  • curved — Softer, generously rounded corners fit the deck's tone better than tight elbows. A paint setting only: the lines are still the router's, and never cross a shape.
  • rearrange — A long flow wraps and its lines cross, and where each shape sits matters more than the order you wrote them in: a detour written last moves beside the step it leaves. The chart moves a shape only when that draws a cleaner chart (fewer crossings, or a line no longer through a shape), so with nothing to fix it draws as before.

Variants

lr — Left-to-right

Pins the flow left to right.

<!-- _class: flowchart lr -->

## Events land in the warehouse within a minute.

- Web events `io` => Ingest queue => Stream processor => Warehouse
- Warehouse `cylinder`
  - -> BI dashboards
  - -nightly-> ML training
- BI dashboards `doc`
Explore in Playground

tb — Top-to-bottom

Pins the flow top to bottom.

<!-- _class: flowchart tb -->

## The operating model has three lines of reporting.

- Chief executive `c1`
  - -- Finance & Technology & Operations
- Finance
  - -- Controller & Planning
- Technology
  - -- Platform & Security
Explore in Playground

curved — Curved

Generously rounded corners on the router's lines.

<!-- _class: flowchart curved -->

## Every page reaches a human within 15 minutes.

- Alert fires `pill` => Auto-triage => Severity?
- Severity? `diamond`
  - -SEV1-> Page on-call
  - -SEV2-> Open ticket
- Page on-call `fail`
  - -ack-> Mitigate
- Open ticket -> Mitigate
Explore in Playground

rearrange — Rearrange

Shapes may leave their written order when that draws a cleaner chart.

<!-- _class: flowchart rearrange -->

## rearrange lets a detour sit beside the step it leaves.

- Lead `pill` => Qualify => Demo => Proposal => Negotiate => Sign => Onboard => Renew
- Renew `pill`
- Negotiate -legal review-> Legal
- Legal -cleared-> Sign
- Demo -needs trial-> Trial
- Trial -converted-> Proposal
Explore in Playground

Related

  • state-charta finite-state machine: states, the events between them, a start and an end
  • diagramyou need Mermaid's full grammar: sequence, class or entity diagrams, or a flowchart with subgraph directions and styles this grammar does not cover
  • list-stepsa linear procedure with no branching and no lines worth drawing
  • roadmapparallel workstreams across phases, where time is the axis