How can I reverse engineer my JavaScript files with js/uml?

Question

Goal

My goal is to get an UML model out of my JavaScript project (consisting of several .js files) and store it as XMI.

How far I've come

I searched the internet and found out js/uml is the first place to go.

I've managed it to get the js/uml plugin running with Eclipse 3.7.1 (Win32) and a local installation of my pre-downloaded additional plugins:

1. mdt-uml2tools-Update-incubation-I201103290512.zip (installs required org.eclipse.uml2.diagram.clazz 0.10.0)
2. jsuml-eclipse-0.8.4.zip (only works with Eclipse 3.7.1 (Indigo))

I loaded the provided example project jsuml-example-yui-0.8.4.zip into Eclipse and added all my .js files to this project also.

Problem

Now I'm stuck and do not get it how to call the reverse engineering of my .js files. I can call 'New'->'Other'->'UML 2.1 Diagrams'->'Class Diagram' from the project's context menu, but I don't get the following steps of that assistant dialog, nor do I get it if this is the right way at all. Please, could you help me with an easy understandable click tutorial? The js/uml homepage does not explain it well enough IMHO. Thanks for your help in advance.

Answer 1

Someone adapted UML for web artifact, its called the "WAE" extension of UML. This way you can see not only your javascript files but the html and css. If you work with node.js, i created a module that generate class diagram for javascript/node/html/css. Its called wavi. For javascript, function,variable are automatically recognized. You can use it for documenting your application.

https://www.npmjs.org/package/wavi

Answer 2

Well, I think I have come quite close.

There's a command-line tool called Code2Flow. which uses GaphViz to generate graphs for Python and JavaScript sources.

I tried it, it does generate the graphs but somehow i can't make to do right.

I hope this will help you or someone.