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:
- What are the proper semantics of a microformat for representing a diagram?
- How can CSS apply styles robustly enough to display a document as a diagram?
I'll elaborate on this in the future.
posted by Tessa Norris @ 6:09 PM
2 Comments:
You might be interested in XBL, or XML Binding Languages. See http://groups.yahoo.com/group/xbl-developers/
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 http://www.graphviz.org/ 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.
Post a Comment
<< Home