本論文提出一套增量佈局演算法，適用於優化跨階層式方塊圖的佈局。方塊圖以選擇性的抽象化形式廣泛用於說明系統架構，因為設計師通常需要透過隱藏不相關的細節以傳達高層次的概念，但同時又混合顯示選定的細節，以有效地說明其操作原理。現今的通用製圖工具並不支援此概念，使用者只能完全靠手動編輯，但是每次更改選擇性抽象化或調整結構，都只能以許多繁瑣的編動作重新調整細節才能達到，同時容易破壞風格一致性甚至引入錯誤。另一方面，現今的領域專用工具雖然有支援自動重新佈局，但往往會出現劇變、令人驚訝的異動，與原始佈局幾乎沒有相似之處。

為了解決這個問題，我們提出的二階段的增量佈局演算法。前處理階段會根據容器內部結構預先保留擴展空間。當使用者切換選定的抽象方塊以顯示或隱藏時，則可利用預留擴展空間，盡可能保持方塊之間的空間關係，同時考量方塊之間邊緣的美觀指標，進行漸進式的佈局調整。此算法使設計師可以通過僅指定不同的塊展開或折疊，從同一系統架構模型快速創建不同的選擇性抽象視圖。我們以本實驗室開發的嵌入式裝置的系統架構圖作為實例演示，過程中展示了第一階段的空間預留佈局及第二階段的增量佈局，根據實驗結果，我們的增量佈局演算法增強了互動性畫圖工具的使用者體驗並且維持美觀指標。

This thesis presents an incremental layout algorithm for optimizing the placement of blocks in a diagram for presenting cross-hierarchy structures. Block diagrams with selective abstractions are widely used in illustrating system architectures because they usually require conveying a high-level view that hides irrelevant details while exposing selected details to illustrate their principles of operation. Unfortunately, today's general diagramming tools require users to manually redraw or re-adjust the structure every time the selective abstraction is changed, which can be tedious and introduce stylistic inconsistency and possibly errors. On the other hand, today's domain-specific tools may assist with automatic re-layout but often with drastic, surprising changes that bear little resemblance to the original layout.

To address this problem, we propose a two-phase incremental layout algorithm that retains the spatial relationship between the blocks as much as possible when switching selected abstraction to expose or hide. The preprocessing phase performs space reservation based on the internal structure so that the actual zooming phase can make minimal adjustments to the layout positions driven by an aesthetic metric in terms of inter-block margins. This algorithm allows designers to quickly create different selective abstraction views from the same system architecture model simply by designating the different blocks to expand or collapse. We demonstrate our proposed approach using the system architecture diagram of an embedded device developed in our laboratory. This example showcases the space-reserved layout at the first stage and the incremental layout at the second stage. Based on the experimental results, our algorithm enhances the user experience of interactive diagramming tools while maintaining aesthetic quality.

1 Introduction 1
1.1 Motivation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.1.1 Architectural Block Diagrams . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.1.2 Selective Abstraction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.1.3 Diagramming Editors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.2 Contributions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.3 Thesis Organization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2 Related Work 5
2.1 Diagramming . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2.1.1 Generic Diagramming . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2.1.2 Architecture Diagramming . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2.2 Zooming . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.2.1 Semantic Zooming . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.2.2 Layout Algorithms for Zooming . . . . . . . . . . . . . . . . . . . . . . . . 9
2.2.3 Challenges of Zooming layout . . . . . . . . . . . . . . . . . . . . . . . . . 9
3 Problem Statement 12
3.1 System Background . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
3.1.1 Data Structure of Diagram . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
3.1.2 Layout Flow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
3.1.3 Abstraction Selection Flow . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
3.2 Cross-Hierarchy Space Reservation Problem . . . . . . . . . . . . . . . . . . . . . . 16
3.2.1 Problem Definition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
3.2.2 Input . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
3.2.3 Output . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
3.2.4 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
4 Technical Approach 20
4.1 Background of Force-Directed Graph Drawing . . . . . . . . . . . . . . . . . . . . 20
4.2 Strategies for Expandables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
4.2.1 Expansion Assessment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
4.2.2 Bending Strategy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
4.2.3 Radial Strategy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
4.2.4 Progressive Stretching . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
4.3 Algorithm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
5 Implementations 28
5.1 Framework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
5.2 Interface Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
5.3 Algorithm Paramatizing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
6 Case Study 31
6.1 Overview of BlueBox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
6.2 Input Diagram . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
6.3 Output Diagram . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
7 Conclusions and Future Work 35
7.1 Conclusions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
7.2 Future Work . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

