27 Jul

draw.io Training – Exercise 4: Work with text and connectors

Now that you are comfortable modifying an existing diagram by editing shapes, it’s time to build one from scratch. You’ll need to add shapes from the symbol library, draw connections between the shapes, and add text to both the shapes and the connectors.

Your tasks:

Try to aim for a result that looks similar to the diagram below these instructions.

  1. Create a new draw.io diagram.
  2. Insert some shapes from the symbol library.

Create connectors (3 options):

  1. Duplicate the shape and its contents and connect it automatically (click on the blue arrow).
  2. Drag a connector from the blue connection arrow of a shape to the target shape.
  3. Drag a connector from one of the small crosses of an unselected shape to a connection point (in green) on the target shape.

Insert text

  1. Insert text into shapes.
  2. Insert text on connectors.

Save & close the diagram.

You can download the result diagram here – right click and save.

Working with connectors

draw.io - connector arrowsdraw.io - connection pointsWhen you click on a blue arrow of a selected or unselected shape, the shape and its content is duplicated and connected with a connector in the direction of the arrow on which you clicked.

Tip: By default, a connector is equipped with an arrow.

You can also draw connectors from an unselected shape. Hover over the shape and you’ll see small blue connection crosses. Click and drag a connector to another object’s connection point – it must be in a green circle to properly link the two shapes. Your connector won’t move from these connection points once you have created it.

You can link a connector to an edge (not a single connection point), by dragging the connector over the target shape until the outline is blue. Your connector may move around on this edge when the shape is moved on the drawing area.

You can draw connectors from the large blue arrows in the same ways.

If you want to practice more with connectors – use this example diagram and have a look at the additional resources below for more explanatory posts for working with connectors.

Entering text

draw.io - Text tab in the format panelClick on a shape and start typing to enter text inside the shape.

To change the position or format of the text inside the shape, use the Text tab of the format panel on the right. By adjusting the spacing at the bottom of the Text tab, you can set the location of the text precisely.

Double click on a line and start typing to enter text. You can have multiple text ‘labels’ on any line or connector.

You can also place text freely on the drawing area. Double click on an empty area of your diagram.

Text size, font and color can be altered in the Text tab of the format panel.

Tip: Text inside a shape wraps automatically. You can break text over multiple lines manually in free text areas or on connectors by pressing Enter.

That’s it for today’s exercise! In the next exercise you’ll learn how to draw a tree diagram from scratch.

Additional resources

Leave a Reply

Your email address will not be published. Required fields are marked *