At a glance

cat -> dog -> bird
cat dog bird

That’s a complete diagram: three boxes, two links. Lini fills in the rest.

FormMeans
|type#id|Identity — a type, an optional #id. Always in bars: an instance (|oval#cat|), a rule (|oval| { … }), a define (|cat::oval| { … }).
"…"The label — what the node is called, placed by its type (text, a caption, a symbol, a chart title).
{ … }A style block — key: value; declarations.
[ … ]A content list — a node’s children.
.nameA class — define it (.hot { … }), wear it (|box| .hot).
#nameAn id — declare it (|box#cat|), select it (#cat { … }), reference it bare (cat -> b).
--nameA themeable variable (fill: --accent).
a -> bA link.

Three defaults make small diagrams trivial:

  • Omit the type → |box| (a rounded, framed card); |#cat| is a default box.
  • Omit the label → the box is empty.
  • Name an undeclared id in a link → it’s auto-created as a labelled |box| (cat -> dog adds |box#cat| "cat").

A file is a stylesheet, then drawn statements. The stylesheet is one { } block at the top — setup that draws nothing. After it come the instances and links, in source order (usually instances first, then links — a layout: sequence reads the order as time, SPEC 13):

{                                               // the stylesheet — setup only
  layout: grid;  columns: repeat(3);  gap: 30;  // scene config
  |box| { radius: 6; }                          // a rule — style every box
  .hot { stroke-width: 2; }                     // a class
}

|box#server| "Server" .hot                      // the canvas, two instances
|box#client| "Client"
server -> client "requests"                     // a link, with a label
Server Client requests

The language every node and every layout shares. Read top-to-bottom once; the layout sections (Part II) and the reference (Part III) build on it and never restate it.