This chapter provides a short overview on how the meta-information for diagram interchange is represented in a generated SVG file.
As defined in the UML Notation Guide, a class diagram is a graph of Classifier elements connected by their various static relationships (see UML 1.4 - Chapter 3 - Notation Guide Section 3.19.2). In our implementation, this includes classes, associations, and generalizations. Each of these elements are represented by a group in the generated SVG file. A group has no graphical representation but is used to embrace the graphical elements of a model element. For instance, a class group contains rectangles, text elements, and lines.
Following the notation guide, a class is drawn as a solid-outline rectangle with three compartments separated by horizontal lines (see Notation Guide 3.22.2).
<!--Class Position-->
<g style="font-size:9;font-family:dialog;" onmousemove="removePopup()" onclick="class_click(evt,'Class Posi-
tion')" transform="translate(184,458)">
<g style="fill:none;stroke:black;stroke-width:1">
<rect style="fill:white" width="88" height="61"/>
<line style="fill:none;stroke:black;stroke-width:1" x2="88" y2="20" y1="20"/>
<line style="fill:none;stroke:black;stroke-width:1" x2="88" y2="41" y1="41"/>
</g>
<!-- top name compartment -->
<text style="text-anchor:middle" dx="88" dy="9">Position</text>
<!-- attribute compartment -->
<g transform="translate(0,20)">
<text dx="2" dy="9">#<tspan x="12">posnum</tspan> : int</text>
</g>
<!-- operation compartment -->
<g transform="translate(0,41)">
<text class="standardfont" dx="2" dy="9">+
<tspan x="12">getPosnum</tspan>()
</text>
</g>
</g>
The top name compartment holds the class name and stereotype. Class name and stereotype are aligned in the middle of the name compartment. The stereotype value is extracted from the model and enclosed in guillemets «». Additional icons for special stereotypes and a list of properties for the class are not supported by our current XSLT scripts, extracting this information from an external icon file and the model is straightforward.
In our implementation only attribute and operation compartments are displayed, yet there is no restriction to extend the representation with compartments for exceptions or requirements. If the compartment attribute hidden is set, no elements of this compartment will be generated into the SVG document.
An attribute compartment is defined in Notation Guide Section 3.25.2 as represented as a list of attributes. We decided not to display a compartment name or group properties. This representation can be found in most UML tools. Not only the order but also the graphical positioning and visibility of the attributes are taken from the diagram interchange data. Attribute visibility symbol, name, type, and initial value are represented in the SVG document. Each attribute is encapsulated in separate SVG text elements.
Example: #posnum: int
SVG: <text dx="2" dy="9">#<tspan x="12">posnum</tspan> : int</text>
The SVG representation of the operation compartment is effected similar to the attribute compartment as a list of text elements. Each text element contains operation visibility, name, a list of parameters in braces, and the return type as defined in Notation Guide Section 3.26.2.
Example: getPosnum( )
SVG: <text dx="2" dy="9">+ <tspan x="12">getPosnum</tspan>() </text>
Apart from the class element we decided, for the proof of concept, to represent associations and generalizations to show how path elements are handled. As defined in the Notation Guide, paths consists of a series of line segments. Associations and generalizations are paths with an optional attached name and special symbols at the ends of the path.
For associations in our current implementation of XSLT scripts we allow the representation of navigability and aggregation indicators following the Notation Guide Section 3.43.2. Textual elements such as role name and multiplicity are encapsulated in a group for each association end. This group contains only text elements as given by the diagram interchange data.
We define and make use of SVG elements for the aggregation symbol, navigability (an arrow), and generalization (large hollow triangle). These elements can be reused at any association or generalization end, necessitating only that a rotation angle be calculated according to the direction of the last segment they are placed on. To do so, we needed an XSLT extension to calculate the square root, which is not possible in XPath expressions and XSLT functions.
In this chapter we described how class diagrams are represented in SVG as defined in the UML Notation Guide. We have employed the grouping mechanism to embrace graphical elements which belong to the same model element. This allows us to add features such as a tooltip on classes which are shown in an SVG browser.