Visualization of UML schemas with HTML5

One of the greatest challenges related to the education and research in the field of Requirements Engineering and Conceptual Modeling (RE/CM) is the lack of empirical research on the practical uses of RE/CM, including the impact in practice of the education in CM.

The goal of this project is to create a JavaScript tool that allows the visualization of UML schemas, using the new characteristics in the HTML5 language. The user can dynamically interact with the schema to modifiy and adapt it. It allows the generation of schemas, both graphically - using a web interface to add the elements - and textually - using a specific textual modeling language. To improve the visualization an auto-layout algorithm has been implemented to automatically position the elements in the schema.

The development of any engineering project, from the construction of a text processor to an Internet communication software, requires modeling tasks that allow experimenting and visualizing the system that the stakeholders wish to build. Because these stages are so important when building a system, a tool that facilitates this process will improve both the final result and the time invested in its creation.

One of the problems that we can face during this process is not having a tool that fits our needs, and be forced to use a tool which does not specifically meet all of our requirements. There are many CASE (Computer-aided software engineering) tools which provide methods to do the modeling, but they all have similar issues:

• They have a high complexity in their use, they have more functionalities than what is usually needed, thus complicating their usefulness.
• Interoperability is not guaranteed. This complicates the transfer of information from one place to another, as even different versions of the same tool may not be compatible.

As our tool is implemented in HTML5, its users only need a web browser to use it, without the need to install additional software.

Features

• Interaction with the UML elements: the user can interact dynamically with these elements, and easily manage the diagram and navigate through it. The main included features are:
  • Drag&drop: To facilitate the creation of diagrams, the user can choose an element and move it to any other position in the diagram.
  • Simple or multiple selection: Being able to select an element in the diagram to interact with it. To make the interaction process with the tool quicker, it is possible to select a set of elements simultaneously to interact with them as a group.
  • Change style: To obtain a nicer visual representation, it is possible to configure some parameters of the elements, such as their color. This will also result in customized diagrams.
• Auto-layout algorithm: the tool uses an algorithm based on the physical laws to calculate forces. The diagram is considered a physical system where, for each of the elements, the forces of attraction and repulsion are calculated using Hooke's and Coulomb's laws, to determine how far or how close they should be to one another. This process is repeated iteratively until the system reaches an equilibrium.
• Textual modeling language: UML is a graphical modeling language, that allows representing the system to be built using diagrams. There are also textual modeling languages. As the name implies, they allow defining systems in a textual notation, using their own standard grammar. There is a direct and univocal relationship between a graphical system represented in UML and another one represented using a textual language. Therefore, both languages are equivalent, but under certain circumstances it is faster to model using a textual language.