# README [](https://travis-ci.org/tmtk75/jumly)
JUMLY is a JavaScript library.
Using JUMLY, you can easily embed UML diagram on your HTML document.
All you need is 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 .
## Trait and Purpose
Trait I'd like to tell you is that JUMLY doesn't render diagram as image like PNG or SVG,
but render as **combination of DOM with CSS on browser**.
You can easily calibrate any CSS parameters like font-size,
color, padding, margin, etc using CSS at runtime.
Actually you can also usual image data in PNG and JPEG.
They are generated by a [CLI](https://github.com/tmtk75/jumly/wiki/CLI)
or [REST API](https://github.com/tmtk75/jumly/wiki/REST-API),
so JUMLY is convenient way to embed small diagrams in your HTML documents like README file like below.
I aim to develop JUMLY to render small UML diagrams in handy without any heavy UML modeling tools.
A UML diagram is usually more understandable than a tedious text.
It's better that people can casually use UML digrams in every documents.
# Getting Started
Copy following code, save as a file, and open the file with your browser.
```html
```
[Here](http://jumly.tmtk.net/public/examples/simple.html) is a minimal sample.
# How to build
Requiring [node.js](http://nodejs.org/) v0.10.20 or upper.
## node.js installation
[nvm](https://github.com/creationix/nvm) is good to get it.
$ git clone git://github.com/creationix/nvm.git ~/.nvm
$ . ~/.nvm/nvm.sh
$ nvm install 0.10
## Build jumly
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.
# How to develop
Written in CoffeeScript and stylus. They are in `./lib` directory.
`./lib/js/jumly.coffee` organizes other \*.coffee files in order.
On a webapp, which is described at [next](#how-to-launch-the-webapp),
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](http://expressjs.com/).
$ . .env
$ git submodule update --init
$ ./app.coffee
Please access to [localhost:3000](http://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](http://pivotal.github.com/jasmine/) is used for writing specs.
# License
JUMLY v0.2.2 is under [MIT License](http://opensource.org/licenses/MIT).
JUMLY v0.2.2, 2010-2015 copyright(c), all rights reserved Tomotaka Sakuma.
# History
- 0.2.4, Jul 21, 2015
- Workaround for [#40](https://github.com/tmtk75/jumly/issues/40)
- 0.2.3, Apr 1, 2015
- Fixed [#38](https://github.com/tmtk75/jumly/issues/38)
- 0.2.2, Feb 7, 2015
- Fixed an issue for image width
- 0.2.1, Jan 25, 2015
- Fixed several issues.
[#8](https://github.com/tmtk75/jumly/issues/8)
[#18](https://github.com/tmtk75/jumly/issues/18)
[#19](https://github.com/tmtk75/jumly/issues/19)
[#23](https://github.com/tmtk75/jumly/issues/23)
[#24](https://github.com/tmtk75/jumly/issues/24)
[#31](https://github.com/tmtk75/jumly/issues/31)
[#35](https://github.com/tmtk75/jumly/issues/35)
- 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](https://github.com/tmtk75/jumly/issues/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
- Fixed https://github.com/tmtk75/jumly/issues/4
- 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
- jQuery
- CoffeeScript
- node.js
- express
- GitHub
- heroku
- jade
- Stylus
- Markdown
- GRUNT
- webpack
- Karma