diagram

A diagram is wdoc's drawing surface. It declares a width / height and holds shapes that break down into primitives and render as SVG. Connect two shapes by id with an a -> b edge; set pan_zoom = true for an interactive viewport; set a layout (:layered / :radial / :force) to place shapes automatically (see layout modes). Higher-level families (flowcharts, charts, trees, maps, tilemaps, wireframes) are shapes that live inside a diagram too. The primitive shapes are catalogued below; see also the connections concept.

diagram {
  width = 320
  height = 160
  pan_zoom = true
  zoom_min = 0.5
  zoom_max = 4.0
  rect {
    id = a
    x = 20.0
    y = 30.0
    width = 80.0
    height = 50.0
    fill = "#88c0d0"
  }
  rect {
    id = b
    x = 210.0
    y = 90.0
    width = 80.0
    height = 50.0
    fill = "#a3be8c"
  }
  a -> b
}

Child blocks

§ 1Shapes

A diagram holds shapes that break down into primitives. They split across three pages:

• Primitive shapes — rect, circle, line, label, polygon: the base figures everything else lowers to.
• Composite shapes — container, card, node_table: shapes that hold or lay out content.
• Styling shapes with classes — paint shapes with theme-aware classes instead of baked-in fills.

Higher-level families (flowcharts, charts, trees, maps, tilemaps, wireframes) are shapes that live inside a diagram too; wiring is covered by the connections concept and placement by the layout modes.