Introduction

Beck turns a declarative YAML description of your system into a clean, animated architecture diagram. You write the boxes and the lines; Beck handles the layout, the routing, the theming, and the motion — and renders it live in the browser, in your site's own colours.

It ships as a single .NET NuGet package: a prebuilt engine that hydrates a ```beck fenced code block into a diagram, plus Beck.Authoring, a C# API for generating that YAML from your real model.

meta: { title: Web platform, direction: LR }
nodes:
  - { id: user, title: Client, kind: user }
  - { id: gw, title: API Gateway, kind: gateway }
  - { id: orders, title: Orders }
  - { id: db, title: Postgres, kind: db }
  - { id: bus, title: Events, kind: queue }
groups:
  - { id: svc, label: Services, members: [orders], accent: primary }
edges:
  - { from: user, to: gw }
  - { from: gw, to: orders }
  - { from: orders, to: db, label: query }
  - { from: orders, to: bus, label: publish, kind: async }

The shape of a diagram

Every Beck document has up to four top-level keys. Only node ids are required — everything else has a sensible default.

meta:    # title, direction, theme, spacing  (all optional)
nodes:   # the boxes — each needs an id
groups:  # optional labelled boundaries around nodes
edges:   # the connections — each is a from/to pair

Add an optional flow: block to script the animation; leave it out and Beck derives a sensible one from your edges.

Where to go next

Learn by doing. Start with Your first diagram to build one block by block, then Author a diagram in C# to generate one from code.

Get something done. The how-to guides are task-focused: add Beck to your site or a Pennington site, style your nodes, connect and route edges, control the layout, group related nodes, match your theme, animate the flow, or generate diagrams from your code.

Look something up. The YAML schema and flow & animation references list every field and option. For a visual tour of every construct see the syntax cheatsheet; for the C# builder, the API reference. Or just open the playground and start typing.