bringing UML diagrams to the web

Towards Full Class Diagram Compliancy, Part 1

Class diagrams are the first type of diagrams we started implementing when we started out with UmlCanvas. We didn't call our project ClassDiagramCanvas because we knew that we were going to implement more diagram types over time. Class diagrams were just the most visible type and even more the one that we needed ourselves.

Today we still only have class diagrams, and the current support is still very much the same as about a year ago. It consists of the bare minimum: classes, interfaces, enumerations, associations, dependencies, etc. This functional scope was enough for what we needed to do up to now: document the Gang of Four's Design Patterns at TheModelFactory.

Today, we have released UmlCanvas 0.3 and have completed the full end-to-end technological stack we envisaged about a year ago. Now we can start implementing all remaining details around this central axis. One of the more important ones is full class diagram compliancy.

In this series of articles we will take a look at the support for class diagrams in UmlCanvas, until we reach a fully compliant implementation of the UML 2.2 class diagram specification.

The Light at the End of the Tunnel

The OMG UML 2.2 specification, weighing in at 740 pages, isn't for the faint of heart. We are lucky to have someone like Geert within our group, who has probably even found the two missing comma's in that text. Geert has assembled a diagram that should contain almost all aspects of UML we need to be able to render on a UmlCanvas. This diagram will become our reference, our light at the end of the tunnel. If we can render this diagram correctly in UmlCanvas, we have reached full class diagram compliancy. So without further adieu, behold ... the light:

We're not going to discuss colors, that's a matter of taste and when using UmlCanvas, you can change that yourself. Just read the tutorial on Customizing UmlCanvas Look and Feel.

This screenshot was made from a diagram created in Enterprise Architect, which is a very nice and affordable desktop CASE-tool. Even better, we have an add-in for it, that will allow you to export your diagrams to Hosted UmlCanvas. Do I have to explain that it's our preferred desktop CASE tool ? Well, it will be until UmlCanvas ... ;-)

But we're not really interested in the current state of Enterprise Architect, we're just using it as a reference for our own work.

State of the Canvas

On our roadmap documentation, you can find that one of the major goals for our next big release, UmlCanvas 0.4, is to reach a more complete support for class diagrams.

So let's see where we are today, shall we ?

Auwch, that looks bad. Or doesn't it ?

It is important to note that the screenshot above has been realized using our own EA add-in to convert the EA based diagram to ADL, our textual domain specific language. This means that this is the result of more than just UmlCanvas. We could manually start to tweak the ADL code and reach a much nicer looking diagram. We could even start using experimental and undocumented features to make it look very nice, but that's, just like colors, more the icing on the cake. In fact, that very screenshot already contains features that will be part of the next major release.

If I make just a few adjustments the result already looks a lot different:

What, still nagging about the colors ?

There, happy now ? Let's compare them and see if we can compile a list of issues we need to address.

The List

Let me once more stress that we're trying to reach a functional compliancy. We want to be able to render the features as described by the UML 2.2 specification. This clearly excludes routing algorithms for relations or color schemes and the likes. We know they are important, but it's just not the scope of this article. But there will be one very soon. I promise ;-)

• Stereotypes

Stereotypes are already available on classes, but we also need to add them on associations, dependencies, attributes and operations.

• Derived

Attributes and associations can be derived, which is shown using a forward slash (/) in front of them

• Parameterized Classes

UML allows to define parameterized classes or template classes. At a certain point we introduced the concept of generics, which is in fact a more coding-style way of representing the same idea. We will have to see how we merge both concepts into a solution that fits both our needs and the UML specification.

• Tags

Tags have their own compartment in a class. We probably have to see how we fit this in with the overall UmlCanvas vision.

• Association Classes

The classes itself are available, we only need to add a way to link them to associations, which is a feature we also need for the following item on the list...

• Notes

Notes should also be able to be linked to associations and dependencies. Currently only classes, interfaces and enumerations are supported.

• Constraints

Constraints come in two flavors: the ones that look like notes with curly braces - which I faked in the tweaked UmlCanvas diagram above - and those at the end of associations.

So, there we have it. The first list of issues we need to address to bring our UML support for class diagrams up to par with the UML 2.2 specification.

We know this list is even far from complete, but we believe that with this list, we can make a lot of people happy. Most of these features will make it in the next release, UmlCanvas 0.4. Some of them will be postponed to a later one. But in the end we want to be able to put a nice batch on our site stating: UmlCanvas is UML 2.2 compliant. And we won't settle for less.

You will see this reference diagram start appearing in our documentation more and more and you will see the issue in the list above appear in our issue list for UmlCanvas and more specific for the next release. So you will see our progress with your own eyes. It are interesting times indeed.

Now, if we just could get those colors right...