[Ald] Gaudenz Alder. draw.io: The easiest way for confluence teams to collaborate using diagrams. https://www.drawio.com/.
[ASF] Peter Arvai Adam Somlai-Fischer, Peter Halacsy. Prezi: Presentations and videos with engaging visuals for hybrid teams. https://prezi.com/.
[DBHH94] J. Dill, L. Bartram, A. Ho, and F. Henigman. A continuously variable zoom for navigating large hierarchical networks. In Proceedings of IEEE International Conference on Systems, Man and Cybernetics, volume 1, pages 386–390 vol.1, 1994.
[Dig] Digi-Key Electronics. Scheme-it: Free Online Schematic and Diagramming Tool. https:
//www.digikey.com/schemeit/.
[FDB08] Mathias Frisch, Raimund Dachselt, and Tobias Brückmann. Towards seamless semantic zooming techniques for UML diagrams. In Proceedings of the 4th ACM Symposium on Software Visualization, SoftVis ’08, page 207–208, New York, NY, USA, 2008. Association for Computing Machinery.
[Hau07] Matthew Hause. The OMG modelling language (SYSML). pages 14–, 08 2007.
[Inc] Lucid Software Inc. Lucidchart: Intelligent Diagramming. https://www.lucidchart.com. [Joi] JointJS: JavaScript diagramming library powering exceptional UIs. https://www.jointjs.
com/.
[KKO+06] Tero Kangas, Petri Kukkala, Heikki Orsila, Erno Salminen, Marko Hännikäinen, Timo D. Hämäläinen, Jouni Riihimäki, and Kimmo Kuusilinna. UML-based multiprocessor SoC design framework. ACM Trans. Embed. Comput. Syst., 5(2):281–320, may 2006.
[KKP+06] Minseong Kim, Suntae Kim, Sooyong Park, Mun-Taek Choi, Munsang Kim, and Hassan Gomaa. UML-based service robot software development: A case study. In Proceedings of the 28th International Conference on Software Engineering, ICSE ’06, page 534–543, New York, NY, USA, 2006. Association for Computing Machinery.
[LRJ+21] Richard Lin, Rohit Ramesh, Nikhil Jain, Josephine Koe, Ryan Nuqui, Prabal Dutta, and Bjoern Hartmann. Weaving schematics and code: Interactive visual editing for hardware description languages. In The 34th Annual ACM Symposium on User Interface Software and Technology, UIST ’21, page 1039–1049, New York, NY, USA, 2021. Association for Computing Machinery.
[MELS95] Kazuo Misue, Peter Eades, Wei Lai, and Kozo Sugiyama. Layout adjustment and the mental map. Journal of Visual Languages and Computing, 6(2):183–210, 1995.
[MLLG01] Grant Martin, Luciano Lavagno, and Jean Louis-Guerin. Embedded UML: A merger of real-time UML and co-design. In Proceedings of the Ninth International Symposium on Hardware/Software Codesign, CODES ’01, page 23–28, New York, NY, USA, 2001. Association for Computing Machinery.
[Pet13] Marian Petre. UML in practice. In 2013 35th International Conference on Software Engineering (ICSE), pages 722–731, 2013.
[RLP+16] Ulf Rüegg, Rajneesh Lakkundi, Ashwin Prasad, Anand Kodaganur, Christoph Daniel Schulze, and Reinhard von Hanxleden. Incremental diagram layout for automated model migration. In Proceedings of the ACM/IEEE 19th International Conference on Model Driven Engineering Languages and Systems, MODELS ’16, page 185–195, New York, NY, USA, 2016. Association for Computing Machinery.
[RMS97] Kathy Ryall, Joe Marks, and Stuart Shieber. An interactive constraint-based system for drawing graphs. In Proceedings of the 10th Annual ACM Symposium on User Inter- face Software and Technology, UIST ’97, page 97–104, New York, NY, USA, 1997. Association for Computing Machinery.
[SFM99] MAD Storey, FD Fracchia, and HA Müller. Customizing a fisheye view algorithm to

preserve the mental map. Journal of Visual Languages & Computing, 10(3):245–267, 1999.
[SM95] Margaret Storey and Hausi Müller. Graph layout adjustment strategies. 09 1995.
[SWFM97] M.-A.D. Storey, K. Wong, F.D. Fracchia, and H.A. Müller. On integrating visualization techniques for effective software exploration. In Proceedings of VIZ ’97: Visualization Conference, Information Visualization Symposium and Parallel Rendering Symposium, pages 38–45, 1997.
[Wal] Jordan Walke. React: The library for web and native user interfaces. https://react.dev/.
[WEK04] Roland Wiese, Markus Eiglsperger, and Michael Kaufmann. yFiles — Visualization and Automatic Layout of Graphs, pages 173–191. Springer Berlin Heidelberg, Berlin, Heidelberg, 2004.