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.


  • 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.



Quant a


Related publications

  • Tort, A., Olive, A., Pastor, J.A.: Former student's perception of improvement potential of conceptual modeling in practice. In: 32nd International Conference on Conceptual Modeling (ER 2013), Springer (2013) Accepted for publication.
  • Tort, A., Olivé, A., Pastor, J.A.: Former Students' Views on the Usefulness of Conceptual Modeling Education. In: 1st Symposyium on Conceptual Modeling Education. 32nd International Conference on Conceptual Modeling (ER 2013), Springer (2013) Accepted for publication.
  • Gómez Hernández, Jose María: Visualización de esquemas UML con HTML5. Master thesis, Universitat Politecnica de Catalunya (2012).

Libraries and source code

  • jsUML2 - A lightweight HTML5/JavaScript library for UML 2 diagramming.
  • uml2html5 - Source code and examples.


This study has been carried out by researchers from the GMC (Grup de Recerca en Modelització Conceptual de Sistemes d'Informació) group at Universitat Politècnica de Catalunya-BarcelonaTech.

For any question or comment, do not hesitate to get in touch with us by sending an e-mail to

Treball Futur


Below we point out some potential areas for future work, in regards to the evolution of the HTML5 UML schema viewer:

  • Broaden the scope of the viewer to include other UML diagrams, apart from the class diagram.
  • Combine the extensions added to the jsUML2 tool in a public release of the aforementioned tool.