Draw a class diagram

A type: class document draws UML class cards — a «stereotype» and name header over field and method compartments — joined by relations with the classic end markers: hollow triangles for inheritance, diamonds for composition, dashed open arrows for dependencies. And because Beck ships with a C# authoring API, you can generate the entire diagram from your real types and never let it drift.

Classes

Each class needs an id; name, stereotype, fields, and methods fill the card. Compartment lines are plain strings, so write them the way your team reads them:

yaml

type: class
classes:
  - id: order
    name: Order
    stereotype: aggregate
    fields: ["Status: OrderStatus", "Total: Money"]
    methods: ["AddLine(sku, qty)", "Submit()"]
  - id: line
    name: OrderLine
    fields: ["Sku: string", "Qty: int"]
relations:
  - { from: order, to: line, kind: composition, fromCard: "1", toCard: "*" }

beck

That relation is a composition — filled diamond at the whole (from), with fromCard/toCard multiplicities at the ends.

Relations

Six kinds, each with its UML rendering. Directions follow the way you'd say it aloud: Order inherits Entity, Order depends on IOrderNotifier, Order is composed of OrderLines:

yaml

type: class
classes:
  - id: entity
    name: Entity
    stereotype: abstract
    accent: neutral
    fields: ["Id: Guid"]
  - id: order
    name: Order
    fields: ["Total: Money"]
  - id: customer
    name: Customer
    accent: info
    fields: ["Name: string"]
  - id: notifier
    name: IOrderNotifier
    stereotype: interface
    accent: info
    methods: ["OrderPlaced(order)"]
relations:
  - { from: order, to: entity, kind: inherits }
  - { from: customer, to: entity, kind: inherits }
  - { from: order, to: customer, kind: association, label: placed by, toCard: "1" }
  - { from: order, to: notifier, kind: dependency, label: raises }

beck

kind	write it as	draws
`inherits`	child → parent	solid line, hollow triangle at the parent
`implements`	class → interface	dashed line, hollow triangle at the interface
`association`	source → target	solid line, arrowhead at the target
`aggregation`	whole → part	hollow diamond at the whole
`composition`	whole → part	filled diamond at the whole
`dependency`	source → target	dashed line, open arrowhead

Parents always rank above children — inherits and implements are flipped internally so the hierarchy reads top-down without you thinking about layout. groups work here too, as namespace boxes.

Generate it from your C# types

Hand-written class diagrams rot. The ClassDiagramBuilder in Beck.Authoring reflects real CLR types into cards and infers the relations among them — base types become inherits, interfaces become implements, property types become labelled associations (collections get a * multiplicity), and enums become «enum» cards:

csharp

string fence = ClassDiagramBuilder
    .FromTypes(typeof(Entity), typeof(Order), typeof(OrderLine), typeof(Customer), typeof(OrderStatus))
    .Title("Order Model")
    .ToFence();   // ```beck … ``` — drop it into any Markdown page

Run that in your docs build (or a source generator, or a unit test that snapshots it) and the diagram is always exactly what the code says. Types not passed in are ignored, so the diagram stays scoped to what you choose to show. See Generate diagrams from your code for the pattern.

Animation

Class diagrams are structural reference material, not a narrative, so — alone among the diagram types — they don't animate by default. There's no sequence of events to play, so Beck renders a still frame and never loads the animation runtime. If you genuinely want a guided tour (highlight one aggregate, pulse the interfaces), script your own flow: and it plays — class ids work anywhere node ids do.

Full field tables: classes and relations in the YAML schema.