Automatic Layout of Diagrams in Rational Rose

Transcription

1 Uppsala Master s Theses in Computing Science ISSN Automatic Layout of Diagrams in Rational Rose Elias Andersson Computing Science Dept., Uppsala University Box 520, S Uppsala, Sweden Abstract: A general overview of the problem of automatically generating aesthetically pleasing drawings of graphs is presented. Requirements particular to diagrams in Rational Rose is discussed. The Sugiyama layout algorithm and the Spring Embedder algorithm together with a number of proposed modifications and improvements to these algorithms are discussed. Examples of drawings generated by these algorithms are presented. Automatic layout of diagrams through the use of genetic algorithms is also discussed. Supervisor: Gunnar Blomberg, Rational Software Scandinavia AB Examiner: Mats Nordström, Computing Science Dept., Uppsala University Passed:

2 Contents 1 Introduction Definition of Terms Background Problem Description General Difficulties 6 2 Different Approaches Algorithmic Approach Declarative Approach 8 3 Examples of Algorithmic Approaches Sugiyama Algorithm Phase 1 Revisited Preprocessing Phase 2 Revisited Edge Crossing Minimization Other Extensions and Modifications to the Sugiyama Algorithm Force-directed Methods Spring Embedder Algorithm Spring Embedder & Directed Graphs 14 4 Example of the Declarative Approach Genetic Algorithms 16 5 Incremental Layout 18 6 Example Drawings 19 7 Conclusion 24 References 25

3 1 Introduction In almost all applications where data is presented in a graph, the usefulness of the drawing depends on the capability to convey the information quickly, in a clear and concise manner. An important aspect of how nice a drawing of a graph is perceived is the positioning of the nodes and edges of the graph. This is called the graph layout. In a number of applications (e.g. Rational Rose), there is a need for producing clear and readable drawings of a graph automatically. An annotated bibliography of this problem is available [27]. In this paper, some general approaches to the problem of automatically constructing readable and aesthetically pleasing graphs will be presented. The implementation approaches are usually divided into algorithmic approaches and declarative approaches. An overview of these different approaches is given, together with a description of some of their advantages and disadvantages respectively. The Sugiyama algorithm and the spring embedder algorithm are two examples of methods that take the algorithmic approach. Both these methods are presented in this paper together with a description of how they might need to be modified or extended to suit the needs of Rose. Layout examples produced by these algorithms are given. A genetic layout algorithm is also presented as an example of a method belonging to the declarative approach. A short discussion on the importance of incremental layout and an example of how incremental layout can be incorporated into the Sugiyama layout algorithm is given. Only layout algorithms, requirements, and problems that are applicable to Rose diagrams will be discussed. For example, algorithms specific for VLSI design will not be mentioned since the requirements for those are completely different. In VLSI design, the aesthetics of the produced graph and the time required to create it is of little importance. In an interactive application such as Rose where graphs are used to quickly convey information in a clear manner, they are of outmost importance. 1

4 1.1 Definition of Terms Throughout this paper, terminology and notation common in graph theory will be used. A brief description of some useful terminology and definitions is presented here. A full description of the basic concepts can be found in [2]. A graph G = (N, E) is a set N = N(G) of nodes and a set E = E(G) of edges where each edge is an unordered pair of distinct nodes in N. An edge is undirected if the ordering of the nodes (u, v) in the edge (u, v) E is irrelevant. An edge is directed if there is an ordering of the nodes (u, v) in edge (u, v) E. In this paper, a directed edge is often denoted by u v. The graph G is called an undirected graph if all edges of the graph are undirected. The graph G is called a directed graph if all edges of the graph are directed. The term directed graph will from here on be abbreviated to digraph. The graph G is referred to as a mixed graph if it contains both directed and undirected edges. A path from v 1 to v k is an ordered list of distinct nodes v 1, v 2,, v k such that (v 1, v 2 ), (v 2, v 3 ),,(v k-1, v k ) E. A sequence (v 1, v 2,,v k ) of nodes in a digraph is a cycle if there are edges from v i to v i+1 for 1 i <k and an edge from v k to v 1. The degree of a node v is the number of edges incident to v. For digraphs, the outdegree of a node v in G is the number of arcs coming out of v, and is denoted by d G + (v). For digraphs, the indegree of a node v in a digraph G is the number of arcs going in to v, and is denoted by d G - (v). A graph is connected if, for every pair of nodes u, v, there exists a path from u to v. A graph is planar if it can be drawn on a plane with no two edges crossing each other except at their end nodes. A drawing of a digraph is upward if every edge is monotonically non-decreasing in the y-direction. A digraph is upward planar if it admits a planar upward drawing. Suppose that G = (N, E) is a digraph. A layering of G is a partition of N into subsets L 1, L 2,, L h, such that if the edge u v E where u L i and v L j, then i > j. A layered network is a digraph with a layering. Note that a layered network must be acyclic. The height h of a layered network is the number of layers and the width w = max L m, where 1 m h. The span of an edge u v in a layered network with u L i and v L j is i - j. A layered network is proper if no edge has a span greater than one. An orthogonal drawing maps each edge into a chain of horizontal and vertical segments. A rectilinear drawing is an orthogonal straight line drawing, i.e. a drawing where each edge is either a horizontal or vertical segment. A graph is rectilinear planar if it admits a planar rectilinear drawing. 2

