Automatic Generation of Web-Based Modeling Editors

With the current trend of digitalization within a multitude of different domains, the need raises for effective approaches to capture domain knowledge. Modeling languages, especially, domain-specific modeling languages (DSMLs), are considered as an important method to involve domain experts in the system development. However, current approaches for developing DSMLs and generating modeling editors are mostly focusing on reusing the infrastructures provided by programming IDEs.

Nowadays, we witness more and more web-based modeling tools. And there are several available JavaScript libraries and frameworks to help us to develop online modeling editors (see our top 10 JavaScript libraries for drawing diagrams online). However, these frameworks do not exploit the high automation potential from DSML approaches to generate web modeling editors from language specifications.

The development of Web-based modeling editors still requires major programming efforts and dealing with recurring tasks. Click To Tweet

We (Manuel Wimmer, Irene Garrigós, and Sergio Firmenich) presented a paper at ICWE 2017 (free pdf version) where we combine the best of both worlds by reusing the language specification techniques of DSML engineering approaches for generating Web-based modeling editors.

In particular, we show how to combine two concrete approaches, namely Eugenia (play with it via the Eugenia live version) from DSML engineering and JointJS as a protagonist from JavaScript frameworks, and demonstrate the automation potential of establishing Web-based modeling editors.

We automate the creation of web-based modeling editors by combining Eugenia (@epsilonews) and @jointjs Click To Tweet

As illustrated in the following figure, we use Eugenia to specify the abstract and concrete syntax of DSMLs as already known for generating Eclipse-based modeling editors (right-hand side of the figure). In our work, we contributed an additional model-to-text transformation for generating Web-based modeling editors based on JointJS from Eugenia specifications. By having this additional transformation, you can now choose if you want to go with the Eclipse-based editors or if you prefer to use a Web-based modeling editor or use both options.

We also discussed our first results concerning two reference DSML examples which have been realized by our approach as Web-based modeling editors. In particular, we were interested in comparing the development efforts of using JointJS directly or starting with the Eugenia specification. The following table, gives an orientation based on the lines of code (LOC) metric, i.e., comparing the LOC needed on the JointJS level and on the Eugenia level.

As indicated by the current results, the usage of language engineering techniques allows for a speedup of developing also Web-based modeling editors. The next step in our research is to perform an evaluation of the Web-based editor generation process for larger languages such as UML, SysML, or BPMN and to evaluate how to generate animation code from the operational semantic definitions of the modeling languages as well as validation support for static semantic constraints expressed in OCL.