Diagram Map: tracing UML elements across diagrams

#showdev #uml #traceability #javascript

This article introduces Diagram Map (a term I coined) that makes it easier to trace UML model elements across diagrams. The Diagram Map displays different types of UML diagrams together and highlights links between model elements and diagrams. I think the Diagram Map helps you understand the contents of the UML diagrams.

Demo

You can try many Diagram Map examples on this GitHub project.

Features

Diagram Map displays different kinds of diagrams together and lays out the same kind of diagrams in the same row.
Diagram Map shows the following:
- Links between UML elements of the same type.
- References between elements and diagrams.
- Hyperlinks in the tooltip text.
You can zoom and pan using a mouse on a Diagram Map like Google Maps. You need to have JavaScript enabled in your browser.

How to create

You can create a Diagram Map by using my plug-in (m plus) in a modeling tool Astah. The plug-in is FREE to use for both Personal and Commercial purposes. Astah is free (Free Student License) or paid. The creation procedure is as follows:

Install the modeling tool Astah UML/Professional, download m plus plug-in, and add the plug-in to Astah. - How to add a plug-in to Astah.
Create models and diagrams with Astah.
Select diagrams in the model browser and press the "Create Diagram Map" button. If you select packages, all the diagrams under them will be processed. After you press the button, a Diagram Map will be created and be opened in a browser.

Other

The Diagram Map is for viewing only. If you want to edit a model or diagram, do so with Astah.
You have to use Astah to create a Diagram Map. Support for other modeling tools is a future consideration.
The m plus plug-in is a closed source now. Open-sourcing is a future consideration, too.