Interactive Diagram Layout

Introduction

Layout is present in diverse areas, e.g., in text documents, webpages, or GUI forms. In this chapter, we focus on visual language editors (also called diagram editors), although our layout approach could be applied in many different domains. In Figure 1, a simple graph editor is shown, which will serve as the running example in this chapter.

Figure 1.

Graph editor

In visual language editors, a layout engine is responsible for layout computation. This engine usually runs continuously and improves the layout in response to user interaction in real-time. Layout improvement includes all sorts of changes concerning the position or shape of diagram components. For instance, in case rectangle E is moved (cf. Figure 1), the start point of the incoming edge is updated accordingly. In visual language editors, however, it is not reasonable to completely automate layout improvement. Instead, the editor users want to influence the layout at runtime. E.g., in Figure 1, the editor user has “defined” that nodes D, H, I, and J are aligned horizontally, indicated by the two gray horizontal lines.

Two facts are highly relevant concerning layout in visual language editors: Users do not want to just visualize diagrams, but rather want to interact with them. They do not handle diagrams with more than 100 components, but usually diagrams with less than 100 components. Based on these facts, we can conclude that users favor predictable layouts that preserve the users’ mental map (Purchase, et al., 2007), instead of high quality layout derived from a standard layout algorithm, which aims at fulfilling some sort of graph aesthetics.

In general, we distinguish graph-like from non-graph-like visual languages. Many visual languages, however, fit into both categories. For instance, some parts of class diagrams show a graph-like structure, e.g., classes together with associations and generalizations. Other parts of class diagrams (c.f. Figure 4) show a non-graph-like structure, e.g., lists of attributes or the nesting of packages and classes.

Figure 4.

Class diagrams: the same class diagram before and after moving the class person

In the context of visual language editors, the layout engine is usually implemented using one of the following approaches: hand-coded, graph drawing algorithms, constraint-based layout algorithms, or rule-based layout algorithms. Each of these approaches has its strengths, hence, existing rightfully. Graph drawing algorithms are usually written by hand and are specifically tailored to graph-like structures. Constraint-based layout algorithms are defined via declarative constraints, using a constraint solver to compute the layout. They are usually used for non-graph-like structures, and are helpful in case “global” layout computations are required. Rule-based layout algorithms (Maier & Minas, 2009) are a variation of constraint-based layout algorithms, which do not require evoking a constraint solver. They are usually used for non-graph-like structures, and are the best chosen if (only) “local” layout computations are needed.

We have developed a layout approach that is fitted to visual language editors. This approach enables the usage and even the combination of different layout algorithms, such as the ones described above. Hence, the approach benefits from the strengths of the different layout algorithms. Further goals are the specification of layout on an abstract level, and the possibility of reusing already defined layout behavior.

The rest of this chapter consists of three parts: In the first part, a user study is presented examining the desired properties of a layout engine for visual language editors. The second part gives an overview of layout patterns, which are the underlying concept of our layout approach. The third part discusses some challenges concerning the integration of the layout approach into a visual language editor.