Polymeria UML is a set of Polymer Web components inspired by the Eclipse UML2 model file.
Here is the source of an HTML document of a basic class diagram:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://bdulac.github.io/polymeria/components/webcomponentsjs/webc
omponents.js">
</script>
<link rel="import" href="http://bdulac.github.io/polymeria/components/polymeri
a-uml/uml-polymeria.html">
</head>
<body unresolved>
<uml-model name="My model">
<uml-packagedElement type="uml:Class" name="MyClass" id="my-class">
<uml-ownedAttribute
name="myAttribute"
visibility="private"
type="my-other-class">
</uml-ownedAttribute>
<uml-ownedOperation
name="myOperation"
visibility="protected"
type="my-other-class">
</uml-ownedOperation>
</uml-packagedElement>
<uml-packagedElement type="uml:Class" name="MyOtherClass" id="my-other-class">
<uml-ownedOperation
name="myOperationWithParameters"
visibility="public"
type="my-class">
<uml-ownedParameter name="myFirstParam" type="my-class">
</uml-ownedParameter>
<uml-ownedParameter name="mySecondParam" type="my-class">
</uml-ownedParameter>
</uml-ownedOperation>
</uml-packagedElement>
<uml-packagedElement type="uml:Class" name="MyAssociatedClass" id="my-associated-class">
</uml-packagedElement>
<uml-packagedElement
type="uml:Dependency"
client="my-associated-class"
supplier="my-other-class">
</uml-packagedElement>
<uml-packagedElement type="uml:Package" name="My package">
<uml-packagedElement type="uml:Package" name="My nested package">
</uml-packagedElement>
<uml-packagedElement type="uml:Class" name="MyPackageClass">
<uml-packagedElement type="uml:Class" name="MyNestedClass">
</uml-packagedElement>
</uml-packagedElement>
</uml-packagedElement>
</uml-model>
</body>
</html>
To get the result, you should have a look here (sorry, but rendering web components in the README file is quite challenging).
The project is a work in progress but should evolve soon to provide a respectful support of the class diagram.
A variation of this sample shows the modifications between the initial Eclipse UML2 model and the web components.
The project started following my discovery of the Polymer project. A post on my blog details my early problems.
Because of custom elements compatibility constraints (dash needed), the model file cannot respect strictly the Eclipse UML element names. Another limitation is the use of namespaces in regular HTML documents. As a consequence, the uml namespace sequence using a colon is replaced with a prefix followed by a dash. As shown in the preceding example, this has a direct consequence on elements and attributes names.
If you want to play with the components, the installation with Bower is rather simple.
The first step is to install npm, a JavaScript package manager. Here is the download page for common environments. A debian package is available, with Ubuntu:
sudo apt-get install npm
Then the install of Bower with npm is done the following way:
npm install -g bower
When the bower command is available, here is the way to get Polymeria from the GitHub repository:
bower install polymeria-uml
A directly usable Zip file including Polymeria UML and its Bower dependencies is available here.
The Polymeria components documentation is available here.