One of the pilars of UmlCanvas is its flexibility. We want to build something you can use in any way you like. Below you find some of the current ways you can already start using UmlCanvas and also a sneak preview of things to come...
At its core, UmlCanvas is a Javascript library around the HTML5 Canvas element. This way it offers an object-oriented API to create diagrams.
var personClass = new UmlCanvas.Class( { name: "Person" } );
with( personClass ) {
addAttribute( { name: "name",
type: "String",
visibility: "private" } );
addAttribute( { name: "birthDate",
type: "Date",
visibility: "private" } );
addOperation( { name: "getAge" } );
addOperation( { name: "walk",
arguments: [ { name: "aDirection", type: "Direction" },
{ name: "aVelocity", type: "Velocity" } ] } );
}
UmlCanvas.activate("myCanvas").at(10, 10).put( personClass );
manager.startAll();
A Javascript API is all nice and dandy, but it surely is not the best way when you "just" want to make diagrams. We therefore picked up ADL, the Abstract Domain Language to create a DSL for defining UML diagrams.
diagram myModelDiagramClassExample {
[@60,40] class Person {
attribute name : String +private;
attribute birthDate : Date +private;
operation getAge : Integer +public;
operation walk : void +public {
argument direction : Direction;
argument speed : Velocity;
}
}
}
One of the first things we wanted was an easy way to integrate UmlCanvas in our own wikis. To achieve this, we create a very simple Mediawiki Extension, which allows a wiki-editor to insert UML DSL code in the wiki and have it turned into the correct HTML and Javascript code to render the corresponding UML diagram:
<umlcanvas width="350" height="200">
diagram myModelDiagramClassExample {
[@60,40] 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>
Currently we're working on a Google Gadget implementation of UmlCanvas. By adding just two lines of Javascript Code, it was already operational in iGoogle.
And with a little bit more loving it is also available as a Google Wave gadget:
|
For Everyone |
For Developers |
Social Modeling |
News & Updates
|