5 1.2 Background An example of an application where the automatic layout of graphs is important is Rational Rose. Rational Rose is a graphical component modeling and development tool that is used to model software applications and evolve them as new requirements emerge. It allows developers to step back and graphically visualize their applications using the Booch method, the Object Modeling Technique, and the Unified Modeling Language (UML). Visual modeling gives you a graphical representation of the structure and interrelationships of a system by constructing models of your design. These models can be visualized as graphs, where model items are represented as nodes and relationships as edges on a diagram. There are a number of different diagram types in Rose. A list of diagram types with a short description of each diagram type is presented below: Class diagrams Class diagrams are used to show common roles and responsibilities of the entities that provide the system s behavior and capture the structure of the classes that form the system s architecture. Class diagrams contain icons representing packages, classes, interfaces, and their relationships. Use case diagrams Use case diagrams are used to capture the system requirements and understand what the system is supposed to do. They are also used for specifying the behavior of the system as implemented, and/or specifying the semantics of a mechanism. Use case diagrams contain icons representing packages, actors, use cases, and their relationships. Component diagrams A component diagram shows the organizations and dependencies among software components. These diagrams also show the externally visible behavior of the components by displaying the interfaces of the components. Component diagrams contain icons representing packages, components, interfaces and dependency relationships. Collaboration diagrams Collaboration diagrams provides a view of the interactions or structural relationships that occur between objects and object-like entities in the current model. They can be used to indicate the semantics of the interactions and show the semantics of mechanisms in the logical design of the system. Collaboration diagrams contain icons representing objects, their links, and their messages. State diagrams A state transition diagram is used to show the state space of a given class, the events that cause a transition from one state to another, and the actions that result from a state change. State diagrams contain icons representing states and state transitions. Harel notation is used for state transition diagrams. Deployment diagrams Each model contains a single deployment diagram that shows the connections between its processors and devices and the allocation of its processes to processors. A deployment diagram contains icons representing processors, devices, and connections.. 3

6 1.3 Problem Description When modeling large systems in Rational Rose, diagrams visualizing the models can get quite large and complex. It is important that the diagrams visualizing these models are easy to read. Rather than having to manually place all nodes and route the edges to produce a readable and aesthetically pleasing graph, we would like to be able to do it automatically. The goal is to find an algorithm or combination of algorithms that suite the automatic layout of the diagrams in Rose well. The layout algorithm must not only fulfill a basic set of general aesthetic criteria. Application specific aesthetic criteria and other requirements must also be taken into consideration. Most of the diagram types in Rational Rose presented earlier are very similar in the way they are represented graphically and they have very similar requirements with respect to the automatic layout. Therefore, the discussion will be restricted to two diagram types: class diagrams and state diagrams. Class diagram is the diagram type that can contain the most number of different model elements and relation types. The layout requirements for other diagram types, except state diagrams, are a subset of the layout requirements for class diagrams. See Fig. 1-2 for an example of how a class diagram might look. State diagrams are special because a node representing a state can contain subgraphs as shown in Fig Application specific requirements include: Ability to handle nodes of arbitrary and different sizes. Ability to produce both polyline and orthogonal drawings. Ability to handle mixed graphs (graphs with both directed and undirected edges). Ability to handle subgraphs in nodes (for state diagrams). General requirements: The layout must be reasonably fast even for very large graphs. It should be possible to do incremental layout without changing the current drawing too much. General and application specific aesthetics we consider include: Minimize edge crossings. Maximize symmetries. Distribute nodes uniformly. Maximize the direction of flow for certain types of directed edges, e.g. maximize the number of generalize relations that point upwards in a class diagram. Minimize edge bends. Minimize area. Minimize total edge length. Nodes should not overlap. Edges should not cross nodes. 4

7 Start state State 1 SubStart state Substate 1 Substate 2 entry: ^someevent(someargs) State 2 entry: anaction anevent1 End state anevent2( anargument )[ somecondition ] Figure 1-1 A state diagram. anattribute : Boolean = true asuperclass anoperation() FunctionToCalculateSomething(argument1 : Double = 0) : Integer ageneralization asubclass2 anattribute Free text can be placed anywhere asubclass1 anoperation() : Integer +rolea anaggregation A package A note with some text can be attached to any item. anassociation adependency a "note anchor" adependency +roleb Another package <<Interface>> aninterface aninterface2 aclass1 An interfaces can also be displayed as a small cirle. aclass3 arealizerelation Figure 1-2 A class diagram. 5

