Introduction

Beck turns a declarative YAML description into a clean, animated diagram. You write the boxes and the lines; Beck handles the layout, the routing, the theming, and the motion — rendered entirely in C#, to a self-animating SVG that adopts your site's own colours.

Four diagram types share one document format and one animation engine: architecture (the layered system diagram below), sequence (lifelines and messages that play the conversation), state (a machine that walks its own transitions), and class (UML cards you can generate straight from your C# types).

It ships as a single .NET NuGet package: a pure-C# engine that renders a ```beck fenced code block to a static, self-animating inline SVG at build time — no client JavaScript — plus a fluent authoring API (DiagramBuilder) for generating that YAML from your real model.

The shape of a diagram

Every Beck document opens with a type:, and only ids are required — everything else has a sensible default. For type: architecture:

type: architecture
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

The other types swap the middle keys for their own vocabulary — participants + messages (sequence), states + transitions (state), classes + relations (class) — and everything around them works the same.

Add an optional flow: block to script the animation; leave it out and Beck derives a sensible one (packets along your edges, the message order of a sequence, a walk through a state machine).

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 grouped by scope. Setup: add Beck to your site or a Pennington site. Architecture diagrams: style nodes, connect and route edges, control the layout, group related nodes. The other types each have one guide: sequence, state, and class. And three guides apply to every type: match your theme, animate the flow, and generate from your code.

Not every guide covers every diagram type — the architecture guides are architecture-first. Here is what carries across:

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.