Using JUMLY, you can easily embed UML diagram on your HTML document.
All you need are just two things you use everyday.
JUMLY doesn't render diagram as image like PNG or SVG, but render as combination of DOM with CSS on browser. You can calibrate any CSS parameters like font-size, padding, margin, etc using CSS at runtime.
Actually you can also usual image data like PNG and JPEG. They can be generated by a CLI or REST API.
JUMLY is convenient to render
Copy following code, paste it at the place of your HTML document, and open the document.
Here is a minimal sample.
Requiring node.js v0.10.20 or upper.
nvm is good to get it.
$ git clone git://github.com/creationix/nvm.git ~/.nvm $ . ~/.nvm/nvm.sh $ nvm install 0.10.20
In order to build jumly.js, jumly.css and minified ones, it's shortly steps.
$ git clone https://github.com/tmtk75/jumly.git $ cd jumly $ . .env $ npm install $ make build
./public/jumly.min.js is generated.
Written in CoffeeScript and stylus. They are in
./lib/js/jumly.coffee organizes other *.coffee files in order.
On a webapp, which is described at next, you can use them without build. Editing *.coffee and *.styl, reload a page of webapp, and your change will make effect.
You can launch the webapp using express.
$ . .env $ git submodule update --init $ ./app.coffee
Please access to localhost:3000 thru your browser.
$ make test
Compile spec files, and open
./spec/index.html with your browser.
To compile them,
$ . .env $ build karam $ open spec/index.html
jasmine is used for writing specs.
JUMLY v0.2.1 is under MIT License.
JUMLY v0.2.1, 2010-2015 copyright(c), all rights reserved Tomotaka Sakuma.
.sequence-diagram .lifeline .linefor #28