Beck
Docs / Syntax

Syntax cheatsheet

Every construct in the Beck language, with the YAML on the left and what it renders — live — on the right. Copy any snippet straight into your file, or filter by what you're after.

Node nodes
A node is one entry under nodes:. The id is required; title defaults to the id.
nodes: - { id: api, title: API }
meta: { animate: false }
nodes:
  - { id: api, title: API }
Title & subtitle nodes
Add a subtitle for a muted second line — a version, a technology, a note.
nodes: - { id: db, title: Postgres, subtitle: primary }
meta: { animate: false }
nodes:
  - { id: db, title: Postgres, subtitle: primary, kind: db }
Node kinds nodes
kind picks a fitting icon + accent: service, db, queue, cache, gateway, user, external, ghost.
nodes: - { id: u, kind: user } - { id: gw, kind: gateway } - { id: db, kind: db }
meta: { animate: false, direction: LR }
nodes: [ { id: u, title: User, kind: user }, { id: gw, title: Gateway, kind: gateway }, { id: db, title: Store, kind: db } ]
edges: [ { from: u, to: gw }, { from: gw, to: db } ]
Status pill nodes
status renders a small pill on the card, tinted with the node's accent.
nodes: - { id: api, title: API, status: healthy }
meta: { animate: false }
nodes:
  - { id: api, title: API, status: healthy, accent: success }
Fixed width nodes
width pins the card width in px so a later status change can't make it reflow.
nodes: - { id: api, title: API, width: 240 }
meta: { animate: false }
nodes:
  - { id: api, title: API, width: 240 }
Link nodes
href turns the card into a link; add target: _blank to open it in a new tab.
nodes: - { id: docs, title: Docs, href: /docs }
meta: { animate: false }
nodes:
  - { id: docs, title: Docs, href: /docs, icon: file }
Edge edges
Connect two nodes by their ids. Beck routes the line and places the arrowhead for you.
nodes: - { id: a, title: Web } - { id: b, title: API } edges: - { from: a, to: b }
meta: { animate: false, direction: LR }
nodes: [ { id: a, title: Web }, { id: b, title: API } ]
edges:
  - { from: a, to: b }
Labelled edge edges
Add a label to name the relationship — a protocol, a verb, or the data that flows.
edges: - { from: a, to: b, label: calls }
meta: { animate: false, direction: LR }
nodes: [ { id: a, title: Web }, { id: b, title: API } ]
edges:
  - { from: a, to: b, label: calls }
Bidirectional edges
Set arrow: both for a two-way connection. Other values: start, end (default), none.
edges: - { from: a, to: b, arrow: both }
meta: { animate: false, direction: LR }
nodes: [ { id: a, title: Web }, { id: b, title: API } ]
edges:
  - { from: a, to: b, arrow: both }
No arrowhead edges
arrow: none drops the arrowhead — for peer links or undirected relationships.
edges: - { from: a, to: b, arrow: none }
meta: { animate: false, direction: LR }
nodes: [ { id: a, title: A }, { id: b, title: B } ]
edges:
  - { from: a, to: b, arrow: none }
Async edge edges
kind: async renders a dashed edge — handy for message buses and events.
edges: - { from: api, to: bus, kind: async }
meta: { animate: false, direction: LR }
nodes: [ { id: api, title: API }, { id: bus, title: Bus, kind: queue } ]
edges:
  - { from: api, to: bus, kind: async }
Edge curve edges
curve sets the line shape: step-round (default), straight, or s.
edges: - { from: a, to: b, curve: straight }
meta: { animate: false, direction: LR }
nodes: [ { id: a, title: A }, { id: b, title: B } ]
edges:
  - { from: a, to: b, curve: straight }
Edge colour edges
color recolours an edge and its arrowhead — an accent token or any CSS colour.
edges: - { from: a, to: b, color: danger }
meta: { animate: false, direction: LR }
nodes: [ { id: a, title: A }, { id: b, title: B } ]
edges:
  - { from: a, to: b, color: danger, label: drop }
Pin edge sides edges
fromSide / toSide pin where an edge leaves and enters: top, bottom, left, right.
edges: - { from: a, to: b, fromSide: right, toSide: right }
meta: { animate: false }
nodes: [ { id: a, title: A }, { id: b, title: B } ]
edges:
  - { from: a, to: b, fromSide: right, toSide: right }
Group groups
Wrap related nodes in a labelled boundary. Members can be node ids or other group ids.
groups: - { id: core, label: Core, members: [a, b] }
meta: { animate: false }
nodes: [ { id: a, title: Auth }, { id: b, title: Orders } ]
groups:
  - { id: core, label: Core, members: [a, b] }
Nested groups groups
A group can contain other groups — members may be node or group ids, nested to any depth.
groups: - { id: vpc, label: VPC, members: [web] } - { id: web, label: Web, members: [a, b] }
meta: { animate: false }
nodes: [ { id: a, title: ALB }, { id: b, title: API } ]
groups:
  - { id: vpc, label: VPC, members: [web], accent: info }
  - { id: web, label: Web Tier, members: [a, b], accent: primary }
Group accent groups
accent tints a group's border and label with a token or a raw CSS colour.
groups: - { id: core, label: Core, members: [a, b], accent: success }
meta: { animate: false }
nodes: [ { id: a, title: Auth }, { id: b, title: Orders } ]
groups:
  - { id: core, label: Core, members: [a, b], accent: success }
Accent style
accent colours the whole card — border and icon — with a token: primary, success, warn, danger, info, neutral.
nodes: - { id: api, title: API, accent: danger }
meta: { animate: false, direction: LR }
nodes:
  - { id: a, title: Info, accent: info }
  - { id: b, title: Warn, accent: warn }
  - { id: c, title: Danger, accent: danger }
Variants style
variant sets a node's visual weight: solid (default), subtle, or ghost.
nodes: - { id: a, variant: solid } - { id: b, variant: subtle } - { id: c, variant: ghost }
meta: { animate: false, direction: LR }
nodes: [ { id: a, title: Solid, variant: solid }, { id: b, title: Subtle, variant: subtle }, { id: c, title: Ghost, variant: ghost } ]
edges: [ { from: a, to: b }, { from: b, to: c } ]
Icons style
icon sets a named glyph (cdn, bucket, vector, model, redis, …) or raw inline <svg>.
nodes: - { id: m, title: Model, icon: model } - { id: v, title: Vectors, icon: vector }
meta: { animate: false, direction: LR }
nodes: [ { id: m, title: Model, icon: model }, { id: v, title: Vectors, icon: vector }, { id: c, title: CDN, icon: cdn } ]
Raw colour style
A token follows the theme; a raw CSS colour (hex or named) on accent / surface / textColor doesn't.
nodes: - { id: a, title: Brand, accent: teal }
meta: { animate: false, direction: LR }
nodes:
  - { id: a, title: Teal, accent: teal }
  - { id: b, title: Crimson, accent: crimson }
Direction layout
meta.direction sets the flow axis: TB (default), BT, LR, or RL.
meta: direction: LR nodes: - { id: a, title: Ingest } - { id: b, title: Store, kind: db } edges: - { from: a, to: b }
meta: { animate: false, direction: LR }
nodes: [ { id: a, title: Ingest }, { id: b, title: Store, kind: db } ]
edges: [ { from: a, to: b } ]
Rank & order layout
Pin a node's rank (distance along the flow) and order (position across it) to override the layout.
nodes: - { id: a, rank: 0 } - { id: b, rank: 0, order: 1 } - { id: c, rank: 1 }
meta: { animate: false }
nodes: [ { id: a, title: A, rank: 0 }, { id: b, title: B, rank: 0, order: 1 }, { id: c, title: C, rank: 1 } ]
edges: [ { from: a, to: c }, { from: b, to: c } ]
Spacing layout
meta.spacing tunes the gaps: rank (along the flow), node (across), and cornerRadius.
meta: spacing: rank: 64 node: 48
meta: { animate: false, direction: LR, spacing: { rank: 64, node: 48 } }
nodes: [ { id: a, title: A }, { id: b, title: B }, { id: c, title: C } ]
edges: [ { from: a, to: b }, { from: a, to: c } ]
Auto animation flow
With no flow:, Beck auto-animates — a packet traverses each edge, then loops. Set meta.animate: false for a static frame.
nodes: - { id: a, title: Client } - { id: b, title: API } edges: - { from: a, to: b }
meta: { direction: LR }
nodes: [ { id: a, title: Client, kind: user }, { id: b, title: API, kind: gateway } ]
edges: [ { from: a, to: b } ]
Packet flow
flow.steps scripts the animation. packet sends a dot along an edge, with an optional label.
flow: steps: - packet: { from: a, to: b, label: GET }
meta: { direction: LR }
nodes: [ { id: a, title: Client, kind: user }, { id: b, title: API, kind: gateway } ]
edges: [ { from: a, to: b } ]
flow:
  steps:
    - packet: { from: a, to: b, label: GET }
    - wait: 0.6
    - reset: true
Packet style flow
Shape a packet's motion: ease (linear, smooth, accelerate, decelerate, expo, sine, steps, bounce), size, speed, glow. Edge kind sets sensible defaults; these override.
flow: steps: - packet: { from: a, to: b, ease: steps, size: 9, speed: 260 }
meta: { direction: LR }
nodes: [ { id: a, title: Client, kind: user }, { id: b, title: API, kind: gateway } ]
edges: [ { from: a, to: b } ]
flow:
  steps:
    - packet: { from: a, to: b, ease: steps, size: 9, speed: 260 }
    - wait: 0.7
    - reset: true
