Diagram Control and Model Order for Sugiyama Layouts

TL;DR

Automatic diagram layout often fails to capture user intent encoded as secondary notation. The authors propose using model order from the textual model to influence Sugiyama layout phases, applying this approach to SCCharts and Lingua Franca and grounding it with developer feedback. They present two practical strategies for SCCharts, a tie-breaker-based approach for Lingua Franca, qualitative interviews, and a generalizable guidebook for extracting model-order configurations. The work enables intent-preserving, stable diagrams that reflect textual design choices, while cautioning against default strict constraints that can produce clutter; it also highlights when to use model order as constraint versus a tie-breaker and offers guidance for future tooling.

Abstract

Graphical WYSIWYG editors programming languages are popular since they allow to control the diagram layout to express intention via secondary notation such as proximity and topology. However, such editors typically require users to do manual layout. Conversely, automatic layout of diagrams typically fails to capture intention because graphs are usually considered to not contain any order. Model order can combine the desire for control of secondary notation with automatic layout, without additional overhead, since the textual model already employs secondary notation. We illustrate how model order can exert control on the example of programming languages SCCharts and Lingua Franca. We also propose a first guidebook how such model order configurations can be extracted for other programming languages with a graphical notation.

Figures (5)

• Figure 1: Two semantically identical variants of an obfuscated SCCharts model created by and used with permission of sb. The textual source models can be seen in \ref{['fig:send-receive-text']} and \ref{['fig:send-receive-text2']} with the matching diagram in \ref{['fig:send-receive_goodorder']} and \ref{['fig:send-receive-text2']}.
• Figure 2: \ref{['fig:cdn-cache-snippet-text']} shows a snippet of the inner behavior of the Pop reactor of the cdn_cache_demo model, with l1 above l2. \ref{['fig:cdn-cache-snippet_noorder']} shows a layout that optimizes edge crossing, but violates the l1/l2-ordering of \ref{['fig:cdn-cache-snippet-text']}. \ref{['fig:cdn-cache-snippet_order']} shows how an alternative layout preserves this ordering.
• Figure 3: An obfuscated SCCharts model created by and used with permission of sb. \ref{['fig:example2-connection-tie']} uses model order as a tie-breaker. Textual node reordering in \ref{['fig:example2-connection-good']} prevents the dangling node in \ref{['fig:example2-connection-tie']}. \ref{['fig:example2-connection-problem']} uses an adjusted node order.
• Figure 4: An obfuscated SCCharts model created by and used with permission of sb.
• Figure 5: The AccelerometerDisplaylf example model with abbreviated textual model and graphical representation.