AltiDraw：支援導引與檢核之多模態可程式化圖形編輯器

簡易檢索 / 詳目顯示

回結果列表

研究生：	董曉彤 Dong, Hsiao-Tung
論文名稱：	AltiDraw：支援導引與檢核之多模態可程式化圖形編輯器 AltiDraw: Multi-Modality Programmable Diagram Editor with Prompt Support and Rule Checking
指導教授：	周百祥 Chou, Pai H.
口試委員:	韓永楷 Hon, Wing-Kai 謝孫源 Hsieh, Sun-Yuan
學位類別：	碩士 Master
系所名稱：	電機資訊學院 - 資訊工程學系 Computer Science
論文出版年：	2021
畢業學年度：	109
語文別：	英文
論文頁數：	60
中文關鍵詞：	智慧圖形編輯器、多模態、正則表達式、圖語言、圖形描述語言、圖模型、自動補完
外文關鍵詞：	smart diagram editor, diagram language, graph language, graph description language, auto-complete
相關次數：	點閱：1 下載：0
分享至:	分享至facebook 分享至twitter

查詢本校圖書館目錄查詢臺灣博碩士論文知識加值系統勘誤回報

示意圖是許多電子文件、技術文件、投影片裡不可缺的部份，但是編輯它們卻是最耗時、最瑣碎的任務。雖然圖形介面提供型樣板讓使用者可以把形狀拖曳到圖裡，再以拉線將其連接，但是這種編輯模式已經使用數十年，沒有太大的改進，仍然要靠使用者手動在細節上做低階的變更與調整佈局。雖然有特定種類的示意圖有支援由文字描述源碼自動產生圖形，但產出的圖大多無法銜接到圖形介面編輯器再將修改內容回饋給文字源碼。極少數示意圖編輯器能夠對使用者做提示，像自動完成或遵守特定示意圖的繪圖準則等等，而且目前這樣的編輯工具的程式碼都必須針對各種的示意圖重新撰寫。

為了解決上述問題，本論文提出一套名為AltiDraw的架構，適合實作可程式化、有擴充性、多模態的示意圖編輯器。正如常用的程式源碼編輯器，可透過載入源碼語法定義，對純文字檔案編輯時做提示、語法亮示，我們願景是一套能夠載入各種示意圖的定義，對示意圖編輯時能夠提供高階的編輯指令與提示。我們支援三種編輯模態：圖形介面、指令介面、與示意圖定義語言。使用者可以透過任何一種模態輸入示意圖，再用任何一種最方便、最適用的模態去編輯。我們採用一套新穎的圖形文法REGD，把支援的語言編輯規則定義為匹配即取代的型樣。這種方式能夠精簡又精準地表達高階概念，同時也能以高效率演算法實作。

我們以流程圖來展現我們可程式化圖形編輯架構的可行性。示範的功能足以實作多模態、強大的編輯動作，可套用於圖形局部，並提供互動式的提示與結構性的編輯，而其規則全部都是可由外載入的。本研究成果應該足以讓示意圖編輯器也能夠像文字編輯器根據外載定義客製出不同種類示意圖所需之編輯動作。

Diagramming, or drawing graphs, can be one of the most tedious tasks in editing electronic documents such as slide presentations and technical manuscripts. User interfaces for diagramming by connecting shapes from a palette by wire have been fundamentally unchanged for several decades, forcing users to manually tweak the layout in detail. Domain-specific languages exist that can generate diagrams from a textual description, but the graph generally cannot be edited and fed back to the source code except for restricted cases. Also, few general diagramming tools today can prompt users for auto-completion or enforcing diagramming conventions, but such features would need to be crafted manually for each such specific editor.

