flowchart shapes

block

process / decision / terminator shapes plus the layered auto-layout that turns a diagram into a flowchart.

Flowchart shapes plus the layered auto-layout mode turn a diagram into a flowchart: declare the shapes and the edges, and the renderer ranks them topologically and elbow-routes the connections. The three stdlib shapes lower to SVG primitives and take the same fields, differing only in the figure drawn: process is a rectangle (an action/step), decision a diamond (a yes/no branch), and terminator an oval (a start/end node). See connections.

Layered auto-layout

Set layout = :layered on the diagram. Shapes are topologically ranked from the connection graph and stacked top-to-bottom; elbow routing then connects them with right-angled paths, and layer_gap controls the spacing between ranks.

diagram {
  width = 320  height = 220  layout = :layered  layer_gap = 20.0

  process    "Parse"  { id = parse   width = 100.0  height = 40.0  fill = "#88c0d0" }
  decision   "Valid?" { id = valid   width = 100.0  height = 60.0  fill = "#ebcb8b" }
  terminator "Render" { id = render  width = 100.0  height = 40.0  fill = "#b48ead" }

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

Radial layout and boundaries

Set layout = :radial for an "X and everything it talks to" shape: one hub shape sits at the centre and the rest ring around it (pairs well with routing = :straight). A boundary draws a labelled box behind a set of shapes named in members — it owns no layout, so it works on :radial and :force where a container cannot.

diagram {
  width = 360  height = 300  layout = :radial  hub = platform  routing = :straight

  process    "Platform"  { id = platform  width = 96.0  height = 44.0 }
  process    "Warehouse" { id = warehouse width = 96.0  height = 44.0 }
  process    "Billing"   { id = billing   width = 96.0  height = 44.0 }

  platform -> warehouse :flow
  platform -> billing   :flow

  boundary "Achmisoft" { members = [platform, warehouse, billing] }
}

Examples

A layered flowchart

Declare the shapes and the edges, then set layout = :layered — the renderer ranks the shapes topologically and elbow-routes the connections.

diagram {
  width = 320  height = 220  layout = :layered  layer_gap = 20.0

  process    "Parse"  { id = parse   width = 100.0  height = 40.0  fill = "#88c0d0" }
  decision   "Valid?" { id = valid   width = 100.0  height = 60.0  fill = "#ebcb8b" }
  terminator "Render" { id = render  width = 100.0  height = 40.0  fill = "#b48ead" }

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

Expected: Three shapes stacked top-to-bottom in connection order, joined by right-angled arrows.

Related

- diagram

- sequence_diagram

- state_diagram