Visualización de esquemas UML con HTML5

Introducció

Uno de los mayores desafíos relacionados con la educación e investigación en el campo de la Ingeniería de Requisitos y Modelado Conceptual (RE / CM) es la falta de investigación empírica sobre los usos prácticos de RE / CM, incluido el impacto en la práctica de la educación en CM .

El objetivo de este proyecto es crear una herramienta de JavaScript que permita la visualización de esquemas UML, utilizando las nuevas características en el lenguaje HTML5. El usuario puede interactuar dinámicamente con el esquema para modificarlo y adaptarlo. Permite la generación de esquemas, tanto gráficamente, utilizando una interfaz web para agregar los elementos, como textualmente, utilizando un lenguaje de modelado textual específico. Para mejorar la visualización, se ha implementado un algoritmo de diseño automático para posicionar automáticamente los elementos en el esquema.

El desarrollo de cualquier proyecto de ingeniería, desde la construcción de un procesador de texto hasta un software de comunicación por Internet, requiere tareas de modelado que permitan experimentar y visualizar el sistema que los interesados ​​desean construir. Debido a que estas etapas son tan importantes al construir un sistema, una herramienta que facilita este proceso mejorará tanto el resultado final como el tiempo invertido en su creación.

Uno de los problemas que podemos enfrentar durante este proceso es no tener una herramienta que se ajuste a nuestras necesidades, y tener que usar una herramienta que no cumpla específicamente con todos nuestros requisitos. Hay muchas herramientas CASE (ingeniería de software asistida por computadora) que proporcionan métodos para hacer el modelado, pero todas tienen problemas similares:

  • Tienen una alta complejidad en su uso, tienen más funcionalidades de las que normalmente se necesitan, lo que complica su utilidad.
  • La interoperabilidad no está garantizada. Esto complica la transferencia de información de un lugar a otro, ya que incluso diferentes versiones de la misma herramienta pueden no ser compatibles.

Como nuestra herramienta se implementa en HTML5, sus usuarios solo necesitan un navegador web para usarla, sin la necesidad de instalar software adicional.

Caracteristicas

  • Interacción con los elementos UML: el usuario puede interactuar dinámicamente con estos elementos y administrar fácilmente el diagrama y navegar a través de él. Las principales características incluidas son:
    • Arrastrar y soltar: para facilitar la creación de diagramas, el usuario puede elegir un elemento y moverlo a cualquier otra posición en el diagrama.
    • Selección simple o múltiple: poder seleccionar un elemento en el diagrama para interactuar con él. Para que el proceso de interacción con la herramienta sea más rápido, es posible seleccionar un conjunto de elementos simultáneamente para interactuar con ellos como un grupo.
    • Cambiar estilo: para obtener una mejor representación visual, es posible configurar algunos parámetros de los elementos, como su color. Esto también dará lugar a diagramas personalizados.
  • Algoritmo de diseño automático: la herramienta utiliza un algoritmo basado en las leyes físicas para calcular las fuerzas. El diagrama se considera un sistema físico en el que, para cada uno de los elementos, las fuerzas de atracción y repulsión se calculan utilizando las leyes de Hooke y Coulomb, para determinar qué tan cerca o cerca deben estar. Este proceso se repite iterativamente hasta que el sistema alcanza un equilibrio.
  • Lenguaje de modelado textual: UML es un lenguaje de modelado gráfico, que permite representar el sistema a construir usando diagramas. También hay lenguajes de modelado textual. Como su nombre lo indica, permiten definir sistemas en una notación textual, utilizando su propia gramática estándar. Existe una relación directa y unívoca entre un sistema gráfico representado en UML y otro representado mediante un lenguaje textual. Por lo tanto, ambos idiomas son equivalentes, pero en ciertas circunstancias es más rápido modelar usando un lenguaje textual.

Instal·lació

Ús

Quant a

Documentació

Publicaciones relacionadas

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

Librerias y código fuente

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

Contacte

Este estudio ha sido realizado por investigadores del grupo GMC (Grup of Recerca en Modelització Conceptual de Sistemes d'Informació) en Universitat Politècnica de Catalunya-BarcelonaTech.

Para cualquier pregunta o comentario, no dude en ponerse en contacto con nosotros enviando un correo electrónico aavillegas@essi.upc.edu

Treball Futur

Suggeriments

A continuación, señalamos algunas áreas potenciales para el trabajo futuro, en relación con la evolución del visor de esquema UML HTML5:

  • Amplíe el alcance del visor para incluir otros diagramas UML, aparte del diagrama de clase.
  • Combine las extensiones agregadas a la herramienta jsUML2 en una versión pública de la herramienta mencionada anteriormente.