Beck
API / Beck.Authoring / DiagramBuilder
class

DiagramBuilder

A dependency-free fluent builder that turns code into Beck YAML — or a fenced ```beck Markdown block. Walk any model (an Aspire app graph, an EF model, a service registry) into one and emit a diagram.

namespace Beck · assembly Beck.dll

Methods

new DiagramBuilder(string title)

Create a builder, optionally with a diagram title.

DiagramBuilder Title(string title)

Set the diagram title.

DiagramBuilder Subtitle(string subtitle)

Set the muted second heading line.

DiagramBuilder Direction(Direction direction)

Set the layout direction — TB (default), BT, LR, or RL.

DiagramBuilder Theme(ThemeMode theme)

Set the theme: Auto (default), Light, or Dark.

DiagramBuilder Animate(bool animate)

Enable or disable the flow animation.

DiagramBuilder Loop(bool loop)

Loop the flow (default) or play it through once.

DiagramBuilder Spacing(int? rank, int? node, int? cornerRadius)

Tune layout spacing: rank gap (along the flow), node gap (across), and corner radius in px.

DiagramBuilder Node(string id, Action<NodeBuilder> configure)

Add a node and configure it via NodeBuilder — title, kind, icon, accent, link, and more.

DiagramBuilder Node(string id, string title, NodeKind? kind)

The terse overload: add a node with a title and an optional kind.

DiagramBuilder Group(string id, Action<GroupBuilder> configure)

Add a labelled, boxed cluster. Members may be node ids or other group ids — groups nest to any depth.

DiagramBuilder Edge(string from, string to, Action<EdgeBuilder> configure)

Connect two nodes (or groups). Configure label, style, curve, kind, color, and arrowheads.

DiagramBuilder Flow(Action<FlowBuilder> configure)

Script the animation. Omit it and Beck auto-derives a flow from the edges.

string ToYaml()

Render the diagram as Beck YAML. Throws if an edge endpoint isn't a declared node or group id.

string ToFence()

Render as a fenced ```beck Markdown block — the client renders it on any page.

Example

Program.cscopy
var fence = new DiagramBuilder("Web Platform") .Direction(Direction.TB) .Node("web", n => n.Title("Web App").Kind(NodeKind.User)) .Node("api", "API Server") .Edge("web", "api") .ToFence(); // drop straight into a .md file
API / Beck.Authoring / NodeBuilder
class

NodeBuilder

Configures a single node inside a Node(id, n => …) callback. Every method returns the same builder, so calls chain. Unset fields fall back to the node kind's defaults.

namespace Beck · configured via DiagramBuilder.Node

Methods

NodeBuilder Title(string title)

Set the display title (defaults to the id).

NodeBuilder Subtitle(string subtitle)

Set the muted subtitle line.

NodeBuilder Icon(string icon)

Set a named icon key or raw inline <svg> markup.

NodeBuilder Kind(NodeKind kind)

Set the archetype (default Service) — picks an icon, accent, and shape.

NodeBuilder Variant(NodeVariant variant)

Set the visual weight: Solid, Subtle, or Ghost.

NodeBuilder Status(string status)

Set the initial status-pill text.

NodeBuilder Accent(AccentToken token)

Set the accent to a semantic token (follows the theme).

NodeBuilder Accent(string color)

Set the accent to a raw CSS colour (a hex string, say).

NodeBuilder Width(int px)

Fix the card width in px (prevents reflow on a status change).

NodeBuilder Rank(int rank)

Force the node into a specific layout rank.

NodeBuilder Order(int order)

Tie-break the node's order within its rank.

NodeBuilder Group(string groupId)

Assign the node to a group inline (alternative to group members).

NodeBuilder Link(string href, string? target)

Make the card a link. Pass "_blank" to open in a new tab.

NodeBuilder Surface(string color)

Override the card background (a raw CSS colour).

NodeBuilder TextColor(string color)

Override the card text colour (a raw CSS colour).

API / Beck.Authoring / EdgeBuilder
class

EdgeBuilder

Configures one edge inside an Edge(from, to, e => …) callback. Endpoints may be node ids or group ids.

namespace Beck · configured via DiagramBuilder.Edge

Methods

EdgeBuilder Label(string label)

Set the edge label.

EdgeBuilder Style(EdgeStyle style)

Set the line style: Solid or Dashed.

EdgeBuilder Curve(EdgeCurve curve)

Set the routing curve: StepRound (default), Straight, or S.

EdgeBuilder Kind(EdgeKind kind)

Set the semantic kind (defaults colour + style): Data, Control, Async, Dependency.

