In this blog post I describe how to generate a basic standalone HTML report from an XML file exported in The Open Group’s ArchiMate exchange format using an XSLT stylesheet.
In my last blog post I wrote about The Open Group’s ArchiMate exchange format and how its main purpose is to allow the exchange of ArchiMate models between conforming tools. I also mentioned that it could be possible to do more with an ArchiMate exchange file, and use XSLT (Extensible Stylesheet Language Transformations) to display the contents of the file in a human readable format. XSLT is a language for transforming XML documents into other documents or other formats such as HTML, plain text or PDF, and as an ArchiMate exchange file is in a fairly straightforward XML format this should be possible.
This idea was first brought to my attention (via Andrew Josey of The Open Group) by Thorbjørn Ellefsen, Security Architect for the Agency for Public Management and eGovernment (Difi) in Norway. Thorbjørn had suggested that this would be an avenue worth exploring and provided a simple XSLT file that demonstrated the process. This piqued my interest and so I took Thorbjørn’s XSLT file and played around with it to see if I could produce some interesting HTML that could be used as a proof-of-concept ArchiMate report. In this blog post I want to share the results of my experiments.
Generating the ArchiMate Exchange XML file
The first thing we need is an ArchiMate model saved in the correct format. In Archi I exported the “Archisurance” example model to The Open Group’s exchange format:
I named the output file as “Archisurance.xml”. You can download a copy of the file here.
Here are the first few lines of the file:
As you can see, it’s not exactly user-friendly, but we can use this file as the data input for something more useful. If you have exported the file yourself and viewed it, you may notice a slight difference between your copy and the one above. Note that the following line has been added near the start of the file:
<?xml-stylesheet type="text/xsl" href="elements.xsl"?>
This line is important. I manually inserted it in my copy of “Archisurance.xml” in order to denote that the contents of the XML file should be processed using the “elements.xsl” XSLT stylesheet. If you are using your own copy of the file, you also need to manually insert this line into the file using a text editor.
Adding the XSLT stylesheet
Next we need the XSLT stylesheet that will transform the data in the XML file into HTML. For this first example, we’ll display a table of all the elements (concepts) in the model. The file is called “elements.xsl” and you can download it here. Here’s what it looks like:
This stylesheet is basically an XML file with some HTML tags and XPath queries that will generate HTML using data from the “Archisurance.xml” file. There is a <style> section for some simple CSS, a <html> and <body> section for the HTML structure, and a <table> to display all of the ArchiMate elements. If we put the two files together we should see a result. But how do we do that?
Displaying the result
Normally, we would use a special processor or tool to combine the two files in order to generate an HTML file (the command line tool xsltproc on Linux/Mac, for example) but for this demonstration we can very easily display the result in a browser. However, be warned that this may only render correctly in Firefox or Internet Explorer. If the two files, “Archisurance.xml” and “elements.xsl” are in the same directory on your computer you can open the “Archisurance.xml” file in Firefox or Internet Explorer. It should look like this:
We can see the model name and description, the ArchiMate elements, their IDs, name, documentation (if any) and their type. The XSLT code generates a table of elements by looping through each <element> tag in the XML file and displaying the contents of the “identifier” attribute, the <label> tag, the <documentation> tag, and the “type” attribute. The table is sorted alphabetically on the “type” attribute because it is specified in this line:
<xsl:sort select="@xsi:type"/>
Note that XPath is used as the query language for selecting the elements in the XML file.
It’s a good start. Perhaps we could also display the relationships in the model? Yes we can, by applying the same principles as we did with the elements. To demonstrate this I’ve created another XSL stylesheet, a file named “elements_relations.xsl” and you can download it here. This file is the same as the first XSL file, but I’ve added some code to display the ArchiMate relationships:
The code iterates through each <relationship> tag in the XML file and, using an XPath query, finds the relevant tags and attributes needed to display the data. Notice that there are two XPath queries that reference elements elsewhere in the file in order to display the Source and Target element names of each relationship. The code uses XSLT variables, “Source” and “Target”, to make things a little easier to create the XPath queries.
In order to display the results of this new XSLT stylesheet, we need to replace the line in the “Archisurance.xml” file so it references this new file:
<?xml-stylesheet type="text/xsl" href="elements_relations.xsl"?>
Open up “Archisurance.xml” in Firefox or Internet Explorer again (or refresh).
Here’s a sample of some of the output that is generated:
As before, we can see the ArchiMate relationships, their IDs, name, source and target elements, and their type.
Displaying the structure
One of the features of The Open Group’s ArchiMate exchange format is to be able to (optionally) represent and exchange a given structure of the ArchiMate elements and relationships in the model. By this we mean an organization of elements, relationships, and views much like a table of contents in a book. Most ArchiMate tools allow you to organise ArchiMate elements and relationships in some kind of hierarchical structure. In Archi this is the tree in the “Models View”. This is something that can be usefully exported and imported into another tool.
So far we have displayed the elements and relationships as flat lists, but we can use this structural, or “organization”, information in the XML file to display a tree of links to the elements and relationships.
We need to use a new XSL file containing the new code, named “structure.xsl”, and you can download it here.
Once again, we have to replace the line in the “Archisurance.xml” file so it references the new file:
<?xml-stylesheet type="text/xsl" href="structure.xsl"?>
I won’t show the new code here this time, but you can take a look at it in a text editor. The XSLT code iterates recursively through each <item> tag in the XML file and then generates a hierarchical HTML list of elements, relationships and views with links to the corresponding entry in the tables of elements and relationships.
Open up “Archisurance.xml” in Firefox or Internet Explorer again (or refresh).
Here’s a sample of some of the output:
If you click on one of the links, it will jump to the corresponding element or relationship in the tables.
Further experiments – displaying the diagrams
Once I’d reached this point with my XSLT experiments I felt ready for a new challenge. I wanted to know if it would be possible to generate the actual ArchiMate diagrams (views) using XSLT. It turns out that it is possible, to a certain extent, by using SVG (Scalable Vector Graphics). What I achieved is only proof of concept, and I only got as far as displaying the elements as coloured boxes without connections, but it may be possible to take this further, or even come up with an alternative method perhaps by using a combination of Javascript and CSS.
To demonstrate this, we need another XSLT file, this time it’s named “views_experimental.xsl” and you can download it here.
Once again, we need to replace the line in the “Archisurance.xml” file so it references this new file:
<?xml-stylesheet type="text/xsl" href="views_experimental.xsl"?>
Open up the “Archisurance.xml” file in Firefox (sadly, the SVG does not display in Internet Explorer). If you scroll to the end you should see some basic diagrams. Here’s an example:
As I said, this is very much proof of concept, and it needs much more work. It may turn out to be too onerous to generate the full diagrams using SVG, particularly when it comes to creating connections (they need bend-points, anchor points and so on) and I’m sure there is a better way to do this. This does, at least, demonstrate the possibility of generating diagrams from the raw XML file.
Conclusion
I’ve tried to show that it’s possible to use The Open Group’s ArchiMate XML exchange file and display some of the data as HTML using XSLT stylesheets. I’ve also shown that it’s possible to generate some basic diagrams from the data. All of this needs much more work, and I’m aware that this work is at proof-of-concept level.
But for me the important thing is that this clearly demonstrates that by using existing technologies based on XML, XSLT, HTML, and CSS one doesn’t have to resort to a proprietary tool in order to display and share that data. Both the data and the representations of that data can exist in an open, standalone format.
Personally, I think this is very cool and it would be nice to see some XSLT stylesheets created to display ArchiMate models in more interesting ways. For example, one might display a summary and preview of a model. Or it may be possible to take advantage of a model’s Properties (attributes) and use them as variables that could be parsed conditionally for output formatting. I think that the potential inherent in The Open Group’s ArchiMate exchange format is very exciting and I’d love to see if anyone can take this further.
Many thanks to Thorbjørn Ellefsen for drawing my attention to the potential power of utilising XSLT with The Open Group’s ArchiMate exchange format.
(All files can be found in GitHub)
One thought on “Generating content from an ArchiMate Exchange Format file using XSLT”
Comments are closed.