8 1.4 General Difficulties Automatic layout of graphs is a very difficult problem for a number of reasons. When we do an automatic layout we try to create a readable and aesthetically pleasing graph, but how do we define readable and aesthetically pleasing? These are subjective terms. Some general aesthetic criteria can usually be agreed upon, like minimizing edge crossings, maximizing symmetries, and minimizing total edge length. See 1.3 for a complete list of aesthetic criteria we consider in this paper. Aesthetic criteria also depend on the application, the diagram type, and the drawing conventions. Even if we could agree on a fixed set of aesthetic criteria, e.g. those mentioned in 1.3, it would most likely be impossible to satisfy all of them at the same time since they would contradict each other. For example, consider the two different drawings of the same graph depicted in Fig. 1-3(a) and Fig. 1-3(b). In Fig. 1-3(a), we try to maximize display of symmetries in the drawing while the drawing in Fig. 1-3(b) minimize crossings. In this graph, like in many others, it is impossible to achieve a maximum display of symmetries and minimal number of crossings at the same time. We have the same problem for most other aesthetic criteria as well. Figure 1-3(a) Maximize symmetries Figure 1-3(b) Minimize crossings. A method for measuring perceived symmetries in a graph drawing is presented in [26]. Many of the individual aesthetic criterions are also very difficult to solve and many of the problems we need to solve have been proven to be NP-complete. For example, in [11], it is shown that minimizing the number of edge crossings in a layered network is NP-hard and testing whether a digraph is upward planar is shown to be NP-hard in [28]. The problem of maximizing the display of symmetries has also been shown to bee NP-hard in [26]. Due to the complexity of these problems, we need to find good heuristics. 6

9 2 Different Approaches The layout implementation approaches are usually divided into two categories: those with an algorithmic approach and those with a declarative approach. Some advantages and disadvantages with each of these approaches are discussed below. Some progress has also been made in integrating these different approaches (see [16]). 2.1 Algorithmic Approach Most of the current layout techniques described in the literature take an algorithmic approach. These techniques generate a layout of the graph according to a well specified set of aesthetic criteria and other requirements. Each requirement is embodied in the algorithm, which tries to provably meet these requirements with a minimal use of computational resources. An algorithmic method typically operates on a specific graph-theoretic class, such as trees, planar graphs, or proper layered networks. Most of the algorithmic methods can thus be classified by the graph-theoretic class they operate on. Also, there exist a number of different conventions for drawing a particular type of graph. For example, a tree can be drawn using the classical convention (see Fig. 2-1(a)) or the tip-over-convention (see Fig. 2-1(b)), edges can be drawn orthogonal or as polylines etc. So, a graph-theoretic class can be further classified by these drawing conventions. There exist a number of different algorithms for each convention, and each algorithm satisfies some set of requirements better than others do. Advantages Many algorithms are well studied and have been proven to achieve some requirements successfully. The algorithmic approach can be very computational efficient. A particular algorithm is naturally very good at solving the specific problem it was designed for. Disadvantages Does not naturally support user-defined constraints. Often restricted to a particular drawing convention within a specific graph-theoretic class. Typically only uses the graph structure information to calculate the layout. Aesthetic criteria related to the semantics of application objects and relations can be difficult to integrate. Some algorithmic methods are very complex, e.g. planarity-based methods. They are both difficult to implement and difficult to test. 7

10 a a b f b f c g c d e g h i j d h e i j (a) Classical convention (b) Tip-over convention Figure 2-1 Two different drawing conventions for rooted trees. 2.2 Declarative Approach In the declarative approach, the layout techniques are more oriented towards generality, flexibility, and expressiveness and are less concerned about computational efficiency. In a typical declarative graph layout system, the layout of the graph is specified by a user-defined set of requirements, and the layout is generated by satisfying these requirements. Requirements of the layout can be specified as constraints or as cost functions. Mechanisms for satisfying these requirements include constraint solvers and simulated annealing. The motivation for using constraints is that it can be important to take advantage of our knowledge about the semantics of the graph to improve the layout of the graph. Such knowledge is often most easily expressed using constraints. Examples of things that can improve the readability of the graph are presented below: Place a given (e.g. the most important ) node in the middle of the drawing. Place some given nodes on the external boundary of the drawing. Keep a group of (e.g. semantically related) nodes close together. Draw a subgraph with a prescribed shape, e.g. a circle or a star. Advantages: An expressive power in specifying how the layout should look like. Gives the user good control mechanisms. Ability to conform to a wide range of applications due to its flexibility. Disadvantages: Some natural aesthetics, like planarity needs complicated constraints to be expressed. General constraint solving systems are computationally inefficient. It can be difficult to predict the effect of a constraint or rule. Lack of a powerful language to easily specify all constraints. 8