EdgeBuilder Color(AccentToken token)

Set the stroke to a semantic token.

EdgeBuilder Color(string color)

Set the stroke to a raw CSS colour.

EdgeBuilder Arrow(bool arrow)

Toggle the arrowhead (default on). false draws none.

EdgeBuilder Arrows(ArrowEnds ends)

Choose which ends carry an arrowhead — e.g. ArrowEnds.Both.

EdgeBuilder FromSide(Side side)

Pin the edge's exit side on the source node.

EdgeBuilder ToSide(Side side)

Pin the edge's entry side on the target node.

API / Beck.Authoring / GroupBuilder
class

GroupBuilder

Configures a labelled, boxed cluster inside a Group(id, g => …) callback. Members may be node ids or other group ids, so groups nest.

namespace Beck · configured via DiagramBuilder.Group

Methods

GroupBuilder Label(string label)

Set the group label (defaults to the id).

GroupBuilder Members(params string[] ids)

Add member node (or group) ids.

GroupBuilder Member(string id)

Add a single member id.

GroupBuilder Accent(AccentToken token)

Tint the box + label with a semantic token.

GroupBuilder Accent(string color)

Tint the box + label with a raw CSS colour.

API / Beck.Authoring / FlowBuilder
class

FlowBuilder

Scripts the animation timeline inside a Flow(f => …) callback — packets, status changes, and effects, played in order. Without an explicit flow the engine auto-derives one from the edges.

namespace Beck · configured via DiagramBuilder.Flow

Methods

FlowBuilder Repeat(int repeat)

Repeat count: -1 loops forever (default), 0 plays once.

FlowBuilder RepeatDelay(double seconds)

Delay between repeats, in seconds.

FlowBuilder Packet(string from, string to, string? color, string? label, string[]? via)

Send a packet along an edge, optionally via waypoints, with a colour and label.

FlowBuilder Status(string node, string text, string? color)

Set a node's status-pill text (persists until changed).

FlowBuilder Highlight(string node, string? color)

Briefly highlight a node.

FlowBuilder Pulse(string node, string? color)

Pulse a node — a ripple on arrival.

FlowBuilder Activate(string from, string to, string? color)

Persistently recolour an edge (and its arrowhead) until the next reset.

FlowBuilder Stream(string from, string to, string? color)

Continuous flowing dashes along an edge (ongoing traffic), until reset.

FlowBuilder Working(string node, string? color)

Leave a node visibly busy (a breathing glow) until Idle or reset.

FlowBuilder Idle(string node)

Clear a node's Working state.

FlowBuilder Fail(string node, string? text, string? color)

A failure beat: red shake + flash, with optional status text.

FlowBuilder Phase(string label)

A named seek label, so the handle's seek(label) can jump here.

FlowBuilder Wait(double seconds)

Pause for a number of seconds.

FlowBuilder Reset()

Reset the diagram to its initial state.

FlowBuilder Parallel(Action<FlowBuilder> build)

Run a group of steps simultaneously.

Example

Program.cscopy
new DiagramBuilder("Read path") .Node("api", "API").Node("db", n => n.Kind(NodeKind.Db)) .Edge("api", "db") .Flow(f => f .Packet("api", "db", label: "SELECT") .Working("db").Wait(1).Idle("db") .Packet("db", "api", color: "success")) .ToFence();
API / Beck (client) / BeckAssets
class

BeckAssets

Locations and snippets for wiring the Beck client into an ASP.NET Core host. The package serves the prebuilt engine as a static web asset, so a consumer only includes one script in the page head.

namespace Beck · static

Members

const string ScriptPath

The static web asset path the client is served at — /_content/Beck/beck.global.js. Root-relative, so it resolves from any page depth and survives sub-path deploys.

static string ScriptTag

A ready-to-inject <script defer> tag for the page head — e.g. via a Pennington AdditionalHtmlHeadContent.

API / Beck (client) / <beck-diagram>
element

<beck-diagram>

A custom element that renders a Beck diagram in light DOM, so it adopts the host page's styles and palette. Put the YAML in a <script type="application/yaml"> child, or point src at a YAML file. The engine also hydrates any fenced ```beck code block automatically — which is what ToFence() emits — so most pages never touch the element directly.

registered by · _content/Beck/beck.global.js
page.htmlcopy
<beck-diagram mode="auto"> <script type="application/yaml"> nodes: - { id: api, title: API } </script> </beck-diagram>

Authoring more than a snippet? The Generate diagrams from your code guide walks your real model into the full builder and keeps the diagram in sync in CI.