Diagram editor

Diagrams can modified using the browser-based diagram editor. Click the Diagram editor link on your workspace summary page.

Diagram layout

By default, Structurizr does not auto-layout your diagram elements, and you have several options.

1. Manual layout (recommended)

The diagram layout can be modified by dragging the elements around the diagram canvas in the diagram editor, and the layout saved using the "Save workspace" button. This is the recommended approach, because manual layout allows you to precisely position elements where you want them, consistently across multiple diagrams.

2. Auto-layout

Clicking the button will open the auto-layout modal. See Diagrams - Auto-layout for more details.

Canvas size

A number of pre-defined canvas sizes are available from the dropdown list (A5 portrait, landscape, etc). Alternatively, you can use the following buttons to use a custom canvas size.

Decrease canvas size.
Auto canvas size.
Increase canvas size.

By default, the diagram will stay centred when using the decrease and increase canvas size buttons. To disable this, hold the Alt key while clicking the button.

Elements

There are a number of toolbar buttons that become enabled when you multi-select elements, which you can do by holding the Alt or Shift key while clicking an element, or by using the lasso tool. The following buttons allow you to align all selected elements with reference to the first element that was selected.

Align selected elements left.
Align selected elements centre.
Align selected elements right.
Align selected elements top.
Align selected elements middle.
Align selected elements bottom.

You can also horizontally and vertically centre the selected elements on the diagram canvas.

Centre diagram or selected elements.

Finally, selected elements can be evenly distributed using the following buttons.

Distribute selected elements horizontally.
Distribute selected elements vertically.

Relationships

By default, all links between elements are straight lines. You can add vertices onto a link by clicking the mouse on the link. The vertex can be moved by dragging the coloured circle, and removed by clicking the cross.

Moving the mouse cursor over a link will highlight that link. While highlighted, the up arrow and down arrow keys can be used to move the positioning of the label, while the r key will toggle the routing algorithm between direct and orthogonal.

Creating, editing, and removing relationships

Relationships can also be modified in the diagram editor. Right-click a relationship to open the edit modal, where you can modify the relationship, or remove it from the view and/or model. You can also create a new relationship, using the following button:

Create a relationship between the two selected elements.

(creating, editing, and removing relationships is only supported on System Landscape, System Context, Container, and Component diagrams at present)

Other

Other buttons related to diagram layout are as follows.

Undo previous layout changes.
Bring elements back onto the diagram (this is useful when you resize the diagram canvas to make it smaller).
Open the automatic layout modal.