UmlCanvas
From TheSoftwareFactory
| UmlCanvas |
| An extension to Canvas2D, introducing UML elements, allowing the rendering of UML diagrams on webpages without any graphics support. |
| Author |
|---|
| xtof |
| Quick Links |
 http://umlcanvas.org |
| Availability |
|
 | This is the old project page of UmlCanvas, we're moving to the main UmlCanvas site at http://umlcanvas.org. |
UmlCanvas is an extension to Canvas2D, our shape-based drawing implementation on top of the HTML5 canvas element. UmlCanvas adds new shapes and provides re-implementations for existing concepts. This way, UmlCanvas provides web-authors with a versatile tool to include visual UML diagrams in their webpages, blogs, wikis,... without launching a CASE tool, exporting an image and upload it to their server.
Contents |
History
One thing always leads to another. It all started with TheModelFactory, a project for which we required the ability to generate UML diagrams on webpages. Our first guess was ... "on the internet there is always someone else who has done things before us", so where do you go ... Google of course. But after a few days of surfing the web, we had to conclude that ... no one had done this before us. It seemed, we had to come up with something ourselves.
Initially we were thinking about rendering the diagrams at the server side and send images to the browser. But that would rule out some of the features we envisaged. One of the things we wanted was no dependencies on other/external tools and this includes a way to design the diagram. Offering a textual interface to UML is fine for certain diagrams, but for many diagrams one really needs a visual tool that allows dynamic interactions like dragging classes around.
We continued our quest looking for drawing solutions based on Javascript. We found a few, but none could really convince us. Enter the HTML5 canvas element. Although it already existed for some time, the HTML5 canvas element seemed to have been living in the shadows. But when we got introduced, it was love at first sight. Initially we focused on drawing classes and associations, but soon enough, our experience told us to start extracting functionalities and put them in a separate project, focusing on just drawing. Canvas2D was born and a great foundation for UmlCanvas was in place.
Quickstart Guide
$ git clone http://git.thesoftwarefactory.be/pub/UmlCanvas.git $ cd UmlCanvas $ make
Ways to use UmlCanvas
Basically, you can use UmlCanvas in the same way as you can with Canvas2D.
UmlCanvas API
var manager = new UmlCanvas.Manager();
var model = manager.setupModel("myModel");
var diagram = model.addDiagram();
var personClass =
new UmlCanvas.Class( { name: "Person" } );
var nameAttribute =
new UmlCanvas.Attribute( { name: "name",
type: "String",
visibility: "private" } );
var birthDateAttribute =
new UmlCanvas.Attribute( { name: "birthDate",
type: "Date",
visibility: "private" } );
personClass.addAttribute( nameAttribute );
personClass.addAttribute( birthDateAttribute );
var getAgeOperation = new UmlCanvas.Operation( { name: "getAge" } );
var walkOperation = new UmlCanvas.Operation( { name: "walk" } );
walkOperation.addParameter( { name: "aDirection", type: "Direction" } );
walkOperation.addParameter( { name: "aVelocity", type: "Velocity" } );
personClass.addOperation( getAgeOperation );
personClass.addOperation( walkOperation );
diagram.at(20,20).put( personClass );
manager.startAll();
|
UmlCanvas DSL
diagram myModelDiagramClassExample {
[@20,20] class Person {
attribute name : String +private;
attribute birthDate : Date +private;
operation getAge : Integer +public;
operation walk : void +public {
argument direction : Direction;
argument speed : Velocity;
}
}
}
|
Mediawiki
UmlCanvas also provides an extension for Mediawiki, which allows easy inline editing of UML diagrams on Mediawiki.
<umlcanvas width="240" height="140">
diagram myModelDiagramClassExample {
[@20,20] class Person {
attribute name : String +private;
attribute birthDate : Date +private;
operation getAge : Integer +public;
operation walk : void +public {
argument direction : Direction;
argument speed : Velocity;
}
}
}
</umlcanvas>
Features
The features that go into UmlCanvas are currently focused on providing TheModelFactory with the possibility to render class diagrams:
Current
- Class diagrams
- Class with stereotypes and Interface
- Attributes with visibility
- Operations with visibility, parameters
- Inheritance and Realization
- Dependency
- UML-DSL support
- Mediawiki extension
Upcoming
- rolename and multiplicity
- multiple association endpoints
- recursive association
- diagram notes
- multiple diagrams
- toolbox
Got an idea on how to extend or improve UmlCanvas ? Feel free to send in a patch, or drop us a note at contact (at) thesoftwarefactory (dot) be.
Projects using UmlCanvas
- TheModelFactory - the project that initiated all this.
Are you also using UmlCanvas on your website? Drop us a note at contact (at) thesoftwarefactory (dot) be and we'll add a link to it.
License & Credits
UmlCanvas is licensed under the BSD License. Which basically allows you to use it in whatever way you like, just keep a reference to this origin. Like many open source work, this project stands on the shoulders of giants. The following projects are imported to create the UmlCanvas experience:
- Canvas2D - our own wrapper library around the HTML5 Canvas element.
- Fugue Icons - the icon set by Yusuke Kamiyamane used in the UmlCanvas inspector
