node package manager
Orgs are free. Discover, share, and reuse code in your team. Create a free org »


README Build Status

JUMLY is a JavaScript library.
Using JUMLY, you can easily embed UML diagram on your HTML document.
All you need are just two things you use everyday.

  • Text editor you get used to use.
  • A modern browser like WebKit-base brwoser and Opera.
    (working for Firefox now)

For more information, see
The auther's blog is

A trait

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

Getting Started

Copy following code, paste it at the place of your HTML document, and open the document.

<script src='//'></script>
<script src='//'></script>
<script src='//'></script>
<script type='text/jumly+sequence'>
@found "You", ->
  @message "meet", "JUMLY"

Here is a minimal sample.

How to build

Requiring node.js v0.10.20 or upper.

node.js installation

nvm is good to get it.

$ git clone git:// ~/.nvm
$ . ~/.nvm/
$ nvm install 0.10.20

Build jumly

In order to build jumly.js, jumly.css and minified ones, it's shortly steps.

$ git clone
$ cd jumly
$ . .env
$ npm install
$ make build

./public/jumly.min.js is generated.

How to develop

Written in CoffeeScript and stylus. They are in ./lib directory. ./lib/js/ 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.

How to launch the webapp

You can launch the webapp using express.

$ . .env
$ git submodule update --init
$ ./

Please access to localhost:3000 thru your browser.

How to run specs

With browser

$ make test

Compile spec files, and open ./spec/index.html with your browser.

With Karma

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.


  • 0.2.1, Jan 25, 2015
  • 0.2.0, Jan 4, 2015
    • Followed CommonJS for module system
    • Use Karam for test
  • 0.1.5-2, Mar 12, 2014
    • Removed z-index from .sequence-diagram .lifeline .line for #28
  • 0.1.5-1, June 23, 2013
    • REST API to generate image
  • 0.1.4, May 20, 2013
    • Replaced canvas with svg
  • 0.1.3b, Apr 27, 2013
    • API JUMLY.scan (beta)
  • 0.1.3a, Mar 29, 2013
    • Robustness diagram prototyping
    • Fixed pollution of jQuery namespace with some funcitons
  • Use GRUNT for bulid, Mar 10, 2013
  • 0.1.2b, Jan 9, 2013
    • @fragment directive
  • 0.1.2a, Dec 31, 2012
  • Try JUMLY, Dec 29, 2012
    • interactive demo for sequence diagram
  • 0.1.2, Dec 29, 2012
    • change CSS class name for .participant, which was .object
  • Reference Manual r1 published Dec 10, 2012
  • 0.1.1 Nov 29, 2012
    • support @note directive
    • adjust margins and spaces in stylesheet
  • 0.1.0 Nov 23, 2012 -- initial release
    • support sequence diagram

Special Thanks