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 }
Title & subtitle
nodes
Add a subtitle for a muted second line — a version, a technology, a note.
nodes:
- { id: db, title: Postgres,
subtitle: primary }
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 }
Status pill
nodes
status renders a small pill on the card, tinted with the node's accent.
nodes:
- { id: api, title: API,
status: healthy }
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 }
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 }
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 }
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 }
Bidirectional
edges
Set arrow: both for a two-way connection. Other values: start, end (default), none.
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 }
Async edge
edges
kind: async renders a dashed edge — handy for message buses and events.
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 }
Edge colour
edges
color recolours an edge and its arrowhead — an accent token or any CSS colour.
edges:
- { from: a, to: b,
color: danger }
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 }
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] }
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] }
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 }
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 }
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 }
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 }
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 }
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 }
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 }
Spacing
layout
meta.spacing tunes the gaps: rank (along the flow), node (across), and cornerRadius.
meta:
spacing:
rank: 64
node: 48
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 }
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 }
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 }
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 }
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 }
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 }
Working state
flow
working leaves a node visibly busy (a breathing glow) until idle or reset.
flow:
steps:
- working: { node: api }
- idle: { node: api }
Pulse & highlight
flow
pulse ripples a node on arrival; highlight briefly tints it. Both take an optional color.
flow:
steps:
- pulse: { node: cache }
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 }
Stream edge
flow
stream runs continuous flowing dashes along an edge — ongoing traffic — until reset.
flow:
steps:
- stream: { from: a,
to: b }
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 }
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 }
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 }
Sequence diagram
type: sequence
participants are columns; messages are rows, in authored order. The message order is the animation.
type: sequence
participants:
- { id: web, kind: user }
- { id: api }
messages:
- { from: web, to: api,
label: POST /orders }
Reply & activation
messages
reply: true draws a dashed return with an open arrowhead and closes the receiver's activation bar.
messages:
- { from: api, to: db,
label: INSERT }
- { from: db, to: api,
label: ok, reply: true }
Self-message & section
messages
A message to yourself draws a loop; a - section: entry inserts a labelled band.
messages:
- { from: api, to: api,
label: validate }
- section: Payment
Async message
messages
kind: async renders dashed with an open arrowhead and slow, eased packet motion — fire-and-forget events.
messages:
- { from: api, to: bus,
label: OrderPlaced,
kind: async }
State diagram
type: state
transitions auto-create their states; "[*]" is the entry dot / exit bullseye.
type: state
transitions:
- { from: "[*]", to: draft }
- { from: draft, to: live,
label: publish }
Refined states
states
Declare a state only to refine it — a title, an accent, a subtitle.
states:
- { id: review,
title: In Review,
accent: warn }
Self-transition
transitions
A transition from a state to itself draws a compact loop — retries, heartbeats, re-entrant states.
transitions:
- { from: retrying, to: retrying,
label: backoff }
Class diagram
type: class
Classes are cards with «stereotype», fields, and methods compartments.
type: class
classes:
- id: order
name: Order
fields: ["Total: Money"]
methods: ["Submit()"]
Inheritance & composition
relations
inherits draws a hollow triangle at the parent; composition a filled diamond at the whole.
relations:
- { from: order, to: entity,
kind: inherits }
- { from: order, to: line,
kind: composition,
fromCard: "1", toCard: "*" }
Implements & dependency
relations
implements draws a dashed hollow triangle at the interface; dependency a dashed open arrowhead.
relations:
- { from: svc, to: iface,
kind: implements }
- { from: svc, to: mailer,
kind: dependency }
Namespace groups
groups
groups work in class diagrams too — labelled namespace or module boxes around related cards.
groups:
- { id: domain, label: Domain,
members: [order, line] }