11 3 Examples of Algorithmic Approaches Here, examples of the algorithmic approach are presented. The Sugiyama algorithm and a number of modifications and extensions to this basic algorithm are described. A force directed method called spring embedder algorithm is also presented. 3.1 Sugiyama Algorithm This algorithm, presented by Sugiyama et al in [1] was developed for directed graphs with a hierarchical structure. It uses a heuristic to reduce the number of edge crossings. The Sugiyama layout algorithm and a number of proposed improvements are described. The current layout algorithm in Rose is based on the Sugiyama algorithm. Therefore, it is of particular interest to study possible improvements and extensions. The original Sugiyama layout algorithm consists of three phases: Phase 1 Preprocessing. Remove cycles and construct a proper layered network. Phase 2 Edge crossing minimization. Phase 3 Fine-tuning. Each of the phases is briefly described below. Phase 1 - Preprocessing First, cycles are removed by grouping all nodes in the cycle into a proxy node to produce an acyclic digraph. Next, we make the acyclic digraph into a proper layered network. This can be achieved by placing all nodes with no outgoing edges in layer 0. Each remaining node v is placed in layer L m, where m is the longest path from v to a node in layer 0. This is called the longest path layering and is commonly used (see [3], [4]). To make the layered network proper, invisible dummy nodes are inserted where edges cross several layers. See Fig. 3-1(a) for how a layered network might look like before dummy nodes are inserted and Fig. 3-1(b) for how the same layered network would look like after the dummy nodes are inserted. Phase 2 Edge crossing minimization In this phase, we take the directed acyclic graph generated by the previous step and try to minimize the number of edge crossings by rearranging the nodes at each level of the graph. This is done in the following way: Initially, assume that the ordering of the nodes at the top level is fixed. Each node at the level below is then placed according to its down-barycenter, which is the average position of its predecessor. This is repeated for each level in a first downward pass. When the bottom level is reached we do a similar upward pass. In the upward pass, the nodes at each level are placed according to their up-barycenter, which is the average position of their successors. Downward and upward passes are repeated until we don t get any further improvements, or until a user-defined maximum for the number of passes is reached. This is the most computationally intensive part of the algorithm. Phase 3 Fine-tuning In the fine-tuning phase, the final x- and y-coordinates of each node is determined, and we try to straighten long lines. The y-coordinate of each node is easily calculated by its level number and a vertical spacing factor. This assumes that all nodes have the same height. If that is not the case, the maximum height of a node in a layer can be used to determine the distance to the next layer. Just as in the barycentric ordering phase, a number of upward and downward passes are then performed to determine the final x-coordinate of each node. The x-coordinate of each node at the top level is initially set using some horizontal spacing factor. Then, the x-coordinate of each node at the next level is calculated by the average position of its predecessor. The order in which we process the nodes in each layer to determine their x-coordinates now becomes important. Since a dummy node always has exactly one predecessor and one successor, it will always get the same x-coordinate as its predecessor or successor. In an attempt to straighten long lines, dummy nodes are therefore placed first. Then, nodes with the largest number of outgoing and incoming edges are placed. 9

12 L 5 y=5 L 4 y=4 L 3 y=3 L 2 y=2 L 1 y=1 Figure 3-1(a) Layered Network. L 5 y=5 L 4 y=4 L 3 y=3 L 2 y=2 L 1 y=1 Figure 3-1(b) Layered network with dummy nodes inserted. ( c = Dummy nodes.) Some problems with the basic Sugiyama algorithm and number of ways to modify, extend, and improve it are discussed next Phase 1 Revisited Preprocessing The way to remove cycles in a graph G by grouping all nodes in the cycle into a proxy node might not be an acceptable solution if we don t want to display the group of nodes constituting the cycle as proxy node in the final layout. The cycles can instead be broken by reversing a set R of edges to obtain an acyclic digraph G from G. After the completion of the other phases, the edges in R is reversed again and the result is a graph where all edges, except those in R point downward. Of coarse, we want to minimize R so as few edges as possible go against the flow. Thus, we need an algorithm to solve the following problem: given a digraph G = (N, E), find the minimal subset R of E whose reversal make G acyclic. This problem is equivalent to the feedback edge set problem, which is proven to be NP-hard in [5]. So, we need some heuristics to solve this problem. A simple depth first search can be used, preferably starting with a node with a low outdegree, reversing edges that would form a cycle during the traversal. This procedure is rather like a topological sort, where backedges are ignored. Several authors have used this technique (see [3] and [4]). 10

