Listening To Reason

random musings about technologies by Andy Norris

18 June 2006

Diagram Semantics

Something I've been wondering about recently is the separation of semantics from presentation in proper web design, and how it applies to diagrams. The Scalable Vector Graphics (SVG) specification would seem to indicate that with drawings, all the presentation is part of the semantics, because it's a specification for presentation.

The problem with this for diagrams is that diagrams have a layer of underlying object meaning apart from the meaning of how they are laid out. For example, a UML Component Object Model specifies various classes and their relationships—this is the essence of the diagram at a semantic level, and the specific locations of the shapes and lines are merely a way of presenting that information.

Of course, an XML Schema could easily be designed to represent the underlying semantics for diagrams of a certain type, then XSLT could be used to produce an actual diagram by specifying some form of transformed data; for example, an SVG drawing. This would be a perfectly viable solution. The thing I don't like about this solution is that the resulting display object, the SVG drawing, would be decoupled from the underlying semantics—the semantics would exist on the initial side of a one way transform, not as part of the resulting drawing. Of course, if we think of the drawing as merely an implementation artifact, like transforming a document to PDF for distribution, this may not be too serious a problem.

One alternative that I wonder about is the possibility of using a microformat to specify semantics of a diagram, and using CSS to handle actually displaying the elements. HTML elements with appropriate classes and attributes could be used to represent the underlying objects, while a stylesheet could place the diagram objects as needed. An interesting advantage of this solution is that it preserves the object model directly withing the diagram—use an alternate stylesheet (or no stylesheet) and the semantics are right there on display.

The main questions, then, are:

  1. What are the proper semantics of a microformat for representing a diagram?
  2. How can CSS apply styles robustly enough to display a document as a diagram?

I'll elaborate on this in the future.

Tags: , , , , ,


At 5:23 PM, Anonymous stelt said...

You might be interested in XBL, or XML Binding Languages. See

At 2:41 PM, Blogger John Collins said...

SVG supports styling - as well other kinds of changes - to the elements in an SVG document - using CSS.

Also, as you say - a an XSLT stylesheet could be used.

You could actually create the SVG document as an XSLT stylesheet - which would accept some parameters affecting the document as XML input. There could be an a section containing CSS definitions embedded in the generated SVG document.

All kinds of different approaches to diagramming could be used with that pretty flexible mechanism.

The XSLT could be virtually hardcoded to produce a specific document, or be a highly-reusable diagram-generator for a particular type of diagram.

The XSLT could be specified as an external stylesheet in an XML file containing the parameters. Or the XML could be generated by some Javascript that then invokes the XSLT stylesheet itself.

The XML could have chunks of SVG in it, practically ready to go. Or, it could be high-level UML domain-specific input to the XSLT which would convert each element to the appropriate cluster of SVG elements, place it to an absolute X, Y coordinate - and figure out how to draw the lines to connect them according to whatever connections were specified.

A lot of people are getting the free GraphViz program from and defining their diagram using that. When they get it right, they can convert it to SVG with one command.

If you really want to invent Microformat(s) for expressing diagrams, that should not be difficult to do.

A Firefox 2.0 Microsummary could be assembled for each different diagram Microformat. The embedded XSLT-style stylesheet could transform the Microformat-supplied information into SVG, and the embedded SVG could be rendered.

I have tried including SVG diagrams in an XHTML document I created by hand, and it works. It displays in Firefox 1.5 fine.

I included MathML as well, as a matter of fact. That could be useful for including constraints from a model or requirements spec in the diagram.

At 11:14 PM, Anonymous Anonymous said...

I am so happy to get some hero gold and the hero online gold is given by my close friend who tells me that the hero online money is the basis to enter into the game. Therefore, I should buy hero gold with the spare money and I gain some hero money from other players.

At 1:13 AM, Anonymous Microsoft Office 2007 said...

Office 2010
Microsoft Office 2010
Microsoft word
Office 2007
Microsoft Office
Microsoft Office 2007
Office 2007 key
Office 2007 download
Office 2007 Professional
Outlook 2010
Microsoft outlook
Microsoft outlook 2010
Windows 7


Post a Comment

Links to this post:

Create a Link

<< Home