diagram

block

The SVG canvas: a sized box holding shapes (rect/circle/line/polygon/label/container/card/node) that lower to SVG, with optional auto-layout.

A diagram is wdoc's drawing surface. It declares a width / height and holds shapes that break down into primitives and render as SVG, so the same source can target different backends. Basic shapes include rect, circle, line, polygon, label, container, card, and node; higher-level families (flowcharts, charts, trees, maps, tilemaps, wireframes) are shapes that live inside a diagram too. See the connections concept and the SVG primitives.

Connect two shapes by id with an a -> b edge. Set pan_zoom = true to wrap the canvas in an interactive viewport (wheel zooms, drag pans, corner buttons reset); zoom clamps to [zoom_min, zoom_max]. Give any shape a link to make it a hyperlink, resolved exactly like a prose link.

A diagram with an edge

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
}

Layout modes

Without a layout, shapes are placed by their x / y. Set layout = :layered to topologically rank shapes from the edge graph and elbow-route the connections, :radial for a hub-and-spoke ring (hub names the centre), or :force for a physics layout. See layout modes.

Styling shapes with classes

Every shape takes a class list. A class emits SVG paint — fill, stroke, stroke_width, stroke_linecap, stroke_linejoin, opacity — with dark { } / light { } overrides, so a shape follows the site theme and the reader's light/dark mode. See styling.

class "dgm-box" {
  fill         = "#5e81ac"
  stroke       = "#2e3440"
  stroke_width = "2"
  dark  { fill = "#88c0d0"  stroke = "#eceff4" }
  light { fill = "#5e81ac"  stroke = "#2e3440" }
}

diagram { width = 320  height = 120
  rect { x = 20.0   y = 25.0  width = 110.0  height = 70.0  class = ["dgm-box"] }
}

Related

- flowchart shapes

- sequence_diagram

- state_diagram

- barchart / linechart / pie_chart

- tree

- image

- iconset / icon_def / icon