13 Although the depth first search technique is very simple and fast, it is not very effective. In [6], another heuristics that give fewer upward edges is proposed. The heuristic is based on the intuition that nodes with a high outdegree should be placed near the top of the drawing. Assume that we label all nodes, and that we place nodes with a higher label value closer to the top of the graph. A node with maximal d G + (n) is given the label L(n) = N. Next, a node n with a maximal d G-v + (n ) is given label L(n ) = N - 1. This is repeated until all nodes are labeled. It is shown that the algorithm can be implemented so that it achieves a time complexity of O( N + E ). It is claimed that in practice, the runtime of the algorithm comes very close to the runtime of the depth first search algorithm described earlier, but that it gives a better result (see [6]). The longest path layering method used to assign nodes to layers has some attractive properties. Firstly, the layer for each node can be computed efficiently using a simple variant of Dijkstra s shortest path algorithm [7]. Secondly, if a node v is assigned to a layer L m, there is no layering where v is in a layer L n, where n < m. This gives that a minimal number of layers are used, i.e. the height of the layered network is minimal. Although it s good that the height is minimal, we would really like a way to guarantee that the layered network doesn t get too wide as well. Unfortunately, finding a layering such that the space used is neither too wide nor to high is NP-hard. In [8], it is shown how the problem can be mapped to the multiprocessor scheduling problem, which is proven to be NP-hard in [5]. Sugiyama reports some progress on the problem in [9] and [10], but there is definitely still a need for good heuristics to assign nodes to layers. It is desirable to reduce the number of dummy nodes inserted to make the layered network proper since bends in the edges in the final drawing only can occur at these places. Perhaps an even more important reason to reduce the number of dummy nodes is that they slow down the crossing minimization phase. The time consumed in the crossing minimization phase depends on the total number of nodes, dummy nodes as well as real nodes. This, combined with the fact that the crossing minimization is the most computationally intensive part of the algorithm makes it important to try to reduce the number of dummy nodes. Unfortunately, very little work has been done on this problem. It is not even known whether the problem of minimizing the number of dummy nodes is NP-hard or not. This is definitely an important area for future research Phase 2 Revisited Edge Crossing Minimization The goal of this phase is to find an ordering of the nodes for each layer so that the number of edge crossings is minimized. Unfortunately, this problem is very hard. It can be shown that minimizing the number of edge crossings in a layered network is NP-hard, even if there are only two layers [11]. There exist several variations on the barycentric ordering heuristic used in the original Sugiyama algorithm. One such variation is to use the median rather than the average position of adjacent nodes to calculate a new x-position. Both methods are very simple, and extensive tests in [12] and [13] have shown that they both are very effective. In [14], it is even shown that as the density of the graph increases, both methods become arbitrarily close to optimal. It is also possible to combine the median and barycenter heuristics. We can for example first sort the nodes using the median heuristic and then sort nodes with the same median value using the barycenter. Experiments show that these hybrid methods seem to offer the advantages of both methods (see [3] and [13]). 11

14 3.1.3 Other Extensions and Modifications to the Sugiyama Algorithm In [21], a fast heuristic for hierarchical Manhattan layout is presented. This algorithm extends the Sugiyama algorithm to produce an orthogonal drawing where each edge has at most four bends. The time overhead compared to the original Sugiyama algorithm is O(n + ek), where n is the number of nodes, e is the number of edges, and k is the maximal number of line rows between two layers of nodes. The edge crossing minimization mechanism used in the original Sugiyama algorithm operates very locally. It is not very good at reducing edge crossings that arise from global situations. In [22], a method for trying to solve this problem is presented. The idea is to use a barycenter value that is weighted such that not only adjacent levels are considered. More distant levels are also included in the calculation of the barycenter value, but with a lesser weight. In [23], a divide and conquer approach is introduced. Nodes are partitioned into groups that are processed independently. The subgraphs are then assembled into the final graph. It is shown that for large graphs, this technique can speed up the layout considerably. This approach also gives the possibility of clearly visualizing structures of semantically or otherwise related groups of nodes. 12

15 3.2 Force-directed Methods Another example of the algorithmic approach is the force directed approach. This approach to create an embedding of a graph G can be broken down into two main steps. 1. First, a system of forces acting on the nodes and edges in the graph is defined. 2. Secondly, we find a minimum energy state for the system defined in 1. This can be done by solving a system of differential equations or by simulating the evolution of the system. The aesthetic goals that the force directed approaches generally try to meet are: Maximize display of symmetries. Minimize difference in edge lengths. Distribute nodes evenly. Minimize edge crossings Spring Embedder Algorithm An example of a force directed method is the spring embedder algorithm presented in [17]. The spring embedded algorithm is a heuristic first developed for general undirected straight line drawings, but it can be applied on other type of graphs as well. The spring embedder algorithm is based on a physical model where the drawing is generated by simulating a mechanical system. In this system, nodes are replaced by rings and edges are replaced by springs with some specified natural length. To avoid overlapping of non-adjacent nodes, springs with infinite natural lengths are also inserted between non-adjacent nodes. A spring attracts its endpoints (rings) when it is stretched beyond its natural length, and repels the endpoints when it is compressed as shown if Fig The initial state of the system is determined by a random placement of the rings. Then, we let the system go, i.e. the evolution of the system is simulated by a number of iterations. In each step of the iteration, the resultant force of the springs acting on each ring is computed. A friction factor for the rings is defined and included in the computation. This provides a force field whose action on the system moves the system into a state of lower potential energy so that a final minimal energy state finally is reached. Figure 3-2 A compressed spring repels its endpoints. A stretched spring attracts its endpoints. 13

