UmlCanvas is very configurable and it will become even more. This was a design decision we made very early during the initial development phases and it's something we're quite happy with. Many times already it has proved to allow us to do things with UmlCanvas we didn't intend to. Skinning was one of them.
The idea to be make every visual aspect of UmlCanvas configurable was initially just to allow us to change the tongue-in-cheek Rational Rose copycatted look & feel once we were no longer laughing and wanted to implement a design of our own. You could say that it was more of a best-practice and not really a functional decision.
Not long after we implemented it this way, we saw that we could use this as a way to customize UmlCanvas on a HTML page basis and of course we saw the idea of skinning pop up. Cool, but we never really did something with it. We had other things to fix.
Until we started showing UmlCanvas to other people and believe it or not, but almost everybody has the same initial question: "Can we customize the look and feel?" "Yes, you can."
So we wrote a little tutorial on Customizing UmlCanvas Look and Feel and came up with al lot of great ideas to turn this into a real skinning solution.
How primitive our current skinning support might be, we still thought it would be a fun idea to already setup the required infrastructure. So, we've set up skins.umlcanvas.org. Nothing there to see yet because the site will redirect you to this page.
Over time we will extend it and make it the central location for all skinning information. For now, this page will have to do ;-)
If you have read some of the tutorials we have been putting online, you might know that including a UmlCanvas diagram in your pages requires really little effort. The smallest version of an entire HTML page with a single UmlCanvas on it looks pretty much like this:
<html lang="en">
<head>
<script src="UmlCanvas.standalone.min.js"></script>
</head>
<body>
<canvas id="NwQe3GT28E" class="UmlCanvas"></canvas>
</body>
</html>
Which will fetch a diagram from Hosted UmlCanvas and render it like this:
From the tutorial on Customizing UmlCanvas Look and Feel you already know you can change the colors, fonts, etc. Let's say we want UmlCanvas to look like a more modern CASE tool, say Enterprise Architect. With a little tweaking the following Javascript and CSS code would do the trick:
<script>
UmlCanvas.Class.Defaults.lineColor = "black";
UmlCanvas.Class.Defaults.backgroundColor = "#fcf2e3";
UmlCanvas.Class.Defaults.fontColor = "black";
UmlCanvas.Inheritance.Defaults.lineColor = "black";
UmlCanvas.Association.Defaults.lineColor = "black";
UmlCanvas.Note.Defaults.backgroundColor = "#f7f3f7";
</script>
<style>
CANVAS {
background-color: #aab9dc;
}
</style>
And with roughly 7 lines we turn UmlCanvas ... in an EA lookalike:
So, what's the fun if you can only do this on your own pages and not share it with other ? You can separate it into a Javascript and a CSS file, put it on a web server and include it. And that's exactly what skins.umlcanvas.org does.
In stead of including the Javascript and CSS code directly in your HTML page you can now do this:
<html lang="en"> <head> <script src="UmlCanvas.standalone.min.js"></script> <-- just add the following two lines to activate the EA skin --> <script src="http://skins.umlcanvas.org/ea/skin.js"><script> <link rel="stylesheet" type="text/css" href="http://skins.umlcanvas.org/ea/skin.css"/> </head> <body> <canvas id="NwQe3GT28E" class="UmlCanvas"></canvas> </body> </html>
From now on, your diagrams on your HTML pages will always look like EA diagrams and if we update the skin, you will get the updates without changing your work.
This is only the beginning and it is in fact very basic. But we currently have plans on the drawing board to turn this into a diagram-level skinning solution, with loads more configurable items.
Keep an eye out on the coming releases.
As this is more a proof-of-concept setup, we currently have only two skins:
In the meantime, if you have created a nice skin, send it in and we'll add it to the skin collection:
|
For Everyone |
For Developers |
Social Modeling |
News & Updates
|