To address this problem, we propose AltiDraw, a programmable, extensible, multi-modal framework for diagram editing. Analogous to programmable text editors that can load in different language definitions for syntax highlighting and autocompletion, we envision our editing framework to also be able to load in the definitions for different visual languages, or diagramming rules, to support editing actions and prompting for different types of diagrams. We support three modes of editing: graphical user interface (GUI), command-line interface (CLI), and graph definition language (GDL). The same diagram can be input in any one mode and be edited in any other mode, allowing the user to use the most convenient way to edit the diagram. A novelty in this work is the use of REGD for defining the editing rules in terms of match-and-replace patterns. This representation allows editing rules to be stated concisely at a high level while yielding efficient implementations.

We demonstrate the feasibility of our programmable diagram editing framework by implementing a flowchart editor. It supports not only multi-mode editing but also more importantly, powerful editing actions on subgraphs with interactive prompts to enforce structured editing, all as defined by loadable rules. This work is expected to enable diagram editors to be programmable over different types of diagrams the way the same text editor can handle program in different languages.

Contents i
Acknowledgments vii
Introduction 1
1 Motivation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
2 Contributions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
3 Thesis Organization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Related Work 4
1 Graph Description Languages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.1 GraphML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.2 DOT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.3 ELKT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2 Graph vs. Diagram Renderers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
3 Diagramming Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
3.1 General Drawing Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
3.2 Domain-Specific Diagramming Tools . . . . . . . . . . . . . . . . . . . . . 8
3.3 CLI-Based Diagramming Tools . . . . . . . . . . . . . . . . . . . . . . . . 9
4 Graph Languages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
4.1 Graph Transformation Tools . . . . . . . . . . . . . . . . . . . . . . . . . . 11
4.2 Graph-Transformation-Based Diagram Editors . . . . . . . . . . . . . . . . 11
5 Web-Based Diagramming and Layout Libraries . . . . . . . . . . . . . . . . . . . . 11
5.1 Diagramming Libraries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
5.2 Layout Libraries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
System Overview 13
1 Diagram Modeler vs. Author . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
2 Diagram Editor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
2.1 Three Modalities . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
2.2 Phantoms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
3 Diagram Language Definitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
3.1 Actual Vertex Type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
3.2 Phantom Vertex Type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Technical Approach 22
1 Graph Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
2 GDL Syntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
3 REGD . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
3.1 Wildcard Keywords . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
3.2 Group Capturing and Referencing . . . . . . . . . . . . . . . . . . . . . . . 27
3.3 Repetitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
3.4 Negative Assertions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
4 Commands . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Implementations 32
1 Web Architecture of the Editing Modalities . . . . . . . . . . . . . . . . . . . . . . 32
1.1 Diagram Service and Observable Subscription . . . . . . . . . . . . . . . . 32
1.2 Graph Description Component and GDL Parse Service . . . . . . . . . . . . 33
1.3 Canvas Component and Layout Service . . . . . . . . . . . . . . . . . . . . 34
1.4 CLI Service . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
2 Phantom Filling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
Case Study on Flowchart 36
1 Diagram Language Definition for Flowchart . . . . . . . . . . . . . . . . . . . . . . 36
2 Running Example of Building a Flowchart . . . . . . . . . . . . . . . . . . . . . . . 41
Evaluation 49
1 Tool Functionality . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
1.1 GDL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
1.2 GUI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
1.3 CLI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
1.4 Free-Hand Editing and Rule Checking . . . . . . . . . . . . . . . . . . . . . 50
1.5 Custom Diagram Language . . . . . . . . . . . . . . . . . . . . . . . . . . 51
1.6 Vertex and Edge Styling . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
1.7 Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
2 GDL Expressiveness . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
3 Editing Effort . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Conclusions and Future Work 57
1 Conclusions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
2 Future Work . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57

                                

[1] U. Brandes, M. Eiglsperger, J. Lerner, and C. Pich, Graph markup language (GraphML). 2013.
[2] E. R. Gansner, E. Koutsofios, and S. North, “Drawing graphs with dot.” https://www.graphviz.
org/pdf/dotguide.pdf, 2015. Last checked: 2021-09-13.
[3] “ELK text format.” https://www.eclipse.org/elk/documentation/tooldevelopers/
graphdatastructure/elktextformat.html. Last checked: 2021-09-13.
[4] E. R. Gansner and S. C. North, “An open graph visualization system and its applications to
software engineering,” Software - Practice and Experience, vol. 30, no. 11, pp. 1203–1233,
2000.
[5] J. Ellson, E. Gansner, L. Koutsofios, S. North, and G. Woodhull, “Graphviz— open source graph
drawing tools,” in Graph Drawing. GD 2001. Lecture Notes in Computer Science (M. P., J. M.,
and L. S., eds.), vol. 2265, pp. 483–484, Springer, 2002.
[6] “Eclipse layout kernel (ELK).” https://www.eclipse.org/elk/. Last checked: 2021-09-13.
[7] “mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams,
Gantt charts and git graphs.” https://mermaid-js.github.io/. Last checked: 2021-09-13.
[8] “Flowchart Maker and Diagramming Software | Microsoft Visio.” https://www.microsoft.com/
microsoft-365/visio/flowchart-software/. Last checked: 2021-09-13.
[9] “Google Drawings - create diagrams and charts, for free.” https://docs.google.com/drawings/.
Last checked: 2021-09-13.
[10] “diagrams.net - Diagram Software and Flowchart Maker.” https://www.diagrams.net/. Last
checked: 2021-09-13.
[11] “Flowgorithm.” http://www.flowgorithm.org, 2021. Last checked: 2021-09-13.
[12] V. Sunkara and A. Sane, “Skeblle: A new kind of diagramming tool with programmable active
diagrams,” in Perspectives of System Informatics. PSI 2014. Lecture Notes in Computer Science
(A. Voronkov and I. Virbitskaite, eds.), vol. 8974, pp. 273–287, Springer, 2015.
[13] H. Ehrig, K. Ehrig, U. Prange, and G. Taentzer, Fundamentals of Algebraic Graph Transformation. Springer, 2006.
[14] A. Rensink, “The GROOVE simulator: A tool for state space generation,” in Applications of
Graph Transformations with Industrial Relevance (AGTIVE 2003), Lecture Notes in Computer
Science (J. Pfaltz, M. Nagl, and B. Böhlen, eds.), vol. 3062, pp. 479–485, Springer, 2004.
[15] M. Minas, “Concepts and realization of a diagram editor generator based on hypergraph transformation,” Science of Computer Programming, vol. 44, no. 2, pp. 157–180, 2002. Special Issue
on Applications of Graph Transformations (GRATRA 2000).
[16] “mxGraph 4.2.2.” https://jgraph.github.io/mxgraph/, 2020. Last checked: 2021-09-13.
[17] “JointJS: Visualize and interact with diagrams and graphs.” https://www.jointjs.com/
opensource, 2020. Last checked: 2021-09-13.
[18] M. Bostock, “D3.js - data-driven documents.” http://d3js.org/, 2012. Last checked: 2021-09-
13.
[19] J. Eker, J. W. Janneck, E. A. Lee, J. Liu, X. Liu, J. Ludvig, S. Sachs, Y. Xiong, and S. Neuendorffer, “Taming heterogeneity - the Ptolemy approach,” Proceedings of the IEEE, vol. 91, no. 1,
pp. 127–144, 2003.
[20] “GitHub - kieler/elkjs: ELK’s layout algorithms for JavaScript.” https://github.com/kieler/
elkjs/. Last checked: 2021-09-13.
[21] “Chevrotain.” https://chevrotain.io/docs/. Last checked: 2021-09-13.
[22] “GitHub - dagrejs/dagre: [DEPRECATED] - Directed graph layout for JavaScript.” https://
github.com/dagrejs/dagre. Last checked: 2021-09-13.

簡易檢索 / 詳目顯示

相關論文