uml-diagram

About

uml-diagram is a Custom Elements implementation of main UML diagrams in Javascript.

• Provides html tags such as <uml-class-diagram> and <uml-class>
• Provides a UML diagram editor

Usage

Open https://rawgit.com/smigniot/uml-diagram/master/Uml_0.0.46.html , start some UML diagrams using the palette on the right and click on save.

Custom elements

Use the custom elements directly by linking. This first block goes into the head :

<script type="text/javascript" src="https://rawgit.com/smigniot/uml-diagram/master/src/webcomponents-lite-0.7.12.min.js">
</script>
<script type="text/javascript" src="https://rawgit.com/smigniot/uml-diagram/master/src/uml-diagram-0.0.46.js">
</script>
<link rel="stylesheet" type="text/css" href="https://rawgit.com/smigniot/uml-diagram/master/src/uml-diagram-0.0.46.css">
</link>

Now the tags are available in the document body

<uml-class-diagram>
 <uml-class>
  <uml-name>Person</uml-name>
  <uml-attribute>name:String</uml-attribute>
  <uml-attribute>email:String</uml-attribute>
  <uml-attribute>phone:String</uml-attribute>
 </uml-class>
</uml-class-diagram>

Beta version

• Just imported from http://sling.migniot.com/Uml/Uml_0.0.46.html
• For a demo refer to https://sling.migniot.com/Magasin/Le probleme du magasin_Chap6.html (FR)