Let us start by looking at the ways in which you can quickly build up collections of diagram elements. A number of commonly used arrangements are available; think of them as customisable templates.
Flow and Tree Arrangements
Let us select + ->Horizontal Flow as an example. When we select this arrange option, we bring up a arrangement screen
Within this space we can start building a diagram. We are limited in the ways that we can build the diagram. Keyboard shortcuts are blocked, and there is no access to menus, panels, and toolbars. The only way to add elements is to click the -> symbol on the right hand side of a shape. We shall do this for the start element.
The result is similar to if we did this in the normal work area. One difference is that the type of shape is selected for us. We can start to build up a diagram using this method.
The position of each new element is determine by draw.io and is set according to the neighboring elements. It is possible to move an element by clicking and dragging in the usual way.
Note that as soon as any additional elements are created, any elements that have been moved by the user in this way will revert back to their predefined positions.
It is also possible to resize and rotate shapes, and to change the way that connectors connect to shape, since these actions can be achieved by highlighting the element and then using the mouse, without using any menus. Unlike moving elements, these actions will not be reset when new elements are created.
In the example below, we have enlarged the start element, and rotated its child element by 90 degrees.
Once we are satisfied with the diagram, we can press Insert, and it will be inserted into the diagram, in the normal work space. Once it has been inserted, it can be changed using any of the functionality in draw.io.
The other flow and tree arrangements work the same way. Here is an example vertical tree structure that has been inserted into a diagram.
Organic and Circle Arrangements
Organic and circle arrangements are built up and inserted in the same way. Here is an example of a organic diagram.
It is possible to construct a diagram using text statements. Selecting + -> From text brings up the following screen, containing the text for a simple circular diagram
This screen is a simple text editor. The ; symbol indicates a comment. Letters are used to indicate each element, and -> is used to indicate the direction of connectors between each element. It we keep this example text the same and press Insert, we get the following diagram.
This screen is a simple text editor, and more complex diagrams can be created by adding more lines. Let us say that we want to introduce a 4th element that connects from a. We add the line highlighted below:
and then press Insert to move the diagram to the main work space.
Once it has been imported, or created by other means, any existing diagram can be converted to any type of arrangement. This is not available from the toolbar however. It will be recalled from earlier that the toolbar functions correspond to those available from selecting Arrange -> Insert from the menu bar. We can instead select Arrange -> Layout, and apply any of the layouts/arrangements to an existing diagram. The six layouts from the toolbar can be applied, along with a new one, Radial Tree.
Let us select the whole of the vertical tree diagram we created earlier, and then apply Arrange -> Layout -> Radial tree to it.
The elements are automatically rearranged by draw.io to match the chosen layout. In this case, the result is as follows:
Depending on the outcome, the user may wish to make further manual adjustments to the resulting diagram.