Connect and route edges

This guide shows you how to connect nodes and control exactly how the lines between them look and route — their meaning, style, curve, arrowheads, colour, and where they attach.

Note

This guide covers architecture edges. The other diagram types connect their boxes with their own constructs — sequence messages, state transitions, and class relations — and edge kinds, curves, arrowheads, and pinned sides are architecture-only.

Connect two nodes

To draw a line, add an edge with a from and a to. Both must reference a declared node id. Add an optional label to say what travels along it.

yaml

type: architecture
meta: { direction: LR }
nodes:
  - { id: web, title: Web App, kind: user }
  - { id: api, title: API, kind: gateway }
  - { id: db, title: Postgres, kind: db }
edges:
  - { from: web, to: api }
  - { from: api, to: db, label: queries }
  

beck

Give an edge meaning

Set kind to convey what the connection is. Each kind carries a default line style and packet motion, so a diagram reads consistently without you styling every edge by hand.

data (default) — a solid request/response line.
control — a solid command/orchestration line.
async — rendered dashed, for fire-and-forget messaging.
dependency — rendered dashed and neutral-coloured, for "relies on" links that aren't live traffic.

yaml

type: architecture
meta: { direction: LR }
nodes:
  - { id: api, title: API, kind: gateway }
  - { id: queue, title: Events, kind: queue }
  - { id: db, title: Postgres, kind: db }
edges:
  - { from: api, to: queue, kind: async, label: publish }
  - { from: api, to: db, kind: dependency }
  

beck

Force a line style

If you want a solid or dashed line regardless of kind, set style directly. This overrides the kind's default — useful when you want a data edge dashed, or an async edge solid.

yaml

type: architecture
meta: { direction: LR }
nodes:
  - { id: a, title: Service A }
  - { id: b, title: Service B }
edges:
  - { from: a, to: b, style: dashed, label: optional }
  

beck

Choose a curve

The curve controls the routing shape:

step-round (default) — orthogonal segments with rounded corners; the best default for layered diagrams.
straight — a direct line; reads well for short, adjacent hops.
s — a smooth S-bend; good for a single edge that crosses ranks and would otherwise look stiff.

yaml

type: architecture
meta: { direction: LR }
nodes:
  - { id: lb, title: Load Balancer, icon: lb }
  - { id: a, title: Node A }
  - { id: b, title: Node B }
edges:
  - { from: lb, to: a, curve: straight }
  - { from: lb, to: b, curve: s }
  

beck

Arrowheads

Set arrow to control which ends are tipped: end (default), start, both, or none. The boolean shorthand true means end and false means none — handy when authoring from code.

yaml

type: architecture
meta: { direction: LR }
nodes:
  - { id: a, title: Primary, kind: db }
  - { id: b, title: Replica, kind: db }
  - { id: c, title: Peer }
edges:
  - { from: a, to: b, label: replicate }
  - { from: a, to: c, arrow: both }
  

beck

Colour an edge

Use color to override the edge's tint. Pass an accent token (primary, success, warn, danger, info, neutral) to follow the theme in light and dark, or a raw CSS colour to fix it regardless of theme.

yaml

type: architecture
meta: { direction: LR }
nodes:
  - { id: api, title: API, kind: gateway }
  - { id: ok, title: Success }
  - { id: err, title: Error }
edges:
  - { from: api, to: ok, color: success }
  - { from: api, to: err, color: danger }
  

beck

Tip

Prefer tokens over raw colours so your edges adapt when the diagram switches theme. See Match your theme and colours.

Narrate a hop

Give an edge a note: and Beck captions the animation with it — the text appears in a bar under the diagram just before the edge's packet travels, when the flow is derived rather than scripted. It's the one-line way to explain why a connection fires. See Narrate the story for pacing and the scripted narrate step.

Nudge the routing

Beck auto-routes edges and the default is usually right, so reach for this only when a line leaves or enters somewhere awkward. Pin the anchor with fromSide and toSide, each one of top, bottom, left, or right.

yaml

type: architecture
meta: { direction: LR }
nodes:
  - { id: api, title: API, kind: gateway }
  - { id: cache, title: Redis, kind: cache }
  - { id: db, title: Postgres, kind: db }
edges:
  - { from: api, to: cache, toSide: top }
  - { from: api, to: db, toSide: bottom }
  

beck

Draw to a whole group

An edge's from or to may be a group id as well as a node id. Beck routes the line to the group's box, which is the clean way to show "this talks to everything in here" without a line per member.

yaml

type: architecture
meta: { direction: TB }
nodes:
  - { id: gw, title: API Gateway, kind: gateway }
  - { id: auth, title: Auth }
  - { id: orders, title: Orders }
groups:
  - { id: services, label: Services, members: [auth, orders], accent: primary }
edges:
  - { from: gw, to: services, label: routes }
  

beck

See Group related nodes for how membership and nesting work.

For the complete list of edge fields, defaults, and accepted values, see the YAML schema reference. To try variations live, open the playground.