bringing UML diagrams to the web

Customizing UmlCanvas' Look & Feel

Those who know their history, know that the color-scheme we choose when we started out with UmlCanvas, resembles that of the ancient Rational Rose: Red and Yellow. It was just a little joke and we never gave it much thought. It just stuck.

Because we tend to make everything configurable, the color-scheme itself is also configurable and we kept the Red and Yellow as the default. But the important part is that you can change this.

Currently the configuration is HTML-page-based. This means: you can have a configuration for each page that contains UmlCanvases. You (for now) cannot change these properties on a diagram basis. This also means that I'll have to resort to screenshots to show you the result below ;-)

The Original, the Ugly, the Green and the Competition

Above is a diagram taken from Hosted UmlCanvas. If you have read Your First Hosted UmlCanvas, you know by now that all you need to do is add two lines to your HTML page:

  <script src="UmlCanvas.standalone.min.js"></script>
  <canvas id="NwQe3GT28E" class="UmlCanvas"></canvas>

(Yes, I know it could even be shorter. Nice, you have been paying attention.)

Now, let's add some Javascript to the page. Put the following snippet after the location where you included the UmlCanvas Javascript file:

  <script>
    UmlCanvas.Class.Defaults.backgroundColor = "rgba(200,255,255,1)";
    UmlCanvas.Class.Defaults.lineColor       = "blue";
    UmlCanvas.Class.Defaults.fontColor       = "red";
    
    UmlCanvas.Inheritance.Defaults.lineColor = "yellow";
    UmlCanvas.Association.Defaults.lineColor = "green";
  </script>

Auwch, that hurts even more than the Rational Rose scheme. I know, but it gets the idea across. Let me first sooth your eyes ...

The perfect scheme in these days of Green Computing ... UmlCanvas even enables Green Modeling.

Under the Hood

Okay, now we've all got our vision back, let's quickly take a closer look. What we're actually doing is overriding some of the Defaults of UmlCanvas. If you have downloaded or clone the UmlCanvas source tree, you find all of them in the Defaults.js file. For more details, you can read the UmlCanvas API guide.

Currently this what you can do on a global scale, for all diagrams on the same page, using the same UmlCanvas instance. In the near future, we are going to extend this system to individual diagrams and introduce skins that can be predefined and applied to individual diagrams. At that point, we will update this tutorial to show you how it's done.

In the meantime, I leave you with a color scheme that also might look familiar...

PS If you think you can come up with a nice default color scheme for UmlCanvas, do send it in.