Debugging

Fletcher has a range of debug options which cause extra visual feedback to be drawn in diagrams. For example, diagram(debug: "grid") shows a coordinate grid, and node(debug: 4) shows various parts of a node’s anatomy.

Debug arguments accept the following options:

Grid debug options

Grid annotations apply to diagram() and flexigrid().

"grid.coords"

Show column and row or (𝑢,𝑣) diagram coordinates.

(Level 1)

"grid.xy"

Show CeTZ or (𝑥,𝑦) canvas coordinates.

(Level 5)

"grid.lines"

Draw coordinate lines and indicate the sizes of rows and columns with tabs around the border.

(Level 3)

"grid.cells"

Show all cells in a flexigrid as red boxes.

(Level 2)

"grid.iters"

Report the number of iterations the flexigrid layout took to converge.

(Level 6)

Node debug options

These can be set on individual nodes

node(.., debug: "node.body")

or set at the diagram level:

diagram(debug: "node.body", ..)

"node.origin"

Show the center coordinate of a node as a small red dot.

This point is used as the default anchor for the node.

(Level 5)

"node.inset"

Show bounding box around the node’s body content before node.inset is applied.

(Level 3)

"node.body"

Show bounding box around a node’s body, including any node.inset.

(Level 3)

"node.outset"

Show the snapping target for edges connecting to this node.

The snapping target is the node’s outline extruded by the distance node.outset.

(Level 4)

"node.bounds"

Show bounding boxes of node shapes.

(Level 5)

"node.cell"

Show the flexigrid cell inhabited by the node.

Unlike "grid.cells", this makes the node’s column and row spans visible. This node’s cell is the region in which node.align has effect.

(Level 6)

Edge debug options

These can be set on individual edges

edge(.., debug: "edge.label")

or set at the diagram level:

diagram(debug: "edge.label", ..)

"edge.label"

Show anchor points and bounding boxes of edge labels

(Level 5)

"edge.snap"

Show the path of an edge before node snapping is applied

(Level 5)

"edge.snap.from"

Identify the node which the start of an edge snapped to by shading it green

(Level 6)

"edge.snap.to"

Identify the node which the end of an edge snapped to by shading it red

(Level 6)

Debugging arrow marks

To make properly implementing custom marks easier, the test() is provided which shows more detailed debug annotations on marks.

#show: scale.with(150%, reflow: true)
#fletcher.marks.test((
  size: 2,
  tip-origin: mark => mark.size + 0.5,
  tail-origin: -0.5,
  draw: mark => cetz.draw.arc((0,0),
    start: -90deg, stop: +90deg,
    radius: mark.size,
    fill: none,
  )
))