6. Your first diagram

Shapes on a canvas, a -> b connections, and letting the layered layout place a flowchart.

Before you start: A book site and its table of contents

A diagram is the drawing surface: it declares a width / height and holds shapes that render as SVG. Give shapes an id and wire them with a -> b edge statements. With no layout set you position shapes yourself via x / y.

Flowcharts come from three stdlib shapes — process (rectangle), decision (diamond), terminator (oval) — plus layout = :layered, which ranks the connection graph topologically and elbow-routes the edges, so you omit the coordinates entirely.

§ 1Exercise: An auto-laid flowchart

Draw a three-node flowchart and let the layered layout place it — no x/y on any shape.

page flow { sites = [:docs]
  h1 "Build flow"
  diagram {
    width = 320  height = 220  layout = :layered  layer_gap = 20.0

    process    "Parse"  { id = parse   width = 100.0  height = 40.0 }
    decision   "Valid?" { id = valid   width = 100.0  height = 60.0 }
    terminator "Render" { id = render  width = 100.0  height = 40.0 }

    parse -> valid  :flow
    valid -> render :flow
  }
}