16 There exist a number of variants and extensions to the basic spring embedder algorithm. In [18], Kamada presents an algorithm that also is based on the method of using rings and springs. Here, the energy potential of the system is explicitly given as the following function: E = n n i= 1 k= i+ 1 1 ( pi pk 2 l ik ) 2 In the function above, p i = (p i (x), p i (y)) and p k = (p k (x), p k (y)) denote the position of node i and node k and l ik denotes the optimal distance between the two nodes. This function is to be minimized. The aesthetic goal is that the Euclidean distance between any pair of nodes matches their topological distance. A difference in this algorithm compared to the algorithm presented in [17] is that when a node is moved to a new position in this algorithm are all other nodes temporarily frozen Spring Embedder & Directed Graphs A way to extend the spring model with magnetic forces that are applied in conjunction with the distance forces is presented in [19]. These magnetic forces are used to control edge orientations to enable a good layout not only for undirected graphs, but also for directed graphs and graphs with both directed and undirected edges. The ability to handle mixed graphs makes this extended version of the spring embedder algorithm interesting for use in the Rational Rose application where mixed graphs occur frequently. Mixed graphs are handled by classifying edges into magnetic edges and non-magnetic edges. Magnetic edges are replaced by corresponding magnetic springs and non-magnetic edges are replaced by normal springs as usual. The whole system is then placed in a magnetic field. There are a number of different types of magnetic fields that can be applied, each giving different result on the final layout. Examples of magnetic field types include parallel, polar, and concentric magnetic fields shown in Fig Different magnetic fields can also be combined to produce a compound magnetic field. (a) parallel (b) polar (c) concentric Figure 3-3 Standard magnetic fields. Now, three types of forces have to be considered: F s : Attractive or repulsive force exerted by springs between adjacent nodes ( 1 ) F r : Repulsive force between every pair of non-adjacent nodes. ( 2 ) F m : Rotation force exerted on edges by a magnetic field. ( 3 ) Let the strength of the magnetic field in any position (x, y) be b(x, y) and let m(x, y) be the orientation vector that expresses the orientation of the field at any given point (x, y). For simplicity, only uniform fields are considered. Therefore, we can let b be constant for any point (x, y). Each standard magnetic field B(x, y) is then given by b m(x, y). 14

17 The strength of each of the forces 1-3 above is then given by: F s = c s * log(d/k) F r = -c r * 1/d 2 F m = c m * b * d α * θ β where d is the distance between a pair of nodes, k is an ideal distance between adjacent nodes, θ is the angle in radians from the orientation of the field to the orientation of the magnetic edge, and α, β, c s, c r, c m > 0 are tuning parameters. Fig. 3-4 illustrates how the forces interact in a small graph placed in a parallel magnetic field. Fs Fm Fs Fs Fm Fm Fr Fm Fs Fr Magnetic field Figure 3-4 Forces in a small magnetic spring model. A drawback with the spring embedder algorithm is that it does not handle orthogonal drawings. A proposal how to integrate constraints into the spring embedder algorithm is presented in [20]. This technique can be used as a substitute for (or in conjunction with) the technique of using magnetic forces to achieve good layouts for directed hierarchical graphs. An experimental comparison between several force-directed methods can be found in [25] 15

18 4 Example of the Declarative Approach Here, a method that belongs to the declarative approach is presented. The method is based on the use of genetic algorithms. Another declarative approach that is worth mentioning, but is not discussed in detail in this paper is layout graph grammars. Layout graph grammars are a grammatical or rule-based method for the construction of graph drawings. A layout graph grammar consists of an underlying context-free graph grammar and of layout specifications. They layout specifications can consist of things like constraints on relative positions and minimal distances between vertices. A thorough description of how layout graph grammars can be designed and used to produce nice drawings of graphs is presented in [29] and [30]. 4.1 Genetic Algorithms An interesting way of generating graph layouts is through the use of genetic algorithms. These are based on the mechanism of genetics and natural selection. The idea is that we should be able to generate a good layout through a simulated evolution process where good drawings have a better chance of surviving and reproducing. An example of a layout system that generates layouts through the use of genetic algorithms is GALAPAGOS, presented in [31]. The method presented has a trait that is typical for the declarative approach of generating layouts, namely that the graphic objects are not laid out by specifying how to lay them out, but rather by specifying the preferences for the layout. The genetic algorithm does not try to solve the layout constraints directly. Instead, we try to reach an optimal solution through many trials by modifying candidate solutions with a certain amount of randomness. An example of how a genetic algorithm can be used to generate straight line drawings of a graph is presented below: First, we define a gene evaluation function that is used to decide how good a gene is, i.e. how well it satisfies our constraints. Examples of constraints that we could consider include: 1. Edge crossings should be avoided. 2. Directed edges should point upwards. (We could also restrict this requirement to some specific edge-types.) 3. The distance between any pair of nodes should exceed some specified value. 4. The angle between two arcs should not be too small. The gene evaluation function calculates a value for how well the drawing satisfies each of these constraints. These values are weighted with some specified constants and the resulting values are added to produce a final goodness-value for the gene. The user can decide the relative importance of the constraints by changing the weight for each constraint. Next, a starting population consisting of a random set of genes is generated. There are a number of ways we could encode the drawing into a gene. An easy and straightforward way is to let the gene be represented by an array of integers, where the integers represent the positions of the nodes. This is also how the gene is encoded in [31]. We then let this set of genes evolve to better genes that are closer to the solution, i.e. have a better goodness-value, by iterations of modifications to the genes. Each iteration is called a generation. The modification in a generation is a three-step process. First, the goodness-value is calculated by the gene evaluation function for each gene in the set. Second, genes with high goodness-values are selected as candidate genes for the next generation. A thorough description of a method for selecting genes can be found in [32]. Finally, genetic operations are performed on some set of these selected genes to produce the next generation of genes. This process is repeated until we get a gene that is good enough, or until we exceed some specified limit on the number of iterations. The genetic operations usually consist of crossover and mutation. Crossover is performed by selecting two genes and exchanging a randomly selected portion of the arrays that constitute the genes, as show in Fig Mutation is performed by giving a random value to some element in the array, as shown in Fig

