Align text labels inside and outside shapes

draw.io 23 Nov 2020

Share:

You can change the alignment of text labels in shapes and on connectors in a number of different ways. The options below are available in the Text tab of the format panel on the right.


Change the text alignment of shape and connector labels in draw.io

Vertical label text

Vertical text labels can improve readability in some use cases, for example on lanes in cross-functional flow charts, automated layout shapes, various UML diagram shapes, and gitflow diagrams.

  1. Select the shape, or the connector label, then click on the Vertical button.
  2. Click the button again to switch back to horizontal text.
    Turn a text label to read vertically from the bottom up

Tip: Change the Writing Direction to switch the text to to read vertically from the top downwards.

Horizontal alignment

  • Select the shape or connector label or text box you want to change, then click one of the three horizontal alignment buttons to realign the text: Left, Center or Right.
    Change the text alignment of labels to left, right or centred

Add spacing (details below) to keep the text away from the shape perimeter.

Vertical position within a shape

Similar to how you can change the vertical position of text inside spreadsheet and table cells, you can change how hight the text ‘sits’ inside a shape.

  • Select the shape, then select one of the following buttons: Top, Middle or Bottom.
    Change where the text label sits vertically within a shape

Add spacing (details below) to keep the text away from the shape perimeter.

Add spacing to move the text around within a shape

You can move the text away from the perimeter of the shape using spacing.

  1. Select the shape.
  2. Change the Top, Left, Bottom, Right and/or Global values in the Spacing section of the Text tab in the format panel.
    Add spacing to ensure text labels stay that distance away from the shape perimeter

Position labels outside the shape

By default, a text label will be positioned in the middle of a shape, or wherever you double-clicked on a connector.

  • Use the Position drop down list to move the text above, below, to the right of, or left of the perimeter of the shape.
    Select another position around the outside perimeter of a shape for its text label

Note: Connector labels aren’t realigned to the connector itself, but to the anchor diamond where the label is attached to the connector.

Format text as superscript or subscript

  1. Double click on a label to edit it, then select the text inside the label you want to format.
  2. Click on the Superscript or Subscript button in the Text tab in the format panel.
    Format part of a label as superscript or subscript

Follow us on GitHub, Twitter, Facebook.

Share: