Beck.Authoring
A fluent, dependency-free API that emits Beck YAML from code. Every diagram starts at one of the four root builders — one per diagram type — and ends with ToYaml() or a fenced ToFence() block. You never construct the rest of the family yourself: each builder arrives inside a configure callback, chains its setters, and hands control back. Each tab below maps one diagram type's family — which method opens which builder — and every card links to its reference.
DiagramBuilder
Builds a Beck diagram from code and emits it as YAML (or a fenced ```beck Markdown block). Dependency-free — any program can turn its own model (an Aspire app graph, an EF model, a service registry, …) into a diagram by walking it into a DiagramBuilder.
new DiagramBuilder()Create an empty diagram.
new DiagramBuilder(string title)Create a diagram with a title.
DiagramBuilder Flow(Action<FlowBuilder> configure)Script the animation (packets, status changes, effects). Omit it and Beck auto-derives a flow from the edges.
DiagramBuilder Node(string id, Action<NodeBuilder>? configure = null)Add a node and configure it via NodeBuilder — title, kind, icon, accent, link, and more.
DiagramBuilder Node(string id, string title, NodeKind? kind = null)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 = null)Connect two nodes (or groups). Configure label, style, curve, kind, color, and arrowheads via EdgeBuilder.
DiagramBuilder Title(string title)Set the diagram title.
DiagramBuilder Subtitle(string subtitle)Set the diagram subtitle.
DiagramBuilder Style(string name)Set the visual style by its meta.style token (e.g. "classic").
DiagramBuilder Style(BeckStyle style)Set the visual style from a BeckStyle (emits its BeckStyle.Name).
DiagramBuilder Direction(Direction direction)Set the layout direction — Direction.Tb (default), Direction.Bt, Direction.Lr, or Direction.Rl.
DiagramBuilder Theme(ThemeMode theme)Set the theme: ThemeMode.Auto (default), ThemeMode.Light, or ThemeMode.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 Fit(FitMode fit)How the diagram behaves when wider than its container: FitMode.Shrink scales it down to fit (default); FitMode.Scroll keeps natural size and scrolls horizontally.
DiagramBuilder Narrate(bool enabled = true, int? wpm = null, double? min = null, double? pad = null)Toggle + tune the narration caption under the diagram. Captions appear only where the flow supplies them (a FlowBuilder.Narrate step or an EdgeBuilder.Note); the pacing knobs turn each caption's length into how long it lingers: wpm reading speed, min floor seconds, pad extra seconds.
DiagramBuilder Spacing(int? rank = null, int? node = null, int? cornerRadius = null)Tune layout spacing: rank gap (along the flow), node gap (across), and corner radius (px).
string ToYaml()Render the diagram as Beck YAML.Throws InvalidOperationException — An edge references a from/to id that is not a declared node or group. Surfacing this here gives a clear C# error instead of an opaque parser failure that blanks the whole diagram in the browser.
string ToFence()Render as a fenced ```beck Markdown block — drop it into any Markdown page and it renders to a static SVG.
Example
var fence = new DiagramBuilder("Web Platform")
.Direction(Direction.TB)
.Node("web", n => n.Title("Web App").Kind(NodeKind.User))
.Node("api", "API Server")
.Node("db", n => n.Title("Postgres").Kind(NodeKind.Db))
.Edge("web", "api")
.Edge("api", "db", e => e.Label("query"))
.ToFence();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.
NodeBuilder Item(string item)Add one bullet to the card's item list.
NodeBuilder Items(params string[] items)Add several bullets to the card's item list at once.
NodeBuilder Title(string title)Set the display title (defaults to the id).
NodeBuilder Subtitle(string subtitle)Set the muted subtitle line.
NodeBuilder Body(string body)Set the wrapped body paragraph rendered under the items.
NodeBuilder Icon(string icon)Set a named icon key or raw inline <svg> markup.
NodeBuilder Kind(NodeKind kind)Set the node archetype (default NodeKind.Service) — picks an icon, accent, and shape.
NodeBuilder Variant(NodeVariant variant)Set the visual weight: NodeVariant.Solid, NodeVariant.Subtle, or NodeVariant.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 color (a hex string, say).
NodeBuilder Width(int px)Fix the card width in pixels (prevents reflow on a status change).
NodeBuilder Rank(int rank)Force the node into a specific layout rank.
NodeBuilder Order(int order)Tie-break order within the rank.
NodeBuilder Group(string groupId)Assign the node to a group inline (alternative to group members).
NodeBuilder Link(string href, string? target = null)Make the card a link. Pass target: "_blank" to open in a new tab.
NodeBuilder Surface(string color)Override the card background (a raw CSS color).
NodeBuilder TextColor(string color)Override the card text color (a raw CSS color).
EdgeBuilder
Configures one edge inside an Edge(from, to, e => …) callback. Endpoints may be node ids or group ids.
EdgeBuilder Label(string label)Set the edge label.
EdgeBuilder Style(EdgeStyle style)Set the line style: EdgeStyle.Solid or EdgeStyle.Dashed.
EdgeBuilder Curve(EdgeCurve curve)Set the routing curve: EdgeCurve.StepRound (default), EdgeCurve.Straight, or EdgeCurve.S.
EdgeBuilder Kind(EdgeKind kind)Set the semantic kind (defaults color + style): EdgeKind.Data, EdgeKind.Control, EdgeKind.Async, or EdgeKind.Dependency.
EdgeBuilder Color(AccentToken token)Set the stroke to a semantic token (follows the theme).
EdgeBuilder Color(string color)Set the stroke to a raw CSS color.
EdgeBuilder Arrow(bool arrow)Toggle the arrowhead (default on). false draws no arrows.
EdgeBuilder Arrows(ArrowEnds ends)Choose which ends carry an arrowhead (e.g. ArrowEnds.Both).
EdgeBuilder Note(string note)Narrate this edge: the text becomes a caption just before the edge's packet in an auto-derived flow (ignored when an explicit Flow is scripted).
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.
GroupBuilder
Configures a labelled, boxed cluster inside a Group(id, g => …) callback. Members may be node ids or other group ids, so groups nest.
GroupBuilder Members(params string[] ids)Add member node (or group) ids.
GroupBuilder Member(string id)Add a single member id.
GroupBuilder Label(string label)Set the group label (defaults to the 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 color.
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.
FlowBuilder Parallel(Action<FlowBuilder> build)Run a group of steps simultaneously.
FlowBuilder Packet(string from, string to, string? color = null, string? label = null, string[]? via = null, PacketEase? ease = null, double? size = null, double? speed = null, bool? glow = null, PacketShape? shape = null, bool? impact = null)Send a packet from one node to another, optionally via waypoints. The motion/look knobs (shape, ease, size, speed, glow, impact) are optional and, when left null, fall back to the traversed edge's kind defaults.
FlowBuilder Burst(string from, string to, int count = 3, double stagger = 0.12, string? color = null, string? label = null, PacketEase? ease = null, double? size = null, double? speed = null, bool? glow = null, PacketShape? shape = null, bool? impact = null)Emit a burst of count dots down an edge with a stagger delay between them — a batch or a load spike.
FlowBuilder Burst(string from, IEnumerable<string> to, int count = 3, double stagger = 0.12, string? color = null, string? label = null, PacketEase? ease = null, double? size = null, double? speed = null, bool? glow = null, PacketShape? shape = null, bool? impact = null)Fan a burst out from one source to several targets at once, staggered.
FlowBuilder Status(string node, string text, string? color = null)Set a node's status-pill text (persists until changed).
FlowBuilder Highlight(string node, string? color = null)Briefly highlight a node.
FlowBuilder Pulse(string node, string? color = null)Pulse a node (a ripple on arrival).
FlowBuilder Activate(string from, string to, string? color = null)Persistently recolor an edge (and its arrowhead) until the next reset.
FlowBuilder Stream(string from, string to, string? color = null)Continuous flowing dashes along an edge (ongoing traffic), until reset.
FlowBuilder Working(string node, string? color = null)Leave a node visibly busy (breathing glow) until FlowBuilder.Idle or reset.
FlowBuilder Idle(string node)Clear a node's FlowBuilder.Working state.
FlowBuilder Fail(string node, string? text = null, string? color = null)A failure beat: red shake + flash, with optional status text.
FlowBuilder Narrate(string text, double? hold = null, string? color = null)Update the narration caption under the diagram and hold long enough to read it. hold overrides the length-derived reading time (seconds); color tints the caption text. Requires narration to be on (the default) — see the builder's Narrate meta setter.
FlowBuilder Phase(string label)A named seek label (lets the handle's seek(label) jump here).
FlowBuilder Wait(double seconds)Pause for a number of seconds.
FlowBuilder Reset()Reset the diagram to its initial state.
FlowBuilder Repeat(int repeat)Repeat count: -1 loops forever (default), 0 plays once.
FlowBuilder RepeatDelay(double seconds)Delay between repeats, in seconds.
Example
new DiagramBuilder("Read path")
.Node("client", "Client").Node("api", "API").Node("db", n => n.Kind(NodeKind.Db))
.Edge("client", "api").Edge("api", "db")
.Flow(f => f
.Packet("client", "api", label: "GET /item")
.Working("db")
.Packet("api", "db", color: "info")
.Idle("db")
.Packet("db", "api", color: "success")
.Wait(1))
.ToFence();SequenceDiagramBuilder
Builds a type: sequence Beck diagram — participants become columns, messages become rows in call order. Request/reply pairs (a SequenceDiagramBuilder.Message answered by a SequenceDiagramBuilder.Reply) grow activation bars on the receiver automatically; SequenceDiagramBuilder.Section inserts a labelled band. Without an explicit flow the message order is the animation.
new SequenceDiagramBuilder()Create an empty sequence diagram.
new SequenceDiagramBuilder(string title)Create a sequence diagram with a title.
SequenceDiagramBuilder Participant(string id, Action<NodeBuilder>? configure = null)Add a participant (a lifeline column) and configure it via NodeBuilder — participants take the same fields as architecture nodes.
SequenceDiagramBuilder Participant(string id, string title, NodeKind? kind = null)The terse overload: add a participant with a title and an optional kind.
SequenceDiagramBuilder Message(string from, string to, string? label = null, Action<MessageBuilder>? configure = null)Send a message. from equal to to draws a self-message loop.Throws InvalidOperationException — An endpoint isn't a declared participant — a typo fails loudly in C# instead of blanking the diagram.
SequenceDiagramBuilder Reply(string from, string to, string? label = null, Action<MessageBuilder>? configure = null)Send a reply — dashed with an open arrowhead; closes the receiver's activation bar.Throws InvalidOperationException — An endpoint isn't a declared participant.
SequenceDiagramBuilder Flow(Action<FlowBuilder> configure)Script the animation flow explicitly. Without this the engine animates the message order.
SequenceDiagramBuilder Section(string label, AccentToken? accent = null)Insert a labelled full-width section band before the next message. The band runs until the next section (or the last message); the optional accent tints its border, fill, and label. Each section also becomes a seekable phase.
SequenceDiagramBuilder Title(string title)Set the diagram title.
SequenceDiagramBuilder Subtitle(string subtitle)Set the diagram subtitle.
SequenceDiagramBuilder Style(string name)Set the visual style by its meta.style token (e.g. "classic").
SequenceDiagramBuilder Style(BeckStyle style)Set the visual style from a BeckStyle (emits its BeckStyle.Name).
SequenceDiagramBuilder Theme(ThemeMode theme)Set the theme: ThemeMode.Auto (default), ThemeMode.Light, or ThemeMode.Dark.
SequenceDiagramBuilder Animate(bool animate)Enable or disable the flow animation.
SequenceDiagramBuilder Loop(bool loop)Loop the flow (default) or play it through once.
SequenceDiagramBuilder Fit(FitMode fit)How the diagram behaves when wider than its container.
SequenceDiagramBuilder Narrate(bool enabled = true, int? wpm = null, double? min = null, double? pad = null)Toggle + tune the narration caption. Captions come from a message MessageBuilder.Note (or explicit FlowBuilder.Narrate steps); the knobs pace each caption's on-screen time by its length.
SequenceDiagramBuilder Spacing(int? rank = null, int? node = null, int? cornerRadius = null)Tune spacing: node is the minimum gap between lifelines.
string ToYaml()Render the diagram as Beck YAML.Throws InvalidOperationException — The diagram has no participants or no messages.
string ToFence()Render as a fenced ```beck Markdown block — drop it into any Markdown page and it renders to a static SVG.
Example
var fence = new SequenceDiagramBuilder("Checkout")
.Participant("web", "Web App", NodeKind.User)
.Participant("api", "Orders API")
.Participant("db", p => p.Title("Postgres").Kind(NodeKind.Db))
.Message("web", "api", "POST /orders")
.Message("api", "db", "INSERT order")
.Reply("db", "api", "ok")
.Reply("api", "web", "201 Created")
.ToFence();MessageBuilder
Configures one sequence message inside a Message(from, to, label, m => …) callback.
MessageBuilder Label(string label)Set the message label (drawn above the arrow).
MessageBuilder Kind(EdgeKind kind)Set the semantic kind — EdgeKind.Async renders dashed with an open arrowhead and eased packet motion.
MessageBuilder Style(EdgeStyle style)Override the line style: EdgeStyle.Solid or EdgeStyle.Dashed.
MessageBuilder Color(AccentToken token)Set the stroke to a semantic token (follows the theme).
MessageBuilder Color(string color)Set the stroke to a raw CSS color.
MessageBuilder Activate(bool activate)Force (true) or suppress (false) an activation bar on the receiver.
MessageBuilder Note(string note)Narrate this message: the text becomes a caption just before the message fires (in the derived flow), while the sequence choreography still plays.
StateDiagramBuilder
Builds a type: state Beck diagram — a state machine of pills and labelled transitions. Transitions auto-create the states they mention, so State() is only needed to refine a state's title or accent; StateDiagramBuilder.Initial and StateDiagramBuilder.Final wire the [*] pseudo-state (the UML entry dot and exit bullseye) for you.
new StateDiagramBuilder()Create an empty state diagram.
new StateDiagramBuilder(string title)Create a state diagram with a title.
StateDiagramBuilder State(string id, Action<StateBuilder>? configure = null)Declare a state and refine it via StateBuilder — title, accent, subtitle. Undeclared states still render as plain pills.
StateDiagramBuilder State(string id, string title, AccentToken? accent = null)The terse overload: declare a state with a title and an optional accent.
StateDiagramBuilder Transition(string from, string to, string? label = null, Action<TransitionBuilder>? configure = null)Add a transition (states are auto-created as needed). from equal to to draws a self-transition loop.
StateDiagramBuilder Flow(Action<FlowBuilder> configure)Script the animation explicitly. Without this the engine walks the transitions in machine order.
StateDiagramBuilder Initial(string stateId)Draw the entry dot into a state — shorthand for a transition from [*].
StateDiagramBuilder Final(string stateId, string? label = null)Draw the exit bullseye from a state — shorthand for a transition to [*], with an optional label.
StateDiagramBuilder Title(string title)Set the diagram title.
StateDiagramBuilder Subtitle(string subtitle)Set the diagram subtitle.
StateDiagramBuilder Style(string name)Set the visual style by its meta.style token (e.g. "classic").
StateDiagramBuilder Style(BeckStyle style)Set the visual style from a BeckStyle (emits its BeckStyle.Name).
StateDiagramBuilder Direction(Direction direction)Set the layout direction — Direction.Tb (default) reads like a lifecycle, Direction.Lr like a pipeline.
StateDiagramBuilder Theme(ThemeMode theme)Set the theme: ThemeMode.Auto (default), ThemeMode.Light, or ThemeMode.Dark.
StateDiagramBuilder Animate(bool animate)Enable or disable the flow animation.
StateDiagramBuilder Loop(bool loop)Loop the flow (default) or play it through once.
StateDiagramBuilder Fit(FitMode fit)How the diagram behaves when wider than its container.
StateDiagramBuilder Narrate(bool enabled = true, int? wpm = null, double? min = null, double? pad = null)Toggle + tune the narration caption. Captions come from a transition TransitionBuilder.Note (or explicit FlowBuilder.Narrate steps); the knobs pace each caption's on-screen time by its length.
StateDiagramBuilder Spacing(int? rank = null, int? node = null, int? cornerRadius = null)Tune layout spacing: rank gap (along the flow), node gap (across), and corner radius (px).
string ToYaml()Render the diagram as Beck YAML.Throws InvalidOperationException — The diagram has no states and no transitions.
string ToFence()Render as a fenced ```beck Markdown block — drop it into any Markdown page and it renders to a static SVG.
Example
var fence = new StateDiagramBuilder("Order Lifecycle")
.Direction(Direction.LR)
.State("review", s => s.Title("In Review").Accent(AccentToken.Warn))
.Initial("draft")
.Transition("draft", "review", "submit")
.Transition("review", "draft", "reject")
.Transition("review", "published", "approve")
.Final("published")
.ToFence();StateBuilder
Refines a single state inside a State(id, s => …) callback. States a transition mentions but you never declare keep their auto-created pill.
StateBuilder Title(string title)Set the display title (defaults to the id).
StateBuilder Subtitle(string subtitle)Set the muted subtitle line.
StateBuilder Accent(AccentToken token)Set the accent to a semantic token (follows the theme).
StateBuilder Accent(string color)Set the accent to a raw CSS color.
StateBuilder Width(int px)Fix the pill width in pixels.
StateBuilder Rank(int rank)Force the state into a specific layout rank.
StateBuilder Order(int order)Tie-break order within the rank.
TransitionBuilder
Configures one transition inside a Transition(from, to, label, t => …) callback.
TransitionBuilder Label(string label)Set the transition label (the event or guard).
TransitionBuilder Style(EdgeStyle style)Override the line style: EdgeStyle.Solid or EdgeStyle.Dashed.
TransitionBuilder Color(AccentToken token)Set the stroke to a semantic token (follows the theme).
TransitionBuilder Color(string color)Set the stroke to a raw CSS color.
TransitionBuilder Note(string note)Narrate this transition: the text becomes a caption just before the transition fires in an auto-derived flow (ignored when a Flow is scripted).
ClassDiagramBuilder
Builds a type: class Beck diagram — UML class cards (name, fields, methods) joined by inheritance / composition / association relations. Build cards by hand with ClassDiagramBuilder.Class, or reflect real CLR types with ClassDiagramBuilder.FromTypes so the diagram can never drift from the code: ClassDiagramBuilder.FromTypes(typeof(Order), typeof(Customer)).ToFence().
new ClassDiagramBuilder()Create an empty class diagram.
new ClassDiagramBuilder(string title)Create a class diagram with a title.
static ClassDiagramBuilder FromTypes(params Type[] types)Reflect CLR types into cards and infer the relations among them — base types become inherits, interfaces implements, property types labelled associations (collections get a * multiplicity), enums «enum» cards. Types outside the set are ignored, so the diagram stays scoped to what you pass in.
ClassDiagramBuilder Class(string id, Action<ClassBuilder>? configure = null)Add a class card and configure it via ClassBuilder — name, stereotype, fields, methods.
ClassDiagramBuilder Class(string id, string name)The terse overload: add a class card with a display name.
ClassDiagramBuilder Group(string id, Action<GroupBuilder> configure)Add a labelled boundary — a namespace or module box around related classes.
ClassDiagramBuilder Flow(Action<FlowBuilder> configure)Script the animation explicitly. Without this each inheritance level lights up in turn.
ClassDiagramBuilder Inherits(string child, string parent)Child extends parent — solid line, hollow triangle at the parent.
ClassDiagramBuilder Implements(string child, string iface)Class implements an interface — dashed line, hollow triangle at the interface.
ClassDiagramBuilder Association(string from, string to, string? label = null, string? fromCard = null, string? toCard = null)A plain directed association, with optional multiplicities at each end.
ClassDiagramBuilder Aggregation(string whole, string part, string? label = null, string? fromCard = null, string? toCard = null)Whole–part where the part outlives the whole — hollow diamond at the whole.
ClassDiagramBuilder Composition(string whole, string part, string? label = null, string? fromCard = null, string? toCard = null)Whole–part where the part's lifetime is owned — filled diamond at the whole.
ClassDiagramBuilder DependsOn(string from, string to, string? label = null)A usage dependency — dashed line, open arrowhead.
ClassDiagramBuilder Relation(string from, string to, RelationKind kind, string? label, string? fromCard = null, string? toCard = null)The general form the named relation methods delegate to.
ClassDiagramBuilder AddTypes(params Type[] types)Reflect more types into an existing builder — the instance form of ClassDiagramBuilder.FromTypes. Base type → RelationKind.Inherits, directly implemented interfaces → RelationKind.Implements, property types → RelationKind.Association (collections get a * multiplicity). Types outside the set are ignored, so the diagram stays scoped to what you pass in.
ClassDiagramBuilder Title(string title)Set the diagram title.
ClassDiagramBuilder Subtitle(string subtitle)Set the diagram subtitle.
ClassDiagramBuilder Style(string name)Set the visual style by its meta.style token (e.g. "classic").
ClassDiagramBuilder Style(BeckStyle style)Set the visual style from a BeckStyle (emits its BeckStyle.Name).
ClassDiagramBuilder Direction(Direction direction)Set the layout direction — Direction.Tb (default) reads the hierarchy top-down.
ClassDiagramBuilder Theme(ThemeMode theme)Set the theme: ThemeMode.Auto (default), ThemeMode.Light, or ThemeMode.Dark.
ClassDiagramBuilder Animate(bool animate)Enable or disable the flow animation.
ClassDiagramBuilder Loop(bool loop)Loop the flow (default) or play it through once.
ClassDiagramBuilder Fit(FitMode fit)How the diagram behaves when wider than its container.
ClassDiagramBuilder Narrate(bool enabled = true, int? wpm = null, double? min = null, double? pad = null)Toggle + tune the narration caption (drive it with explicit FlowBuilder.Narrate steps); the knobs pace each caption's on-screen time by its length.
ClassDiagramBuilder Spacing(int? rank = null, int? node = null, int? cornerRadius = null)Tune layout spacing: rank gap (along the hierarchy), node gap (across), and corner radius (px).
string ToYaml()Render the diagram as Beck YAML.Throws InvalidOperationException — A relation references an id that is not a declared class.
string ToFence()Render as a fenced ```beck Markdown block — drop it into any Markdown page and it renders to a static SVG.
Example
var fence = new ClassDiagramBuilder("Order Model")
.Class("order", c => c.Name("Order").Stereotype("aggregate")
.Field("Status: OrderStatus").Method("Submit()"))
.Class("line", c => c.Name("OrderLine").Field("Sku: string"))
.Composition("order", "line", fromCard: "1", toCard: "*")
.ToFence();ClassBuilder
Configures one UML class card inside a Class(id, c => …) callback. Field and method compartment lines are plain strings, so write them the way your team reads them.
ClassBuilder Field(string field)Add one line to the fields compartment (e.g. "Id: Guid").
ClassBuilder Fields(params string[] fields)Add several field lines at once.
ClassBuilder Method(string method)Add one line to the methods compartment (e.g. "Submit()").
ClassBuilder Methods(params string[] methods)Add several method lines at once.
ClassBuilder Name(string name)Set the display name (defaults to the id).
ClassBuilder Stereotype(string stereotype)Set the «stereotype» line above the name — interface, abstract, enum, aggregate, anything.
ClassBuilder Accent(AccentToken token)Set the accent to a semantic token (follows the theme).
ClassBuilder Accent(string color)Set the accent to a raw CSS color.
ClassBuilder Link(string href, string? target = null)Make the card a link — to the type's source or docs, say.
ClassBuilder Group(string groupId)Assign the class to a namespace group inline.
ClassBuilder Width(int px)Fix the card width in pixels.
ClassBuilder Rank(int rank)Force the class into a specific layout rank.
ClassBuilder Order(int order)Tie-break order within the rank.