Packet shape flow
shape draws the packet as a dot (default), a large circle, or a hollow ring. Add impact for an expanding burst where it lands.
flow: steps: - packet: { from: a, to: b, shape: ring, impact: true }
meta: { direction: LR }
nodes: [ { id: a, title: Client, kind: user }, { id: b, title: API, kind: gateway } ]
edges: [ { from: a, to: b } ]
flow:
  steps:
    - packet: { from: a, to: b, shape: circle }
    - packet: { from: a, to: b, shape: ring, impact: true, color: info }
    - wait: 0.8
    - reset: true
Burst flow
burst sends count dots down an edge, staggered — batch or load traffic. Give to a list to fan out to several targets at once.
flow: steps: - burst: { from: lb, to: [a, b, c], count: 3, stagger: 0.1 }
meta: { direction: LR }
nodes: [ { id: lb, title: LB, kind: gateway }, { id: a, title: web-1 }, { id: b, title: web-2 }, { id: c, title: web-3 } ]
edges: [ { from: lb, to: a }, { from: lb, to: b }, { from: lb, to: c } ]
flow:
  steps:
    - burst: { from: lb, to: [a, b, c], count: 3, stagger: 0.1 }
    - wait: 1
    - reset: true
Status change flow
A status step sets a node's pill mid-flow — show state changing over time.
flow: steps: - status: { node: db, text: writing }
meta: { direction: LR }
nodes: [ { id: api, title: API }, { id: db, title: DB, kind: db } ]
edges: [ { from: api, to: db } ]
flow:
  steps:
    - packet: { from: api, to: db }
    - status: { node: db, text: writing, color: warn }
    - wait: 0.8
    - status: { node: db, text: done, color: success }
    - wait: 0.8
    - reset: true
Working state flow
working leaves a node visibly busy (a breathing glow) until idle or reset.
flow: steps: - working: { node: api } - idle: { node: api }
meta: { direction: LR }
nodes: [ { id: api, title: API }, { id: db, title: DB, kind: db } ]
edges: [ { from: api, to: db } ]
flow:
  steps:
    - working: { node: api }
    - packet: { from: api, to: db }
    - wait: 1
    - idle: { node: api }
    - reset: true
Pulse & highlight flow
pulse ripples a node on arrival; highlight briefly tints it. Both take an optional color.
flow: steps: - pulse: { node: cache }
meta: { direction: LR }
nodes: [ { id: api, title: API }, { id: cache, title: Cache, kind: cache } ]
edges: [ { from: api, to: cache } ]
flow:
  steps:
    - packet: { from: api, to: cache }
    - pulse: { node: cache }
    - wait: 0.8
    - reset: true
Activate edge flow
activate recolours an edge (and its arrowhead) and keeps it lit until the next reset.
flow: steps: - activate: { from: a, to: b, color: success }
meta: { direction: LR }
nodes: [ { id: a, title: API }, { id: b, title: DB, kind: db } ]
edges: [ { from: a, to: b } ]
flow:
  steps:
    - activate: { from: a, to: b, color: success }
    - wait: 1.2
    - reset: true
Stream edge flow
stream runs continuous flowing dashes along an edge — ongoing traffic — until reset.
flow: steps: - stream: { from: a, to: b }
meta: { direction: LR }
nodes: [ { id: a, title: Producer }, { id: b, title: Consumer } ]
edges: [ { from: a, to: b, kind: async } ]
flow:
  steps:
    - stream: { from: a, to: b, color: info }
    - wait: 2
    - reset: true
Fail flow
fail flashes a node red with a shake and an optional status text — a failure beat.
flow: steps: - fail: { node: db, text: timeout }
meta: { direction: LR }
nodes: [ { id: api, title: API }, { id: db, title: DB, kind: db } ]
edges: [ { from: api, to: db } ]
flow:
  steps:
    - packet: { from: api, to: db }
    - fail: { node: db, text: timeout }
    - wait: 1.2
    - reset: true
Phase flow
phase names a checkpoint in the flow — a label you can seek() to and a beat in the story.
flow: steps: - phase: Request - packet: { from: a, to: b }
meta: { direction: LR }
nodes: [ { id: a, title: Client, kind: user }, { id: b, title: API, kind: gateway } ]
edges: [ { from: a, to: b } ]
flow:
  steps:
    - phase: Request
    - packet: { from: a, to: b }
    - wait: 0.8
    - reset: true
Parallel flow
parallel runs its child steps at the same time — fan a request out to several targets at once.
flow: steps: - parallel: - packet: { from: a, to: b } - packet: { from: a, to: c }
meta: { direction: LR }
nodes: [ { id: a, title: API, kind: gateway }, { id: b, title: DB, kind: db }, { id: c, title: Cache, kind: cache } ]
edges: [ { from: a, to: b }, { from: a, to: c } ]
flow:
  steps:
    - parallel:
        - packet: { from: a, to: b }
        - packet: { from: a, to: c }
    - wait: 0.8
    - reset: true