Inspector

Shows the x and y pixel coordinates of the top-left corner of the selection. This is useful for:

• Checking the exact positions of different shapes.
• Moving the selection by a precise number of pixels.

Shows the width (w) and height (h) of all of the selected shapes.

Modifying the width or height will make all the shapes the chosen size.

If the shapes are not the same size, the display shows "~". Pressing Up (↑) or Down (↓) will start from the max or min of the sizes.

Shows corner radius of shapes and bend radius of lines.

Click on the row to reveal a selection of preset radii to choose from.

Margin is the minimum space between adjacent objects. When two objects have different margins, the larger margin applies.

Each object can have symmetric margins in all 4 directions, or have different margins in each direction.

Wrap width is the maximum width that a line of text can occupy. Any words that don't fit within this width will wrap on to the next line.

In many cases, the wrap width will be wider than the current width of the text.

You can see wrap width visually represented in the diagram as blue zigzags.

To adjust the wrap width, you can drag the blue zigzags to the left or right (only in the real app, not in this demo page), or change the number directly in the inspector (works in this demo page).

Shapes can optionally have a drop shadow.

When present, a shadow is controlled by 5 parameters:

dx

displacement in x dimension

dy

displacement in y dimension

std-dev

standard deviation for Gaussian blur

α

opacity

colour

Hex colour code

Shows the alignment of lines of text within a paragraph: left, center, or right.

Shows several text attributes:

• Font size
• Font weight
• Letter spacing

Shows the font name for selected text objects.

Choose a font name from one of these sets:

• In this diagram: fonts currently in use
• Recommended: fonts that work well in diagrams
• Google Fonts: the full set of ~1600 Google Fonts

Background fill colour of selected shapes or 'none' when transparent.

Choose a colour from one of the suggested palettes, type a colour code, or use the colour picker.

To remove the background, press the 'transparent' button.

Colour of selected lines, or colour of borders of selected shapes, or 'none' if there is no border.

Choose a colour from one of the suggested palettes, type a colour code, or use the colour picker.

Colour of selected text objects.

Choose a colour from one of the suggested palettes, type a colour code, or use the colour picker.

Width of selected lines, or width of borders of selected shapes, or 'none' if there is no border.

Markers at the start and end of selected lines.

The "reverse" button will reroute the line in the opposite direction.

For both the start and the end of a line, these parameters can be changed:

Type

Type of arrow head or line cap. By default, lines come with a line cap at their start and an arrow head at their end. To create a double-headed arrow, choose an arrow head for both ends.

Gap

Space between the end of the line and the object it is attached to.

Length

Size of an arrow head measured along the line.

Width

Size of an arrow head measured perpendicular to the line.

The "preview" section shows a zoomed-in view of the start and end of the line, with the arrow head and its gap drawn in proportion to the line width.

Dashes in selected lines or in the borders of selected shapes.

Dashes are configured through a "repeat distance" number of pixels. Each repeat contains one dash and one space, of equal length. Dashes are always aligned symmetrically on their shape, and so that corners remain solid.

Shows the name and provenance information for selected icons.

Provenance information is recorded in the diagram's metadata, and is also present in exported SVG files.