Layout Framework

  1. S. Maier. A Pattern-based Approach for the Combination of Different Layout Algorithms in Diagram Editors. Universitaet der Bundeswehr Muenchen, 2012. [Link]


The layout framework is based on a pattern-based layout approach for the specification of layout behavior. The approach is based on meta-models and enables the combination of all commonly used approaches for the definition of layout behavior:

  • a newly developed rule-based approach
  • graph drawing algorithms, constraint-based approaches, ...

Layout patterns are the main concept of the approach: Each layout pattern encapsulates certain layout behavior. Several layout patterns may be applied to a diagram simultaneously, even to diagram parts that overlap. A control algorithm that is included in the approach deals with such situations.

One import characteristic of the approach is that the layout is continuously maintained during diagram modification, and that it is updated at runtime. The possibility to reuse layout patterns, and to integrate them in a huge variety of different visual language editors are two more characteristics.

Based on the layout approach, several layout features were developed:

  • User-controlled layout behavior: Allows the editor user to influence the layout at runtime by applying layout patterns to certain parts of the diagram. For instance, the editor user can align components horizontally by applying the horizontal alignment pattern. This layout behavior is preserved until the editor user explicitly removes it again.

  • Layout suggestions: The editor is capable of suggesting layout patterns being applied to certain parts of the diagram. For instance, the editor suggests to apply the horizontal alignment pattern to components that are almost horizontally aligned.

  • Ad-hoc layout: The editor can even automatically apply layout suggestions.

As a proof of concept, the layout framework has been integrated in a variety of different diagram editors:

  • DiaMeta editors: graph editor, class diagram editor, GUI forms editor, VEX diagram editor (...)
  • GEF-based editors: graph editor, generic diagram editor
  • JavaFX-based editors: graph editor


Screencast of Graph Editor
This screencast shows a DiaMeta graph editor and demonstrates the automatic and user-controlled layout.

Screencast of Ecore Editor
This screencast shows a DiaMeta Ecore editor and demonstrates the automatic and user-controlled layout.


Institut für Softwaretechnologie
Fakultät für Informatik
Universität der Bundeswehr München
85577 Neubiberg

Gebäude 41-400 Raum 2415
Tel: +49 (89) 6004-3396
Fax: +49 (89) 6004-4447