25. Examples
One worked example per family; the full per-feature gallery is the reference
implementation’s samples/ directory.
A scene — grid, defines, groups, nested links:
{
layout: grid; columns: repeat(3); gap: 40; padding: 20;
fill: --bg; clearance: 12; // clearance cascades to every link
|box| { radius: 4; } // round a touch less than the default 8
|-| { stroke: #666; } // every link's wire
--accent: #0a84ff;
.loud { stroke: red; stroke-width: 2; } // a link (or node) class — one vocabulary
|treat::box| { radius: 5; }
|alert::oval| { stroke: red; width: 36; height: 36; } // a circle
|room::group| {
gap: 8;
} [
|box#inlet| "Inlet"
|box#outlet| "Outlet"
inlet -> outlet "flows" // an internal link, per-instance
]
}
|oval#cat| "Cat" { cell: 1 1 }
|group#kitchen| "Kitchen" { cell: 2 1; gap: 20 } [
|treat#bowl| "Bowl of oats"
|box#water| "Water"
]
|room#closet| "Closet" { cell: 1 2 }
|room#fridge| "Fridge" { cell: 2 2 }
cat:right -> kitchen.bowl:left "watches"
kitchen.water -> closet .loud
closet.outlet -> fridge.inlet "restocks"A tree and a mindmap (SPEC 12):
|column| "Org" { layout: tree; } [ // plain tree: neutral, orthogonal
|topic#ceo| "CEO" [
|topic#cto| "CTO" [ |topic| "Backend"; |topic| "Frontend" ]
|topic#coo| "COO" [ |topic| "Ops" ]
]
]
|mindmap#plan| "Launch" [ // preset: bilateral, natural curves,
|topic#product| "Product" [ // palette walk, depth ramp, 160 wrap
|topic| "MVP"; |topic| "Docs"
]
|topic#sales| "Sales" { side: left; } [ // overrides the ⌈n/2⌉ split
|topic| "Leads"
]
]A sequence — a login flow:
{ layout: sequence }
|icon#user| "user" // an actor — any node is a participant
|box#browser| "Browser"
|box#api| "API"
|cyl#db| "Sessions"
user -> browser "click login"
browser -> api "POST /login"
api -> db "lookup"
db --> api "record"
|alt| "password ok" [ // a frame: its [ ] holds the branch's messages
api --> browser "200 + cookie"
browser --> user "dashboard"
|else| "wrong"
api --> browser "401"
]
|note| "rate-limited" { place: over api db }Charts — bars, a formula with a band, and a pie:
|chart| "Cycle time (s)" { categories: "15 cm³", "30 cm³", "50 cm³" } [
|bars| "1.8 kW" { data: 9, 15, 24; fill: --sky }
|bars| "2.3 kW" { data: 7, 13, 20; fill: --amber }
]
|chart| "Injection profile" [
|axis#bar| "Pressure (bar)" { side: left; range: 0 1100 }
|axis#x| "Speed (mm/s)" { side: bottom; range: 0 133 }
|area| "Pressure" { axis: bar; fn: (x <= 93 ? 1000 : 1000 - 319*((x-93)/40)); fill: --teal }
|band| { range: 93 133; axis: x; fill: --red }
|mark| "1000 bar @ 93" { at: 93; axis: x; color: --muted }
]
|pie| "Spend" { hole: 0.5 } [
|slice| "Ads" { value: 40 }
|slice| "SEO" { value: 30 }
|slice| "Direct" { value: 30 }
]A radar (radial chart) and labelled scatter:
|chart| "Profiles" { direction: radial; categories: "Speed", "Range", "Armor", "Cost", "Stealth" } [
|axis| { range: 0 5 }
|line| "Scout" { data: 5, 4, 2, 3, 5 }
|area| "Cruiser" { data: 3, 3, 5, 4, 2; fill: --teal }
]
|chart| "Effort vs. score" [
|axis| "tokens (k)" { side: bottom }
|axis| "score %" { side: left }
|line| "GLM-5.2" { data: 35 63, 42 72, 84 75; labels: "Base", "High", "Max"; marker: circle; tooltip: always }
]A drawing — a sheeted screw, two views sharing an axis (SPEC 15):
|page| { sheet: a5 landscape; gap: 50; align: origin; } [ // landscape → direction: row
// the ISO sheet: frame, zones, marks — views share their axes datum-to-datum
|drawing#side| "DIN 912 — M8 × 40" { scale: 1.5; } [
|sketch#screw| {
draw: move(0, 0) up(6.5) chamfer(0.8) right(8):head down(2.5):k right(12)
point():v right(28):m8 chamfer(1) down(4);
revolve: x-axis; // a turned part
thread: m8 1.25; // the threaded run
} [
|hidden#socket| { // the hex socket, dashed
draw: move(0, 3) right(4) line(3, -3);
mirror: x-axis;
}
]
screw:head (o) { side: left; } // → ⌀13
screw:left (-) screw:k { side: bottom; } // → 8 — K, the head
screw:k (-) screw:right { side: bottom; } // → 40 — L, under the head
screw:v (-) screw:right { side: top; } // → 28 — the thread length
screw:m8 <- { side: top; } // → M8×1.25 — composed by the thread
]
|drawing#end| { scale: 1.5; } [
|oval#od| { width: 13; height: 13; }
|oval| { width: 11.4; height: 11.4; } // the head, end-on
|hex#socket| { width: 7; height: 6; }
socket:left (-) socket:right // the socket, visible here
]
|title-block| {
title: "Socket cap screw"; drawing-number: "DIN 912 — M8 × 40";
revision: "A"; sheet-number: "1/1"; date: "2026-07-08"; author: "AM";
}
]A floorplan — a studio flat (SPEC 15.11):
{ layout: floorplan; unit: m; scale: 0.02 } // 1 : 50 — thickness defaults 200 mm
|wall#outer| {
draw: move(0, 0) right(7.2):north down(4.8):east left(7.2):south close():west;
} [
|window#w1| { on: north; at: 2.7; width: 1.6 }
|door#entry| { on: south; at: 1.05; width: 0.95; swing: right }
// 'south' was drawn leftward, so 'at' counts from its east end and the pen's
// left is the outside — 'right' opens the door into the flat
]
|partition#bathwall| {
draw: move(4.9, 0) down(2.3):face right(2.3):side; // the bathroom corner
} [
|door| { on: side; at: 0.15; width: 0.8 } // 900 mm and 'hinge: start' by default
]
|bed| { rotate: 90; translate: 1.15 1.05 }
|sofa| { symbol: two; rotate: 90; translate: 0.6 3.4 }
|dining| { symbol: round; translate: 3.3 3.3 }
|rect#counter| { width: 0.6; height: 1.4; translate: 6.8 3.2;
fill: --bg; stroke: --stroke-dark; stroke-width: 1 }
|appliance| "F" { symbol: fridge; translate: 6.8 2.8 }
|bath| { symbol: shower; translate: 6.6 0.6 }
|bath| { symbol: toilet; rotate: 90; translate: 5.35 0.5 }
|bath| { symbol: sink; rotate: 90; translate: 6.85 1.6 }
"STUDIO 27 m²" { translate: 2.2 2.2 }
// Every dimension reads a clear span, face to face — what a listing plan
// publishes. 'face' runs south, so its 'out' face is the living side's.
outer:west-in (-) bathwall:face-out { side: top } // → 4.75 — the living space
bathwall:face-in (-) outer:east-in { side: top } // → 2.15 — the bathroom
outer:west-in (-) outer:east-in { side: top } // → 7 — the shell, clear
outer:north-in (-) outer:south-in { side: right } // → 4.6