WebKit Freakshow: CanvasUML

Update: Having had a chance to test CanvasUML on some other Macs, I’ve determined that it’s a flaming pile of crap, and doesn’t actually work right now. I’ll repost a working version in the near future. Until then, don’t bother downloading it… just wait.

I’m somewhat frightened to announce my latest Cocoa app: CanvasUML 0.1.

The rest of my Cocoa apps (mostly developer tools) at Scandalous Software.

CanvasUML is a technology preview of a basic UML class-diagramming app implemented using an unholy mix of Apple’s WebKit, HTML, JavaScript, Cocoa, CSS, the <canvas> tag, contentEditable, and Safari JavaScript Drag n Drop that runs on Mac OS X Tiger.

Yup. That’s right. A UML diagramming app built mostly in DHTML and <canvas>. Ooooh… the FILTH of it!

CanvasUML is barely alpha-quality software and should not be used for mission critical work (as if there were such a thing as mission critical UML diagramming?). It should be thought of as an exploration of what is possible using the above technologies rather than a solid app. Moving forward, CanvasUML will most likely be refactored into a pure Cocoa/Objective-C application rather than continue with JavaScript/WebKit.

Warning there are bugs!

Implementation Details

The main window in a CanvasUML document consists of a WebView (basically like a Safari window) filled by a large, resizable <canvas> tag. The class/instance boxes are DHTML <div>s with nested contentEditable <div>s for the title, attribute, and operations sections. The association lines and the shadows behind the class boxes are, of course, drawn by the <canvas> tag. CanvasUML saves its doucuments as HTML files which link against a shared CSS stylesheet and JavaScript library stored in the CanvasUML app bundle (take a look if you’re curious).

If you’re still reading… I know what you’re thinking…

WHY?

Why create a Cocoa UML diagramming app using a WebView and the <canvas> tag?

Well… creating CanvasUML has been much more about experimenting with WebKit and Apple’s proprietary WebKit-related extensions to see what is possible, than it has been about building a sensible, maintainable, production-ready application.

Like the title of this post says… it’s a Freakshow, not an application.

I also liked the idea of possibly porting CanvasUML to the web entirely as a web-based UML diagramming application useable by <canvas>-enabled browsers. I may still pursue this later.

After doing the work, I am really eager to take what I’ve learned and re-implement the application using pure Cocoa/Objective-C. Building a full application such as CanvasUML largely in DHTML is really not a good idea… the code is messy and hard to maintain… the desired effects are often hard to achieve… there’s no support for undo/redo… and performance is poor.

All that said, I have to admit my surprise with how well CanvasUML has turned out (for what it is). It seems that the concept is totally possible (although not without its problems).