javascript - online - programa para hacer diagramas uml gratis

herramientas para generar diagramas UML para clases existentes en javascript

Question

El proyecto crece y aparece la necesidad de visualizar las relaciones entre las clases presentes en el proyecto. Algunos de ellos son independientes, otros se heredan de otros.

Estoy buscando herramienta (s) para visualizar estas relaciones. Soy consciente de que ya se hicieron preguntas similares aquí en las bibliotecas de JavaScript para dibujar diagramas de clase UML , pero en lo que a mí respecta, no se dio ninguna respuesta que se adapte a mis necesidades.

Estoy al tanto de esta lista de herramientas de Unified Modeling Language pero parecen dar la posibilidad de dibujar diagramas UML, mientras que lo que necesito es

1. una herramienta independiente
2. que genera diagramas UML desde el código javascript de mis definiciones de clase

En Ruby, esta herramienta se llama RailRoady. Si una herramienta de este tipo también existe en JavaScript, sería una ayuda significativa.

Answer 1

Algunas herramientas de análisis estático podrían ayudar en lo que está tratando de lograr. He estado utilizando principalmente el proyecto jscomplexity (jscomplexity.org) para el control de calidad, pero recuerdo el proyecto TAJS que es más avanzado y acabo de ver el PDF de la presentación en http://cs.au.dk/~amoeller/talks/TAJS2.pdf y si nos fijamos en la diapositiva 9, el resultado del estado abstracto de JavaScript parece más adecuado para sus requisitos.

TAJS tiene su código fuente en github ( https://github.com/cs-au-dk/TAJS ), por lo que si está interesado en utilizar algunas partes, debería ser posible (si la licencia lo permite).

Los autores también han lanzado un complemento para Eclipse que muestra el gráfico de llamadas o la jerarquía del código.

Espero que esto ayude un poco.

Answer 2

Es muy poco probable que exista tal herramienta de ingeniería inversa, simplemente porque no hay un concepto de clase bien definido en JavaScript. Diferentes marcos y diferentes personas utilizan diferentes patrones de código para implementar objetos de JavaScript que actúan como planos de clase para generar instancias.

Para las definiciones de clase de ES6, es sencillo generar automáticamente modelos de clase UML y, utilizando un algoritmo de diseño gráfico, diagramas correspondientes.

Answer 3

Existen varias bibliotecas para generar diagramas de clase UML (no servicios en línea, editores y aplicaciones web). Los principales problemas son el diseño gráfico de los componentes y el nivel de respuesta de los diagramas.

Si desea crear componentes de diagramas estáticos, hay muchas bibliotecas, pero si desea crear una herramienta similar al editor de gráficos en tiempo de ejecución, entonces su alternativa es limitada:

• mxgraph es algo si quieres construir tu propio editor de gráficos como draw.io Los gráficos son receptivos e interactivos, y el usuario puede mover o cambiar el tamaño del bloque, modificar el texto, agregar o eliminar relaciones.

• gojs es una biblioteca comercial y se proporciona mediante licencias gratuitas disponibles para fines académicos. Esta opción también es adecuada si desea crear un editor de diagramas. Hay muchos diagramas listos para usar, que son interactivos para mover los bloques, modificar el texto y las relaciones; y muchas otras características para otros diagramas diferentes.

• La biblioteca principal de JointJs es de código abierto bajo la Licencia Pública de Mozilla, lo que significa que debe incluir los derechos de autor, pero puede usarla con fines comerciales. Tiene dependencia de jQuery 3.1.1, Lodash 3.10.1, Backbone 1.3.3. ( Rapppid está utilizando esta biblioteca) Proporciona muchos elementos de diagrama listos para usar, que son receptivos e interactivos. El usuario puede mover bloques, agregar y eliminar relaciones y uniones, acercar y alejar.

• Draw2D es una biblioteca para crear Visio como dibujos, diagramas o flujos de trabajo. La versión comunitaria es de casi 5 euros para comprar. De hecho, proporciona bloques y diagramas similares a Visio, que son interactivos para redimensionar, mover bloques y modificar el texto y las relaciones, y agrupar bloques, acercándolos y alejándolos. Esta puede ser una buena opción para construir una herramienta de edición de gráficos.

• UmlCanvas de Christophe VG como js library que proporciona un diagrama UML a partir de información textual. Los diagramas responden de una manera que puede mover los bloques; Y las líneas de relación son inteligentes para mantener el diseño bonito. Pero no más que eso.

• PlantUML es una herramienta UML que puede proporcionar un diagrama UML a partir de información textual de las bibliotecas jQuery (las bibliotecas en otros idiomas también están disponibles), sin embargo, los diagramas no responden.

• Raphaël es una pequeña biblioteca de JavaScript que puede simplificar su trabajo con gráficos vectoriales en la web. Esta no es la mejor herramienta para crear un editor gráfico, pero proporciona diagramas brillantes y hermosos para la interacción simple del usuario (como movimiento y flexión)

Otras bibliotecas como D3 , FabricJS , paperJS , JsPlumb , p5.js , Cytoscape.js y mermaid también proporcionan componentes básicos para diagramas, pero no tienen un editor incorporado. Pero hay más componentes de gráficos y dibujos disponibles en esas bibliotecas. Es posible que no sean la mejor opción para crear diagramas totalmente interactivos y editables para los usuarios (incluido el editor de gráficos).

Answer 4

Mira esto

James Shore visor en línea . Es el diagrama de clase UML más cercano que he conocido para Javascript. Este link también podría ayudarte. De hecho, trae otro enfoque para representar un diagrama de clase UML.