VisUML Documentation

Follow the jetbrains help instructions "Installing Plugin from Disk" to install this plugin on your IDE.
Once VisUML is correctly installed, you should see a new item in the menu toolbar (Figure 1).

A simple click (or keyboard shortcut ctrl + alt + d) will create the plugin panel shown in figure 2.
In this panel, several actions are available, depending if you are connected to our bus or not.

Figure 2: VisUML connection & information panels

Currently implemented actions are:

• Connection: Create and connect a socket to the WSE bus. Once connected, this button is disabled and the others activate
• VisUML Class Diagram: Open a new webpage on your browser, this webpage is our first application: VisUML Class Diagram presented later
• VisUML Sequence Diagram: Same as previous but open our second application: VisUML Sequence Diagram

Once cliked on the Connection button, the plugin will connect to our bus (WSE) and start sending and receiving messages.
It will also start a full analysis of the current opened project and store (in cache) code information.
Two popups (figure 3) will inform you of the current state of the analysis. Once the project scan is over, the plugin will send information about opened Java file on the bus.

A similar plugin exists for the Eclipse IDE. You can install it by downloading the zip and extract it in the droppins folder of your Eclipse installation

Eclipse Update Site : http://these.mickaelduruisseau.fr/VisUML/eclipse

(Not recommended) Eclipse Plugin download link: Eclipse Plugin
This zip contains a .jar file that must be copied in the dropins folder of your Eclipse installation.

VisUML - Class diagram is a web page that displays every sent JSON representation as an UML Class Diagram element.
This page must be connected to the bus in order to receive and send messages.

This diagram is always synchronized with the IDE

There are two ways to connect:

• Using the Android Studio Plugin "VisUML Class Diagram" button, which automatically connects to the bus and the correct session
• Using the two prompt window when opening the page without the Android Studio button. Figure 5 shows those two prompts, URL and Session can be found in the right side of the Android Studio "WSE Informations" Panel (see Figure 2).

Figure 5(a): Connection Prompt

Figure 5(b): Session Prompt

Visual information

In addition to the UML information this diagram displays, some visual hints help the user to navigate in this model and with its IDE.

• Currently focused element (tab) on the IDE will have its border highlighting in red
• Packages content can be toggle (visible or not)
• Attributes and Methods container can also be displayed or not
• Unopened elements (with relations from or to an opened element) are displayed with a reduced opacity (ease the navigation)

Interactions

Implemented interactions on this class diagram are:

• click or touch:
  • on a class: send a message to Android Studio, which opens a new tab or switches to the element tab
  • on an attribute: send a message, Android Studio then scrolls and selects the attribute
  • on a method: send a message, same as previous, but on a method. This also updates the sequence diagram (see VisUML Sequence Diagram)
  • on the "x": send a message, Android Studio closes the element tab
• click or touch on the arrow on the top right corner of the attributes or methods block will toggle its visiblity

VisUML Class Diagram send and receives messages on a WSE bus. All the information displayed on this webpage come from the Android Studio / IntelliJ plugin.

These messages will be stored in a database hosted on our server and be used to evaluate this tool.

Implemented interactions on the sequence diagram are:

• click or touch:
  • on a lifeline: send a message to the IDE, which switch to the element tab or on the variable definition
  • on a message (link): send a message, the IDE then scrolls and selects the corresponding line (invocation)
  • on the "+" next to a method name (link): display the sequence of this method in the current sequence diagram
  • on a fragment (group): send a message, scrolls the IDE and selects the entire group
• double click:
  • on a message (link): display the sequence diagram of this method (if available)
• alt + click:
  • on a message (link): display the sequence diagram of this method (if available)

This diagram also receives messages from the IDE and the class diagram:

• a click on a method in the class diagram will update the display of the sequence diagram in order to show the clicked method
• a caret move in the IDE will do the same

These two events add easy navigation to the sequence diagram, whether from the IDE or from the class diagram

In addition to the interaction functionality, we added a simple menu that allows to:

• Center the diagram in the canvas
• Scroll to the top of the diagram
• Change the zoom level
• Reset the zoom (= set the zoom level to 1)
• Scale the diagram to fit the canvas
• Export the diagram in two formats (PNG & SVG)

The diagram is first displays scaled to fit, as this view allows users to view the sequence diagram in its entirety and then have a better understanding of the control flow