Guide · 05 of 15
Annotations
Marks drawn over a diagram to say what it shows: a span, a length, a slope, an angle, a pointer, a region. They are sized in pixels, so they stay the same size when the axes change, and they take color, show, width and alpha. They work in plane and circuit scenes. A mark sits on the left of its segment as you walk from the first point to the second, so a segment written left to right carries its mark above.
brace#
A curly brace spanning two points, with its label at the tip. Use it to name an interval or a group. flip puts it on the other side.
brace <id> = (x1,y1) -> (x2,y2) { [label: "" ], [flip] }
| prop | type | description |
|---|---|---|
| label | string | text at the tip, ${expr} is live |
| flip | flag | draw on the other side of the segment |
Example
dimension#
A measuring line beside a segment, with a cap at each end and its label outside. offset: is how far it stands off in pixels (14 by default); a negative offset moves it to the other side.
dimension <id> = (x1,y1) -> (x2,y2) { [label: "" ], [offset: <pixels>], [style: dashed] }
| prop | type | description |
|---|---|---|
| label | string | text beside the line, ${expr} is live |
| offset | number | pixels away from the segment |
Example
slope#
A slope triangle between two points of a line or a curve: a horizontal run and a vertical rise, each with its own label outside the triangle. The corner sits under the second point; over puts it over the first one instead. Dashed unless style: says otherwise.
slope <id> = (x1,y1) -> (x2,y2) { [run: "" ], [rise: "" ], [over], [style: solid] }
| prop | type | description |
|---|---|---|
| run | string | label on the horizontal leg |
| rise | string | label on the vertical leg |
| over | flag | corner at (x1, y2) instead of (x2, y1) |
Example
callout#
A note at (x, y) with a leader line to the thing it is about, ending in a dot at to:. The text turns away from the target by itself, so the line never runs through it.
callout [id] at (x, y) = "" { to: (tx, ty), [size: <n>] }
| prop | type | description |
|---|---|---|
| to* | (x, y) | the point the leader ends on |
| size | number | font size in pixels (14 by default) |
Example
angle#
The angle at the middle point between the rays to the other two, drawn as an arc on the screen, so it matches what the eye sees even when the two axes have different scales. It always marks the smaller angle. right draws the square corner of a right angle.
angle <id> = [(ax,ay), (vx,vy), (bx,by)] { [label: "" ], [r: <pixels>], [right] }
| prop | type | description |
|---|---|---|
| label | string | text just outside the arc |
| r | number | arc radius in pixels (24 by default) |
| right | flag | a square corner instead of an arc |
Example
highlight#
A flat tinted box between two corners, to pull the eye to a region. Write it before the objects it sits behind. pad: grows it by that many pixels on every side.
highlight <id> = (x1,y1) -> (x2,y2) { [pad: <pixels>], [opacity: <n>] }
| prop | type | description |
|---|---|---|
| pad | number | extra pixels on every side |
| opacity | number | fill opacity (0.16 by default) |
Example