19 Gene 1 100, 130, 250, 430, 220, , 310, 420, 300, 220, 190 Gene 2 220, 310, 420, 300, 120, , 130, 250, 430, 120, 110 Figure 4-1 Crossover 100, 130, 250, 430, 220, , 260, 250, 430, 220, 190 Figure 4-2 Mutation In [31], another genetic operation called inversion is introduced. Inversion means exchanging the positions of two nodes within a gene, as shown in Fig Figure 4-3 Inversion There are many parameters that can greatly affect the behavior of this algorithm. These include: Population size - The population size is the number of genes used in the process. A large population increases the probability of finding a good gene, but it also decreases the computational efficiency. Mutation rate - The frequency of mutations plays an important role. Mutations are basically random in their nature, so the probability of mutation generating a significantly improved gene is relatively low. A large number of mutations are required to produce a few good ones, but we do not want to introduce too many mutations since this would make the whole system very unstable and random. Crossover rate - The ratio of genes used for crossover is another important factor. Too many crossovers can lead to a loss of existing good genes. Too few crossovers can put a too great restriction on the evolution process and limit the production of new good genes. Evaluation function - The gene evaluation function is extremely important in determining the performance and behavior of the algorithm. The constraints and how the constraints are weighted against each other need to be carefully considered to get the best result. 17

20 5 Incremental Layout Consider that we have a performed an automatic layout of a graph, possibly followed by some manual editing to get it just right. Then assume that we insert some new nodes and edges into the graph. It would be desirable to be able to perform a new automatic layout without changing the original graph too much, especially if we have spent time and effort on manually editing it. Most layout algorithms don t take the current layout of the graph into account at all. Even a minor change to the graph, such as adding or deleting an edge may cause major and unpredictable changes in the result of the layout. A way to solve this problem is through incremental layout. Another advantage with incremental layout is that it can be much faster than doing a full layout. Although it is generally agreed that layout stability is a serious problem with many layout algorithms, relatively little research has been done in this area. It is difficult to actually measure the stability of a graph between successive layouts. The degree of perceived stability between layouts depends on how the user perceives and remembers different diagram structures. Important objective factors include the geometrical positions and the relative order in which nodes and edges appear in the diagram. It is also important to consider the trade-off between minimizing changes and preserving a consistent and readable graph. If too few or small changes are made, the graph can easily become obscure and difficult to read, especially if after performing several successive incremental layouts. In most cases, it is more important to visualize actual changes in the data. For example, if an edge is removed from a hierarchical graph, large parts of the graph might need to be restructured to visualize the new hierarchy. An incremental layout method for achieving stability in the Sugiyama layout algorithm through use of constraints is proposed in [15]. There are four basic steps in this method. 1. Generate stability constraints. In this first step, a large set of constraints is generated to record the level assignment of each node and the relative position of the nodes within each level. 2. Determine the vicinity of change. The vicinity of change is a set of nodes that are directly or indirectly affected by the change. Whether a node is indirectly affected is determined from how many edge lengths away the node is from the directly affected node. The node is affected if it is within a vicinity radius parameter that specifies the maximum number of edge lengths. For example, a vicinity radius of zero restricts the vicinity of change to only directly affected nodes. 3. Deactivate constraints. All nodes within the vicinity of change are freed from their stability constraints. 4. Perform a new layout. A new layout that takes the remaining stability constraints into account is performed. During this layout, only nodes within the vicinity of change are allowed to move freely. Note that if all nodes on a level are prohibited from moving, there is no need to recompute their relative positions. Another method on how to incorporate incremental layout into the Sugiyama layout algorithm is proposed in [24]. The algorithm presented supports insertion, deletion, and optimization operations on a single node or edge. More complex updates must be decomposed to use only these operations. 18

