declan bright

ArchiMate Graph Explorer

TL;DR -> ArchiMate Graph Explorer

ArchiMate models are actually graph data structures, the elements and relationships are sets of nodes and links/edges joined together. Visualisations of graph data structures can be fun to create and D3.js is a great JavaScript library for this type of data visualisation. The objective of this project was to create a simple web application that could render a force simulation graph visualisation of any ArchiMate model.

The Archi tool has a built-in "Visualier" feature which can display a graph visualisation. It renders a graph from the perspective of the selected element based on a breadth first search of the related elements, with options for depth and filters by element type, relationship type etc. This is useful in the context of a single element but there are other ways you might want to search and browse a model.

This app reads in a model from an ArchiMate Model Exchange Format file. Most major ArchiMate tools support the exchange format so this app should work with models from any of those tools, however I have have only tested with files created by Archi.

ArchiMate Graph Explorer
Fig 1. ArchiMate Graph Explorer

The web application is simple, no fancy build systems, no transpilers, no endless list of dependencies, just some vanilla JavaScript (using ES6 modules) and a couple of libraries; D3.js for generating the graph visualisation, tail.select.js for some nice multi-select downdown lists and some CSS. The model data is loaded into a D3.js force simulation and rendered to an SVG element. Conditional styling is applied to the elements and relationships so they have the familiar ArchiMate colours, icons, arrowheads etc.

The UI is designed with the mobile first approach so that it works on screens of all sizes, supporting touch, pinch zoom, pan to move around and the elements can be dragged around to rearrange them.

Using the Graph Explorer

So, what is the application useful for you might ask? First of all, it allows you to see a broader view of a model, to see all of it at once if you want to. While this can be interesting, it starts to become more useful as you filter by the various element and relationship types to examine how the model is linked together.

As you explore, you will probably find gaps and mistakes in your model such as missing relationships i.e. elements or clusters of elements that don't link to anything else or Application Services which don't have any Serving relationships to other Application Services or Business Services/Processes/Functions, or where a Trigger relationship was used by mistake, instead of a Serving relationship.

You can use this with your own Archi model, just export your model to an exchange format file, configure the path to the file in settings.js and run the app in a web server. It's a nice simple interface that can be shared with colleagues, just like the web report from Archi, allowing others to explore your model via a web browser without needing to install any additional tools.

The ArchiSurance Case Study model has been included here as an example:

Additional Features

Custom properties can be added to the elements of an Archimate model and these can be used in interesting ways. The graph explorer has some optional features that can be enabled to utilise custom element properties.

Lifecycle Status Filter

A Lifecycle Status property is a useful way to identify Current state, Future state and Deprecated elements in a model. The status values only have to be set for non-Current elements, everything else is assumed to be Current state. The Status dropdown list filter can be enabled/disabled by a flag in the settings.js file.

Stereotype Label

Adding a Stereotype property to elements is a really useful way to improve the understandability of you model. This is covered in more detail in the Archi Tips and Tricks page. A label which displays the stereotype property (inside guillemet characters) beside each element can be enabled/disabled by a flag in the settings.js file.

Data Classification Styling

It's imperative to have a solid understanding of data classification to effectively manage data privacy. A DataClassificationLevel property can be used to label data objects with the appropriate classification. A common approach is to use TLP; Red, Amber & Green. This feature will use the DataClassificationLevel property to set the colour of the nodes based on a configurable colour map, which can really highlight how sensitive data is managed across the architecture. This feature can be configured in the settings.js file.

Source Code

coming soon...

View Comments