tools to generate UML diagrams for exisiting classes in javascript [closed]

Question

The project grows and there appears a necessity to visualize relations between the classes present in the project. Some of them are independent, some of them are inherited from others.

I am looking for tool(s) to visualize these relations. I am aware that similar question was already asked here JavaScript libraries for drawing UML class diagramms, but as far as I can concern, no answer that suits my needs was given.

I am aware of this List of Unified Modeling Language tools but they seem to give possibility to draw UML diagrams, while what I need is

1. a standalone tool
2. that generates UML diagrams from javascript code of my class definitions

In Ruby, this tool is called RailRoady. If such a tool exits in JavaScript as well, it would be significant help.

Prearrange

I'm not sure but if there is a tool that might be able to do it (especially if you use some popular OOP JavaScript flavor with classes e.g. TypeScript) it would be jetbrains.com/webstorm/features – Ala

possible duplicate of https://mcmap.net/q/500873/-javascript-code-to-class-diagram-closed/1048572 – Auerbach

Is this question off-topic because it is asking for software recommendations? – Gander

Answer 1

Have a look at

James Shore online viewer. It is the closest UML class diagram I have met for Javascript. This link might also help you. It does in fact, bring another approach for representing a UML class diagram.

Tourer

Nice links, especially the JavaScript version of Graphviz used by the James Shore's open source, but both links are inactive for at least 1 year – Ala

@Ala An inactivity period of 1 year may be a problem in some contexts. However, if the project is mature, it will keep drawing diagrams just fine--inactive for 1 year or not. Your best bet is to check the tools and see how well they work for you, rather than the project's last activity date as a “litmus test”. – Portfire

Answer 2

It is very unlikely that such a reverse engineering tool exists, simply because there is no well-defined class concept in JavaScript. Different frameworks and different people use different code patterns for implementing JavaScript objects that act as class-like blueprints for generating instances.

For ES6 class definitions, it is straightforward to automatically generate UML class models and, using some graph layout algorithm, corresponding diagrams.

Fortunna

Answer 3

Some static analysis tools could maybe help in what you're trying to achieve. I have been using mostly the jscomplexity project (jscomplexity.org) for quality control but I remember the TAJS project which is more advanced and I just looked at the presentation PDF at http://cs.au.dk/~amoeller/talks/TAJS2.pdf and if you look at slide 9 that output of the JavaScript's abstract state looks maybe more suitable for your requirements.

TAJS has its source code on github (https://github.com/cs-au-dk/TAJS) so if you're interested in using some parts of it that should be possible (if license allows).

The authors have also released a plugin for Eclipse that display the call graph or hierarchy of the code.

Hope this helps a bit.

Spenserian

It sounds very nice and seems that it is what I am looking for. Unfortunately, the links on the main page are broken and the plugin is not available. I have not succeeded in compiling it from the source. It seems that the project is dead. The same story, by the way, is with another similar Eclipse plugin JS/UML. – Prearrange

Answer 4

There are several libraries to generate UML class diagrams (not online services, editors and web applications). The main issues are the graphical component design and level of responsiveness of the diagrams.

If you want to create static diagram components there are plenty of libraries, but if you want to make a tool similar to run-time graph editor then your alternative are limited:

• mxgraph is something if you want to build your own graph editor like draw.io. Graphs are responsive and interactive, and user can move or resize the block, modify the text, add or remove relationships.

• gojs is a commercial library and it is provided by free licenses available for academic purposes. This is also suitable choice if you want to create a diagram editor. There are plenty of ready-made diagrams available, which are interactive to move the blocks, modify the text and the relationships; and many other features for different other diagrams.

• JointJs core library is open source under Mozilla Public License, which mean you must include copyright, but you can use it for commercial purposes. It has dependency to jQuery 3.1.1, Lodash 3.10.1, Backbone 1.3.3. (Rapppid is using this library) It provides many ready-to-use diagram elements, which are responsive and interactive. User can move blocks, add and remove relationships and joints, zoom in and out.

• Draw2D is library to create Visio like drawings, diagrams or workflows. The community version is almost 5 euro to buy. It indeed provides Visio like blocks and diagrams, which are interactive to resize, move blocks and modify the text and relationships, and grouping blocks, zooming in and out. This can be a good choice to build a graph editor tool.

• UmlCanvas by Christophe VG as js library which provides UML diagram from textual information. The diagrams are responsive in a way that you can move the blocks; and relationship lines are smart to keep the design pretty. But not more than that.

• PlantUML is a UML tool that can provide UML diagram from textual information by jQuery libraries (libraries in other languages are also available), however the diagrams are not responsive.

• Raphaël is a small JavaScript library that can simplify your work with vector graphics on the web. This is not the best tool to create graph editor, but it provides shiny and beautiful diagrams for simple user interaction (such as movement and bending)

Other libraries such as D3, FabricJS, paperJS, JsPlumb, p5.js, Cytoscape.js and mermaid are also providing basic components for diagrams, but they don't have built-in editor. But there are more different chart and drawing components available in those libraries. They may not be the best option to create fully interactive and editable diagrams for the users (including graph editor).

Potentate

A pretty good list -- but beware: some of those projects are abandoned. – Frustration