Inspector
The inspector shows the controls that apply to the current selection. Sections appear and disappear with the selection, so a path shows line controls where a container shows shape controls, and a mixed selection shows whatever the two have in common.
Each section below is animated with a working inspector — the controls in the demos are live, and what they change is the same model the editor uses. ⌘I shows and hides the panel.
Shapes
Section titled “Shapes”Position
Section titled “Position”The x and y pixel coordinates of the top-left corner of the selection. Useful for:
- checking the exact positions of different shapes
- moving the selection by a precise number of pixels
The width (w) and height (h) of all the selected shapes. Changing either makes every selected
shape that size.
When the shapes are not all the same size the display shows ~. Pressing ↑ or
↓ then starts from the largest or the smallest of them.
Radius
Section titled “Radius”Corner radius of shapes, and bend radius of lines. Click the row to reveal a set of preset radii.
Margin
Section titled “Margin”Margin is the minimum space between adjacent objects. When two neighbours have different margins, the larger margin applies.
An object can hold one symmetric margin on all four sides, or a different margin per side.
Wrap width is the widest a line of text may be. Words that do not fit wrap onto the next line. In many cases the wrap width is wider than the text currently is.
Wrap width is drawn on the diagram as blue zigzags. Drag the zigzags left or right to change it in the app, or type the number in the inspector — which works in the demo below too.
Shadow
Section titled “Shadow”Shapes can carry a drop shadow, controlled by five parameters:
dx |
displacement in the x dimension |
dy |
displacement in the y dimension |
std-dev |
standard deviation for the Gaussian blur |
α |
opacity |
colour |
hex colour code |
Alignment of the lines of text within a paragraph: left, centre or right.
Three text attributes at once — font size, font weight, and letter spacing.
Family
Section titled “Family”The font name for the selected text. Choose from one of three sets:
- In this diagram — fonts already in use
- Recommended — fonts that work well in diagrams
- Google Fonts — the full set of ~1600 Google Fonts
Colours
Section titled “Colours”Every colour control offers the same three ways in: pick from a suggested palette, type a colour code, or use the colour picker.
Background fill colour of the selected shapes, or none when transparent. The transparent button
removes the background.
Line colour
Section titled “Line colour”Colour of the selected lines, or of the borders of the selected shapes — or none where there is no
border.
Text colour
Section titled “Text colour”Colour of the selected text objects.
Width of the selected lines, or of the borders of the selected shapes, or none where there is no
border.
Markers at the start and end of the selected lines. The reverse button reroutes the line in the opposite direction.
Both ends take the same four parameters:
| Type | Arrow head or line cap. By default a line has a cap at its start and an arrow head at its end; choose an arrow head at both ends for a double-headed arrow. |
| Gap | Space between the end of the line and the object it is attached to. |
| Length | Size of the arrow head measured along the line. |
| Width | Size of the arrow head measured across the line. |
The preview shows a zoomed-in view of both ends, with the arrow head and its gap drawn in proportion to the line width.
Dashes in the selected lines, or in the borders of the selected shapes.
Dashes are configured by a repeat distance in pixels. Each repeat holds one dash and one space of equal length. Dashes are always aligned symmetrically on their shape, and so that corners stay solid.
The name and provenance of the selected icons. Provenance is recorded in the diagram’s metadata and travels with exported SVG files.
The properties behind the controls
Section titled “The properties behind the controls”Every control on this page sets a named style property. The style vocabulary lists all of them, generated from the model, and is the reference to reach for when driving nifdi from code or from an agent.