Diagrams as code · for .NET

Nice looking software diagrams

Write your architecture, sequence, state, or class diagram in a few lines of YAML. Beck lays it out, routes the edges, and renders an animated SVG — at build time, with no JavaScript on the page.

Get started → Open playground

$ dotnet add package Beck copy

launch-sequence.beck.yaml BeckSvg.Render(yaml)

type: architecture
meta:
  title: T-minus ten seconds
  direction: TB
nodes:
  - { id: control, title: Mission Control, subtitle: go / no-go, kind: user, status: HOLD, width: 210 }
  - { id: fuel, title: Fuel, subtitle: LOX + RP-1, kind: db, accent: info }
  - { id: guidance, title: Guidance, subtitle: gimbal + nav, kind: gateway }
  - { id: ignition, title: Ignition, subtitle: main engines, accent: warn }
  - { id: rocket, title: Rocket, subtitle: 7.5 million lbf, kind: external, status: on pad }
groups:
  - { id: seq, label: Launch sequencer, members: [fuel, guidance, ignition], accent: primary }
edges:
  - { from: control, to: fuel, kind: control }
  - { from: control, to: guidance, kind: control }
  - { from: control, to: ignition, kind: control, label: go }
  - { from: fuel, to: rocket, label: pressurize }
  - { from: guidance, to: rocket, kind: async }
  - { from: ignition, to: rocket, label: ignite }
flow:
  steps:
    - narrate: T-minus ten. Guidance is internal.
    - burst: { from: control, to: [fuel, guidance, ignition], count: 2 }
    - parallel:
        - working: { node: fuel }
        - working: { node: guidance }
    - status: { node: control, text: GO, color: success }
    - narrate: Tanks pressurized. All systems go.
    - stream: { from: fuel, to: rocket, color: info }
    - packet: { from: guidance, to: rocket }
    - narrate: { text: Three… two… one…, hold: 2 }
    - working: { node: ignition, color: warn }
    - packet: { from: ignition, to: rocket, label: ignite, color: warn, shape: ring, impact: true }
    - status: { node: rocket, text: LIFTOFF, color: success }
    - parallel:
        - pulse: { node: rocket, color: warn }
        - highlight: { node: rocket }
    - narrate: { text: We have liftoff., color: success }
    - wait: 2
    - reset:

the yaml on the left is the animation on the right — a static SVG, pure CSS, zero JavaScript. view source.

Why you might want this

One inline SVG out	Layout, edge routing, and the whole animation are compiled into a single self-contained <svg>. The motion is plain CSS keyframes — it plays with JavaScript disabled.
No npm, no client runtime	Everything happens in C# at render time. There is no bundler, no node toolchain, and nothing to hydrate — dotnet build is the whole pipeline.
Picks up your site's colors	Every color in the SVG is a CSS variable with a fallback. Drop a diagram into your site and it adopts your palette — dark mode included — without re-rendering anything.
Deterministic output	Same YAML in, byte-identical SVG out. Committed diagrams diff cleanly in pull requests instead of churning on every build.
Four diagram types	Architecture, sequence, state, and class diagrams share one schema for titles, theming, and flow animation — learn it once.
Author from C# too	A fluent builder API emits the same YAML, and ClassDiagramBuilder.FromTypes reflects a class diagram straight out of your assemblies.
Runs wherever .NET runs	Render at build time in a static site, per-request in ASP.NET, or in the browser — the playground on this site is the same engine compiled to WebAssembly.
One dependency	The Beck package depends only on YamlDotNet. Text measurement uses embedded font metrics; add Beck.Skia if you want exact SkiaSharp measurement with your own fonts.

Start diagramming in five minutes.

Add the package, write a few lines of YAML, and render your first diagram. No accounts, no canvas wrangling, no client JavaScript.

Read the guide Open the playground

Beck grew out of abergs/animations by Anders Åberg — the GSAP-animated architecture-diagram experiment that was the inspiration and jumping-off point for this project.