21 6 Example Drawings Here, example drawings of some test graphs produced by the spring embedder algorithm and the Sugiyama algorithm are shown. The tests where performed using the AGD-library implementation of the spring embedder and Sugiyama layout algorithms. The AGD-library is a library consisting of a collection of layout algorithms and a framework for extending the library by new implementations. It is a product of a cooperation of groups in Halle, Koeln and Saarbruecken supported by the DFG in the program "Effiziente Algorithmen fuer diskrete Probleme und ihre Anwendung". The AGD-library is implemented in C++ and is based on LEDA, which is a comprehensive software platform for combinatorial and geometric computing. LEDA is available at the Max Planck-Institut fuer Informatik, Saarbruecken, via The AGD-library is available at the AGD homepage (a) (b) (c) (d) Figure 6-1 Drawings of a random graph with 6 nodes and 9 edges generated by (a): Sugiyama algorithm using barycenter heuristic, (b): Sugiyama algorithm using median heuristic, (c): spring embedder algorithm with 100 iterations, (d): spring embedder algorithm with 400 iterations. 19

22 (a) (b) (c) (d) Figure 6-2 Drawings of a biconnected graph with 20 nodes and 30 edges generated by (a): Sugiyama algorithm using barycenter heuristic, (b): Sugiyama algorithm using median heuristic, (c): spring embedder algorithm with 400 iterations, (d): same as (c). 20

23 (a) (b) Figure 6-3 Drawings of a planar biconnected graph with 50 nodes and 75 edges generated by (a): Sugiyama algorithm using barycenter heuristic, (b): Sugiyama algorithm using median heuristic. 21

24 (a) (b) Figure 6-4 Drawings of a planar biconnected graph with 50 nodes and 75 edges (same graph as in Fig. 6-3) generated by (a): spring embedder algorithm with 100 iterations, (b): spring embedder algorithm with 500 iterations. 22

25 The difference between drawings generated by the Sugiyama algorithm using the median heuristic versus the barycenter heuristic is typically very subtle as seen in Fig. 6-1 and 6-2. The median heuristic is better for some graphs and the barycenter heuristic is better for others. Of the example graphs presented above, the most noticeable difference between the barycenter heuristic and the median heuristic is perhaps seen in Fig In the graph shown in Fig. 6-3, the median heuristic tend to concentrate all nodes to left side, while the barycenter heuristic tend to distribute the nodes more evenly. It might seem that the Sugiyama algorithm sometimes produce drawings with edge crossings that obviously could be avoided. For example, it is obvious that the edge 5 3 in Fig. 6-1(a) can be routed so that it doesn t cross any other edges. This behavior can be explained by the lack of a global method for reducing edge crossings between several levels. This problem might be avoided by the use of a barycenter value that takes several levels into consideration, as mentioned in Note how the drawings generated by the spring embedder algorithm look quite different, even when they are generated from the same graph with the same number of iterations, as in Fig. 6-2(c) and Fig. 6-2(d). The result is highly dependent on the initial random placements of nodes, especially if the number of iterations is low. A problem with the spring embedder algorithm is that the edges can cross nodes, or at least get very close to cross nodes, as seen in Fig This is because there is no repulsive force acting between an edge and a node unless the edge and node are connected. The performance of both the Sugiyama and the spring embedder algorithms is good, even for what would be considered an extremely large graph in a Rose diagram. A graph with 100 nodes and 200 edges was processed in less than 5 seconds by the spring embedder algorithm (with 400 iterations) and in less than 3 seconds by the Sugiyama algorithm on a 200Mhz Pentium Pro. 23

26 7 Conclusion Some different approaches and specific algorithms for creating an aesthetically pleasing drawing of a graph automatically have been presented. There is no single method or algorithm that is best suited for all types of graphs. To achieve the best layout for a particular type of graph, the requirements and the aesthetic criteria must first be well understood. The algorithmic approach is generally better suited for graphs where the requirements are limited and well specified and when the computational efficiency is of outmost importance. The more flexible declarative approach is generally better suited for more general graphs where the requirements are less stable and where the ability to integrate new and possibly user-defined constraints are more important than computational efficiency. The algorithmic approach seems to be the better choice when designing an automatic layout system for Rose diagrams since the computational efficiency is of outmost importance in an interactive application such as Rose. The different diagram types in Rose are also practically identical with regards to requirements put on the layout algorithm and the aesthetic criteria are well defined and there exist many good algorithms to satisfy these. The Sugiyama layout algorithm presents a heuristic that is well suited for the directed diagrams with a hierarchical structure that occurs frequently in Rose diagrams. It is very computationally efficient and it is well studied. There exist a large number of extensions and modifications to the original Sugiyama algorithm described in the literature that can improve its performance and satisfy the needs in Rose. These include incremental layout and the ability to produce orthogonal drawings. The spring embedder algorithm provides an alternative to the Sugiyama layout algorithm for diagrams, or part of diagrams that lack a hierarchical structure or where the ability to display symmetries is more important. The spring embedder can also be extended to generate good layout of directed hierarchical structures. A drawback with the spring embedder is that it does not handle orthogonal drawings. To provide an optimal layout system for Rose, several algorithms and some declarative approach to handle user-defined constraints would need to be integrated to provide the maximum flexibility in terms of computational efficiency and ability to satisfy the user s aesthetic criteria for individual diagrams. 24