Uml / Sequence / Package / ... Diagram Alternative For Javascript And Electron Application?

My question is if there are any kind of diagram I could draw in order to visualise and Electron / JavaScript application? I would need alternative for the different uml diagrams, l

Solution 1:

First of all, you're not obliged to document everything in UML diagrams at all. Because working software is more important than comprehensive documentation. However, UML can be extremely useful to highlight some less trivial aspects of your software that can not be easily found in the code. And lmy advice would be to focus on these aspects.

Now what you should do in UML all depends on what you intend to represent in your model, and how you're using js.

UML distinguishes structure diagrams to show the static view on your software and behavioural diagrams to show its dynamics.

Structural diagrams

This could be less attractive to you, since JS is prototype-based and offers a great flexibility regarding the typing logic in contrary to the rather static class based view of UML.

Nevertheless, you could still benefit from the concept of classes and use class diagrams in order to show either your design intent (i.e. your mental view on the object categorisation) or the prototype used to instantiate objects (especially if you design some objects to act essentially as prototype, making them de facto as representatives for classes). Of course, if your JS design is not at all object oriented, it would make no sense to map your program to OO concepts (see here).

Note that the legacy object diagram could make more sense for you, since it allows to explain the relations between objects rather than classes (see also here)

In both cases, you may be especially interest in usage dependencies that help to link the static elements (i.e. objects or classes) to the behavioural intent.

Finally package diagrams could be used for example to show the big picture of your .js files and their dependencies. It's not in the sense of the traditional java packages, but could also be useful.

Behavioural diagrams

Here, I would pretend that all these diagrams could make sense for you.

The very first that comes to my mind is the sequence diagram. Because it helps to visualise expected interactions between several objects, and these are difficult to find out just by browsing through the code.

In some cases, the state machine diagram could help as well. This makes particular sense if the behaviour depends on some state variable, or if you want to show the full lifecycle of an object.

Finally, you can consider the activity diagram. These are especially useful if you want to show the flow of control or of objects across your system. If you're not familiar with them, and to simplify to the extreme, it's a kind of super-flowchart, but where the arrows not jus represent "next operation" but could also represent objects that are passed between operations.