Overview

1. The graphical format

We chose SVG to represent the graphic. SVG is an XML application to describe 2 dimensional vectorial gpaphics. SVG can be interpreted, for instance, by plugins that show the graphic instead of the XML code.

2. First approach

To summarize, what we need to do is to transform an XML document to another XML document (SVG). XSLT is a key technology to achieve this. Applying a XSLT stylesheet upon the XML source document produces the SVG document :

Unfortunetely, this is not enough. Let's explain why through the following example that shows, on the left hand side a TAGML document (the XML document for which we want a graphic), and on the right hand side the corresponding graphic.

Each tag <node> is represented on the graphic with a blue rectangle with rounded corners. Each node's cat attribute becomes the text centered on the blue rectangle. Other elements are present on the graphic, but node is enough to show the insufficiency of the only XSLT transformation. We clearly see on the graphic that the 2 rectangles have 2 different locations. These locations take into account the presence of the other graphical elements so that no one overlap any other one. Graphical elements' coordinates have been computed taking into account these constraints, what is impossible to do with a XSLT transformation.

The principle of a XSLT tranformation is always to do the same thing when dealing with a certain tag, in this case <node>. But for each <node> the location to compute is different, and so are the constraints (graphical elements around the 2 <node> are not the same).

Direct transformation is not possible.

3. Second approach

The first approach is not completly wrong, it is just insufficient. The only problem we cannot solve with the XSLT transformation is the computation of the coordinates of the graphical elements. The idea is to put the problem off the XSLT transformation. A high level program will be in charge of the computation of the coordinates.

The process of transformation now looks like this :

The XML intermediary document describes, in an abstract manner, the relative position of the graphical elements one against each other.

The Definitions Document contains some SVG snippets used for backgrounds. We will have a closer look at it later.