Draw a flowchart

A type: flowchart document draws a classic process/decision graph — steps as process cards, decision diamonds, I/O parallelograms, and pill-shaped terminators, joined by labelled links:. It runs on the same layered engine as architecture diagrams (so direction: LR reads like a pipeline and TB like a procedure), and the derived animation walks a packet through the links in declared order.

The tersest flowchart

You don't have to declare steps at all — any id a link mentions is auto-created as a plain process card. "[*]" is the start/end pseudo-step (quote it — the brackets are YAML syntax otherwise): a link from "[*]" draws the start terminator, one to "[*]" draws the end terminator, exactly like the "[*]" entry/exit pseudo-state in state diagrams:

yaml

type: flowchart
steps:
  - { id: begin, kind: start }
  - { id: process, text: Process order }
  - { id: finish, kind: end }
links:
  - { from: "[*]", to: process }
  - { from: process, to: "[*]" }

beck

Decisions, I/O, and a loop back

Add a steps: list to give a step a real kind. decision renders a diamond — pair it with two links carrying yes/no labels for the branches. io renders a parallelogram for read/write-shaped steps. A link back to an earlier step (here, retry routing back to check) draws as a loop instead of crossing the forward flow:

yaml

type: flowchart
meta: { title: Validate Input }
steps:
  - { id: read, text: Read request, kind: io }
  - { id: check, text: Valid?, kind: decision }
  - { id: process, text: Process request }
  - { id: retry, text: Fix input }
  - { id: reject, text: Give up, kind: terminator }
links:
  - { from: "[*]", to: read }
  - { from: read, to: check }
  - { from: check, to: process, label: "yes" }
  - { from: check, to: retry, label: "no" }
  - { from: retry, to: check }
  - { from: retry, to: reject, label: "give up" }
  - { from: process, to: "[*]" }

beck

Note

Every kind — process, decision, terminator, io, start, end — defaults to a neutral accent. Set accent per step (a colour token or raw CSS colour) to make a branch or an outcome read as success, danger, or a brand hue.

Labels, accents, and narration

links: fields work like architecture edges: — label, style (solid/dashed), color, and a note: that narrates the hop in a derived flow:

yaml

type: flowchart
meta: { direction: LR }
steps:
  - { id: submit, text: Submit, kind: terminator, accent: primary }
  - { id: charge, text: Charge card }
  - { id: fail, text: Payment failed, accent: danger }
links:
  - { from: submit, to: charge, note: "The order is submitted for payment." }
  - { from: charge, to: fail, label: declined, style: dashed, color: danger, note: "A declined card routes back for a retry." }
  - { from: fail, to: charge, label: retry }

beck

Scripting the animation

Without a flow:, the engine walks links: in declared order — one packet per link. For a guided story — highlight a branch, fail a step, park a status pill — add a flow: block; step ids work anywhere node ids do. See Animate the flow.

Generate it from your C#

csharp

using Beck.Authoring;
  
string fence = new FlowchartDiagramBuilder("Checkout")
    .Direction(Direction.Tb)
    .Decision("valid", "Payment valid?")
    .Link(FlowchartDiagramBuilder.Pseudo, "valid")
    .Link("valid", "charge", "yes")
    .Link("valid", "retry", "no")
    .Link("charge", FlowchartDiagramBuilder.Pseudo)
    .Link("retry", "valid")
    .ToFence();   // ```beck … ``` — drop it into any Markdown page

Full field tables: steps and links in the YAML schema. Generating one from C#: FlowchartDiagramBuilder.