umljs

The project is based on Fabric for creating objects on canvas and elkjs for generating layouts.

Quick start

Install dependencies

yarn install

Start developing

gulp

Build the project

Build distribution and minified distribution files ['build/uml.js', 'build/uml.min.js']

gulp build

Getting started

Preparation

Create an HTML element with an id attribute. Something like:

<canvas id="uml"></canvas>

Create an UML document

Next, use the UML() function to create an UML document within the wrapper element:

window.UML = new UML('uml');

The first argument should be an id of the element. The second optional argument is options for fabric.Canvas.

Draw diagram

Pass JSON object to UML.draw() (Promise function):

const json = JSON.stringify({
  "title": "Some diagram",
  "type": "usecase-diagram",
  "definitions": {
    "Actor01": {
      "title": "John Doe",
      "type": "actor"
    }
  }
});

window.UML.draw(json).then(
  () => console.log('Diagram was successfully created!'),
  (error) => alert(error)
);

Result:

If error: