VisUML Documentation

VisUML is a plugin that allow developers to have a model view of their current project, synchronized with their IDE.
Each opened Java class is represented on a synchronized class diagram displayed as a web page (that can be opened on a PC/Mac, smartphone or tablet). This diagram offers interactions to developers to easily navigate in their code.
In addition to this class diagram, a sequence diagram is also generated according to the latest selected method. As well as for the class diagram, some interactions will ease the use of this view.
This plugin is currently in a early stage of its development.

This plugin send data through a bus hosted by our research team. Those data are saved anonymously and will only be used to evaluate these tools.

Android Studio/IntelliJ Plugin

VisUML plugin is a kind of middleware for our applications. It sends code information and receives actions messages.
First, it analyses the opened project and all its Java files, making a JSON representation of each class, interface, enumeration, ...
Then, with a filter system, it selects only the files opened in the editor.
Finally, it sends on WSE (a messages bus we made) every JSON representations of those files.

This plugin works in Android Studio and IntelliJ.

Tested version:


The plugin currently work only for ONE window of IntelliJ/Android Studio. If you want to open another project, you MUST close the IDE, re-open it, open the project and then start VisUML.

Getting started

The latest version can always be download here: DOWNLOAD

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.

VisUML Plugin Information panel VisUML Plugin Information panel
VisUML Plugin menu toolbar


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.

VisUML Plugin popup 1 VisUML Plugin popup 2

None of the later presented applications can operate without this plugin.

Change notes

IntelliJ / Android Studio download link: IntelliJ Plugin

Eclipse Plugin

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 :

(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

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).
Class Diagram Prompt 1
Class Diagram Prompt 2
Class Diagram 1

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)


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
Class Diagram 5

Unopened related elements

In order to help users understand the project and ease the navigation, in addition to the actually opened Java file, VisUML displays related elements (only basic information: its name and relations) in transparency.
A click on a related element will send a message to Android Studio, which will try to open this file.
Figures 7 and 8 show how a unopened element ("Animal") appears before and after clicking on it.

Class Diagram 3
Class Diagram 3


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.

VisUML - Sequence Diagram

VisUML - Sequence Diagram is working the same way as the class diagram.
Once connected to the IDE, it displays the sequence diagram of the currently browsed method.
Sequence Diagram


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

Sequence Diagram
Sequence Diagram

Utility functions

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

Sequence Diagram